/* ============================================================
   EBPC — Pages (v2.2)
   Page-level patterns with the squircle corner scale.
   ============================================================ */


/* =========================================================
   1. PAGE HEAD
   ========================================================= */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  background: var(--bg-ice);
  border-bottom: 1px solid var(--border-soft);
}
.page-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  max-width: 640px;
  height: 100%;
  z-index: -1;
  background:
    radial-gradient(
      420px 260px at 100% 0%,
      rgba(75, 112, 153, 0.10),
      rgba(75, 112, 153, 0) 62%
    );
  pointer-events: none;
}

.page-head .tag { margin-bottom: var(--sp-4); }

.page-head h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.028em;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
}

.page-head .lede {
  max-width: 44rem;
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

@media (max-width: 640px) {
  .page-head h1 {
    font-size: clamp(1.875rem, 1.4rem + 2.6vw, 2.5rem);
    letter-spacing: -0.02em;
  }
}


/* =========================================================
   2. PORTRAIT — squircle
   ========================================================= */
.portrait {
  position: relative;
  overflow: hidden;
  background: var(--bg-ice);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  aspect-ratio: 4 / 5;
  max-width: 100%;
  box-shadow: var(--shadow-md);
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(21, 32, 47, 0.05);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 899px) {
  .portrait {
    max-width: 22rem;
    margin-inline: auto;
  }
}


/* =========================================================
   3. PASTOR LAYOUT
   ========================================================= */
.pastor-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: start;
}
@media (min-width: 900px) {
  .pastor-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--sp-14);
    align-items: center;
  }
  .pastor-layout .portrait { transform: translateY(-8px); }
}

.pastor-layout__text h2 { margin-bottom: var(--sp-4); }

.pastor-layout__text h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.pastor-layout__text .mt-lg { margin-top: var(--sp-10); }


/* =========================================================
   4. KEY–VALUE LIST
   ========================================================= */
.kv {
  display: grid;
  gap: 0;
  margin: 0;
}

.kv__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border-soft);
}
.kv__row:first-child { padding-top: 0; }
.kv__row:last-child  { padding-bottom: 0; border-bottom: 0; }

@media (min-width: 560px) {
  .kv__row {
    grid-template-columns: 12rem 1fr;
    align-items: baseline;
    gap: var(--sp-8);
  }
}

.kv__key {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--blue-700);
}

.kv__value {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--navy-900);
  letter-spacing: -0.01em;
  word-break: break-word;
}

.kv__value--mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-700);
}


/* =========================================================
   5. NOT-FOUND PAGE
   ========================================================= */
.error-page {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 3rem + 10vw, 9rem);
  text-align: center;
  overflow: hidden;
}
.error-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      520px 320px at 50% 30%,
      rgba(75, 112, 153, 0.08),
      rgba(75, 112, 153, 0) 65%
    );
  pointer-events: none;
}

.error-page .tag {
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wider);
}

.error-page h1 {
  font-size: clamp(2.5rem, 2rem + 4vw, 4rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-4);
}

.error-page .lede {
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  font-size: var(--fs-lg);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}


/* =========================================================
   6. SPACING HELPERS
   ========================================================= */
.mt-lg { margin-top: var(--sp-8); }


/* =========================================================
   7. RESPONSIVE FINE-TUNING
   ========================================================= */
@media (max-width: 380px) {
  .hero__title {
    font-size: 2.125rem;
    letter-spacing: -0.02em;
  }
  .hero__sub { font-size: var(--fs-base); }
  .page-head h1 { font-size: 1.75rem; }
}


/* =========================================================
   8. PATTERN SECTION TUNING
   ========================================================= */
@media (max-width: 640px) {
  .section--pattern::before {
    opacity: 0.30;
    background-size: 72px 72px;
  }
}


/* =========================================================
   9. PRINT
   ========================================================= */
@media print {
  .site-header,
  .nav-drawer,
  .site-footer,
  .skip-link,
  .hero__actions,
  .hero__glow,
  .cta-band,
  .cta-row,
  .error-page__actions,
  .btn,
  [data-reveal] {
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html, body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  h1, h2, h3, h4, h5, h6 { color: #000; }
  a { color: #000; text-decoration: underline; }

  .section,
  .page-head,
  .error-page {
    padding-block: 1rem;
    background: none;
    border: 0;
  }

  .section--pattern::before,
  .page-head::before,
  .error-page::before,
  .section--navy::before,
  .cta-band::before {
    display: none;
  }

  .card,
  .schedule__row,
  .contact-list__item,
  .info-card,
  .portrait {
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: 8px;
  }

  .schedule__row--feature { background: none; color: #000; }
  .schedule__row--feature .schedule__day,
  .schedule__row--feature .schedule__name,
  .schedule__row--feature .schedule__time { color: #000; }
}