/* ==========================================================================
   SorrentoHikes — Mobile / responsive layer
   The design ships as a fixed 1440px desktop composition built with INLINE
   styles. External CSS cannot normally override inline styles, so these rules
   use attribute selectors + !important (author !important beats inline) to
   retrofit responsiveness. Desktop (>1024px) is untouched.
   Breakpoints: 1024 (fluid), 820 (stack), 560 (phone).
   ========================================================================== */

/* Never allow horizontal scroll on small screens */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Fluid main container (was width:1440px) */
  body > div[style*="1440px"] { width: 100% !important; max-width: 100% !important; }

  /* Media never overflows */
  img, svg, video, iframe { max-width: 100% !important; height: auto; }
  svg[width] { max-width: 100%; }
}

/* ---- Tablet & phone: stack and de-gutter --------------------------------- */
@media (max-width: 820px) {
  /* Collapse every multi-column grid to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Tighten oversized grid gaps */
  [style*="gap: 56px"], [style*="gap: 48px"], [style*="gap: 40px 56px"] { gap: 24px !important; }

  /* Reduce the 56px horizontal gutters everywhere they appear */
  [style*="56px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Scale down the display typography */
  h1[style] { font-size: 44px !important; line-height: 1.04 !important; }
  h2[style] { font-size: 30px !important; }
  /* Big Cormorant lead / manifesto paragraphs */
  p[style*="font-size: 46px"] { font-size: 30px !important; line-height: 1.25 !important; }
  p[style*="font-size: 42px"] { font-size: 28px !important; }
  p[style*="font-size: 28px"] { font-size: 22px !important; }

  /* Hero: less towering, keep it readable one-handed */
  header[style*="min-height: 560px"], header[style*="min-height: 540px"], header[style*="min-height: 520px"] {
    min-height: 340px !important;
  }
  /* Hide the absolutely-positioned dev "photo placeholder" captions on mobile
     (they overlap the eyebrow once the hero shortens; real photos replace them) */
  [style*="monospace"] { display: none !important; }
  /* Hero fact bar cells: drop the vertical dividers when stacked, add hairline rows */
  [style*="repeat(5"] > div, [style*="repeat(4, 1fr)"] > div {
    border-right: none !important;
    border-top: 1px solid rgba(159,193,206,0.16);
  }

  /* The two-column "do / who should not" keeps its 1px hairline nicely as rows */
}

/* ---- Phone ---------------------------------------------------------------- */
@media (max-width: 560px) {
  [style*="56px"] { padding-left: 16px !important; padding-right: 16px !important; }
  h1[style] { font-size: 36px !important; }
  h2[style] { font-size: 26px !important; }
  p[style*="font-size: 17px"] { font-size: 16px !important; }

  /* Vertical rhythm: trim very tall section paddings a touch */
  [style*="padding: 76px 56px"], [style*="padding: 80px 56px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 64px 56px"] { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Warning callout (big number + text) stacks */
  [style*="font-size: 60px"] { font-size: 40px !important; }
}

/* ============ Rifiniture mobile (audit) ============ */
@media (max-width: 820px) {
  /* 1) Leggibilità hero: velo più scuro sopra la foto */
  [style*="linear-gradient(180deg, rgba(8,36,48,0.25)"]{
    background: linear-gradient(180deg, rgba(8,36,48,0.52) 0%, rgba(8,36,48,0.58) 42%, rgba(8,36,48,0.92) 100%) !important;
  }
  /* ombra morbida sul testo dell'hero, per staccarlo dalle zone chiare della foto */
  header[data-screen-label] h1,
  header[data-screen-label] p,
  header[data-screen-label] a,
  header[data-screen-label] [style*="letter-spacing"]{
    text-shadow: 0 1px 10px rgba(8,36,48,0.6);
  }
  /* 2) breadcrumb: ancora più aria sotto il nav su mobile */
  [style*="letter-spacing: 0.14em; color: #9FC1CE; margin-bottom"]{ margin-top: 28px !important; }
  /* 3) tabelle comparative: nasconde l'header a colonne (impilato e confuso);
        le righe restano leggibili come mini-schede impilate */
  [style*="grid-template-columns"][style*="#0C3446"][style*="text-transform: uppercase"]{ display: none !important; }
}

/* Home hero: la height fissa (720px) è troppo alta su mobile → adatta al
   contenuto, così il titolo non finisce troppo in basso */
@media (max-width: 820px) {
  header[style*="height: 720px"]{ height: auto !important; min-height: 380px !important; }

  /* 1) aria tra il nav e l'occhiello (il blocco testo aveva padding-top: 0) */
  header[style*="height: 720px"] > div[style*="padding: 0 56px 64px"]{
    padding-top: 30px !important;
  }
  /* 2) velo più scuro sulla foto (la home usa 0.12, non 0.25) → il giallo stacca */
  header[style*="height: 720px"] [style*="rgba(8,36,48,0.12)"]{
    background: linear-gradient(180deg, rgba(8,36,48,0.58) 0%, rgba(8,36,48,0.5) 45%, rgba(8,36,48,0.92) 100%) !important;
  }
  /* 3) ombra più decisa su titolo e giallo, per staccarli dalle zone chiare */
  header[style*="height: 720px"] h1,
  header[style*="height: 720px"] h1 span{
    text-shadow: 0 2px 16px rgba(8,36,48,0.85), 0 1px 3px rgba(8,36,48,0.72) !important;
  }
}