/* 2026-06-07 (Step 7 reconcile): all brand hex -> tokens. Reconciled #5AACBF (lighter sky-teal hero accent) -> brand-teal + its rgba tints -> brand-teal rgb (74,143,160). Kept literal: rgba(247,243,237,x)=cream-primary alpha, rgba(255,255,255,.05)=white alpha. */
/* DEPLOY TARGET: SANDBOX (sandbox.improveequine.com) */
/*
 * Improve Equine Child Theme — about.css
 * Page: About (ID 50) · wrapper .ie-about
 * Phase 2 Step 2 — per-page CSS strip (2026-06-03)
 *
 * STRIPPED (now owned once by the universal layer in tokens.css):
 *   - font-family restatements (Manrope is inherited globally via theme.json)
 *   - .ie-lbl base + .ie-rule
 *   - .ie-h1 / .ie-h2 / .ie-h3 base
 *   - .ie-body base
 *   - .ie-section width  (now via --ie-section-max; set to 960px locally below)
 *   - .ie-btn-green / .ie-btn-outline
 *   - unused-on-this-page modifiers: .ie-h2--light, .ie-body--light
 *
 * DARK CONTEXT:
 *   The navy hero now uses the universal .ie-on-dark mechanism
 *   (page 50: <section class="ie-hero ie-on-dark">) — it is the only dark
 *   band holding a stripped, color-dependent heading (.ie-h1).
 *   Dark cards that float inside linen sections (states card, mantra,
 *   quote, dark philosophy card) keep their targeted text modifiers;
 *   the universal layer has no equivalent for a dark island in a light band.
 *
 * KEPT: every About-specific structure + the colored accents the universal
 *   layer doesn't define. Info-card label colors are scoped under
 *   .ie-info-card so .ie-on-dark's element selectors can't override them.
 */

/* --- Base --- */
/* Box-sizing only. The former blanket margin:0/padding:0 reset was removed
   2026-06-03 (clean-base): it clobbered the universal .ie-section centering
   (margin-inline:auto). Vertical spacing now comes from the universal
   .ie-h*/.ie-body rhythm plus the explicit rules below. */
.ie-about *,
.ie-about *::before,
.ie-about *::after {
  box-sizing: border-box;
}

.ie-about {
  width: 100%;
  --ie-section-max: 960px; /* preserve About's narrower section width */
}

.ie-about--dark   { background: var(--ie-color-brand-navy); }
.ie-about--forest { background: var(--ie-color-forest-deep); }
.ie-about--linen  { background: var(--ie-color-cream-primary); }

/* --- Label color variants (base .ie-lbl + .ie-rule now universal) --- */
.ie-lbl--teal  { color: var(--ie-color-brand-teal); }
.ie-lbl--green { color: var(--ie-color-sage); }
.ie-lbl--cream { color: rgba(247, 243, 237, 0.5); }

/* --- Heading / body accents the universal layer doesn't define --- */
.ie-h1 em { color: var(--ie-color-brand-teal); font-style: italic; }
.ie-h2 em { color: var(--ie-color-brand-teal); font-style: italic; }
.ie-h3--light { color: var(--ie-color-cream-primary); }
.ie-body a { color: var(--ie-color-brand-teal); text-decoration: underline; }

/* --- Small text (About-specific scale) --- */
.ie-small {
  font-size: 13px;
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
}
.ie-small--cream { color: rgba(247, 243, 237, 0.85); }
.ie-small--dim   { color: rgba(247, 243, 237, 0.55); }
.ie-small--muted { color: var(--ie-color-text-muted); }

/* --- Section modifiers (base .ie-section now universal) --- */
.ie-section--flush-bottom { padding-bottom: 0; }
.ie-section--cta {
  padding: 48px 32px 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

/* --- Hero (dark band; section carries .ie-on-dark) --- */
.ie-hero {
  background: var(--ie-color-brand-navy);
  padding: 60px 32px 56px;
}
.ie-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.ie-hero-text {
  display: flex;
  flex-direction: column;
}
.ie-info-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.ie-hero-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ie-founder-photo {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}

/* --- Info Cards (label colors scoped to beat .ie-on-dark p) --- */
.ie-info-card {
  border-radius: 3px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.05);
}
.ie-info-card--teal  { border-left: 3px solid var(--ie-color-brand-teal); }
.ie-info-card--green { border-left: 3px solid var(--ie-color-sage); }
.ie-info-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ie-info-card .ie-info-card-label--teal  { color: var(--ie-color-brand-teal); }
.ie-info-card .ie-info-card-label--green { color: var(--ie-color-sage); }

