/* ============================================================
   Village template — grid.css
   24-column CSS Grid + lm/main/rm trio pattern.
   Per dev notes §6 — geometry only; visual styling in template.css.
   ============================================================ */

#container.grid1 {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows:
        auto    /* 1 header */
        auto    /* 2 hero band */
        auto    /* 3 breadcrumbs (inner pages) */
        1fr     /* 4 main content — stretches (sticky-footer) */
        auto    /* 5 below content */
        auto    /* 6 contact band */
        auto;   /* 7 footer */
    min-height: 100vh;
}

/* ---- The lm / main / rm trio ----------------------------- */
/* Each row uses three elements to create a full-width band
   while the content sits in columns 3-23. The "lm" and "rm"
   sleepers carry the same background color as the center. */

.row-lm    { grid-column: 1 / 3; }
.row       { grid-column: 3 / 23; }
.row-rm    { grid-column: 23 / 25; }

/* ---- Row assignment -------------------------------------- */

/* Row 1 — Header */
.header-lm, .header, .header-rm { grid-row: 1 / 2; }

/* Row 2 — Hero band
   The hero band breaks out of the trio pattern: the .hero-band
   spans all 24 columns so the church image fills the full
   viewport width as one continuous painting. The lm/rm sleepers
   collapse — they render in the DOM (for parallel template
   structure) but take no visual space. */
.hero-band { grid-column: 1 / 25; grid-row: 2 / 3; }
.hero-lm, .hero-rm { grid-row: 2 / 3; display: none; }

/* Row 3 — Breadcrumbs (only renders on inner pages) */
.breadcrumbs-lm, .breadcrumbs, .breadcrumbs-rm { grid-row: 3 / 4; }

/* Row 4 — Main content (stretches via 1fr)
   The outer trio (content-lm, content, content-rm) provides the
   full-width cream band. Internal left/main/right layout is
   handled by .content-inner inside .content (see template.css).

   z-index on .content: grid items honor z-index without explicit
   `position`, per CSS Grid Level 1 (§ "z-index and the painting
   order of grid items"). We need this because .content-rm comes
   AFTER .content in DOM order and so would paint over the right
   edge of any .band section breaking out from inside .content.
   z-index: 1 on .content elevates .content's stacking layer above
   the trio sleepers (which default to z-index auto) without
   making .content a containing block for absolutely-positioned
   descendants (dev notes §13). */
.content-lm, .content, .content-rm { grid-row: 4 / 5; }
.content { z-index: 1; }

/* Row 5 — Below content */
.belowcontent-lm, .belowcontent, .belowcontent-rm { grid-row: 5 / 6; }

/* Row 6 — Contact band */
.contact-lm, .contact-band, .contact-rm { grid-row: 6 / 7; }

/* Row 7 — Footer */
.footer-lm, .footer, .footer-rm { grid-row: 7 / 8; }

/* ---- Padding utility (per dev notes §7) ------------------ */
.padding-bt {
    padding-top: var(--row-pad-y);
    padding-bottom: var(--row-pad-y);
}

/* ---- Sub-grids for "below content" position group -------- */
.belowcontent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}
.belowcontent-grid:has(.belowcontent-1:only-child),
.belowcontent-grid:has(.belowcontent-2:only-child) {
    grid-template-columns: 1fr;
}