/* ==========================================================================
   ABIDE CITY – section layout
   Each .section maps 1:1 onto a Wix Section. Nothing overlaps a boundary.
   ========================================================================== */

/* Top padding only. Two stacked sections used to make a 280px gap, which is
   where the awkward empty space was coming from – now the gap IS the step. */
/* ONE content line for the whole site.
   Words stop at --edge. Photographs and coloured grounds are the only
   things allowed past it, and they run to the frame. Components no longer
   set their own horizontal padding – if something is out of line, it is
   escaping this rule and that is the bug. */
.section { padding: var(--section-y) var(--edge) 0; }
/* The section variants are used on their own as well as alongside .section,
   so the content line is stated for each of them rather than relied on. */
.section--bar,
.section--open,
.section--bone,
.section--mist,
.section--filter { padding-inline: var(--edge); }

/* The only things allowed out to the frame are pictures. Headings, rows and
   card grids are words and stay on the line – the Listen heading was in
   this list and sat 64px to the left of every other heading on the site. */
.section > .plate,
.section > .split,
.section > .cells {
  margin-inline: calc(var(--edge) * -1);
}
/* .section--plate carries no padding of its own, so its plate is already on
   the frame – giving it the negative margin as well pushed it off the page. */
.section--plate { padding-inline: 0; }
.section--bone { padding-bottom: var(--section-y); }
main > .section:last-child { padding-bottom: var(--section-y); }

/* A full-bleed photograph has no padding of its own, so it butts whatever is
   above and below it. The component before one therefore has to close itself
   off, or the type sits on the image. */
.section--plate { padding: 0; }
.section:has(+ .section--plate) { padding-bottom: var(--section-y); }

/* a page that opens on a list rather than a photograph starts close to the
   band, not a screen below it */
.section--open { padding-top: var(--s4); }
.section--flush { padding: 0; }
.section--bone { background: var(--field); }   /* bone at 20% – the only tint */
.section--mist { background: var(--field); padding-bottom: var(--section-y); }

/* --- S03 About ------------------------------------------------------------
   The statement is two full sentences of the site's own copy, so it sits a
   step down from display-l or it eats the viewport. */

/* --- Our Hope: sticky index + plate column, both on the grid --------------
   The index owns columns 1-3 and the plates own 4-12. Nothing crosses, so an
   image can never bleed over the pillar names. -------------------------- */

.life__plates .plate { grid-column: 1 / 10; }       /* default: full width of the plate area */

/* --- S05 Sundays ---------------------------------------------------------- */

/* --- S06 Pathway ---------------------------------------------------------- */

/* --- S09 Giving ----------------------------------------------------------- */

/* --- Section heads -------------------------------------------------------- */

/* ==========================================================================
   Responsive – breakpoints chosen to match Wix Studio defaults
   1280 / 1024 / 750 / 480
   ========================================================================== */

@media (max-width: 1024px) {
  
  
  .life__plates .plate,
  .plate--a, .plate--b, .plate--c, .plate--d { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  
  
  
  
  
  
  .nav-overlay__cols { grid-template-columns: 1fr; gap: 48px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}

@media (max-width: 880px) {
  
  
  
  
  .plate { width: 100% !important; }
  
  
  
  
  
  
}

@media (max-width: 600px) {
  
  
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__base { flex-direction: column; gap: 10px; }
}

/* --- S04 Invited (AVISION rail) ------------------------------------------ */

/* --- Compare band --------------------------------------------------------- */

/* --- Groups --------------------------------------------------------------- */

/* the band is absolutely positioned on the homepage – give it a frame to sit in */
body > main { position: relative; }

/* ==========================================================================
   SECTION RHYTHM – the doubling pass
   Sections carry top padding, and --mist adds bottom padding. Where two of
   those meet, or where a component that already closed itself off is
   followed by one that opens with its own gap, the page got two steps where
   it should have had one – 397px between Beyond Sunday and the sermons, 204
   under the Gatherings heading. These four rules remove the doubles; nothing
   here changes a single component's own spacing.
   ========================================================================== */

/* two blocks on the same grey are one block, not two */
.section--mist + .section--mist { padding-top: 0; }

/* a grey component that opens on its own filter bar starts AT the bar, so
   the bar lands on the top edge of the grey. The component above it takes
   the gap instead. */
.section--mist:has(> .switch--bar) { padding-top: 0; }
.section:has(+ .section--mist:has(> .switch--bar)) { padding-bottom: var(--section-y); }

/* a page that opens on a centred heading sits that heading in the middle of
   its own band rather than hard against the top of it */
.section--open:has(.ledger__head--mid) {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.section--open .ledger__head--mid { margin-bottom: 0; }

/* the closing photograph brings its own gap, so whatever is above must not
   bring a second one of the same size */
.section--mist:has(+ section > .plate--flush),
.section--bar:has(+ section > .plate--flush),
.section--ink:has(+ section > .plate--flush) { padding-bottom: 0; }

/* …except Listen. That rule assumes the block above a closing photograph
   ends on something that has already closed itself off; Listen ends on a
   line of type – the speaker and "6 days ago" – which was left almost
   touching the picture. It keeps its own room. */
.section--mist:has(.sermons):has(+ section > .plate--flush),
.section--mist:has(.sermons) { padding-bottom: calc(var(--section-y) * 1.4); }