/* get-involved.css — page-specific styles for get-involved.html
   Copy of pennysark-theme/assets/css/get-involved.css so the gi-*
   layout (which mostly lives in global.css) renders exactly like
   the live page. PREVIEW-ONLY CHANGE: flush hero (see end). */

/* ============================================
   GET INVOLVED HUB — page-specific styles
   ============================================ */
/* Universal Fraunces accent — all h2 italic spans on the page,
   matching the homepage's heading-accent treatment exactly. */
.gi-intro h2 span,
.gi-dogs-head h2 span,
.gi-pillar-head h2 span,
.gi-section .heading h2 span,
.gi-newsletter h2 span,
.gi-heading-accent{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-variation-settings:'opsz' 144,'SOFT' 100;
  font-style:italic;
  font-weight:700;
  letter-spacing:-0.005em;
}

.gi-hero{position:relative;min-height:clamp(560px,72vh,720px);overflow:hidden;background:#0a1408;margin:0;border-radius:var(--r-xl)}

.gi-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:saturate(0.96) contrast(1.04)}

.gi-hero-content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(72px,10vh,120px) var(--gutter);color:#fbf6e7;display:flex;flex-direction:column;justify-content:center;min-height:clamp(560px,72vh,720px)}

.newsletter{background:#3a2516 url('../images/external/pexels/pexels-photo-5840852-8b31b20b.jpeg') center center/cover no-repeat;position:relative;isolation:isolate}

/* ============================================
   PREVIEW-ONLY CHANGE 2 — FLUSH HERO
   Neutralise the gold-framed padding/margin and the rounded
   corners so the hero image runs full-bleed edge-to-edge.
   ============================================ */
.gi-hero-zone{padding:0;margin:0;border-radius:0}
.gi-hero{margin:0;border-radius:0}

/* ============================================
   HOME-STYLE "WAYS TO HELP" PHOTO CARDS
   Replicated verbatim from index.css so the Get Involved option
   cards (#other 4-up and #niche 2-up) render identically to the
   homepage Help cards: photo + forest-green band + gold Fraunces
   italic title + light description + gold round arrow.
   get-involved.html does NOT load index.css, so the styles are
   self-contained here.
   ============================================ */
.help-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.help-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1024px){ .help-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .help-grid, .help-grid.cols-2{ grid-template-columns:1fr; } }

.help-card{ position:relative; display:block; aspect-ratio:5/4; padding:0; border:0; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; isolation:isolate; background:transparent; min-height:0; box-shadow:0 6px 22px rgba(40,40,30,.14); transition:transform .25s ease, box-shadow .25s ease; }
.help-card:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(40,40,30,.22); border-color:transparent; }
.help-card .img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .55s ease; z-index:0; }
.help-card:hover .img{ transform:scale(1.04); }
.help-card .band{ position:absolute; left:0; right:0; bottom:0; padding:74px 24px 22px; background:linear-gradient(180deg, rgba(30,58,42,0) 0%, rgba(30,58,42,.45) 30%, rgba(30,58,42,.92) 65%, var(--green-d) 82%, var(--green-d) 100%); color:var(--paper-w); z-index:1; }
.help-card h3{ font-family:var(--serif-accent); font-weight:600; font-size:26px; line-height:1.08; margin:0 0 8px; padding-right:48px; color:var(--paper-w); letter-spacing:0; }
.help-card h3 em{ font-style:italic; color:var(--gold-l); font-weight:500; }
.help-card p{ font-family:var(--serif-body); font-style:italic; font-size:13px; line-height:1.5; margin:0; padding-right:54px; max-width:34ch; color:rgba(251,246,231,.92); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.help-card .arrow-link{ position:absolute; right:18px; bottom:18px; width:36px; height:36px; border-radius:50%; background:var(--yellow); color:var(--green-d); display:inline-flex; align-items:center; justify-content:center; padding:0; font-size:0; gap:0; margin-top:0; box-shadow:0 4px 12px rgba(30,58,42,.30); transition:background .2s ease, transform .25s ease; z-index:2; }
.help-card .arrow-link::after{ content:"\203A"; font-size:18px; font-weight:700; }
.help-card:hover .arrow-link{ background:var(--gold); transform:translateX(3px); color:var(--green-d); }

/* ============================================
   PREVIEW CHANGE — option section backgrounds
   #other = deep gold (--gold-d); #niche = dark forest (--green-d).
   Text flipped so it stands out on each.
   ============================================ */
#other{ background:var(--green-d); position:relative; isolation:isolate; overflow:hidden; }
#niche{ background:var(--paper); }

/* #other section: decorative yellow paw print on the green gradient */
#other::before{
  content:""; position:absolute; top:-50px; right:-40px; width:360px; height:360px; z-index:0; pointer-events:none;
  background:var(--yellow);
  -webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;
  mask:url('../images/paw-only.svg') no-repeat center/contain;
  opacity:0.38; transform:rotate(14deg);
}
#other .container{ position:relative; z-index:1; }

