/* ============================================================
   Szabitrans — sub-page layout stylesheet (page.css)
   Layered ON TOP of site.css. Establishes a unified, centered,
   modern-minimal look across every non-home page, taking the
   gallery's centered hero as the base. Adds: page-enter animation
   (content only — never the nav), breadcrumbs, centered sub-hero,
   prose, hub link-grids, CTA band, FAQ and the about timeline.
   ============================================================ */

/* ---- Page shell: keep content above the fixed video background ---- */
.page-main{position:relative;z-index:1}

/* ---- Unified page-enter animation (content only; the header/nav lives
        OUTSIDE <main>, so it is never touched). Pure CSS so it cannot get
        stuck if JS fails; reduced-motion safe. Homepage opts out (keeps its
        own GSAP intro). ---- */
@media (prefers-reduced-motion:no-preference){
  .js .page-enter{animation:pageEnter .8s var(--ease-out) both}
}
@keyframes pageEnter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* Failsafe (set by site.js on animationend / after 1.5s / on bfcache restore):
   guarantees the content is visible even if the entrance animation never runs. */
.page-main.enter-done{opacity:1!important;transform:none!important;animation:none!important}

/* ---- Nav: never wrap a multi-word item (e.g. "Építőanyag Pont") ---- */
.nav a{white-space:nowrap}

/* ---- Breadcrumbs (centered, subtle; schema added in Phase 4) ---- */
.breadcrumbs{padding-top:calc(var(--header-h) + 1.2rem);padding-bottom:0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;font-size:.88rem}
.breadcrumbs li{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);white-space:nowrap}
.breadcrumbs a{color:var(--text-muted);transition:color .2s var(--ease)}
.breadcrumbs a:hover{color:var(--accent-hover)}
.breadcrumbs li[aria-current]{color:var(--text-soft)}
.breadcrumbs .sep{color:var(--border)}
.breadcrumbs + .subhero{padding-top:clamp(1.5rem,4vw,2.5rem)}

/* ---- Sub-page hero: CENTERED, like the gallery hero ---- */
.subhero{
  position:relative;text-align:center;
  padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem));
  padding-bottom:clamp(1.5rem,4vw,2.5rem);
}
.subhero .eyebrow{
  display:inline-block;font-family:var(--font-display);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-hover);
  font-size:var(--fs-eyebrow);margin-bottom:.7rem;
}
.subhero h1{
  font-family:var(--font-display);font-weight:500;text-transform:none;
  letter-spacing:-.02em;line-height:1.05;font-size:var(--fs-display);
  max-width:24ch;margin-inline:auto;text-wrap:balance;
}
/* crisp glowing red marker under the title (echoes .nav-indicator / .t-dot glow) */
.subhero .rule{width:64px;height:3px;background:var(--accent);margin:1rem auto 0;border-radius:2px;
  box-shadow:0 0 12px rgba(204,31,31,.5)}
.subhero .subhero-lead{
  margin:1.6rem auto 0;max-width:56ch;color:var(--text-soft);
  font-size:var(--fs-lead);line-height:1.55;
}

/* ---- Centered content column ---- */
.content{max-width:820px;margin-inline:auto}

/* ---- Article / prose: centered block, left-aligned text for readability ---- */
.prose{max-width:68ch;margin-inline:auto}
.prose > * + *{margin-top:1.1rem}
.prose h2{font-family:var(--font-display);font-weight:600;text-transform:none;
  letter-spacing:-.01em;font-size:var(--fs-h2);margin-top:2.4rem;
  display:flex;align-items:center;gap:.6rem}
.prose h2::before{content:"";width:4px;height:1em;background:var(--accent);border-radius:2px;flex:none}
.prose h3{font-family:var(--font-display);font-weight:500;text-transform:none;
  letter-spacing:-.01em;font-size:var(--fs-h3);margin-top:1.8rem}
.prose p,.prose li{color:var(--text-soft);font-size:1.06rem;line-height:var(--lh-body)}
.prose ul{margin-left:0}
.prose ul li{position:relative;padding-left:1.6rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--accent)}
.prose a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#fff}
.prose strong{color:#fff}

/* ---- Hub link-grid: centered cards that link to child pages ---- */
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--gap);max-width:1080px;margin-inline:auto}
.link-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;
  padding:2rem 1.6rem;border-radius:var(--radius-lg);
  background:var(--glass,rgba(255,255,255,.05));border:1px solid var(--glass-bd,rgba(255,255,255,.14));
  box-shadow:0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.link-card:hover{transform:translateY(-6px);border-color:rgba(204,31,31,.55);box-shadow:0 22px 48px rgba(0,0,0,.5)}
