/* =========================================================
   Ztax — Responsive Optimization v2
   Mobile-first refinements, tablet polish, desktop balance
   Loaded on every page after the inline overrides so it wins.
   ========================================================= */

/* ---------- Global hardening ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { width: 100%; max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Disable the global zoom on touch devices — it breaks viewport math,
   sticky positioning and causes horizontal scroll on phones. */
@media (max-width: 1024px) {
  html { font-size: 100% !important; }
  body { zoom: 1 !important; }
}

/* ---------- Tap target minimums (a11y + mobile UX) ---------- */
@media (max-width: 900px) {
  .zt-btn, .zl-btn, .zs-btn,
  .zl-nav a, .zl-utility a,
  .zt-footer a, .zl-footer a {
    min-height: 44px;
  }
  .zt-btn, .zl-btn, .zs-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 22px !important;
    font-size: 16px !important;
  }
}

/* ---------- Mobile header: hide desktop nav, show hamburger (≤900) ---------- */
@media (max-width: 900px) {
  .zl-header__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .zl-header__inner > .zl-nav { display: none !important; }
  .zl-header__inner > .zt-btn,
  .zl-header__inner > .zl-btn { display: none !important; }
  .zl-utility { display: none !important; }
  .zl-brand { flex-shrink: 0; }
  .zl-brand small { display: none !important; }
}

