/* =============================================================
   RESPONSIVE LAYERS
   -------------------------------------------------------------
   Mobile-first ordering, with progressive enhancements at each
   breakpoint. Targets every common device class:
     • small phones      (<= 380px)
     • phones            (381 – 640px)
     • tablet portrait   (641 – 900px)
     • tablet landscape  (901 – 1100px)
     • desktop           (>= 1101px)
   Plus landscape-orientation tweaks for short viewports.
   ============================================================= */

/* ---------- Safe-area + iOS niceties ---------- */
html { -webkit-text-size-adjust: 100%; }
/* Guard against any accidental sideways scroll on phones (clip keeps
   position:sticky working, unlike overflow:hidden). */
html, body { overflow-x: clip; }
/* Lock background scroll while the mobile menu is open */
html.nav-locked { overflow: hidden; }
body {
  -webkit-tap-highlight-color: rgba(192, 73, 44, 0.15);
}
img, svg, object, video { max-width: 100%; height: auto; }

/* Prevent text overflow on narrow screens */
h1, h2, h3, h4 { overflow-wrap: break-word; word-wrap: break-word; }

/* Honour iOS notch */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left));
    padding-right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right));
  }
}

/* =============================================================
   LARGE TABLETS & SMALL LAPTOPS (<= 1100px)
   ============================================================= */