/* Green section ("Time, talent, or a will"): cream text + gold accent to stand out on green */
#other .gi-pillar-head h2,
#other .gi-pillar-head p{ color:var(--paper-w); }
#other .gi-pillar-head h2 span,
#other .gi-pillar-head .eyebrow{ color:var(--gold-l); }
#other .gi-pillar-head .eyebrow::before{ background:var(--gold-l); }
#other .help-card{ box-shadow:0 12px 32px rgba(0,0,0,0.32); }

/* Forest section ("Two more worth knowing about"): cream text + gold accent on forest */
#niche .gi-pillar-head h2,
#niche .gi-pillar-head p{ color:var(--green-d); }
#niche .gi-pillar-head h2 span{ color:var(--green-l); }
#niche .gi-pillar-head .eyebrow{ color:var(--gold-d); }
#niche .gi-pillar-head .eyebrow::before{ background:var(--gold-d); }
#niche .help-card{ box-shadow:0 10px 28px rgba(42,51,38,0.16); aspect-ratio:1/1; }

/* ============================================
   PREVIEW CHANGE — clean up the subscribe / newsletter box
   Flat gold band, no inner card box/border/shadow, simple pill form.
   ============================================ */
.newsletter{ background:var(--gold); }
.newsletter::before{ content:none; }
.newsletter .container{ background:transparent; border:0; box-shadow:none; border-radius:0; }
.newsletter .eyebrow, .newsletter h2, .newsletter h2 span, .newsletter p{ color:var(--green-d); text-shadow:none; }
.newsletter .eyebrow::before{ background:var(--green-d); }
.newsletter form{ display:flex; flex-wrap:nowrap; gap:8px; align-items:center; background:var(--paper-w); border:0; box-shadow:0 6px 20px rgba(40,40,30,0.12); padding:6px; border-radius:999px; }
.newsletter input{ flex:1 1 0; min-width:40px; background:transparent; border:0; outline:0; color:var(--green-d); }
.newsletter button[type="submit"]{ flex:0 0 auto; background:var(--green); color:var(--paper-w); height:auto; padding:13px 22px; border-radius:999px; font-family:var(--slab); font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:8px; }

/* (#other cards reverted to their photos; the section background now
   carries the green gradient + yellow paw print instead.) */

/* ============================================
   MOBILE READABILITY + TAP TARGETS (<=640px)
   Lifts page-controlled text below 14px up to readable size and
   ensures interactive controls hit a 44px minimum touch target.
   Scoped tightly to selectors owned by this file so desktop is
   untouched.
   ============================================ */
@media (max-width:640px){
  /* Photo-card description: 13px -> 14px for mobile readability */
  .help-card p{ font-size:14px; line-height:1.55; }
  /* Newsletter submit button: 12px -> 14px + 44px min tap target */
  .newsletter button[type="submit"]{
    font-size:14px;
    min-height:44px;
    padding:12px 22px;
  }
  /* Newsletter email input: ensure comfortable tap target too */
  .newsletter input{ min-height:44px; font-size:16px; }
  .newsletter form{ padding:5px; }
  /* Ease the strict 5/4 aspect on small screens so 1-col cards
     don't grow enormous and so the band text has breathing room */
  .help-card{ aspect-ratio:auto; min-height:280px; }
  #niche .help-card{ aspect-ratio:auto; min-height:280px; }
  .help-card .band{ padding:64px 20px 20px; }
  .help-card h3{ font-size:22px; padding-right:44px; }
  .help-card p{ padding-right:44px; }
  /* Arrow button: bump to 44px so it meets tap-target minimum */
  .help-card .arrow-link{ width:44px; height:44px; right:14px; bottom:14px; }
  .help-card .arrow-link::after{ font-size:20px; }
}


