/* success-stories.css — page-specific styles for success-stories.html
   Extracted from inline <style> by tools/css-consolidate.py. */

/* Hero: landscape Ana shot, dog dead-centre — default object-position works. */

/* Soft dark gradient so the white headline reads against the warm indoor scene. */
.ss-hero .wr-hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.5) 70%,rgba(0,0,0,0.85) 100%),linear-gradient(90deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.1) 60%,rgba(0,0,0,0) 100%);}

.ss-hero .wr-hero-content h1, .ss-hero .wr-hero-content p.lede{text-shadow:0 2px 18px rgba(0,0,0,0.55)}

/* Align the hero text styling with the home hero (.hero / .hero-inner):
   - H1 max font-size matches home (98px cap, not 86px)
   - Italic Fraunces accent uses gold (not gold-l) and 1.12em like home
   - Sub paragraph is plain sans 19px (not Fraunces italic),
     so the page leads with the same voice/typography as the homepage. */
.ss-hero h1{font-size:clamp(44px,7vw,98px);line-height:0.98}

.ss-hero h1 span{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'opsz' 144,'SOFT' 100;
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  font-size:1.12em;
  letter-spacing:-0.005em;
}

.ss-hero .wr-hero-content p.lede{
  font-family:var(--sans);
  font-style:normal;
  font-weight:400;
  font-size:19px;
  max-width:54ch;
  margin:0 0 36px;
  color:rgba(255,255,255,0.92);
  line-height:1.5;
  letter-spacing:0;
}

/* SUCCESS STORIES — intro ornament + gallery */
.ss-intro{text-align:center}

.ss-intro .ornament{width:54px;height:54px;margin:0 auto 28px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--green-d);box-shadow:0 4px 18px rgba(232,176,74,0.4)}

.ss-intro .ornament svg{display:block}

.ss-intro .heading{margin-bottom:28px;text-align:center}

.ss-intro .heading .eyebrow{justify-content:center}

.ss-intro h2 span{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 100;font-style:italic;font-weight:700;letter-spacing:-0.005em}

.ss-intro .body{max-width:62ch;margin:0 auto;text-align:left}

.ss-gallery{padding:clamp(60px,8vw,100px) var(--gutter) clamp(80px,11vw,140px);background:var(--paper)}

.ss-gallery .container{max-width:1240px}

/* Listing grid matches the home dogs section: 3-col with the same card chrome,
   so the wall of adopted dogs feels like a continuation of the home teaser. */
.ss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.4vw,36px)}

@media (max-width:880px){.ss-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:540px){.ss-grid{grid-template-columns:1fr}}

.ss-card{cursor:pointer;display:flex;flex-direction:column;background:var(--paper-2);border-radius:var(--r-lg);padding:14px;transition:all .25s ease;border:1px solid transparent;text-decoration:none;color:inherit}

.ss-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);background:var(--paper);border-color:var(--gold)}

.ss-photo{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3);position:relative;border-radius:var(--r-md)}

.ss-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}

.ss-card:hover .ss-photo img{transform:scale(1.05)}

.ss-status{position:absolute;top:14px;left:14px;padding:7px 14px;background:rgba(42,51,38,0.85);backdrop-filter:blur(6px);color:#fbf6e7;font:700 10px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;border-radius:999px}

.ss-status-done{background:rgba(42,51,38,0.85);color:#fbf6e7}

.ss-status-pending{background:var(--gold);color:var(--green-d)}

.ss-card h3{font-family:var(--slab);font-weight:800;font-size:26px;margin:18px 4px 4px;letter-spacing:-0.015em;color:var(--green-d)}

.ss-card p{font-size:15px;color:var(--ink-2);line-height:1.55;margin:0 4px 16px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.ss-card .meet{margin:auto 4px 6px;font:700 11px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--green-d);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:8px 14px;border-radius:999px;background:var(--paper);transition:all .2s ease}

.ss-card:hover .meet{background:var(--green);color:#fbf6e7}

.ss-footnote{margin-top:clamp(40px,5vw,64px);padding:24px 28px;background:#fff;border:1px dashed rgba(52,74,48,0.20);border-radius:var(--r-md);text-align:center}


/* === PA hero mobile restructure (auto, 2026-05-31) === prefix:wr (success-stories / .wr-hero) */
@media (max-width:980px){
  .wr-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;
  }
  .wr-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;
  }
  .wr-hero-bg img{
    position:absolute !important; inset:0 !important;
    width:100%; height:100% !important; object-fit:cover; object-position:center 30%;
  }
  .wr-hero > .container,
  .wr-hero > .wr-hero-content,
  .wr-hero .wr-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;
  }
  .wr-hero-eyebrow, .wr-hero .eyebrow{ display:none !important; }
  .wr-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 !important; color:var(--paper-w);
    font-size:clamp(26px,7vw,38px) !important; 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;
  }
  .wr-hero h1 .accent, .wr-hero h1 span{ color:var(--gold-l); }
  .wr-hero .lede, .wr-hero p.sub{
    margin:0 !important; padding:22px 22px 8px; max-width:none;
    background:var(--paper); color:#4a4a3d !important; font-size:14.5px; line-height:1.5; text-align:center;
    text-shadow:none !important;
  }
  .wr-hero .lede strong{ color:var(--ink); }
  .wr-hero .hero-actions, .wr-hero .actions, .wr-hero .wr-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%;
  }
  .wr-hero .btn-light{ background:transparent; border:1.5px solid var(--green-d); color:var(--green-d); }
  .wr-hero .btn-light:hover{ background:var(--green-d); color:var(--paper-w); }
  .wr-hero .hero-meta, .wr-hero .meta, .wr-hero .wr-hero-meta{ display:none !important; }
}

/* === PA hero mobile contrast/meta fix (auto, 2026-05-31b) === prefix:wr */
@media (max-width:980px){
  .wr-hero .lede, .wr-hero p.lede,
  .wr-hero p.sub, .wr-hero .sub{ color:#4a4a3d !important; text-shadow:none !important; }
  .wr-hero .lede strong, .wr-hero p.lede strong{ color:var(--ink) !important; }
  .wr-hero .attrib, .wr-hero .attribution{ color:var(--gold-d) !important; }
}