@media (max-width: 1100px) {
  .nav__links { gap: 1.4rem; }
  .nav__links a { font-size: 0.9rem; }
  .brand__tagline { font-size: 0.66rem; }

  .configurator {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .configurator__summary {
    position: static;
    order: -1;             /* show selection summary above form on tablets */
  }
}

/* =============================================================
   TABLETS (<= 960px) — hero / profile / footer stack
   ============================================================= */
@media (max-width: 960px) {
  .hero {
    min-height: auto;
    padding: 2rem 0 3rem;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: 1.5rem 2rem;
  }
  .hero__visual {
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: 16/10;
  }
  .hero__visual .ornament--top    { width: 44px; }
  .hero__visual .ornament--bottom { width: 50px; bottom: 4rem; }
  .scroll-cue { display: none; }

  .profile {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .profile__media {
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 4/4;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .story-grid__visual {
    position: static;
    width: 100%;
    max-width: 420px;
    margin: 1.5rem auto 0;
  }
  .media-frame--story {
    width: 100%;
    aspect-ratio: 682 / 1024;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .step {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1.5rem 0;
  }
  .step__num { font-size: 3rem; }
}

/* =============================================================
   MOBILE / SMALL TABLET (<= 720px) — drawer nav, single columns
   ============================================================= */
@media (max-width: 720px) {

  /* --- Navigation: hamburger drawer --- */
  .nav { padding: 0.8rem 0; }
  .nav--scrolled { padding: 0.6rem 0; }

  .nav__inner { gap: 0.6rem; }

  .nav__links {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--c-ivory);
    flex-direction: column;
    padding: 2rem 1.6rem 3rem;
    gap: 1.2rem;
    align-items: flex-start;
    transform: translateY(-110%);
    transition: transform var(--t-med) var(--ease);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-m);
    overflow-y: auto;
    max-height: calc(100vh - 64px);
  }
  .nav--open .nav__links { transform: none; }
  .nav__links li { width: 100%; }
  .nav__links a {
    font-size: 1.1rem;
    display: block;
    padding: 0.7rem 0;
    width: 100%;
  }
  .nav__cta { margin-left: 0; width: 100%; }
  .nav__cta .btn { width: 100%; justify-content: center; }
  .nav__toggle { display: block; }

  /* Brand on small screens — tighter, no tagline */
  .brand { gap: 0.55rem; }
  .brand__logo { height: 46px; }
  .brand__mark { width: 38px; height: 38px; font-size: 1.1rem; }
  .brand__name  { font-size: 1.05rem; }
  .brand__tagline { display: none; }

  /* Theme toggle compact */
  .theme-toggle { --size: 38px; margin-left: 0; }
  .lang-switch { height: 38px; margin-left: 0.35rem; }
  .lang-switch__btn { font-size: 0.68rem; padding: 0 0.5rem; }

  /* Push content below smaller nav */
  .page { padding-top: 68px; }

  /* --- Hero --- */
  .hero {
    padding: 1.5rem 0 2.5rem;
    background:
      radial-gradient(ellipse at 80% 0%, rgba(201, 162, 75, 0.16), transparent 60%),
      linear-gradient(180deg, var(--c-ivory) 0%, var(--c-cream) 100%);
  }
  .hero__title {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    margin-bottom: 1.2rem;
  }
  .hero__lead { font-size: 1.1rem; max-width: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .hero__stats {
    gap: 1.2rem;
    justify-content: space-between;
  }
  .stat__num { font-size: 1.8rem; }
  .stat__lab { font-size: 0.72rem; }
  .hero__visual {
    aspect-ratio: 16/12;
    max-width: 100%;
  }
  .hero__visual-caption {
    left: 1rem; right: 1rem; bottom: 1rem;
    font-size: 1rem;
  }
  .hero__visual-caption strong { font-size: 1.2rem; }

  /* --- Sections padding --- */
  .section { padding: 3rem 0; }
  .section--tight { padding: 2rem 0; }

  /* --- Section titles --- */
  .eyebrow { padding-left: 1.8rem; letter-spacing: 0.18em; }
  .eyebrow::before { width: 1.4rem; }
  .section-subtitle { font-size: 1.05rem; }

  /* --- Forms --- */
  .field-grid,
  .choice-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .configurator__form { padding: 1.5rem; }
  .configurator__summary { padding: 1.4rem; }

  .form-nav {
    flex-direction: column-reverse;
    gap: 0.7rem;
  }
  .form-nav .btn { width: 100%; justify-content: center; }
  .form-step h2 { font-size: 1.35rem; }

  /* --- Choice & addon tiles (tap-friendly) --- */
  .choice { padding: 1rem 1rem 1rem 2.6rem; min-height: 64px; }
  .choice__bullet { top: 1.1rem; }
  .addon { padding: 0.85rem 0.9rem; min-height: 56px; }

  /* --- Cards: smaller paddings --- */
  .feature  { padding: 1.6rem 1.4rem; }
  .package  { padding: 2rem 1.5rem; }
  .testimonial { padding: 2rem 1.5rem; }
  .testimonial__body { font-size: 1.05rem; }

  /* --- Footer --- */
  .footer { padding: 2.8rem 0 1.2rem; }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* --- About fact-list stacks --- */
  .fact-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  /* --- CTA strip --- */
  .cta-strip { padding: 3rem 0; }
  .cta-strip h2 { font-size: 1.8rem; }
  .cta-strip p { font-size: 1rem; }
  .cta-strip .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* --- Buttons larger touch targets --- */
  .btn { padding: 0.95rem 1.5rem; }
}

/* =============================================================
   SMALL PHONES (<= 480px)
   ============================================================= */
@media (max-width: 480px) {
  body { font-size: 1rem; line-height: 1.6; }

  .container { padding: 0 1rem; }

  .brand__logo { height: 40px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 1rem; }

  .hero {
    padding-top: 1rem;
  }
  .hero__title { font-size: clamp(2rem, 10vw, 2.6rem); }
  .hero__lead { font-size: 1rem; }
  .hero__visual { aspect-ratio: 4/3.6; }
  .hero__visual .ornament--top { width: 36px; top: 0.8rem; left: 0.8rem; }
  .hero__visual .ornament--bottom { width: 40px; bottom: 3.5rem; right: 0.8rem; }

  .stat__num { font-size: 1.55rem; }
  .stat__lab { font-size: 0.65rem; letter-spacing: 0.12em; }

  .package__name  { font-size: 1.45rem; }
  .package__list li { font-size: 0.92rem; }

  .feature__icon { width: 46px; height: 46px; }
  .feature__title { font-size: 1.2rem; }

  .step__num { font-size: 2.4rem; }
  .step__title { font-size: 1.3rem; }

  .form-step h2 { font-size: 1.2rem; }
  .configurator__form { padding: 1.25rem; }
  .configurator__summary { padding: 1.2rem; }

  .testimonial { padding: 1.6rem 1.2rem; }
  .testimonial::before { font-size: 3.5rem; top: -0.1rem; left: 1rem; }
  .testimonial__body { font-size: 1rem; }

  .footer { padding: 2.2rem 0 1rem; }
  .footer h4 { font-size: 0.95rem; }

}

/* =============================================================
   VERY SMALL PHONES (<= 360px) — emergency clamp
   ============================================================= */
@media (max-width: 360px) {
  .brand__name { font-size: 0.95rem; }
  .nav { padding: 0.6rem 0; }
  .hero__title { font-size: 1.95rem; }
  .hero__stats { gap: 0.8rem; }
  .stat__num { font-size: 1.4rem; }
  .btn { font-size: 0.92rem; padding: 0.85rem 1.2rem; }
  .package__name { font-size: 1.3rem; }
}

/* =============================================================
   SHORT VIEWPORTS — phones in landscape, small windows
   ============================================================= */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 1rem 0 2rem; }
  .hero__inner { padding-block: 1rem; gap: 1.5rem; }
  .hero__visual { max-width: 360px; aspect-ratio: 16/9; }
  .scroll-cue { display: none; }

  .nav__links {
    inset: 56px 0 0 0;
    max-height: calc(100vh - 56px);
  }
}

/* =============================================================
   LARGE DESKTOP (>= 1400px) — keep container readable
   ============================================================= */
@media (min-width: 1400px) {
  :root { --container: 1280px; }
  .hero__title { font-size: clamp(3rem, 5.2vw, 5.6rem); }
}

/* =============================================================
   POINTER-COARSE — touchscreen tweaks regardless of size
   ============================================================= */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .nav__links a { padding: 0.6rem 0.2rem; }
  .theme-toggle { --size: 44px; }
  .lang-switch { height: 44px; }
  .addon, .choice { min-height: 56px; }
  .field input,
  .field select,
  .field textarea { font-size: 16px; }   /* avoids iOS auto-zoom on focus */
}

