/* =============================================
   Easterseals Arkansas - Areas of Support + Who We Serve
   Area detail pages, the /areas-of-support/ archive, and the
   /who-we-serve/ audience hub. Builds on css/base.css + css/site.css tokens.
   Brand tokens only: navy #004473 headings, orange #cf4b04 CTAs/links,
   yellow #ffa300 accents, circular/rounded crops, 80px section rhythm.
   ============================================= */

/* Collection hubs (Areas of Support, Who We Serve) and area detail pages open
   with the shared .breadcrumb-bar trail and .people-intro title block
   (css/site.css). They were on the amber .hero-band plus a .page-intro
   (.col-intro) until 2026-10-21; .col-intro and .col-hero-intro went with it,
   because .people-intro--wide p already carried the 720px measure those
   classes were overridden to. The nav row survives: it is the only one of the
   four that a rule needs, and this is that rule. It is declared bare, with no
   .page-intro ancestor, so moving the markup under .people-intro did not
   change what it matches. */
.col-hero-nav {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ============================================================
   2026 Figma kit (shared across CPT templates)
   Split circular-photo hero, navy program panel, Related Articles
   band, and the themed (soft) final CTA. Class names are generic so
   People / Programs / Locations reuse them. The breadcrumb bar was
   part of this kit and now lives in css/site.css; see below.
   ============================================================ */

/* ---------- Breadcrumb bar ----------
   MOVED to css/site.css on 2026-10-21. It opens 116 pages and counting, and
   59 of the pages next in line for it load site.css but not this sheet, so a
   12px bar would have dragged 14.5 KB of area-hero, program-panel and
   related-articles rules onto each of them. Same move and same reasoning as
   .audience-badges, which came out of css/programs.css into site.css on
   2026-10-01. The component is unchanged; only its address is.
   .breadcrumb-sep and .breadcrumb-current went with it. */

/* ---------- Split circular-photo hero (photo left, copy right) ---------- */
.area-hero {
  padding: 56px 0 64px;
  background: var(--color-white);
}
.area-hero-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.area-hero--no-media .area-hero-inner {
  grid-template-columns: 1fr;
  max-width: 760px;
}
/* Circular photo: the site's one feature-circle treatment, an 8px Blue
   (--eas-blue, #007cb1) ring and no offset disc (iprov-agency/eas-easterseals#300,
   Casey 2026-10-29). It is the same ring as the .eas-img is-style-*-circle
   packages in css/site.css. scripts/generate_areas.py, generate_locations.py
   and ten hand-authored pages still emit area-hero-photo--ring-green, -blue
   and -orange. Those modifiers deliberately have no rule any more, so every
   one renders Blue. Do not bring back a per-modifier colour or the disc
   without a new decision. */
.area-hero-photo {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.area-hero-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 8px solid var(--eas-blue);
}
.area-hero-copy h1 {
  color: #007cb1; /* Blue title per Figma (4.66:1 on white) */
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 8px;
}
.area-hero-context {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-secondary); /* navy */
  margin: 0 0 16px;
}
/* The second selector is a tagline h3 inside a .prose column (the "Ripple
   Effect" heading on /about-us/our-future/). (0,2,1) beats `.prose h3` in
   css/pages.css (0,1,1: navy, 1.3rem, 28px/12px margins), so the h3 reads
   these declarations instead of a copy of them. */