/* === PA hero mobile restructure (auto, 2026-05-31) === prefix:gi (get-involved, gold zone neutralised) */
@media (max-width:980px){
  .gi-hero-zone{ padding:0 !important; background:var(--paper) !important; }
  .gi-hero{
    display:flex; flex-direction:column;
    min-height:0 !important; height:auto !important;
    padding:0 !important; background:var(--paper);
    position:relative; overflow:hidden; align-items:stretch !important;
  }
  .gi-hero-bg{
    position:relative !important; inset:auto !important; z-index:auto !important;
    width:100%; aspect-ratio:4/3; height:auto !important; order:1; flex:0 0 auto;
  }
  .gi-hero-bg img{
    position:absolute !important; inset:0 !important;
    width:100%; height:100% !important; object-fit:cover; object-position:center 30%;
  }
  .gi-hero > .container,
  .gi-hero > .gi-hero-content,
  .gi-hero .gi-hero-content{
    position:static !important; inset:auto !important;
    padding:0 !important; max-width:100%; width:100%; margin:0;
    background:var(--paper); color:var(--ink);
    order:2; flex:1 1 auto; min-height:0 !important; display:block !important;
  }
  .gi-hero-eyebrow, .gi-hero .eyebrow{ display:none !important; }
  .gi-hero h1{
    position:absolute !important; top:37.5vw; left:0; right:0; transform:translateY(-50%);
    margin:0 !important; padding:0 24px; max-width:none; text-align:center; color:var(--paper-w);
    font-size:clamp(26px,7vw,38px); line-height:1.1;
    text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5); z-index:3;
  }
  .gi-hero h1 .accent, .gi-hero h1 span{ color:var(--gold-l); }
  .gi-hero .lede, .gi-hero p.sub{
    margin:0 !important; padding:22px 22px 8px; max-width:none;
    background:var(--paper); color:#4a4a3d; font-size:14.5px; line-height:1.5; text-align:center;
  }
  .gi-hero .lede strong{ color:var(--ink); }
  .gi-hero .hero-actions, .gi-hero .actions, .gi-hero .gi-hero-actions{
    margin:0 !important; padding:0 22px 24px; background:var(--paper);
    display:flex; flex-direction:row; flex-wrap:wrap; gap:10px;
    align-items:center; justify-content:center; width:100%;
  }
  .gi-hero .btn-light{ background:transparent; border:1.5px solid var(--green-d); color:var(--green-d); }
  .gi-hero .btn-light:hover{ background:var(--green-d); color:var(--paper-w); }
  .gi-hero .hero-meta, .gi-hero .meta, .gi-hero .gi-hero-meta{
    position:absolute; top:calc(75vw - 34px); left:50%; right:auto; bottom:auto; transform:translateX(-50%);
    margin:0 !important; padding:5px 14px; background:rgba(0,0,0,.34);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:999px;
    font-family:'Lora',Georgia,serif; font-style:italic; font-size:11px;
    color:rgba(251,246,231,.92); z-index:3; display:inline-flex; gap:5px; white-space:nowrap;
  }
  .gi-hero .who{ color:var(--gold-l); font-weight:600; }
}


/* === PA hero mobile contrast/meta fix (auto, 2026-05-31b) === prefix:gi */
@media (max-width:980px){
  /* Lede/quote dark on the cream band (global .X-hero p.lede sets a light
     colour with element-level specificity; override with !important). */
  .gi-hero .lede, .gi-hero p.lede,
  .gi-hero p.sub, .gi-hero .sub,
  .gi-hero blockquote, .gi-hero .quote{ color:#4a4a3d !important; }
  .gi-hero .lede strong, .gi-hero p.lede strong{ color:var(--ink) !important; }
  /* Attribution / credit lines readable on cream */
  .gi-hero .attrib, .gi-hero .attribution,
  .gi-hero .credit, .gi-hero .source{ color:var(--gold-d) !important; }
  /* Hide the decorative caption pill on mobile (overflows on longer metas). */
  .gi-hero .hero-meta, .gi-hero .meta, .gi-hero .gi-hero-meta{ display:none !important; }
}