/* =============================================================
   NAVBAR FIT — horizontal nav for 1001–1399px (landscape tablet /
   laptop). The decorative tagline is reserved for >=1400px, where the
   container is widest and there is room for everything.
   ============================================================= */
@media (max-width: 1399px) {
  .brand__tagline { display: none; }
}
@media (min-width: 1001px) and (max-width: 1399px) {
  .nav__inner { gap: 1rem; }
  .nav__group { gap: 0.4rem; }
  .nav__links { gap: 1rem; flex-wrap: nowrap; }
  .nav__links a { font-size: 0.85rem; }
  .nav__cta { margin-left: 0.25rem; }
  .nav__cta .btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
  .theme-toggle { --size: 36px; }
  .lang-switch { height: 36px; margin-left: 0.25rem; }
  .lang-switch__btn { font-size: 0.65rem; padding: 0 0.42rem; }
}

/* =============================================================
   NAV DRAWER — raise the hamburger breakpoint to 1000px
   -------------------------------------------------------------
   Between ~720px and ~960px the full horizontal navbar (6 links +
   CTA + theme toggle) does not fit and overflowed. Tablets and small
   laptops now get the clean hamburger drawer instead. Placed last so
   it wins over the earlier gap/font-size rules.
   ============================================================= */
@media (max-width: 1000px) {
  /* CRITICAL: the navbar's backdrop-filter makes it the containing block for
     position:fixed descendants, which trapped the drawer inside the 68px-tall
     bar. Drop the glass effect on mobile (opaque bar instead) so the fixed
     drawer is sized against the viewport and covers the full screen. */
  .nav {
    padding: 0.8rem 0;
    background: var(--c-ivory);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--c-line);
  }
  .nav--scrolled { padding: 0.6rem 0; box-shadow: var(--shadow-s); }
  .page { padding-top: 72px; }
  .brand__tagline { display: none; }

  .nav__toggle { display: block; }
  .nav__toggle span { width: 26px; height: 2.5px; }
  .nav--open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav--open .nav__toggle span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; visibility: hidden !important; }
  .nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav__links {
    position: fixed;
    inset: 70px 0 0 0;
    background: var(--c-ivory);
    flex-direction: column;
    padding: 1.2rem 1.5rem 3rem;
    gap: 0;
    align-items: stretch;
    transform: translateY(-110%);
    transition: transform var(--t-med) var(--ease);
    box-shadow: var(--shadow-l);
    overflow-y: auto;
    max-height: calc(100vh - 70px);
    flex-wrap: nowrap;
  }
  .nav--open .nav__links { transform: none; }

  .nav__links li { width: 100%; border-bottom: 1px solid var(--c-line); }
  .nav__links a {
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 1.05rem 0.2rem;
    width: 100%;
  }
  .nav__links a::after { display: none; }     /* no underline bar inside the drawer */
  .nav__links a.is-active { color: var(--c-terracotta); font-weight: 600; }

  /* "Request a quote" stands out as a button at the bottom of the menu */
  .nav__cta { margin: 1.4rem 0 0; width: 100%; border-bottom: 0; }
  .nav__cta .btn { width: 100%; justify-content: center; padding: 1.05rem 1.5rem; font-size: 1.05rem; }

  /* Gentle staggered entrance for the menu items */
  .nav--open .nav__links li {
    animation: drawer-item-in 0.42s var(--ease) both;
  }
  .nav--open .nav__links li:nth-child(1) { animation-delay: 0.04s; }
  .nav--open .nav__links li:nth-child(2) { animation-delay: 0.08s; }
  .nav--open .nav__links li:nth-child(3) { animation-delay: 0.12s; }
  .nav--open .nav__links li:nth-child(4) { animation-delay: 0.16s; }
  .nav--open .nav__links li:nth-child(5) { animation-delay: 0.20s; }
  .nav--open .nav__links li:nth-child(6) { animation-delay: 0.24s; }
  .nav--open .nav__links li:nth-child(7) { animation-delay: 0.28s; }
}
@keyframes drawer-item-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   MOBILE POLISH 2026 — phones (<= 640px)
   Tuned sizing + the new components (hero image, trust, booking).
   Placed last so it wins over the generic breakpoints above.
   ============================================================= */
