/* ==========================================================================
   pages/our-story.css: history road, creed, pastors, beliefs, leadership.
   ========================================================================== */

/* Photo crops for this page. */
.page-hero .bg-photo img { object-position: 62% 30%; }
.split--fill .fill-figure--preaching img { object-position: 42% 35%; }
#leadership .portrait img { object-position: 50% 45%; }

/* ---------- The road to these doors: a timeline of street signs ---------- */
.road { position: relative; margin-top: 2rem; }
.road::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--brass) 0 26px, transparent 26px 46px), #3a3337;
  background-size: 2px 100%, 100% 100%;
  background-position: center, center;
  background-repeat: repeat-y, no-repeat;
  border-radius: 6px;
}
.stop { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; position: relative; padding-block: 1.1rem; }
.stop:nth-child(even) .stop-sign { order: 2; justify-self: start; }
.stop:nth-child(even) .stop-text { order: 1; text-align: right; }
.stop-sign { justify-self: end; position: relative; }
.street {
  display: inline-block;
  background: #1f6b48; color: #fff;
  font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1;
  padding: 0.5em 0.85em 0.45em;
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px #1f6b48, inset 0 0 0 5px #fff, 0 8px 18px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.street small { display: block; font-size: max(0.5em, 0.78rem); letter-spacing: 0.2em; margin-top: 0.35em; opacity: 0.85; }
.street--home { background: var(--crimson); box-shadow: inset 0 0 0 3px var(--crimson), inset 0 0 0 5px #fff, 0 8px 18px rgba(0, 0, 0, 0.18); }
.stop-date { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--crimson); font-size: 0.92rem; margin-bottom: 0.3rem; }
.stop-text h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); margin-bottom: 0.4rem; }
.stop-text p { font-size: 1.02rem; color: var(--ink-soft); margin: 0; }
.stop::after {
  content: ""; position: absolute; left: 50%; top: 2.6rem; width: 22px; height: 22px; transform: translateX(-50%);
  background: var(--paper); border: 5px solid var(--crimson); border-radius: 50%;
}
@media (max-width: 760px) {
  .road::before { left: 14px; }
  .stop { grid-template-columns: 1fr; gap: 0.9rem; padding-left: 46px; }
  .stop::after { left: 14px; top: 2.2rem; }
  .stop:nth-child(even) .stop-sign, .stop-sign { order: 0; justify-self: start; }
  .stop:nth-child(even) .stop-text { order: 1; text-align: left; }
  .street { white-space: normal; }
}
@media (max-width: 480px) {
  .street small { font-size: 0.78rem; letter-spacing: 0.14em; }
}

/* ---------- Creed tiles (aim, purpose, objective, motto) ---------- */
.creed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.creed div { background: var(--walnut); color: #f5ecdc; padding: 1.6rem 1.3rem; text-align: center; }
.creed div:last-child { background: var(--brass); color: var(--crimson-night); }
.creed .label { color: var(--brass-light); display: block; margin-bottom: 0.6rem; }
.creed div:last-child .label { color: var(--crimson-deep); }
.creed b { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.12; display: block; }
@media (max-width: 860px) { .creed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .creed { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .creed div { padding: 1.1rem 1rem; }
  .creed b { font-size: 1.4rem; }
}

/* ---------- Four shepherds ---------- */
.shepherds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.shepherd { padding: 1.6rem 1.4rem 1.8rem; border-right: 1px solid var(--line); position: relative; }
.shepherd:last-child { border-right: 0; background: var(--crimson); color: #fbf6ee; }
.shepherd .num { font-family: var(--f-display); font-size: 4.2rem; line-height: 1; color: var(--crimson); opacity: 0.9; }
.shepherd:last-child .num { color: var(--brass-light); }
.shepherd h3 { font-size: 1.55rem; margin: 0.6rem 0 0.3rem; min-height: 2.1em; }
@media (max-width: 960px) { .shepherd h3 { min-height: 0; } }
.shepherd .years { font-family: var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; font-weight: 600; }
.shepherd p { font-size: 0.98rem; margin: 0.8rem 0 0; opacity: 0.85; }
@media (max-width: 960px) { .shepherds { grid-template-columns: 1fr 1fr; } .shepherd:nth-child(2) { border-right: 0; } .shepherd { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .shepherds { grid-template-columns: 1fr; } .shepherd { border-right: 0; padding-inline: 0; } .shepherd:last-child { padding-inline: 1.2rem; } }

/* ---------- Beliefs: the whole Book, cover to cover ---------- */
.bookends { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.bookend { background: var(--paper); border: 1px solid var(--line); padding: 2rem 1.8rem; position: relative; }
.bookend .ref { color: var(--crimson); display: block; margin-bottom: 0.6rem; }
.bookend p { font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.2; margin: 0; }
.bookends .between { text-align: center; font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.85rem; color: var(--ink-soft); }
.bookends .between b { display: block; font-family: var(--f-display); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 3rem; color: var(--crimson); line-height: 1; }
@media (max-width: 860px) { .bookends { grid-template-columns: 1fr; } }