/*
 * AYU Foundation Child Theme — ayu-pages.css
 * Phase 2 shared internal-page components (breadcrumb, page-hero families A-E,
 * flag panels, donate tiles, form grid, contact paths, related-article cards).
 * Built entirely from ayu-core.css tokens — no new colors/radii/shadows introduced.
 * Ported unchanged from the approved prototype's pages.css.
 */

/* AYU Foundation — Internal page components (Phase 2)
   Built entirely from locked Phase 1 tokens: no new colors, radii, shadow levels,
   or type sizes are introduced here — only new compositions of existing ones. */

/* ============ BREADCRUMB ============ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--ayu-blue-accessible); font-weight: var(--fw-medium); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb [aria-current="page"] { color: var(--color-text-primary); font-weight: var(--fw-semibold); }

/* ============ PAGE HERO FAMILIES ============ */

/* Shared base for every internal hero */
.page-hero {
  position: relative;
  padding-block: var(--space-2xl) var(--space-xl);
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: var(--z-content); }

/* Family B — Compact service hero: short band, eyebrow + H1 + dek + icon badge, no photo */
.page-hero--compact { padding-block: var(--space-2xl) var(--space-lg); }
.page-hero--compact .page-hero__row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.page-hero--compact .page-hero__text { flex: 1 1 480px; }
.page-hero--compact .page-hero__badge {
  flex: none;
  width: 96px; height: 96px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.page-hero--compact .page-hero__badge svg { width: 44px; height: 44px; }
.page-hero__dek { max-width: 58ch; color: var(--color-text-secondary); margin-top: var(--space-sm); }

/* Family A — Editorial split: text + one quiet photo, calmer than the homepage hero */
.page-hero--editorial .split { align-items: center; }
.page-hero--editorial .page-hero__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}
.page-hero--editorial .page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Family C — Photo-led (rounded frame, no organic clip — that stays a homepage-only signature) */
.page-hero--photo-led .split { align-items: center; }
.page-hero--photo-led .page-hero__frame { position: relative; }
.page-hero--photo-led .page-hero__frame-photo {
  border-radius: var(--radius-frame);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
}
.page-hero--photo-led .page-hero__frame-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo-led .page-hero__ribbon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Family D — Illustration-led educational hero */
.page-hero--illustration .split { align-items: center; }
.page-hero--illustration .page-hero__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero--illustration .page-hero__illustration svg { width: 100%; max-width: 440px; height: auto; }

/* Family E — Mission/conversion hero: soft background, statement, single strong CTA */
.page-hero--conversion {
  text-align: center;
  background: var(--ayu-pale-lavender);
}
.page-hero--conversion .container--narrow { position: relative; z-index: 1; }
.page-hero--conversion .page-hero__ribbon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.page-hero--conversion h1 { margin-top: var(--space-sm); }
.page-hero--conversion .page-hero__dek { margin-inline: auto; margin-top: var(--space-md); }
.page-hero--conversion .btn { margin-top: var(--space-lg); }

@media (max-width: 900px) {
  .page-hero--compact .page-hero__row { flex-direction: column; align-items: flex-start; }
}

/* ============ CONTENT REQUIRED / DATA REQUIRED / IMAGE REQUIRED PANEL ============ */
/* Phase-2-only documentation component — visually distinct so it can never be mistaken
   for real site content, reusing the same "flag" language as the design-system's
   counter-demo component for consistency. */
.flag-panel {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background: var(--ayu-pale-blue);
  border: 1.5px dashed var(--ayu-blue-accessible);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin-block: var(--space-lg);
}
.flag-panel svg { flex: none; width: 24px; height: 24px; color: var(--ayu-blue-accessible); margin-top: 2px; }
.flag-panel__label {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ayu-blue-accessible);
  margin-bottom: var(--space-3xs);
}
.flag-panel p { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.flag-panel--data { background: var(--ayu-cream); border-color: var(--ayu-coral-accessible); }
.flag-panel--data .flag-panel__label { color: var(--ayu-coral-accessible); }
.flag-panel--data svg { color: var(--ayu-coral-accessible); }
.flag-panel--image { background: var(--ayu-pale-lavender); border-color: var(--ayu-purple-light); }
.flag-panel--image .flag-panel__label { color: var(--ayu-purple); }
.flag-panel--image svg { color: var(--ayu-purple); }

/* ============ QUIET PATHWAY CARDS (For Families) ============ */
/* Same card mechanics as the homepage's purple pathway cards, but in the restrained
   blue/lavender-only palette this section calls for — no orange "ask," no purple band. */
.pathway-cards--quiet { background: none; padding: 0; }
.pathway-cards--quiet .pathway-card {
  background: var(--ayu-white);
  border: 1px solid var(--border-color-soft);
  color: var(--color-text-primary);
}
.pathway-cards--quiet .pathway-card:hover { border-color: var(--ayu-blue-accessible); box-shadow: var(--shadow-md); }
.pathway-cards--quiet .pathway-card h3 { color: var(--ayu-purple); }
.pathway-cards--quiet .pathway-card p { color: var(--color-text-secondary); }
.pathway-cards--quiet .icon-chip { background: rgba(11,110,153,0.10); color: var(--ayu-blue-accessible); }

/* ============ DEMO CARD (Resources hub) ============ */
.demo-card {
  position: relative;
  background: var(--ayu-white);
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.demo-card h4 { color: var(--ayu-ink-soft); }
.demo-card p { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }

/* ============ DONATION AMOUNT TILES (visual only, no logic) ============ */
.donate-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.donate-tile {
  height: var(--btn-height-lg);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--ayu-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--ayu-purple);
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-standard), background-color var(--duration-micro) var(--ease-standard);
}
.donate-tile:hover, .donate-tile:focus-visible { border-color: var(--ayu-purple); background: var(--ayu-pale-lavender); }
.donate-tile--selected { border-color: var(--ayu-coral-accessible); background: rgba(179,59,31,0.06); color: var(--ayu-coral-accessible); }
.donate-toggle { display: inline-flex; border: 1.5px solid var(--border-color); border-radius: var(--radius-pill); padding: 4px; }
.donate-toggle button {
  border: none; background: none;
  padding: var(--space-2xs) var(--space-lg);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.donate-toggle button[aria-pressed="true"] { background: var(--ayu-purple); color: #fff; }
@media (max-width: 480px) { .donate-tiles { grid-template-columns: repeat(2, 1fr); } }

/* ============ SIMPLE PLACEHOLDER FORM (visual only across Donate/Volunteer/Contact) ============ */
.form-grid { display: grid; gap: var(--space-md); }
.form-field label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--ayu-purple);
  margin-bottom: var(--space-3xs);
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  background: var(--ayu-white);
  font-size: var(--fs-body);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--ayu-blue-accessible);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }

/* ============ CONTACT PATH CARDS ============ */
.contact-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 720px) { .contact-paths { grid-template-columns: 1fr; } }

/* ============ RELATED SERVICES STRIP ============ */
.related-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.related-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color-soft);
  background: var(--ayu-white);
  transition: box-shadow var(--duration-card) var(--ease-standard), transform var(--duration-card) var(--ease-standard);
}
.related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.related-card .icon-chip { width: 48px; height: 48px; flex: none; }
.related-card .icon-chip svg { width: 24px; height: 24px; }
.related-card h5 { color: var(--ayu-purple); }
.related-card span.link-arrow { margin-top: var(--space-3xs); }