/* ---------- Tablet (901–1180) ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  :root { --ztax-safe-gutter: clamp(40px, 6vw, 88px); }
  .zt-section, .zl-section { padding-top: 88px !important; padding-bottom: 88px !important; }
  .zl-services, .zt-services,
  .zs-area, .zs-pillars3,
  .zl-values, .zl-clients,
  .zl-process, .zl-testi,
  .zs-team { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .zt-footer__grid, .zl-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; }
}

/* ---------- Mobile-first refinements (≤760) ---------- */
@media (max-width: 760px) {
  :root { --ztax-safe-gutter: clamp(20px, 6vw, 32px); }

  /* Header spacing */
  .zl-header__inner { gap: 12px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  .zl-brand { flex-shrink: 0; }
  .zl-brand img, .zl-brand svg { max-height: 36px !important; width: auto !important; }

  /* Hero typography: tighter, more readable on phones */
  .zl-hero h1,
  .zs-pagehero h1,
  .zt-display, .zt-h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.015em !important;
    max-width: 100% !important;
    word-break: normal;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    overflow-wrap: normal !important;
  }
  .zt-h2 { font-size: clamp(24px, 6.5vw, 30px) !important; line-height: 1.15 !important; }
  .zt-h3 { font-size: 20px !important; line-height: 1.25 !important; }
  .zl-hero__lede, .zs-pagehero__lede, .zt-lede {
    font-size: 17px !important; line-height: 1.55 !important; max-width: 100% !important;
  }
  p, li { font-size: 16px !important; line-height: 1.6 !important; }

  /* Sections: balanced vertical rhythm */
  .zt-section, .zl-section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .zl-hero, .zt-hero, .zs-pagehero { padding-top: 72px !important; padding-bottom: 32px !important; }

  /* Stack every grid */
  .zt-grid, .zl-grid,
  .zt-hero__grid, .zl-hero__grid,
  .zt-services, .zl-services,
  .zt-pillars, .zs-pillars3,
  .zt-about, .zl-about,
  .zt-cta, .zl-cta-grid,
  .zt-footer__grid, .zl-footer__grid,
  .zl-stats, .zl-values, .zl-clients,
  .zl-process, .zl-testi, .zl-pubs, .zl-map,
  .zs-area, .zs-area__micro, .zs-svcpage,
  .zs-micro-list, .zs-team, .zs-timeline__item,
  .zs-contact,
  [class*="grid-cols"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  /* Cards: comfy padding, soft edges */
  .zt-card, .zl-card, .zs-card,
  .zl-service, .zs-area__card, .zs-area__micro li,
  .zs-team__card, .zl-pubs__card, .zl-testi__card {
    padding: 22px !important;
    border-radius: 16px !important;
  }

  /* Buttons: full-width by default in hero/cta blocks */
  .zl-hero .zt-btn, .zl-hero .zl-btn,
  .zs-pagehero .zt-btn, .zs-pagehero .zl-btn,
  .zt-cta .zt-btn, .zl-cta .zl-btn,
  .zs-cta .zt-btn, .zs-cta .zl-btn { width: 100%; }
  .zl-hero .zt-actions, .zs-cta .zt-actions,
  .zt-actions { flex-direction: column; align-items: stretch !important; gap: 12px !important; }

  /* Footer: stack cleanly, generous spacing */
  .zt-footer, .zl-footer { padding: 56px 0 !important; }
  .zt-footer__bottom, .zl-footer__bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* Sticky bottom CTA bar (Contatti) — keep it clear of the bottom bezel */
  .zl-stickybar { padding: 10px var(--ztax-safe-gutter) !important; }
  .zl-stickybar__inner { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .zl-stickybar__actions { width: 100%; }
  .zl-stickybar__actions .zt-btn { flex: 1; }

  /* Portraits: cap height so the page doesn't become a wall of face */
  .zs-person__portrait { max-height: 420px; }

  /* Map: stable aspect on phones */
  .zl-map iframe, .zs-map iframe, iframe[src*="google.com/maps"] {
    min-height: 320px;
    width: 100% !important;
  }

  /* Article body: comfortable reading width */
  .zt-article, .zs-article, .za-body {
    font-size: 17px !important; line-height: 1.7 !important;
  }
  .zt-article h2, .zs-article h2, .za-body h2 { font-size: 24px !important; margin-top: 32px !important; }
  .zt-article h3, .zs-article h3, .za-body h3 { font-size: 20px !important; margin-top: 24px !important; }

  /* Decorative marks: hide on phones, they steal space */
  .zl-hero__mark, .zs-pagehero__mark, .zt-hero__mark,
  .zl-hero__visual { display: none !important; }

  /* Back-to-top: pull in from the edge */
  .zl-totop { right: 16px !important; bottom: 16px !important; }

  /* Timeline/process connector: hide horizontal line when steps stack */
  .zl-process::before { display: none !important; }
  .zl-step { padding-bottom: 8px; }
  .zl-step + .zl-step { border-top: 1px solid var(--ztax-rule); padding-top: 24px; }

  /* Metodo page: stack the fase rows */
  .zs-fase {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 36px 0 !important;
  }
  .zs-fase__num { font-size: 48px !important; }
  .zs-fase__title { font-size: 26px !important; }
  .zs-fase__body { max-width: 100% !important; }
}

/* ---------- Small phones (≤420) ---------- */
@media (max-width: 420px) {
  :root { --ztax-safe-gutter: 18px; }
  .zl-hero h1, .zs-pagehero h1, .zt-display, .zt-h1 {
    font-size: 32px !important;
  }
  .zt-h2 { font-size: 22px !important; }
  .zl-brand img, .zl-brand svg { max-height: 32px !important; }
}

/* ---------- Studio page: mobile section composition ---------- */
@media (max-width: 760px) {
  body:has(section[data-screen-label="storia"]) .zs-pagehero {
    padding-top: 58px !important;
    padding-bottom: 46px !important;
  }

  body:has(section[data-screen-label="storia"]) .zs-pagehero__inner {
    gap: 18px !important;
  }

  body:has(section[data-screen-label="storia"]) .zs-pagehero h1 {
    font-size: clamp(32px, 9.2vw, 40px) !important;
    line-height: 1.08 !important;
    max-width: 11ch !important;
  }

  body:has(section[data-screen-label="storia"]) .zs-pagehero__lede {
    font-size: 17px !important;
    line-height: 1.55 !important;
    max-width: 30ch !important;
  }

  section[data-screen-label="storia"] .zl-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;
    align-items: stretch !important;
  }

  section[data-screen-label="storia"] .zt-h2 {
    max-width: 11ch !important;
    font-size: 27px !important;
    line-height: 1.14 !important;
  }

  section[data-screen-label="storia"] .zl-about__creds {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    margin-top: 26px !important;
    padding: 16px 0 !important;
  }

  section[data-screen-label="storia"] .zl-about__cred {
    min-width: 0 !important;
    padding-right: 12px !important;
  }

  section[data-screen-label="storia"] .zl-about__cred b {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  section[data-screen-label="storia"] .zl-about__cred span {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  section[data-screen-label="storia"] .zt-stack-lg {
    gap: 20px !important;
    align-items: flex-start !important;
  }

  section[data-screen-label="storia"] .zt-body,
  .zs-person__bio .zt-body {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  section[data-screen-label="storia"] .zt-btn {
    width: 100% !important;
    margin-top: 2px !important;
  }

  .zt-illust {
    padding-top: 10px !important;
    padding-bottom: 34px !important;
  }

  .zt-illust figure {
    max-width: 100% !important;
  }

  body:has(section[data-screen-label="persone"]) .zl-section__head {
    margin-bottom: 34px !important;
    gap: 14px !important;
  }

  body:has(section[data-screen-label="persone"]) .zl-section__head .zt-h2,
  section[data-screen-label="manifesto"] .zt-h2 {
    font-size: 28px !important;
    line-height: 1.14 !important;
    max-width: 12ch !important;
  }

  body:has(section[data-screen-label="persone"]) .zl-section__head .zt-lede {
    font-size: 17px !important;
    line-height: 1.52 !important;
    max-width: 30ch !important;
  }

  .zs-team {
    gap: 44px !important;
  }

  .zs-person {
    align-items: stretch !important;
    text-align: left !important;
    gap: 18px !important;
  }

  .zs-person__portrait {
    max-width: min(100%, 300px) !important;
    align-self: center !important;
  }

  .zs-person__plate {
    align-items: flex-start !important;
    text-align: left !important;
    padding-bottom: 4px !important;
  }

  .zs-person__name {
    font-size: 17px !important;
    line-height: 1.2 !important;
    letter-spacing: .1em !important;
  }

  .zs-person__role {
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: .14em !important;
  }

  .zs-person__bio,
  .zs-person__creds {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .zs-person__cred {
    font-size: 13px !important;
    line-height: 1.25 !important;
    padding: 7px 12px !important;
  }

  section[data-screen-label="manifesto"] .zl-container,
  section[data-screen-label="filosofia"] .zl-container,
  .zs-cta .zl-container {
    text-align: left !important;
  }

  section[data-screen-label="filosofia"] .zl-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    align-items: stretch !important;
  }

  section[data-screen-label="filosofia"] .zt-quote {
    font-size: 26px !important;
    line-height: 1.18 !important;
    max-width: 13ch !important;
    text-align: left !important;
  }

  section[data-screen-label="filosofia"] .zt-stack-lg {
    gap: 20px !important;
  }

  section[data-screen-label="filosofia"] .zt-body {
    max-width: 100% !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
  }
}

@media (max-width: 420px) {
  section[data-screen-label="storia"] .zl-about__cred span {
    font-size: 11.5px !important;
  }

  .zs-person__portrait {
    max-width: 280px !important;
  }
}

/* ---------- Desktop polish (≥1280) ---------- */
@media (min-width: 1280px) {
  .zt-container, .zl-container { max-width: 1320px !important; }
}

/* ---------- Mobile-only helpers ---------- */
.mobile-only { display: none; }
@media (max-width: 760px) {
  .mobile-only { display: inline !important; }
}

/* ---------- Reduce motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ==========================================================
   Mega menu — Approfondimenti dropdown (desktop only)
   ========================================================== */
.zl-nav__mega { position: relative; display: inline-flex; align-items: center; }
.zl-nav__mega-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.zl-nav__mega-panel {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 640px; max-width: 760px;
  background: var(--ztax-white, #fff);
  border: 1px solid var(--ztax-rule, #E2DFD7);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 2, 128, .14), 0 4px 12px rgba(0, 2, 128, .06);
  padding: 22px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 100;
}
.zl-nav__mega:hover .zl-nav__mega-panel,
.zl-nav__mega:focus-within .zl-nav__mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 2px);
}
/* invisible bridge so the panel doesn't close between toggle and panel */
.zl-nav__mega::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
}
.zl-mega { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.zl-mega__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ztax-mute, #8C8A83); margin-bottom: 10px;
}
.zl-mega__col--posts { border-right: 1px solid var(--ztax-rule, #E2DFD7); padding-right: 22px; padding-left: 6px; }
.zl-mega__post {
  display: block; padding: 10px 14px 10px 18px; border-radius: 10px;
  text-decoration: none; color: var(--ztax-navy, #000280);
  transition: background .15s ease;
}
.zl-mega__post + .zl-mega__post { margin-top: 2px; }
.zl-mega__post:hover { background: var(--ztax-green-050, #F2F8EC); }
.zl-mega__post-cat {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ztax-green-700, #7DB463); margin-bottom: 4px;
}
.zl-mega__post-title {
  display: block; font-family: var(--ztax-serif, "Apple Garamond", serif);
  font-size: 16px; line-height: 1.3; color: var(--ztax-navy, #000280); margin-bottom: 4px;
}
.zl-mega__post-meta { display: block; font-size: 12px; color: var(--ztax-mute, #8C8A83); }
.zl-mega__all {
  display: inline-block; margin-top: 10px; padding: 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--ztax-navy, #000280);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.zl-mega__all:hover { border-bottom-color: var(--ztax-green, #A7D08D); }
.zl-mega__page {
  display: block; padding: 12px; margin-bottom: 6px; border-radius: 10px;
  text-decoration: none; color: var(--ztax-navy, #000280);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.zl-mega__page:hover { background: var(--ztax-green-050, #F2F8EC); border-color: var(--ztax-green-300, #C5E0B2); }
.zl-mega__page-title {
  display: block; font-family: var(--ztax-serif, "Apple Garamond", serif);
  font-size: 17px; font-weight: 600; margin-bottom: 4px;
}
.zl-mega__page-desc { display: block; font-size: 13px; line-height: 1.4; color: var(--ztax-fg-soft, #4B4D7A); }

/* Mobile: keep the desktop nav hidden as before; mega menu is desktop-only. */
@media (max-width: 900px) {
  .zl-nav__mega, .zl-nav__mega-panel { display: none !important; }
}