/* ==========================================================================
   components.css: pieces shared by more than one page.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--crimson); --fg: #fff;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 0.98rem;
  padding: 0.95em 1.5em 0.9em;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--bg);
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); color: var(--fg); }
.btn svg { width: 1.1em; height: 1.1em; }
/* Polished gold: bright leaf-gold gradient, deep crimson type, a lit top edge. */
.btn--brass {
  --bg: #f3c44e; --fg: var(--crimson-deep);
  background: linear-gradient(180deg, #ffdc78 0%, #f3c44e 48%, #e2a92c 100%);
  border-color: #f7cf62;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 6px 18px rgba(42, 6, 18, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn--brass:hover, .btn--brass:focus-visible {
  color: var(--crimson-night);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 3px rgba(255, 220, 120, 0.3), 0 10px 26px rgba(42, 6, 18, 0.32);
}
.btn--brass:active { transform: translateY(0); filter: brightness(0.97); }
.btn--ghost { background: transparent; color: var(--bg); }
.btn--ghost:hover { background: var(--bg); color: #fff; }
.btn--ghost-light { --bg: #fff; background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn--ghost-light:hover { background: #fff; color: var(--crimson); }
.btn--lg { font-size: 1.15rem; padding: 1.1em 2em; }
/* Phones: keep a large button's label on one line. */
@media (max-width: 420px) { .btn--lg { font-size: 1rem; padding: 1em 1.3em; letter-spacing: 0.1em; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
/* Phones: buttons in a row share the width evenly, and any that wrap onto
   their own line run full width, so stacked buttons are always the same size. */
@media (max-width: 560px) { .btn-row > .btn { flex: 1 1 auto; justify-content: center; } }

/* ---------- Page header for inner pages ----------
   A real church photo behind every header, shaded with a deep warm brown
   (not red) on the text side so the type stays readable. */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #1b1110; color: #fbf6ee;
  padding-block: clamp(3.25rem, 7vw, 6rem) clamp(2.75rem, 5.5vw, 4.5rem);
  text-shadow: 0 1px 18px rgba(12, 6, 6, 0.35);
}
.page-hero h1 { max-width: 14ch; }
.page-hero .lede { max-width: 38em; color: rgba(251, 246, 238, 0.86); }
.page-hero .bg-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero .bg-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 40%; }
.page-hero .bg-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22, 12, 11, 0.9) 0%, rgba(22, 12, 11, 0.74) 38%, rgba(22, 12, 11, 0.38) 72%, rgba(22, 12, 11, 0.28) 100%),
    linear-gradient(0deg, rgba(22, 12, 11, 0.6) 0%, rgba(22, 12, 11, 0) 45%);
}
@media (max-width: 760px) {
  .page-hero .bg-photo::after { background: linear-gradient(180deg, rgba(22, 12, 11, 0.6) 0%, rgba(22, 12, 11, 0.82) 100%); }
}