.link-card .service-icon{margin:0 auto .3rem;background:rgba(204,31,31,.16);border:1px solid rgba(204,31,31,.45)}
.link-card h3{font-family:var(--font-display);font-weight:500;text-transform:none;
  letter-spacing:-.01em;font-size:var(--fs-h3);color:#fff}
.link-card p{color:var(--text-muted);font-size:.98rem;line-height:var(--lh-tight);flex:1}
.link-card .lc-more{margin-top:.4rem;color:var(--accent-hover);font-family:var(--font-display);
  font-weight:600;font-size:.95rem;transition:color .2s var(--ease-out)}
.link-card:hover .lc-more{color:#fff}

/* ---- CTA band: centered, repeatable conversion block ---- */
.cta-band{
  margin:clamp(2.5rem,6vw,4rem) auto 0;max-width:760px;padding:clamp(1.8rem,4vw,2.8rem);
  border-radius:var(--radius-lg);text-align:center;
  background:var(--glass,rgba(255,255,255,.05));border:1px solid var(--glass-bd,rgba(255,255,255,.14));
  box-shadow:0 14px 36px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
.cta-band h2{font-family:var(--font-display);font-weight:500;text-transform:none;
  letter-spacing:-.01em;font-size:clamp(1.5rem,3.4vw,2.2rem)}
.cta-band p{color:var(--text-soft);margin-top:.6rem;max-width:56ch;margin-inline:auto;
  font-size:var(--fs-lead);line-height:1.55}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.6rem}
/* Feature variant — the homepage closing CTA reads as the page's visual climax, not just another card. */
.cta-band-feature{max-width:860px;padding:clamp(2.4rem,5vw,3.4rem);border-color:rgba(204,31,31,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(204,31,31,.12)}
.cta-band-feature h2{font-size:var(--fs-h2)}

/* ---- FAQ block (centered column; visible Q&A; FAQPage schema in Phase 4) ---- */
.faq{max-width:68ch;margin-inline:auto}
.faq-item{border-bottom:1px solid rgba(255,255,255,.14);padding:1.2rem 0}
.faq-item h3{font-family:var(--font-display);font-weight:500;text-transform:none;
  letter-spacing:-.01em;font-size:var(--fs-h4);color:#fff}
.faq-item p{color:var(--text-soft);margin-top:.6rem;line-height:1.7}

/* ---- About timeline: clean modern vertical rail, centered block, all visible ---- */
.s-timeline{list-style:none;max-width:720px;margin:clamp(2rem,5vw,3rem) auto 0;position:relative;padding:0}
.s-timeline::before{content:"";position:absolute;left:9px;top:.4rem;bottom:.4rem;width:2px;
  background:linear-gradient(var(--accent),rgba(204,31,31,.12))}
.s-tl-item{position:relative;padding:0 0 clamp(1.6rem,3vw,2.4rem) 2.8rem}
.s-tl-item:last-child{padding-bottom:0}
.s-tl-item::before{content:"";position:absolute;left:0;top:.25rem;width:20px;height:20px;border-radius:50%;
  background:var(--accent);border:4px solid var(--bg);box-shadow:0 0 0 3px rgba(204,31,31,.4)}
.s-tl-year{font-family:var(--font-display);font-weight:600;color:var(--accent-hover);
  font-size:var(--fs-h4);letter-spacing:.02em;margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.s-tl-card{background:var(--glass,rgba(255,255,255,.05));border:1px solid var(--glass-bd,rgba(255,255,255,.14));
  border-radius:var(--radius-lg);padding:1.2rem 1.45rem;box-shadow:0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.s-tl-card:hover{transform:translateX(4px);border-color:rgba(204,31,31,.5);box-shadow:0 18px 42px rgba(0,0,0,.42)}
.s-tl-card h3{font-family:var(--font-display);font-weight:500;text-transform:none;letter-spacing:-.01em;
  font-size:var(--fs-h4);color:#fff;margin-bottom:.45rem}
.s-tl-card p{color:var(--text-soft);line-height:var(--lh-body)}

/* ---- Form <select> (quote page): styled like inputs so valid/invalid borders apply ---- */
.field select{
  width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);
  color:#fff;font-family:var(--font-body);font-size:1.02rem;padding:.85rem 1rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,31,31,.2)}
.field.invalid select{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.18)}
.field.valid select{border-color:var(--ok)}

/* ---- Centered contact layout ---- */
.contact-grid{align-items:stretch}
@media (max-width:840px){.contact-grid{text-align:left}}

/* ---- Brand logo: top-left on every page EXCEPT home (the hero already shows the big logo).
        On sub-pages it links home → acts as the "back to home" affordance. ---- */
.header .brand{transition:transform .2s var(--ease)}
.header .brand:active{transform:scale(.94)}
.is-home .header .brand{display:none}

/* Robustness: the homepage hides nav links until the GSAP intro reveals them
   (`.js .is-home .header .nav a{opacity:0}`). If GSAP never runs (stall / failsafe),
   `page-revealed` is set — force the nav + hamburger visible so the menu is never empty. */
html.page-revealed .header .nav a,
html.page-revealed .header .btn-gallery,
html.page-revealed .header .hamburger{opacity:1 !important;transform:none !important}

/* ============================================================
   MOBILE NAVIGATION — top dropdown + dimmed/blurred backdrop.
   Overrides the legacy right-side drawer in site.css (whose
   position:fixed was being clobbered by the V4 `.nav{position:relative}`).
   Higher specificity (.header .nav) guarantees the override.
   ============================================================ */
@media (max-width:920px){
  .hamburger{display:block}

  /* CRITICAL: site.css sets `.header{will-change:transform}`, which makes the header a
     containing block for the fixed dropdown — collapsing it to ~27px so overflow-y:auto
     clips all the links (menu looks empty). Drop it on mobile so #nav is fixed to the
     viewport. (The header still hides on scroll fine without the will-change hint.) */
  .header{will-change:auto !important}

  .header .nav{
    position:fixed; left:0; right:0; top:var(--header-h);
    width:100%; height:auto; max-height:calc(100dvh - var(--header-h));
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:.4rem 0 calc(1.1rem + env(safe-area-inset-bottom)); margin:0;
    background:rgba(24,24,27,.93);
    backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
    border-left:none; border-bottom:3px solid var(--accent);
    box-shadow:0 24px 50px rgba(0,0,0,.5);
    transform:translateY(-16px); opacity:0; visibility:hidden; pointer-events:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transition:opacity .3s var(--ease-out), transform .42s var(--ease-out), visibility .42s;
    z-index:1090;
  }
  .header .nav.open{transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto}
  .header .nav a{
    font-family:var(--font-display); font-size:1.18rem; font-weight:500; letter-spacing:.01em;
    text-transform:none; color:var(--text-soft); text-align:center; white-space:nowrap;
    padding:1rem 1.5rem; min-height:54px; display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid rgba(255,255,255,.07); border-left:none;
    /* the mobile dropdown is independent of the homepage intro choreography → always visible */
    opacity:1 !important; transform:none !important;
  }
  .header .nav a:last-of-type{border-bottom:none}
  .header .nav a::after{display:none}
  .header .nav a:hover,.header .nav a.active{color:#fff; background:rgba(204,31,31,.16)}
  /* touch press feedback + a persistent active marker (no :hover on touch); inset → no layout shift */
  .header .nav a:active{background:rgba(204,31,31,.28)}
  .header .nav a.active{box-shadow:inset 3px 0 0 var(--accent)}

  /* dimmed + blurred backdrop below the header (tap to close) */
  .nav-overlay{
    position:fixed; inset:0; top:var(--header-h);
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s var(--ease-out), visibility .35s;
    z-index:1080;
  }
  .nav-overlay.show{opacity:1; visibility:visible; pointer-events:auto}
}

/* ---- Mobile: larger homepage hero logo (desktop unchanged) ---- */
@media (max-width:768px){
  .hero .hero-main-logo{width:min(87vw,420px)}
}
/* very small screens (≤360px: Galaxy Fold folded, old SE): trim the hero side padding
   so the big logo fits fully inside .hero-inner instead of being clipped by overflow:hidden */
@media (max-width:360px){
  .hero-inner{padding-left:1rem;padding-right:1rem}
}