/* Nathan Portfolio 1.4 — mobile-first art direction.
   Does not change Elementor content or desktop layouts.
   Works with existing Elementor Free pages and v1.3 exact photo-filled NP SVG. */
@media (max-width:1100px) {
  body.np-portfolio .np-main .e-con.np-hero{
    background:linear-gradient(125deg,#f1f3ff 0%,#f6f7ff 48%,#e7edff 100%);
    border:1px solid #dee5ff;
    border-radius:24px;
    box-shadow:0 14px 32px rgba(16,24,39,.055);
    position:relative;
    isolation:isolate;
    overflow:hidden;
  }
  body.np-portfolio .np-main .e-con.np-hero::after{
    content:"";
    width:240px;height:240px;
    position:absolute;right:-92px;bottom:-139px;
    background:linear-gradient(150deg,#3153ff,#112ab6);
    border-radius:50%;z-index:-1;pointer-events:none;
  }
  body.np-portfolio .np-main .e-con.np-hero-visual{z-index:1}
  body.np-portfolio .np-main .e-con.np-hero-copy{z-index:2}
}
@media (min-width:768px) and (max-width:1100px) {
  body.np-portfolio .np-main .e-con.np-hero{
    margin-top:27px;
    margin-bottom:2px;
    padding:36px 37px!important;
    gap:25px;
    min-height:0;
  }
  body.np-portfolio .np-main .e-con.np-hero-visual{max-width:390px}
  body.np-portfolio .np-main .np-h1 .elementor-heading-title{font-size:clamp(43px,5.9vw,64px)}
  body.np-portfolio .np-main .np-hero-copy .np-lead .elementor-heading-title{font-size:21px}
  body.np-portfolio .np-main .e-con.np-project-section{padding-top:43px}
}
@media (max-width:767px) {
  /* Hero: one designed composition rather than disconnected blocks. */
  body.np-portfolio .np-main .elementor .e-con.np-shell.np-hero{
    width:calc(100% - 26px)!important;
    margin-top:13px;
    padding:25px 21px 9px!important;
    gap:0!important;
    align-items:stretch;
    min-height:0;
  }
  body.np-portfolio .np-main .np-hero-copy{gap:12px!important;justify-content:flex-start}
  body.np-portfolio .np-main .np-hero-copy>.np-eyebrow{
    width:auto!important;max-width:100%;align-self:flex-start;
    padding:7px 10px 7px 12px;
    background:rgba(255,255,255,.84);
    border-left:3px solid var(--np-blue);
    border-radius:0 7px 7px 0;
  }
  body.np-portfolio .np-main .np-eyebrow .elementor-heading-title{font-size:10px;letter-spacing:.13em;line-height:1.5}
  body.np-portfolio .np-main .np-h1 .elementor-heading-title{
    font-size:clamp(42px,10.5vw,59px);line-height:1.02;letter-spacing:-.073em;
  }
  body.np-portfolio .np-main .np-hero-copy .np-lead{
    border-left:3px solid var(--np-blue);
    padding-left:12px;max-width:360px;
  }
  body.np-portfolio .np-main .np-hero-copy .np-lead .elementor-heading-title{font-size:18px;line-height:1.26}
  body.np-portfolio .np-main .np-hero-desc{font-size:13px;line-height:1.53;max-width:360px}
  body.np-portfolio .np-main .np-buttons{margin-top:6px!important;gap:9px}
  body.np-portfolio .np-main .np-buttons .np-btn .elementor-button{
    min-height:43px;display:inline-flex;align-items:center;justify-content:center;
    padding:12px 14px;font-size:11.5px;box-shadow:0 4px 9px rgba(16,24,39,.08)
  }
  body.np-portfolio .np-main .e-con.np-hero-visual{
    width:min(79%,295px)!important;
    max-width:295px!important;
    margin-top:-3px!important;
    margin-right:-8px!important;
    margin-bottom:-3px!important;
    margin-left:auto!important;
    justify-self:end;
    aspect-ratio:960/880!important;
    background-position:center center!important;
    background-size:contain!important;
  }
  /* Projects: first case study becomes a photographic feature, the remainder stays compact. */
  body.np-portfolio .np-main .e-con.np-project-section{padding-top:34px!important}
  body.np-portfolio .np-main .np-project-section .np-section-heading{border-bottom:2px solid #dfe5ff}
  body.np-portfolio .np-main .e-con.np-cards{gap:13px}
  body.np-portfolio .np-main .np-project-section .np-card:first-child{
    position:relative;display:flex;flex-direction:column;
    border:none;border-radius:17px;background:#101827;overflow:hidden;
    box-shadow:0 13px 24px rgba(16,24,39,.18);
  }
  body.np-portfolio .np-main .np-project-section .np-card:first-child::before{
    content:'PROJET À LA UNE';position:absolute;top:13px;left:13px;z-index:5;
    color:#101827;background:rgba(255,255,255,.95);border-radius:99px;
    padding:7px 11px;font-size:10px;font-weight:700;letter-spacing:.065em;
  }
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-pic,
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-pic .elementor-widget-container{
    height:205px!important;min-height:205px!important;width:100%;
  }
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-pic img{
    height:205px!important;min-height:205px!important;width:100%;object-fit:cover;
  }
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-copy{
    padding:16px 19px 18px;gap:7px;min-height:0;color:#fff;
  }
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-h3 .elementor-heading-title{
    color:#fff!important;font-size:21px;letter-spacing:-.035em;
  }
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-desc,
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-desc p{color:#d8e1f3!important;font-size:12px}
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-link .elementor-button{
    color:#fff!important;background:#3153ff;border-radius:30px;padding:10px 14px;
  }
  body.np-portfolio .np-main .np-project-section .np-card:not(:first-child){
    background:#fff;border:1px solid #e2e5ee;box-shadow:0 5px 14px rgba(16,24,39,.045);
  }
  body.np-portfolio .np-main .np-project-section .np-card:not(:first-child) .np-card-pic,
  body.np-portfolio .np-main .np-project-section .np-card:not(:first-child) .np-card-pic .elementor-widget-container,
  body.np-portfolio .np-main .np-project-section .np-card:not(:first-child) .np-card-pic img{
    height:100%!important;min-height:145px!important;
  }
  body.np-portfolio.np-progressive-enhanced .np-expand-toggle{
    background:#ecf0ff;color:#1434b8!important;border-color:#cad6ff;
    border-radius:12px;box-shadow:none;
  }
  body.np-portfolio .np-main .np-expert-item{
    background:#fff;border-color:#e0e4ee;border-top:3px solid #3153ff!important;
    box-shadow:0 5px 13px rgba(16,24,39,.045);
  }
  body.np-portfolio .np-main .np-expert-item:first-child{background:#edf1ff}
  body.np-portfolio .np-main .e-con.np-cta{position:relative;isolation:isolate;overflow:hidden}
  body.np-portfolio .np-main .e-con.np-cta::after{
    content:"";width:170px;height:170px;position:absolute;right:-75px;bottom:-85px;
    border:20px solid rgba(255,255,255,.13);border-radius:50%;z-index:-1;pointer-events:none;
  }
}
@media (max-width:380px){
  body.np-portfolio .np-main .elementor .e-con.np-shell.np-hero{padding:21px 16px 7px!important}
  body.np-portfolio .np-main .e-con.np-hero-visual{width:min(77%,260px)!important}
  body.np-portfolio .np-main .np-hero-copy .np-lead .elementor-heading-title{font-size:17px}
  body.np-portfolio .np-main .np-buttons{flex-wrap:wrap}
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-pic,
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-pic .elementor-widget-container,
  body.np-portfolio .np-main .np-project-section .np-card:first-child .np-card-pic img{height:182px!important;min-height:182px!important}
}