/* ============================================================
   MOBILE — phone-first refinements (loaded last, overrides)
   Targets: ≤768px tablets/large phones, ≤560px phones,
            ≤380px small phones, landscape, safe-area insets.
   ============================================================ */

/* ---- safe-area + base sizing ---- */
@supports (padding:max(0px)){
  .nav{ padding-left:max(var(--gutter),env(safe-area-inset-left)); padding-right:max(var(--gutter),env(safe-area-inset-right)); }
}

/* ===========================================================
   ≤ 860px  (already where burger appears)
   =========================================================== */
@media (max-width:860px){
  /* nav: bigger logo breathing + comfortable burger hit area */
  .nav{ padding-block:15px; }
  .nav.solid{ padding-block:11px; }
  .nav-logo img{ height:26px; }
  .nav-burger{ width:44px; height:44px; margin-right:-10px; }
  .nav-burger span{ left:8px; right:8px; }
  .nav-burger span:nth-child(1){ top:15px; }
  .nav-burger span:nth-child(2){ top:22px; }
  .nav-burger span:nth-child(3){ top:29px; }
  .nav.open .nav-burger span:nth-child(1){ top:22px; }
  .nav.open .nav-burger span:nth-child(3){ top:22px; }

  /* mobile menu: vertically centered, generous tap rows */
  .mobile-menu{ justify-content:center; gap:4px; padding-top:100px; }
  .mobile-menu a{ font-size:clamp(2rem,9vw,2.8rem); padding-block:14px; }
}

/* ===========================================================
   ≤ 768px
   =========================================================== */
@media (max-width:768px){
  /* hero: tighten top gap under fixed nav, lift content a touch */
  .hero-inner{ padding-top:120px; padding-bottom:clamp(72px,12vh,120px); }
  .hero .lead{ max-width:38ch; }
  .hero-burst{ opacity:.18; width:min(280px,56vw); right:-6%; top:38%; }
  .hero-scroll{ display:none; }            /* overlaps content on short screens */

  /* statement: a touch tighter */
  .statement{ line-height:1.12; }

  /* service rows: clearer two-line layout, drop hover-only arrow */
  .svc-row{ padding:24px 0; gap:18px 16px; }
  .svc-row .arr{ display:none; }
  .svc-row h3{ font-size:1.3rem; }
  .svc-row:hover{ padding-left:0; }        /* no hover slide on touch */

  /* media wall: shorter so it doesn't dominate the fold */
  .mw-strip{ height:clamp(150px,40vw,210px); }

  /* podcast / mediawall background washes lighter (perf + legibility) */
  .award-bg, .podcast-bg{ opacity:.08 !important; }

  /* CONTACT: form + aside must stack — side-by-side squeezes/cuts the aside */
  .contact-grid{ grid-template-columns:1fr !important; }
  .contact-grid aside{ position:static !important; top:auto !important; }

  /* CONTACT: surface the "Obavijest" right after the hero, hide the aside copy */
  .mobile-obavijest{ display:block !important; }
  .obavijest-card{ display:none; }
}

/* ===========================================================
   ≤ 560px  — phones
   =========================================================== */
@media (max-width:560px){
  :root{ --sec-y:clamp(64px,16vw,96px); }

  /* HERO — full-width stacked CTAs = big thumb targets */
  .hero{ min-height:92svh; }
  .hero-inner{ padding-top:112px; }
  .hero h1{ margin-block:.28em .46em; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:12px; margin-top:30px; }
  .hero-cta .btn{ width:100%; }

  /* buttons: comfortable but not oversized */
  .btn{ padding:15px 24px; }
  .btn-lg{ padding:17px 26px; font-size:.98rem; }

  /* generic stacked CTA groups go full-width too */
  .mt-cta .btn,
  .mt-cta .btn-lg{ width:100%; }
  .mt-cta{ display:flex; flex-direction:column; align-items:stretch; }
  .mt-cta.center, .center .mt-cta{ align-items:stretch; }

  /* RESULT cards: tighter padding, photo a bit shorter */
  .r-head{ padding:24px 22px 18px; }
  .r-foot{ padding:20px 22px 22px; }
  .r-photo{ height:190px; }
  .result .stat{ font-size:clamp(2rem,9vw,2.6rem); }
  .result .who{ font-size:1.1rem; }

  /* TEAM: photos shouldn't be full-height portraits on a tall phone */
  .member .photo{ aspect-ratio:1/1; }
  .member h3{ margin-top:16px; }

  /* PROCESS steps: number above text, smaller stroke */
  .step{ padding:30px 0; }
  .step .big-n{ font-size:clamp(3.2rem,20vw,5rem); -webkit-text-stroke-width:1px; }

  /* SPOT video: portrait-friendly framing */
  .spot-video{ aspect-ratio:4/5 !important; }

  /* MARQUEE: a little smaller, keep punch */
  .marquee{ padding-block:16px; }
  .marquee span{ font-size:1.15rem; gap:40px; }
  .marquee-track{ gap:40px; }

  /* FOOTER: stack the bottom row, left-align */
  .footer-bottom{ flex-direction:column; gap:8px; }
  .footer .big-cta{ font-size:clamp(2.1rem,11vw,2.8rem); }

  /* section heads + leads: keep measure readable */
  .sec-head .sub{ max-width:none; }

  /* contact form spacing */
  .form{ gap:20px; }
}

/* ===========================================================
   ≤ 380px  — small phones (iPhone SE / mini)
   =========================================================== */
@media (max-width:380px){
  .hero-inner{ padding-top:104px; }
  .result .stat{ font-size:1.9rem; }
  .mobile-menu a{ font-size:1.85rem; }
  .marquee span{ font-size:1.05rem; }
}

/* ===========================================================
   Touch devices — neutralise hover-only affordances
   =========================================================== */
@media (hover:none){
  .svc-row:hover{ padding-left:0; }
  .svc-row:hover::before{ opacity:0; }
  .result:hover{ transform:none; }
  .marquee:hover .marquee-track{ animation-play-state:running; }
}

/* ===========================================================
   Short landscape phones — let hero scroll, trim nav
   =========================================================== */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:96px 56px; }
  .hero-scroll{ display:none; }
}