/* --- Video Feature --- */
.ie-video-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ie-video-feature--reverse {
  direction: rtl;
}
.ie-video-feature--reverse > * {
  direction: ltr;
}
.ie-tiktok-feature-wrap {
  display: flex;
  justify-content: center;
}
.ie-tiktok-feature-wrap .tiktok-embed {
  margin: 0 !important;
}
.ie-video-feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The column is align-items:stretch so the prose fills its width — but that also
   stretches a standalone button to full width. Pin buttons back to their label. */
.ie-video-feature-text .ie-btn-green,
.ie-video-feature-text .ie-btn-outline,
.ie-video-feature-text .ie-btn-teal {
  align-self: flex-start;
}

/* --- Origin / Farm Story --- */
.ie-origin-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}
.ie-origin-text {
  display: flex;
  flex-direction: column;
}

/* --- States & Farm Stats Sidebar (dark card in a linen section) --- */
.ie-states-card {
  background: var(--ie-color-brand-navy);
  border-radius: 4px;
  padding: 28px 24px;
  position: sticky;
  top: 80px;
}
.ie-states-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 24px;
}
.ie-state-badge {
  background: rgba(74, 143, 160, 0.1);
  border: 1px solid rgba(74, 143, 160, 0.25);
  color: var(--ie-color-brand-teal);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 100px;
}
.ie-farm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid rgba(247, 243, 237, 0.08);
  padding-top: 20px;
}
.ie-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ie-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ie-color-brand-teal);
  line-height: 1;
}
.ie-stat-label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(247, 243, 237, 0.5);
  line-height: 1.4;
}

/* --- Mantra Block (dark forest card) --- */
.ie-mantra-block {
  background: var(--ie-color-forest-deep);
  border-radius: 4px;
  padding: 56px 40px;
  text-align: center;
}
.ie-mantra-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--ie-color-cream-primary);
  line-height: 1.2;
  margin: 0 0 20px;
}
.ie-mantra-text em {
  color: var(--ie-color-sage);
  font-style: italic;
}
.ie-mantra-body {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(247, 243, 237, 0.65);
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto;
}

/* --- Good Hands --- */
.ie-good-hands-intro {
  margin-bottom: 40px;
}
.ie-tiktok-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.ie-tiktok-wrap {
  display: flex;
  justify-content: center;
}
.ie-tiktok-wrap .tiktok-embed {
  margin: 0 !important;
  width: 100% !important;
}
.ie-good-hands-cta {
  margin-top: 36px;
  text-align: center;
}

/* --- Philosophy Quote (dark navy card) --- */
.ie-quote-block {
  background: var(--ie-color-brand-navy);
  border-left: 4px solid var(--ie-color-brand-teal);
  padding: 28px 32px;
  border-radius: 3px;
  margin-top: 8px;
}
.ie-quote-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ie-color-cream-primary);
  font-weight: 300;
  margin: 0;
}

/* --- Philosophy Cards --- */
.ie-phil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ie-phil-card {
  background: var(--ie-color-card-bg);
  border: 1px solid var(--ie-color-cream-border);
  border-radius: 3px;
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.ie-phil-card--dark {
  background: var(--ie-color-forest-deep);
  border-radius: 3px;
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.ie-phil-icon {
  font-size: 22px;
}
.ie-phil-body {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ie-color-text-tertiary);
  font-weight: 300;
  margin: 0;
}
.ie-phil-body a {
  color: var(--ie-color-brand-teal);
  text-decoration: underline;
}
.ie-phil-body--light {
  color: rgba(247, 243, 237, 0.75);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .ie-hero-grid              { grid-template-columns: 1fr; gap: 32px; }
  .ie-hero-photo             { order: -1; }
  .ie-origin-grid            { grid-template-columns: 1fr; }
  .ie-video-feature          { grid-template-columns: 1fr; }
  .ie-video-feature--reverse { direction: ltr; }
  .ie-tiktok-grid            { grid-template-columns: 1fr; }
  .ie-phil-grid              { grid-template-columns: 1fr; }
  .ie-states-card            { position: static; }
  .ie-farm-stats             { grid-template-columns: 1fr 1fr; }
  .ie-mantra-block           { padding: 40px 24px; }
  .ie-section--cta           { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .ie-section { padding: 40px 20px; }
  .ie-hero    { padding: 40px 20px 36px; }
}