/* ─────────────────────────────────────────────────────────────────────────
   THE FRONT PAGE, ON A PHONE.

   The page is built from Spectra (UAGB) containers, and those are edited in
   the block editor — so nothing here changes the blocks themselves. This only
   dresses them at phone width, which means the office can still rearrange the
   page and this will keep applying to whatever it finds.

   Scoped twice over: to body.home, and to the phone breakpoint. Nothing in
   this file can reach another page or a desktop.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {

  /* A GROUND FOR THE CARDS TO SIT ON.
     Everything was white on white, so the sections ran into one another and
     the page read as one endless column. A grey ground is what makes a card
     look like a card. */
  body.home { background: #EDF0F4; }
  body.home .site-content,
  body.home .ast-container,
  body.home .entry-content { background: transparent; }

  /* THE CONTENT COLUMN GIVES UP ITS OWN GUTTER.
     Astra pads .ast-container by 20px and Spectra then sets each full-width
     section to width:100vw to break back out of it — so a section was 375px
     wide inside a 335px parent. Adding a margin to that only slid it sideways
     and 32px of every card hung off the right of the screen. The padding goes
     here and the card's own margin becomes the only gutter, so there is one
     number deciding the edge instead of three fighting. */
  body.home .site-content .ast-container {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  body.home .entry-content > .uagb-is-root-container {
    width: auto !important; max-width: none !important;
    margin-left: 0; margin-right: 0;
  }

  /* EACH SECTION IS A BLOCK YOU COULD PUT A THUMB ON.
     The hero keeps the full bleed — a photograph with a margin round it looks
     like a mistake — so it is excluded and everything after it is carded. */
  body.home .entry-content > .uagb-is-root-container:not(:first-child) {
    background: #fff;
    margin: 14px 12px !important;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05),
                0 10px 26px rgba(16, 24, 40, .07);
    overflow: hidden;
  }

  /* THE PADDING IS ON THE BLOCKS, NOT ON THE CONTAINER.
     The section is a flex parent with zero padding of its own; each block
     inside it carries its own (the devotional had 44px above and 52px below).
     On a desktop that is air; on a phone, inside a card that already has an
     edge of its own, it is a screenful of nothing. Trimmed, not removed —
     the card still needs to breathe.

     Only real blocks: a section's children include <style> and <script>
     tags, which have nothing to pad. */
  body.home .entry-content > .uagb-is-root-container:not(:first-child) > div,
  body.home .entry-content > .uagb-is-root-container:not(:first-child) > section {
    padding-top: 26px !important;
    padding-bottom: 28px !important;
  }

  /* HEADINGS AT A PHONE'S SCALE.
     The hero title was set for a desktop and broke into four lines. */
  body.home .uagb-is-root-container:first-child h1 {
    font-size: clamp(30px, 8.6vw, 38px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.01em;
  }
  body.home .entry-content h2 {
    font-size: clamp(23px, 6.4vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em;
  }
  body.home .entry-content h3 { font-size: 19px !important; line-height: 1.28 !important; }

  /* A THUMB IS ABOUT 44 PIXELS.
     The prayer links were bare underlined text in a column — a list of things
     to tap that gave nothing to tap. They become rows. */
  body.home .uagb-is-root-container:first-child .wp-block-uagb-buttons-child a,
  body.home .entry-content .wp-block-button__link,
  body.home .entry-content .uagb-buttons-repeater {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Nothing should be able to push the page sideways. */
  body.home .entry-content img,
  body.home .entry-content iframe { max-width: 100%; height: auto; }
}