/* pp-hero.css — one landing hero for the whole site (Nov 12 2026).
   Scott: "Unify all the landing pages. All the ones that are section headers like this." The pattern is the one /tires and
   /wheels got first: the hero fills the screen, a photo or a muted Stream loop sits behind it, the copy anchors to the
   bottom edge, the jump links are translucent chips, and the three stats stay one row of three on phones.

   Use:  <header class="tn-hero pp-hero">                         (keep the page's own hero class beside it)
           <div class="vhero" style="background-image:url(…)" aria-hidden="true">[<iframe data-src="…" data-after-load>]</div>
           <div class="wrap">…</div>
         </header>
   A Stream loop also needs <script defer src="/pp-lazy.js"></script> (it sets the iframe src after the page loads).
   tools/pp_hero.py writes this markup for the static pages and the generators (fits, install guides).

   The id prefix (body> for /learn, which has no <main>) outranks the per-page hero rules that sit in each page's inline <style> (.phero.has-vhero, .ds-hero …),
   so the layout is the same everywhere without editing those blocks. */

:is(#main,#gallery-main,body)>header.pp-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100vh;min-height:100svh;margin:0;padding:150px 0 clamp(28px,5vh,56px);
  background:#0E0D0B;color:#F4F6F8;overflow:hidden;border-bottom:0}
:is(#main,#gallery-main,body)>header.pp-hero>.wrap{position:relative;z-index:2;width:100%;min-height:0;padding-bottom:0}

/* the media layer: same treatment as the Stream heroes on /tires, /wheels and the machine pages */
.pp-hero>.vhero{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:#0E0D0B center/cover no-repeat}
.pp-hero>.vhero iframe{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:178vh;height:57vw;transform:translate(-50%,-50%);border:0}
.pp-hero>.vhero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,13,11,.5) 0%,rgba(14,13,11,.42) 28%,rgba(14,13,11,.74) 58%,#0E0D0B 99%)}
@media(prefers-reduced-motion:reduce){.pp-hero>.vhero iframe{display:none}}

/* type: one scale for every landing headline (the /tires size) */
header.pp-hero h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(40px,6.5vw,88px);line-height:.95;margin:10px 0 0;color:#fff;text-wrap:balance}
header.pp-hero .rule{margin:22px 0 0}
header.pp-hero .lede{max-width:60ch;color:#E6E2D8;margin-top:18px!important}
header.pp-hero .eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.45)}

/* chips and stats over media (the /tires look) */
header.pp-hero .tn-jump{position:relative;z-index:2;margin-top:26px}
header.pp-hero .tn-jump a{background:rgba(14,13,11,.62);border-color:rgba(255,255,255,.28);color:#F4F6F8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
header.pp-hero .tn-jump a:hover{border-color:var(--red,#E00009)}
header.pp-hero .tn-stats{position:relative;z-index:2;margin-top:32px;border-color:rgba(255,255,255,.22)}
header.pp-hero .tn-stats div{border-color:rgba(255,255,255,.22)}
header.pp-hero .tn-stats b{color:#fff}
header.pp-hero .tn-stats b small{color:#C9C4B9}
header.pp-hero .tn-stats span{color:#E4E6EA}
header.pp-hero .gd-hero-row{position:relative;z-index:2}

/* the cut-out art some heroes carry (tuning emblems, fitment car + badge) stays above the media */
header.pp-hero .tn-hero-art,header.pp-hero .fit-hero-car,header.pp-hero .fit-hero-badge{z-index:1}

/* page-specific: dune season keeps its own photo layer and red second line; Diesel Brothers keeps its topo map */
#main>header.pp-hero.ds-hero .bg{z-index:0}
header.pp-hero.ds-hero h1{line-height:.92}
header.pp-hero.db-hero .db-topo{z-index:0}
/* gallery: the header was the .wrap; the copy now sits in its own .wrap over the loop */
#gallery-main>header.pp-hero .gallery-intro{max-width:none}

@media(max-width:640px){
  /* the floating nav covers the top ~110px; 88px at the bottom keeps the stats clear of the Ask Packard button */
  :is(#main,#gallery-main,body)>header.pp-hero{padding:124px 0 88px}
  /* the chips ride one row that scrolls sideways (fading at the edge), so the stats stay on the first screen */
  header.pp-hero .tn-jump{gap:8px;margin-top:20px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-right:calc(-1 * var(--gut,16px));padding-right:var(--gut,16px);
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  header.pp-hero .tn-jump::-webkit-scrollbar{display:none}
  header.pp-hero .tn-jump li{flex:none}
  header.pp-hero .tn-jump a{padding:9px 13px;font-size:13.5px;white-space:nowrap}
  /* dune season: the weekend tags take the same sideways row, the two buttons share a line */
  header.pp-hero .ds-weekends{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut,16px));padding-right:var(--gut,16px)}
  header.pp-hero .ds-weekends::-webkit-scrollbar{display:none}
  header.pp-hero .ds-weekends span{flex:none;white-space:nowrap}
  header.pp-hero .ds-acts{flex-wrap:nowrap;gap:8px}
  header.pp-hero .ds-acts a{flex:1 1 auto;padding-left:12px;padding-right:12px;text-align:center;white-space:nowrap}
  header.pp-hero.ds-hero .lede{font-size:15px;line-height:1.5}
  header.pp-hero .tn-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-bottom:0}
  header.pp-hero .tn-stats div,header.pp-hero .tn-stats div+div{padding:12px 10px 4px;border-bottom:0;border-right:1px solid rgba(255,255,255,.22)}
  header.pp-hero .tn-stats div:first-child{padding-left:0}
  header.pp-hero .tn-stats div:last-child{padding-right:0;border-right:0}
  header.pp-hero .tn-stats b{font-size:clamp(26px,8vw,36px)}
  header.pp-hero .tn-stats span{font-size:12.5px;line-height:1.3;margin-top:6px}
}
@media(max-width:640px) and (max-height:700px){
  header.pp-hero h1{font-size:34px}
  header.pp-hero .lede{font-size:15px;line-height:1.45;margin-top:12px!important}
  header.pp-hero .rule{margin-top:14px}
  header.pp-hero .tn-stats{margin-top:14px}
  header.pp-hero .tn-jump{margin-top:16px}
}