/* =========================================================
   STAFF page — builds on styles.css
   ========================================================= */
.sthero { padding: clamp(140px, 17vw, 200px) 0 clamp(20px, 3vw, 40px); }
.sthero__title { font-size: clamp(3rem, 7.4vw, 6.8rem); margin-bottom: 24px; max-width: 14ch; }
.sthero .lede { max-width: 52ch; }

.stgrid { padding-top: clamp(40px, 5vw, 70px); }
.stgrid__list { --gap: clamp(16px, 2vw, 28px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.stgrid__list > .stcard { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); }
@media (max-width: 1200px) and (min-width: 1001px) { .stgrid__list > .stcard { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
.stgrid__list > .stcard--lead { flex-basis: 100%; }
.stcard { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .4s, border-color .4s; }
.stcard:hover { box-shadow: 0 24px 50px rgba(37, 39, 35, .1); border-color: var(--sage); }
.stcard__img { aspect-ratio: 1; overflow: hidden; background: var(--cream); }
.stcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1s var(--ease); }
.stcard:hover .stcard__img img { transform: scale(1.04); }
.stcard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.stcard__role { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.stcard h2 { font-weight: 900; font-size: clamp(1.4rem, 1.8vw, 1.8rem); letter-spacing: -.03em; line-height: 1; margin-bottom: 18px; }
.stcard__body > p:not(.stcard__role) { color: var(--ink-soft); margin: 0 0 20px; }
.stcard .link-arrow { margin-top: auto; align-self: flex-start; }

/* Lead pastor spans the full row */
.stcard--lead { display: grid; grid-template-columns: 1.15fr 1fr; }
.stcard--lead .stcard__img { aspect-ratio: auto; min-height: 360px; }
.stcard--lead .stcard__img img { object-position: center 35%; }
.stcard--lead .stcard__body { justify-content: center; padding: clamp(28px, 4vw, 56px); }
.stcard--lead h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }

@media (max-width: 1000px) {
  .stgrid__list > .stcard { flex-basis: calc((100% - var(--gap)) / 2); }
  .stgrid__list > .stcard--lead { flex-basis: 100%; }
  .stcard--lead { grid-template-columns: 1fr; }
  .stcard--lead .stcard__img { min-height: 0; aspect-ratio: 5 / 4; }
}
@media (max-width: 560px) { .stgrid__list > .stcard { flex-basis: 100%; } }