/* ==========================================================================
   THE UNITY CHURCH — ABOUT PAGE
   Page-specific section styles only. Loads after foundation.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Story (matches homepage's story language, expanded)
   ------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
}
.story-media { overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-16) clamp(1.5rem, 5vw, 5rem);
}
.story-copy h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-2); }
.story-copy p { max-width: 56ch; color: var(--ink-soft); }
.story-expression {
  margin-top: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
  max-width: 48ch;
}

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-media img { min-height: 320px; }
  .story-copy { padding: var(--sp-12) clamp(1.25rem, 6vw, 2rem); }
}

/* -------------------------------------------------------------------------
   Vision & Mission — two-column editorial, no boxed cards
   ------------------------------------------------------------------------- */
.tenets {
  padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem);
  max-width: 1200px;
  margin: 0 auto;
}
.tenets-head { text-align: center; margin-bottom: var(--sp-16); }
.tenets-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; }

.tenets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}
.tenet { padding-left: var(--sp-8); border-left: 1px solid var(--line); }
.tenet h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: var(--sp-4);
}
.tenet p { color: var(--ink-soft); font-size: var(--text-lg); line-height: 1.55; }
.tenet cite { display: block; margin-top: var(--sp-3); font-style: normal; font-size: var(--text-xs); color: var(--gold-deep); font-weight: 700; letter-spacing: 0.04em; }

@media (max-width: 800px) {
  .tenets-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* -------------------------------------------------------------------------
   Reasons for TUC — a flowing list, not identical bordered cards
   ------------------------------------------------------------------------- */
.reasons { background: var(--ink); color: var(--cream); padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); }
.reasons-inner { max-width: 1200px; margin: 0 auto; }
.reasons-head { max-width: 46ch; margin-bottom: var(--sp-12); }
.reasons-head h2 { color: var(--cream); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.reasons-head p { color: rgba(250, 246, 238, 0.75); }

.reasons-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6) var(--sp-12);
}
.reason-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.reason-item i { color: var(--gold-soft); font-size: 1rem; width: 1.2em; }
.reason-item p { color: rgba(250, 246, 238, 0.9); font-size: var(--text-base); }

@media (max-width: 800px) {
  .reasons-list { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Ministries directory — a legitimate grid (a listing, not decoration)
   ------------------------------------------------------------------------- */
.ministry-directory { padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); max-width: 1400px; margin: 0 auto; }
.ministry-directory-head { text-align: center; margin-bottom: var(--sp-12); }
.ministry-directory-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.ministry-directory-head p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto; }

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
}
.directory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.4s var(--ease-out-quint), border-color 0.3s ease;
}
.directory-card img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.directory-card h3 { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.directory-card span { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wine); }

@media (hover: hover) and (pointer: fine) {
  .directory-card:hover { transform: translateY(-4px); border-color: var(--gold); }
}

/* -------------------------------------------------------------------------
   CTA — this page's one committed, drenched moment
   ------------------------------------------------------------------------- */
.about-cta {
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%);
  padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.about-cta h2 { color: var(--cream); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-6); }