.area-hero-tagline,
.prose h3.area-hero-tagline {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary); /* orange tagline */
  line-height: 1.4;
  margin: 0 0 18px;
}
.prose h3.area-hero-tagline { text-wrap: balance; }
.area-hero-desc {
  font-size: 1.125rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin: 0 0 26px;
}
.area-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* The copy column ends flush with its last child, so the copy centres on the
   photo whatever it ends with. Area and audience heroes end with
   .area-hero-ctas, which has no margin, so nothing changes there; a hero that
   ends with a description (/about-us/, eas-easterseals#142) loses the trailing
   26px. */
.area-hero-copy > :last-child { margin-bottom: 0; }

/* Sections land below the sticky site header when jumped to via anchor. */
.area [id] {
  scroll-margin-top: calc(var(--eas-header-h, 96px) + 24px);
}

/* ---------- Related programs grid (area detail) ---------- */
.area-programs {
  padding: var(--section-spacing) 0;
}
/* Figma navy panel holding the (photo) program cards. */
.area-programs--panel > .container {
  background: var(--color-secondary); /* navy #004473 */
  border-radius: 20px;
  padding: 56px clamp(24px, 4vw, 56px);
}
.area-programs--panel .text-sub {
  color: var(--color-accent); /* yellow eyebrow, 5:1 on navy */
}
.area-programs--panel .section-head h2 {
  color: var(--color-white);
}
.area-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.area-prog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.area-prog-card:only-child {
  flex-direction: row;
  max-width: 760px;
  width: 100%;
  margin-inline: auto;
}
.area-prog-card:only-child .area-prog-card-media {
  flex: 0 0 300px;
  aspect-ratio: auto;
}
.area-prog-card:only-child .area-prog-card-body {
  flex: 1 1 auto;
}
@media (max-width: 700px) {
  .area-prog-card:only-child {
    flex-direction: column;
    max-width: 420px;
  }
  .area-prog-card:only-child .area-prog-card-media {
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
  }
}
.area-prog-card:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.area-prog-card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.area-prog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.area-prog-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #002448 100%);
}
.area-prog-card-media--placeholder img {
  width: auto;
  height: auto;
  max-width: 62%;
  object-fit: contain;
  opacity: 0.9;
}
.area-prog-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 26px 24px;
}
.area-prog-card-eyebrow {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.area-prog-card-title {
  color: var(--color-secondary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
.area-prog-card-desc {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

/* ---------- Areas archive card grid ---------- */
.area-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.area-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.area-card:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.area-card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.area-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.area-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #002448 100%);
}
.area-card-media--placeholder img {
  width: auto;
  height: auto;
  max-width: 62%;
  object-fit: contain;
  opacity: 0.9;
}
.area-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 26px 24px;
}
.area-card-context {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.area-card-title {
  color: var(--color-secondary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
.area-card-desc {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

/* ---------- Who We Serve audience cards ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.audience-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.audience-card:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.audience-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.audience-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.audience-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #002448 100%);
}
.audience-card-media--placeholder img {
  width: auto;
  height: auto;
  max-width: 40%;
  object-fit: contain;
  opacity: 0.9;
}
.audience-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 30px 30px 32px;
}
.audience-card-title {
  color: var(--color-secondary);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 4px;
}
.audience-card-sub {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.audience-card-desc {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.7;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* ---------- Related Articles From the Blog (3-card band) ---------- */
.related-articles {
  background: #ffe3b3; /* brand pale-yellow ground */
}
.related-articles .section-head .text-sub {
  color: var(--color-secondary); /* navy eyebrow (orange fails 4.5:1 on pale-yellow) */
}
.related-articles .section-head h2 {
  color: var(--color-primary); /* orange heading (large text) */
}
.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.article-card:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}
.article-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.article-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #002448 100%);
}
.article-card-media--placeholder img {
  width: auto;
  height: auto;
  max-width: 55%;
  object-fit: contain;
  opacity: 0.9;
}
.article-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 22px 22px 24px;
}
.article-card-title {
  color: var(--color-secondary);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
.article-card-excerpt {
  font-size: 0.98rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

/* ---------- CTA banner button wrapper (base .cta-banner) ---------- */
.cta-banner-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Figma themed (soft) final CTA: light-gray ground, navy copy, orange button. */
.cta-banner--soft {
  background: var(--color-light); /* #f3f3f3 */
}
.cta-banner--soft h2 {
  color: var(--color-secondary);
}
.cta-banner--soft p {
  color: var(--color-text-body);
  opacity: 1;
}
/* Light yellow ground for a soft final CTA (iprov-agency/eas-easterseals#209,
   then #202 and #204): --color-cream #ffe3b3, the ground of the profile closing
   CTAs. Combined with .cta-banner--soft, which keeps the navy heading (8.14:1
   on cream) and the body-gray copy (6.08:1); the orange .btn-primary keeps its
   white label (4.51:1) and its fill meets the band at 3.62:1.
   scripts/generate_locations.py sets it on the 8 location pages and
   scripts/generate_areas.py on the 9 Areas of Support and 4 Who We Serve detail
   pages. The /who-we-serve/ hub renders the navy variant and is untouched.
   The Areas of Support and Who We Serve bands sat under a cream
   .related-articles, which is why they were held back in
   .specs/CTA-Yellow-Batch.md; that band now carries .related-articles--light
   below, so no two #ffe3b3 bands stack. */
.cta-banner--cream {
  background: var(--color-cream);
}

/* The pale-yellow band above a light yellow closing CTA steps off the cream
   (iprov-agency/eas-easterseals#199, #202, #204). Two #ffe3b3 bands stacked
   read as one slab and the closing CTA stops reading as a close, so the band
   above goes --color-light #f3f3f3. The same move, for the same reason, as
   `.staff-hero ~ .related-articles` (css/staff.css) already makes for the
   profile closing CTAs. A modifier set by scripts/generate_areas.py and
   scripts/generate_programs.py, so it lands on the 9 Areas of Support, 4 Who
   We Serve and 20 program pages; the 28 profile pages keep the staff.css
   sibling rule and scripts/generate_people.py is not touched.
   Measured on #f3f3f3: the navy eyebrow 9.12:1 and the orange heading 4.06:1
   (19px/700, large text, needs 3.0), both better than the 8.14:1 and 3.62:1
   they measured on the cream they leave. */
.related-articles--light {
  background: var(--color-light);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .area-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
    text-align: center;
  }
  .area-hero-photo { order: -1; }
  .area-hero-ctas { justify-content: center; }
  .area-card-grid,
  .related-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .audience-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .area-hero { padding: 36px 0 44px; }
  .area-hero-photo { max-width: 300px; }
  .area-programs--panel > .container { padding: 40px 22px; }
  .area-card-grid,
  .related-articles-grid {
    grid-template-columns: 1fr;
  }
}