/* Ocean Church: layout refinements (20 Oct 2026). Loaded last, after the site and page sheets.
   Each block fixes a fault seen on the live site; the approved desktop design is unchanged unless noted. */

/* ---- 1. Photo-and-words bands (Home "Join us this Sunday", Visit "Getting here", and any .split band):
   on phones and tablets the photograph covers the WHOLE band, the words sit over a soft dark veil.
   (A later rule had forced the photo into a 4:3 box, so it covered only the top of the band.) */
@media (max-width: 1024px) {
  .split > figure { position: absolute !important; inset: 0 !important; height: auto !important; }
  .split .hold, .split .hold > img, .split .hold > video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
  .split { min-height: 0; align-items: end; }
  .split::after { background: linear-gradient(0deg, rgba(14, 16, 19, .9) 0%, rgba(14, 16, 19, .66) 44%, rgba(14, 16, 19, .26) 70%, rgba(14, 16, 19, 0) 92%); }
  .split .side { padding: clamp(300px, 78vw, 520px) clamp(20px, 6vw, 48px) var(--s-xl) !important; }
}

/* ---- 2. The block after an overlapping panel (Home, after "Meet our pastor"): one even gap, not two stacked. */
.panel.lap { margin-bottom: 0; }
.panel.lap + section.band { padding-top: var(--s-xl) !important; }

/* ---- 3. The footer on phones: centred, balanced, nothing hanging to one side. */
@media (max-width: 640px) {
  .site-foot .news > div { text-align: center; justify-items: center; }
  .site-foot .news > form label { text-align: center; }
  .site-foot .news-row .btn { width: 100%; justify-content: center; }
  .site-foot .cols { row-gap: 0; padding-block: var(--s-m) var(--s-s); }
  .site-foot .cols > * { padding-block: var(--s-m); border-bottom: 1px solid var(--rule); }
  .site-foot .cols .c1 { justify-items: center; text-align: center; }
  .site-foot .cols .c1 .logo { justify-self: center; }
  .site-foot .cols .c1 .contact-line { justify-content: center; display: flex; align-items: center; gap: .5em; margin-top: 0 !important; }
  .site-foot .socials { justify-content: center; }
  .site-foot .cols .c2 { text-align: center; display: grid; justify-items: center; }
  .site-foot .cols .times { display: grid; grid-template-columns: repeat(2, auto); column-gap: 2.2em; row-gap: .25em; justify-content: center; }
  .site-foot .cols .c2 .btn { margin-top: var(--s-m) !important; }
  .site-foot .cols .c3, .site-foot .cols .c4 { grid-column: 1 / -1 !important; text-align: center; }
  .site-foot .cols .c3 ul, .site-foot .cols .c4 ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-m); justify-items: center; max-width: 340px; margin-inline: auto; }
  .site-foot .cols .c5 { text-align: center; }
  .site-foot .cols .c5 .hours { display: block; }
  .site-foot .fine { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: .6em; }
}

/* ---- 4. About, "Who we are" photographs on phones: a full-width photograph, then two side by side. */
@media (max-width: 640px) {
  .who2 .collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-s); }
  .who2 .collage figure { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; transform: none !important; translate: none !important; }
  .who2 .collage .c1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .who2 .collage .c2, .who2 .collage .c3 { aspect-ratio: 4 / 5; }
}

/* ---- 5. The footer on tablets: the brand block spans the row, so centre it. */
@media (min-width: 641px) and (max-width: 1024px) {
  .site-foot .cols .c1 { justify-items: center; text-align: center; padding-bottom: var(--s-m); border-bottom: 1px solid var(--rule); }
  .site-foot .cols .c1 .contact-line { display: flex; justify-content: center; align-items: center; gap: .5em; margin-top: 0 !important; }
  .site-foot .socials { justify-content: center; }
}

/* ---- 6. A sermon on phones and tablets: "This message" and the series card come first, right after the film,
   then the notes; key scriptures follow the notes on phones. One even gap before Earlier / Next. */
@media (max-width: 1024px) {
  .sx-body { padding-block: var(--s-l) var(--s-l); }
  .sx-side { order: -1; }
  .sx-pn { padding-top: var(--s-m); }
}
@media (max-width: 767px) {
  .sx-body .inner { gap: var(--s-m); }
  .sx-side { display: contents; }
  .sx-this { order: -3; } .sx-series { order: -2; } .sx-notes { order: 0; } .sx-keys { order: 1; }
}

/* ---- 7. Text-only blocks on phones size to their words, not to the screen (It's Time verse, statement rows). */
@media (max-width: 767px) {
  .verse, .vrow { min-height: 0 !important; }
  .verse blockquote { padding-block: var(--s-xl); }
}