@media (max-width: 640px) {

  /* Reveal animations must not move sideways on phones (would cause a
     horizontal jiggle / scrollbar). Use vertical motion only.
     Scoped to .js: senza JavaScript il contenuto non deve restare
     spostato di 26px per sempre. */
  .js .reveal.reveal--left,
  .js .reveal.reveal--right { transform: translateY(26px) !important; }
  .js .reveal.is-visible.reveal--left,
  .js .reveal.is-visible.reveal--right { transform: none !important; }

  /* --- Hero --- */
  .hero { padding: 1rem 0 2.2rem; }
  .hero__inner { gap: 1.6rem; padding-block: 0.4rem 0.5rem; }
  .hero__title { font-size: clamp(2.1rem, 8.6vw, 2.9rem); line-height: 1.07; margin-bottom: 1rem; }
  .hero__lead { font-size: 1.05rem; line-height: 1.5; margin-bottom: 1.5rem; }
  .hero__ctas { gap: 0.7rem; margin-bottom: 2rem; }
  .hero__visual {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    border-radius: var(--radius-m);
  }
  .hero__visual .media-frame__corner { width: 34px; height: 34px; top: 9px; left: 9px; }
  .hero__visual .media-frame__corner--br { top: auto; bottom: 9px; right: 9px; left: auto; }
  .media-frame__rule { inset: 9px; }
  .hero__stats { gap: 0.5rem; }
  .stat__num { font-size: 1.55rem; }
  .stat__lab { font-size: 0.64rem; letter-spacing: 0.1em; }

  /* --- Trust strip: tidy 2x2 --- */
  .trust__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
    padding: 1.1rem 0;
  }
  .trust__item { font-size: 0.82rem; gap: 0.5rem; }
  .trust__item svg { width: 20px; height: 20px; }

  /* --- Section rhythm / headings --- */
  .section { padding: 2.7rem 0; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .section-subtitle { font-size: 1.02rem; margin-bottom: 1.8rem; }

  /* --- Cards & media --- */
  .feature, .package, .testimonial { border-radius: var(--radius-m); }
  .media-frame { border-radius: var(--radius-m); }
  .media-frame__caption strong { font-size: 1.12rem; }
  .profile__media, .media-frame--square { aspect-ratio: 4 / 3; }
  #research .profile__media { aspect-ratio: 4 / 5; }
  .profile__photo--research { object-position: 50% 80%; }
  .story-grid__visual { width: 100%; max-width: 380px; margin: 1.5rem auto 0; }
  .media-frame--story { width: 100%; aspect-ratio: 682 / 1024; }

  /* --- Booking card --- */
  .booking-card { padding: 1.7rem 1.3rem; gap: 1.1rem; }
  .booking-card__body h3 { font-size: 1.4rem; }
  .booking-card__note { font-size: 0.78rem; }

  /* --- About teaser image first feels nicer on a phone --- */
  .profile { gap: 1.8rem; }
}

/* very small phones */
@media (max-width: 360px) {
  .hero__title { font-size: 1.95rem; }
  .hero__lead { font-size: 1rem; }
  .trust__item { font-size: 0.76rem; }
  .stat__num { font-size: 1.4rem; }
  .stat__lab { font-size: 0.6rem; }
}

/* =============================================================
   PRINT — clean printable quote / about page
   ============================================================= */
@media print {
  .nav, .footer, .cta-strip, .scroll-cue, .theme-toggle, .lang-switch, .nav__toggle { display: none !important; }
  .page { padding-top: 0; }
  body { background: #fff !important; color: #000 !important; }
  .section { padding: 1.5rem 0; }
}