/* ============================================
   About page — editorial story layout.
   Extends style.css (tokens never redefined).
   ============================================ */

/* ── Story opener: offset image + lead copy ── */
.about-opener {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--space-5);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-section) 5rem;
}

.about-opener .about-image-wrap img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* deepen the existing ::after frame motif */
.about-opener .about-image-wrap::after {
  border-color: var(--sage-dark);
  bottom: -22px;
  right: -22px;
}

.about-lead h2 {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
  max-width: 16ch;
}
.about-lead p { color: var(--gray); margin-bottom: var(--space-2); }
.about-lead em { color: var(--sage-dark); font-style: italic; }

/* ── Mission band: large pull-quote scripture ── */
.about-mission { text-align: center; }
.about-mission .mission-copy {
  max-width: 680px;
  margin: 0 auto var(--space-4);
}

.about-pullquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  line-height: 1.35;
  color: var(--charcoal);
  max-width: 18ch;
  margin: 0 auto;
}
.about-pullquote cite {
  display: block;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-2);
}

/* ── Values: editorial cards, not uniform flat tiles ── */
.about-values .value-item {
  text-align: left;
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--blush);
  transition: transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.about-values .value-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.about-values .value-icon { font-size: 2rem; margin-bottom: var(--space-1); }

/* ── Behind-the-scenes: bento, not a flat 4-col strip ──
   3-col grid with content-sized rows (NOT `1fr` auto-rows, which collapses
   and slivered the wide tile). Each frame owns a 1:1 aspect-ratio so no box
   can sliver and none shifts on reveal. 8 photos + a 2x2 lead tile (4 cells)
   total 12 cells = exactly 4 rows x 3 cols, so there is never a grid hole. */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 12px;
}
.about-gallery .frame {
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  aspect-ratio: 1 / 1;
}
.about-gallery .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.about-gallery .frame:hover img,
.about-gallery .frame:focus-within img { transform: scale(1.04); }
/* lead tile spans 2x2 but stays square — scale contrast without slivering */
.about-gallery .frame.wide {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
}

/* ── CTA close ── */
.about-cta {
  background: var(--blush);
  text-align: center;
}
.about-cta h2 { margin-bottom: var(--space-2); }
.about-cta p { color: var(--gray); max-width: 480px; margin: 0 auto var(--space-4); }
.about-cta .about-cta-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .about-opener {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-4);
    gap: var(--space-5);
  }
  .about-lead h2 { max-width: none; }
}

@media (max-width: 768px) {
  .about-values .values-grid { grid-template-columns: 1fr; }
  /* 2 cols: lead drops to a normal square tile so 8 squares tile into 4
     rows exactly — no grid hole, no sliver. */
  .about-gallery { grid-template-columns: repeat(2, 1fr); }
  .about-gallery .frame.wide {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1 / 1;
  }
}

/* ── Reduced motion: no hover/focus lift or zoom ── */
@media (prefers-reduced-motion: reduce) {
  .about-values .value-item:hover,
  .about-gallery .frame:hover img,
  .about-gallery .frame:focus-within img { transform: none !important; }
}