/* =====================================================================
   GROW WITH GROUNDED: shared tree hero and six-part strip (gg-hero.css)
   One hero for every tree tool. Each page sets its own colors and scene on
   the section's style attribute:
     --band       the tree's color (the sky)        --band-dark  20% darker, for dark mode
     --soft       the soft words on the band        --btn-ink    words on the cream button
     --sw / --swd the wide scene, light and dark     --sn / --snd the narrow scene
     --dot / --dot-dark  the six-part strip dots
   Art: the paintings in shared/heroes/*.webp and the marks in shared/marks/*.svg.
   Painted heroes (GWG BLD 755): add class gg-photo and set
     --pw the wide image   --pn the phone image   --px where the wide image sits on narrow screens
     --sky the color of the image's top edge (fills any gap above a full-width image)
   Add gg-full to show the wide image at full width, never cropped at the sides (The Grove).
   Marks (BLD 755) are painted tiles cut from these images, in an SVG with a rounded clip.
   ===================================================================== */
.gg-hero{position:relative;overflow:hidden;background:var(--band);color:#FFFFFF;min-height:560px;display:flex;flex-direction:column;justify-content:flex-start;isolation:isolate}
.gg-hero-scene{position:absolute;z-index:-1;bottom:0;height:560px;width:3600px;left:max(calc(50% - 1800px), calc(100% - 2400px));background-image:var(--sw);background-size:100% 100%;background-repeat:no-repeat}
.gg-hero-text{position:relative;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:64px 24px 48px 96px}
.gg-hero-text > *{max-width:520px}
.gg-hero-lock{display:flex;align-items:center;gap:18px}
.gg-hero-mark{width:64px;height:64px;flex:none;display:block;border-radius:14px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.gg-hero h1{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:68px;font-weight:700;line-height:1;letter-spacing:0;color:#FFFFFF}
.gg-hero h1 sup{font-size:22px;font-weight:500;vertical-align:top;margin-left:4px;position:relative;top:4px}
.gg-hero-by{margin:12px 0 0;font-family:'Barlow',system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--soft)}
.gg-hero-by a{color:inherit;text-decoration:none}
.gg-hero-by a:hover{text-decoration:underline}
.gg-hero-tag{margin:22px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;font-weight:700;line-height:1.15;color:#FFFFFF}
.gg-hero-sub{margin:10px 0 0;font-family:'Barlow',system-ui,sans-serif;font-size:18px;line-height:1.5;color:var(--soft)}
.gg-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.gg-hero-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:26px;font-family:'Barlow',system-ui,sans-serif;font-size:17px;font-weight:600;line-height:1.1;text-decoration:none;cursor:pointer;border:2px solid transparent;box-sizing:border-box}
.gg-hero-btn.main{background:#FFF8EC;color:var(--btn-ink);border-color:#FFF8EC}
.gg-hero-btn.main:hover{background:#FFFFFF;border-color:#FFFFFF}
.gg-hero-btn.line{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.78)}
.gg-hero-btn.line:hover{background:rgba(255,255,255,.12)}
.gg-hero-btn:focus-visible,.gg-hero a:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
.gg-hero-pro{margin:18px 0 0;font-family:'Barlow',system-ui,sans-serif;font-size:15px;line-height:1.5;color:var(--soft)}
.gg-hero-pro a{color:#FFFFFF;font-weight:600}

/* the house gold belongs to Grow With Grounded alone: its name in the top bar stays gold on every tool */
:root{--house:#8B5E1A}
:root[data-theme="dark"]{--house:#D9A847}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--house:#D9A847}}

/* six-part strip */
.gg-parts{border-bottom:1px solid var(--gg-line, rgba(128,112,90,.22))}
.gg-parts-in{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:22px 24px 22px 96px;box-sizing:border-box;list-style:none}
.gg-part{display:flex;gap:10px;align-items:flex-start;margin:0}
.gg-part::before{content:"";width:10px;height:10px;margin-top:6px;border-radius:5px;background:var(--dot);flex:none}
.gg-part b{display:block;font-family:'Barlow',system-ui,sans-serif;font-size:16px;font-weight:600;line-height:1.3;color:var(--gg-ink, inherit)}
.gg-part span{display:block;margin-top:2px;font-family:'Barlow',system-ui,sans-serif;font-size:14px;line-height:1.35;color:var(--gg-ink, inherit);opacity:.78}

/* dark mode: the band only 20% darker, the scene dimmer, the page fully dark */
:root[data-theme="dark"] .gg-hero{background:var(--band-dark)}
:root[data-theme="dark"] .gg-hero-scene{background-image:var(--swd)}
:root[data-theme="dark"] .gg-parts{--dot:var(--dot-dark)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gg-hero{background:var(--band-dark)}
  :root:not([data-theme="light"]) .gg-hero-scene{background-image:var(--swd)}
  :root:not([data-theme="light"]) .gg-parts{--dot:var(--dot-dark)}
}

/* tablets and phones: words first, then the tree scene, then the strip in two columns */
@media (max-width: 899px){
  .gg-hero{min-height:0}
  .gg-hero-text{padding:28px 24px 0}
  .gg-hero-text > *{max-width:560px}
  .gg-hero-mark{width:48px;height:48px;border-radius:11px}
  .gg-hero-lock{gap:14px}
  .gg-hero h1{font-size:50px}
  .gg-hero h1 sup{font-size:17px;top:3px}
  .gg-hero-by{margin-top:10px;font-size:13px}
  .gg-hero-tag{margin-top:18px;font-size:28px}
  .gg-hero-sub{margin-top:8px;font-size:16px}
  .gg-hero-actions{flex-direction:column;gap:12px;margin-top:22px}
  .gg-hero-btn{width:100%}
  .gg-hero-scene{position:relative;z-index:0;left:auto;bottom:auto;width:100%;height:330px;margin-top:24px;background-image:var(--sn);background-size:cover;background-position:center bottom}
  :root[data-theme="dark"] .gg-hero-scene{background-image:var(--snd)}
  .gg-parts-in{grid-template-columns:1fr 1fr;gap:14px 18px;padding:20px 24px}
  .gg-part b{font-size:15px}
  .gg-part span{font-size:13px}
}
@media (max-width: 899px) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gg-hero-scene{background-image:var(--snd)}
}
@media (max-width: 380px){
  .gg-hero h1{font-size:44px}
  .gg-hero-tag{font-size:25px}
}

/* =====================================================================
   Painted heroes (GWG BLD 755): laid out like the site pages. The title, tagline, and
   buttons sit centered over the picture with a soft shade at the top; the picture is
   anchored to the bottom so the tree shows below the words, on phones too.
   ===================================================================== */
:root .gg-hero.gg-photo{--shade:linear-gradient(180deg,rgba(18,11,6,.62) 0%,rgba(18,11,6,.46) 40%,rgba(18,11,6,.3) 56%,rgba(18,11,6,0) 74%);background:var(--sky,#2A1A0E);min-height:640px}
:root .gg-hero.gg-photo .gg-hero-scene{display:block;position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;background-color:var(--sky,#2A1A0E);background-image:var(--shade),var(--pw);background-size:cover,cover;background-position:center,var(--px,50%) bottom;background-repeat:no-repeat}
.gg-photo .gg-hero-text{padding:52px 20px 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.gg-photo .gg-hero-text > *{max-width:640px}
.gg-photo .gg-hero-lock,.gg-photo .gg-hero-actions{justify-content:center}
.gg-photo h1,.gg-photo .gg-hero-tag,.gg-photo .gg-hero-sub,.gg-photo .gg-hero-by{text-shadow:0 2px 10px rgba(0,0,0,.55)}
/* accessibility pass (BLD 756): a close dark halo keeps the smaller words and the outline button readable over bright paintings */
.gg-photo .gg-hero-sub,.gg-photo .gg-hero-by{color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 8px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.5)}
.gg-photo .gg-hero-btn.line{background:rgba(18,11,6,.42);border-color:#FFFFFF;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.gg-photo .gg-hero-btn.line:hover{background:rgba(18,11,6,.56)}
.gg-photo .gg-hero-mark{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 14px rgba(0,0,0,.35)}
/* the small helper line under the buttons gets its own stronger shade */
.gg-photo .gg-hero-pro{display:inline-block;padding:8px 16px;border-radius:14px;background:rgba(18,11,6,.52);color:#FFFFFF;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media (min-width: 901px){
  /* The Grove: the whole row of trees, never cropped at the sides */
  :root .gg-hero.gg-photo.gg-full{min-height:max(40vw,560px)}
  :root .gg-hero.gg-photo.gg-full .gg-hero-scene{background-size:cover,100% auto;background-position:center,center bottom}
}
@media (max-width: 900px){
  :root .gg-hero.gg-photo{min-height:700px}
  :root .gg-hero.gg-photo .gg-hero-scene{position:absolute;z-index:-1;height:100%;width:100%;margin:0;background-image:var(--shade),var(--pn,var(--pw));background-size:cover,cover;background-position:center,center bottom}
  .gg-photo .gg-hero-text{padding:32px 16px 24px}
  .gg-photo .gg-hero-actions{flex-direction:row;flex-wrap:wrap;gap:12px;width:100%;max-width:440px}
  .gg-photo .gg-hero-btn{flex:1 1 140px;width:auto;padding:0 14px;white-space:nowrap}
  .gg-photo .gg-hero-pro{font-size:14px;padding:7px 12px}
}
@media print{ .gg-hero,.gg-parts{display:none !important} }