/* ==========================================================================
   Our History Page
   Location: assets/css/history.css
   Enqueued only on the `template-history.php` page template (the
   actual page behind the "About" dropdown's "History" submenu item —
   see template-history.php's file comment for why there's no
   standalone "/about" page).

   The opening quote/story section and the Mission & Vision cards were
   built to match a specific reference design (dark-navy "Our Mission"
   card beside a gold-gradient "Our Vision" card, large gold pull-quote,
   white icon circles). That reference uses a dark navy + metallic gold
   pairing distinct from the site-wide Ancient Red design system in
   variables.css, so — same pattern already established by header.css
   for its own pixel-matched reference — the handful of colors that
   reference needs are scoped to this file as their own tokens rather
   than overwriting the global palette. Everything else on this page
   (section backgrounds, card grids, buttons) reuses the existing
   design system as-is.

   Class names below keep their original "lgm-about-*" prefix (from
   when this was planned as a standalone About Us page) rather than
   "lgm-history-*" — purely cosmetic, and renaming ~50 selectors for a
   label-only move carries real regression risk for no visible benefit.
   ========================================================================== */

:root {
  --lgm-about-navy: #0B1F3A;
  --lgm-about-navy-light: #16314F;
  --lgm-about-gold: #C8A951;
  --lgm-about-gold-deep: #9C7A2E;
}

/* ==========================================================================
   Page header
   ========================================================================== */

.lgm-about-page-header {
  padding-block: var(--lgm-space-2xl) var(--lgm-space-xl);
  background: linear-gradient(135deg, var(--lgm-about-navy) 0%, var(--lgm-about-navy-light) 65%, var(--lgm-about-gold-deep) 140%);
  background-size: cover;
  background-position: center;
  text-align: center;
  color: var(--lgm-white);
}

/* Optional background photo (Customizer → About Page → "Page Header
   Background Photo"): layered under the same navy/gold gradient as a
   semi-transparent color wash, so any uploaded photo stays legible as
   a backdrop instead of fighting the white text on top of it. */
.lgm-about-page-header--photo {
  background-image:
    linear-gradient(135deg, rgba(11, 31, 58, 0.82) 0%, rgba(22, 49, 79, 0.78) 65%, rgba(156, 122, 46, 0.72) 140%),
    var(--lgm-about-header-bg-url, none);
}

.lgm-about-page-header .lgm-section-label {
  color: var(--lgm-about-gold);
}

.lgm-about-page-header h1 {
  color: var(--lgm-white);
  margin-bottom: var(--lgm-space-sm);
}

.lgm-about-page-header p {
  color: rgba(255, 255, 255, 0.88);
  max-width: var(--lgm-text-width);
  margin-inline: auto;
}

/* ==========================================================================
   Quote + Our Story
   ========================================================================== */

.lgm-about-quote-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lgm-space-2xl);
  align-items: start;
}

.lgm-about-quote {
  margin: 0;
  padding-top: var(--lgm-space-sm);
}

.lgm-about-quote-mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--lgm-about-gold);
  margin-bottom: -0.5rem;
}

.lgm-about-quote p {
  color: var(--lgm-about-navy);
  font-weight: 800;
  font-size: clamp(1.375rem, 2vw + 0.75rem, 1.875rem);
  line-height: 1.35;
  margin: 0 0 var(--lgm-space-sm);
}

.lgm-about-quote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--lgm-dark-grey);
}

.lgm-about-story p {
  margin: 0 0 var(--lgm-space-sm);
}

.lgm-about-story-sitename {
  color: var(--lgm-about-navy);
  text-decoration: underline;
  text-decoration-color: var(--lgm-about-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Mission & Vision cards
   ========================================================================== */

.lgm-about-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lgm-space-lg);
}

.lgm-about-mv-card {
  padding: var(--lgm-space-lg);
  border-radius: var(--lgm-radius-card);
  box-shadow: var(--lgm-shadow-card);
  position: relative;
  overflow: hidden;
}

.lgm-about-mv-card h2 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: var(--lgm-space-md) 0 var(--lgm-space-sm);
}

.lgm-about-mv-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

.lgm-about-mv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lgm-white);
  box-shadow: var(--lgm-shadow-sm);
}