/* "On this page" links under a page header. */
.subnav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.subnav a {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.88rem;
  color: #fbf6ee; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 0.4em 1em;
  transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.25s ease;
}
.subnav a:hover { background: #fbf6ee; color: var(--crimson-deep); }
@media (max-width: 420px) { .subnav { gap: 0.4rem; } .subnav a { padding: 0.4em 0.8em; letter-spacing: 0.08em; font-size: 0.84rem; } }

/* ---------- Cards (home "Find your place in the work") ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--paper); text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease-out), box-shadow 0.35s ease, border-color 0.3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(36, 22, 27, 0.14); color: var(--ink); }
.card-img { aspect-ratio: 4/3; overflow: hidden; clip-path: polygon(50% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); background: var(--paper-3); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 1.2rem 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.card-body p { font-size: 1rem; color: var(--ink-soft); flex: 1; }
.card-more { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 0.85rem; color: var(--crimson); }
.card-more::after { content: "→"; margin-left: 0.45em; }

/* ---------- Choir photos (home and Ministries) ---------- */
.robes { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.robe { position: relative; overflow: hidden; margin: 0; background: var(--ink); color: #fff; min-height: 280px; }
.robe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.robe:hover img { transform: scale(1.04); }
.robe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20, 8, 12, 0.85)); }
.robe-text { position: absolute; z-index: 1; left: 1.3rem; right: 1.3rem; bottom: 1.2rem; }
.robe-text h3 { margin: 0 0 0.2rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
/* The robe color, set per choir with --c. */
.swatch { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; }
.swatch::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.swatch--orange { --c: #e8692b; }
.swatch--gray { --c: #8a8d91; }
.swatch--green { --c: #1f5a43; }
.robe--a { grid-column: span 7; min-height: 340px; }
.robe--b { grid-column: span 5; }
.robe--c { grid-column: span 7; }
.robe--d {
  grid-column: span 5; background: var(--brass); color: var(--crimson-night);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem;
}
.robe--d::after { display: none; }
.robe--d h3 { font-size: 2rem; margin-bottom: 0.3rem; }
@media (max-width: 860px) {
  .robe--a, .robe--b, .robe--c, .robe--d { grid-column: 1 / -1; min-height: 280px; }
}

/* ---------- Portrait beside a letter (home Pastor's Pen, Our Story Leadership) ---------- */
.letter { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.letter-body { position: relative; }
.portrait { position: relative; }
.portrait img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 18%; }
.portrait::before {
  content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  background: var(--crimson);
  clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
}
.portrait-tag {
  position: absolute; z-index: 2; left: -0.8rem; bottom: 1.4rem;
  background: var(--paper); padding: 0.7rem 1rem; box-shadow: 0 10px 24px rgba(36, 22, 27, 0.2);
}
.portrait-tag b { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; display: block; line-height: 1.1; }
.portrait-tag span { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--ink-soft); }
/* Tablets keep the portrait beside the letter; phones stack them. */
@media (max-width: 680px) {
  .letter { grid-template-columns: 1fr; }
  /* Keep the crimson offset frame and the name card inside the gutter. */
  .portrait { max-width: 360px; width: calc(100% - 1.4rem); }
  .portrait-tag { left: 0.6rem; }
}

/* ---------- Handwritten signature ("We love you,") ----------
   Writes itself in: a soft-edged mask sweeps left to right once the note is on
   screen, like ink following a pen. The padding keeps the script's swashes and
   descenders inside the masked box. */
.signature {
  font-family: var(--f-sign); font-size: clamp(2.4rem, 2rem + 1.5vw, 3.4rem); color: var(--crimson); line-height: 1;
  display: block; width: max-content; max-width: 100%;
  margin: 0.6rem 0 0.2rem -0.3em;
  padding: 0.12em 0.4em 0.3em 0.3em;
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
          mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.in .signature { animation: sign-write 2.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.5s forwards; }
@keyframes sign-write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
/* Always readable without JS or with reduced motion. */
.no-js .signature { -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .signature { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Church address (home "Find us" strip, Visit directions) ---------- */
.addr { font-family: var(--f-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; margin: 0.4rem 0 1.4rem; }

/* ---------- Staff directory (Our Story Leadership, Visit contact) ---------- */
.directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.person { border-top: 3px solid var(--crimson); padding: 1rem 0 0.4rem; }
.person .label { color: var(--ink-soft); }
.person b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin: 0.25rem 0; }
.person a { display: inline-block; max-width: 100%; padding-block: 0.15rem; font-size: 0.98rem; word-break: break-all; }

/* ---------- Dates filled in by dates.js ---------- */
/* The next Communion date stands out wherever it appears. */
[data-next-communion] { font-weight: 700; }

/* ---------- Back to top (added by back-to-top.js) ---------- */
.to-top {
  position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 50;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--crimson); color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 250, 241, 0.85), 0 10px 24px -6px rgba(42, 6, 18, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9);
  transition: opacity 0.35s ease, transform 0.4s var(--ease-out), visibility 0s linear 0.4s,
    background-color 0.25s ease, box-shadow 0.3s ease;
}
.to-top svg { width: 22px; height: 22px; transition: transform 0.3s var(--ease-out); }
.to-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Hover lift only where there is a real pointer; on phones a tap would leave it stuck. */
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { background: var(--crimson-deep); box-shadow: 0 0 0 3px rgba(255, 250, 241, 0.95), 0 14px 30px -6px rgba(42, 6, 18, 0.6); }
  .to-top:hover svg { transform: translateY(-3px); }
}
/* Phones: sit above the strip at the bottom of the screen where a tap brings up
   the browser's own toolbar instead of reaching the button. */
@media (pointer: coarse), (max-width: 760px) {
  .to-top { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.to-top:active { transform: scale(0.94); }
.to-top:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }