/* =========================================================
   Inner-page heroes on phones: exactly one screen, no scroll.
   Shared by the story heroes (.s-hero), Our Vision (.vision-intro)
   and What We Believe (.b-hero). Loaded last on those pages.

   The hero is a column the height of the small viewport (browser
   bars showing). Copy, caption and the section links keep their
   natural size; the arched photo takes whatever height is left, so
   it is larger on tall phones and smaller on short ones. With very
   large text the hero simply grows (the photo keeps a minimum).
   ========================================================= */
@media (max-width: 700px) {
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 5.25rem;
    padding-bottom: 0;
  }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-hero__grid, .vision-intro__grid, .b-hero__grid) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-height: 0;
  }

  /* ---------- Copy ---------- */
  html body:not(#_) :is(.s-hero__copy, .vision-intro__copy, .b-hero__copy) { flex: none; padding-bottom: 0; }
  html body:not(#_) :is(.s-hero, .b-hero) h1 {
    margin: .85rem 0 .75rem;
    font-size: clamp(2.2rem, 9.6vw, 2.75rem);
    line-height: 1.06;
  }
  html body .vision-intro .vision-statement { margin: .85rem 0 0; }
  html body .vision-intro .vision-statement__lead { font-size: clamp(2.2rem, 9.6vw, 2.75rem); line-height: 1.06; }
  html body .vision-intro .vision-statement__rest,
  html body .b-hero .b-hero__lede { margin-top: .6rem; font-size: 1.2rem; line-height: 1.45; max-width: 22rem; }
  html body .s-hero .s-hero__lede { font-size: .9375rem; line-height: 1.6; }
  html body:not(#_) :is(.s-hero__copy, .vision-intro__copy, .b-hero__copy) > .btn { margin-top: 1.1rem; }

  /* ---------- Photo: fills the remaining height ---------- */
  html body:not(#_) :is(.s-hero .s-photo--hero, .vision-intro .vision-window, .b-hero .b-window) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
  }
  html body:not(#_) :is(.s-hero .s-photo__frame, .vision-intro .vision-window__frame, .b-hero .b-window__frame) {
    flex: 1 1 0;
    min-height: 9rem;
    height: auto;
    aspect-ratio: auto;
  }
  html body:not(#_) :is(.s-hero .s-photo__frame, .vision-intro .vision-window__frame, .b-hero .b-window__frame) > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  /* Ministries wraps its photo in <picture>: pin the wrapper the same way, or iPhone Safari
     sizes the photo to its natural shape and the frame's pale background shows underneath. */
  html body:not(#_) .s-hero .s-photo__frame > picture {
    position: absolute;
    inset: 0;
    display: block;
  }
  html body:not(#_) .s-hero .s-photo__frame > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html body:not(#_) :is(.s-hero .s-photo--hero, .vision-intro .vision-window, .b-hero .b-window) figcaption {
    flex: none;
    margin-top: .7rem;
  }
  html body:not(#_) :is(.s-hero .s-photo--hero, .vision-intro .vision-window, .b-hero .b-window)::before { bottom: 2.6rem; }
  html body:not(#_) :is(.s-hero .s-photo__ornament, .vision-intro .vision-window__star, .b-hero .b-window__star) { width: 3.75rem; top: 0; }

  /* ---------- Section links: one row; more than three scroll sideways ---------- */
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index) {
    flex: none;
    display: flex;
    gap: .25rem;
    margin-top: 1rem;
    padding-block: .45rem .6rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index)::-webkit-scrollbar { display: none; }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index) > a {
    flex: 1 1 0;
    min-height: 3.25rem;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: .2rem .35rem;
    font-size: .6875rem;
    line-height: 1.3;
    letter-spacing: .02em;
    min-width: 0;
    text-align: center;
    scroll-snap-align: start;
  }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index) :is(.s-icon, .vision-icon, .b-icon) { width: 1.15rem; height: 1.15rem; }
  /* Overflowing rows run to the screen edge and fade, so the next link peeks in. */
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index):has(> a:nth-child(4)) {
    width: calc(100% - 1.25rem);
    margin-left: 1.25rem;
    margin-right: 0;
    padding-right: 1.25rem;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index):has(> a:nth-child(4)) > a { flex: 0 0 auto; min-width: 6.25rem; white-space: nowrap; }
}

/* Same photo width on every page (History's older frame ran edge to edge). */
@media (max-width: 700px) {
  html body:not(#_) .s-hero .s-photo--hero { width: 92%; margin-inline: auto; padding-right: 1.2rem; }
}

/* Short phones (SE-size and below): tighter rhythm, caption tucked away. */
@media (max-width: 700px) and (max-height: 700px) {
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) { padding-top: 4.9rem; }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-hero__grid, .vision-intro__grid, .b-hero__grid) { gap: 1rem; }
  html body:not(#_) :is(.s-hero, .b-hero) h1,
  html body:not(#_) .vision-intro .vision-statement__lead { font-size: clamp(2rem, 9vw, 2.4rem); }
  html body:not(#_) :is(.s-hero, .b-hero) h1 { margin: .65rem 0 .55rem; }
  html body:not(#_) .vision-intro .vision-statement { margin-top: .65rem; }
  html body:not(#_) .s-hero .s-hero__lede { font-size: .875rem; line-height: 1.5; }
  html body:not(#_) .vision-intro .vision-statement__rest,
  html body:not(#_) .b-hero .b-hero__lede { font-size: 1.05rem; }
  html body:not(#_) :is(.s-hero__copy, .vision-intro__copy, .b-hero__copy) > .btn { margin-top: .85rem; min-height: 2.75rem; padding-block: .6rem; }
  html body:not(#_) :is(.s-hero .s-photo--hero, .vision-intro .vision-window, .b-hero .b-window) figcaption { display: none; }
  html body:not(#_) :is(.s-hero .s-photo--hero, .vision-intro .vision-window, .b-hero .b-window)::before { bottom: 0; }
  html body:not(#_) :is(.s-hero .s-photo__frame, .vision-intro .vision-window__frame, .b-hero .b-window__frame) { min-height: 8rem; }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index) { margin-top: .75rem; padding-block: .3rem .4rem; }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index) > a { min-height: 2.9rem; }
}

/* History: its offset outline follows the now-flexible photo; link labels match the other pages. */
@media (max-width: 700px) {
  html body.story-page--history:not(#_) .s-photo--hero::before { inset: -.5rem .7rem 2.6rem .5rem; width: auto; aspect-ratio: auto; }
  html body:not(#_) :is(.s-hero, .vision-intro, .b-hero) > :is(.s-index, .vision-index, .b-index) > a { text-transform: uppercase; }
}
@media (max-width: 700px) and (max-height: 700px) {
  html body.story-page--history:not(#_) .s-photo--hero::before { bottom: .5rem; }
}