.lgm-about-mv-icon .lgm-icon {
  width: 26px;
  height: 26px;
}

/* Optional background photo (Customizer → About Page → "Our Mission/
   Vision Card Background Photo"): a low-opacity ::before layer rather
   than the card's own background-image, so the navy/gold gradient
   underneath always stays the dominant color and the photo reads as
   a faint texture — matching the control's "sits faintly behind the
   card" description — regardless of how bright the uploaded photo is.
   Icon/heading/text are lifted above it with z-index so they're never
   dimmed along with the photo. */
.lgm-about-mv-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lgm-about-mv-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  z-index: 0;
}

.lgm-about-mv-card .lgm-about-mv-icon,
.lgm-about-mv-card h2,
.lgm-about-mv-card p {
  position: relative;
  z-index: 1;
}

.lgm-about-mv-card--mission {
  background: linear-gradient(160deg, var(--lgm-about-navy) 0%, var(--lgm-about-navy-light) 100%);
  color: var(--lgm-white);
}

.lgm-about-mv-card--mission h2 {
  color: var(--lgm-about-gold);
}

.lgm-about-mv-card--mission p {
  color: rgba(255, 255, 255, 0.88);
}

.lgm-about-mv-card--mission .lgm-about-mv-icon {
  color: var(--lgm-about-gold);
}

.lgm-about-mv-card--vision {
  background: linear-gradient(155deg, var(--lgm-about-gold) 0%, var(--lgm-about-gold-deep) 100%);
  color: var(--lgm-about-navy);
}

.lgm-about-mv-card--vision h2 {
  color: var(--lgm-about-navy);
}

.lgm-about-mv-card--vision p {
  color: rgba(11, 31, 58, 0.85);
}

.lgm-about-mv-card--vision .lgm-about-mv-icon {
  color: var(--lgm-about-gold);
}

/* ==========================================================================
   What We Believe — simple text cards on a gold accent
   ========================================================================== */

.lgm-about-believe-grid {
  display: grid;
  gap: var(--lgm-space-md);
  grid-template-columns: repeat(3, 1fr);
}

.lgm-about-believe-card {
  padding: var(--lgm-space-md);
  border-top: 3px solid var(--lgm-about-gold, var(--lgm-gold));
}

.lgm-about-believe-card h3 {
  color: var(--lgm-about-navy, var(--lgm-heading-color));
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.lgm-about-believe-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--lgm-dark-grey);
}

/* ==========================================================================
   Our Ministries (preview grid — links to the full Ministries page)
   ========================================================================== */

.lgm-about-ministries-desc {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--lgm-space-lg);
}

.lgm-about-ministries-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lgm-space-sm);
}

.lgm-about-ministry-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--lgm-radius-pill);
  background: var(--lgm-white);
  box-shadow: var(--lgm-shadow-sm);
  color: var(--lgm-about-navy, var(--lgm-heading-color));
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform var(--lgm-transition-fast), box-shadow var(--lgm-transition-fast), color var(--lgm-transition-fast);
}

.lgm-about-ministry-pill i {
  color: var(--lgm-about-gold, var(--lgm-gold));
}

.lgm-about-ministry-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--lgm-shadow-md);
  color: var(--lgm-about-navy, var(--lgm-heading-color));
}

/* ==========================================================================
   CTA row
   ========================================================================== */

.lgm-about-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lgm-space-sm);
}

/* .lgm-btn-secondary is a white-outline style built for dark
   backgrounds (e.g. the hero). This row sits on a light-blue section,
   so its secondary buttons need a dark outline instead — same fix
   main.css already applies to .lgm-final-cta / .lgm-welcome for their
   own light-background secondary buttons. */
.lgm-about-cta-row .lgm-btn-secondary {
  border-color: var(--lgm-navy);
  color: var(--lgm-navy);
}

.lgm-about-cta-row .lgm-btn-secondary:hover {
  background: var(--lgm-navy);
  color: var(--lgm-white);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
  .lgm-about-quote-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--lgm-space-lg);
  }

  .lgm-about-mv-grid {
    grid-template-columns: 1fr;
  }

  .lgm-about-believe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .lgm-about-cta-row .lgm-btn {
    width: 100%;
  }
}