/* Landing-page mobile system. Desktop and interior pages retain their styling. */
.home-copy--mobile { display: none; }

@media (max-width: 767px) {
  :root {
    --container: calc(100% - 40px);
    --home-heading: clamp(1.875rem, 8vw, 2.125rem);
    --home-section-space: 3rem;
  }

  .home-copy--desktop { display: none; }
  .home-copy--mobile { display: inline; }
  .section { padding-block: var(--home-section-space); }
  .watch { padding-block: calc(var(--home-section-space) + .5rem); }
  main .section__inner { text-align: left; }

  /* One left edge and one scale for section labels and headings. */
  main :is(.about, .sundays, .ministries, .watch, .visit) .label-tag {
    display: inline-block;
    margin-inline: 0;
    font-size: 1rem;
    text-align: left;
  }
  .about__grid { gap: 1rem; }
  .about__heading, .about__lead, .sundays__title,
  .ministries__title, .watch__title, .visit__title {
    font-size: var(--home-heading);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 400;
    max-width: none;
    text-align: left;
    text-wrap: balance;
  }
  .about__rest { display: none; }
  .about__lead { display: block; }
  .sundays__title, .visit__title { margin-top: 1rem; }
  .ministries__head { gap: 1rem; margin-bottom: 1.5rem; }
  .watch__eyebrow { margin-bottom: 1rem; }
  .about__text, .scard p, .watch__copy p, .visit__sub {
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
    max-width: 40ch;
  }
  .about__text, .watch__copy p, .visit__sub { margin-top: 1rem; }

  .marquee { padding-block: .75rem; }

  /* Compact facts retain all practical information without three large blocks. */
  .about__facts { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; }
  .fact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); align-items: center; gap: .375rem 1rem; }
  .fact__num { font-size: 1.625rem; }
  .fact__num small { font-family: var(--font-body); font-size: .6875rem; }
  .fact__label { margin: 0; max-width: none; font-size: .875rem; line-height: 1.5; letter-spacing: 0; text-transform: none; }

  .sundays__cards { margin-top: 1.75rem; }
  .scard { grid-template-columns: 2rem minmax(0, 1fr); column-gap: .875rem; padding-block: 1.25rem; }
  .scard__icon { width: 2rem; height: 2rem; }
  .scard h3 { font-size: 1.375rem; line-height: 1.2; margin-bottom: .5rem; }
  .sundays__bar { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; padding-top: 1.5rem; }
  .sundays__when { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
  .sundays__day { font-size: .75rem; letter-spacing: .1em; }
  .sundays__time { font-size: 2.5rem; }
  .sundays__time small { font-size: .75rem; }
  .sundays__location { padding: 0; border: 0; gap: .875rem; }
  .sundays__location > div { min-width: 0; }
  .sundays__pin { width: 2rem; height: 2.25rem; }
  .sundays__location-title { font-size: 1.25rem; margin-bottom: .25rem; }
  .sundays__addr { font-size: .9375rem; line-height: 1.6; }
  .sundays__bar > .btn { grid-column: auto; margin-left: 0; }

  .mlist { container-type: inline-size; }
  .mlist__item a { grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem; gap: .375rem .75rem; padding-block: 1.125rem; }
  .mlist__icon { grid-row: 1 / span 2; align-self: start; width: 1.75rem; height: 1.75rem; }
  .mlist__name { font-size: 1.25rem; line-height: 1.25; }
  .mlist__desc { grid-column: 2 / -1; font-size: .9375rem; line-height: 1.5; }
  .mlist__arrow { width: 1.75rem; height: 1.75rem; font-size: 1rem; }

  .watch__inner { gap: 1.5rem; }
  .watch__copy { min-width: 0; width: 100%; }
  .watch__btn { padding: .625rem 1.25rem .625rem .625rem; font-size: .9375rem; }
  .watch__play { width: 2.5rem; height: 2.5rem; }
  .visit__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .visit__title .rline { display: inline-block; vertical-align: top; }
  .visit__title .rline + .rline { margin-left: .26em; }
  .visit__cta { margin-top: 1.25rem; }
  .visit__location { font-size: .9375rem; gap: .5rem 1rem; }

  /* Comfortable controls. Header, menu and footer rules are shared: see styles.css. */
  .btn, .btn--lg { min-height: 3rem; font-size: .9375rem; padding: .75rem 1.25rem; justify-content: center; white-space: normal; text-align: center; }
  .visit__directions { min-height: 2.75rem; }


  /* Enlarged text gets the full row width while retaining both navigation cues. */
  @container (max-width: 12rem) {
    .mlist__item a { grid-template-columns: minmax(0, 1fr) 1.75rem; }
    .mlist__icon { grid-column: 1; grid-row: 1; }
    .mlist__name { grid-column: 1 / -1; grid-row: 2; }
    .mlist__desc { grid-column: 1 / -1; grid-row: 3; }
    .mlist__arrow { grid-column: 2; grid-row: 1; }
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  /* Retain the page's reveal rhythm with less travel and quicker settling. */
  .reveal-up { transform: translateY(var(--reveal-dist)); }
  .reveal-up.is-visible { transform: none; }
  .reveal-lines .rline > span { transition-duration: .7s; }
  .label-tag::after { transition-duration: .75s; }
}

@media (max-width: 359px) {
  .sundays__when { flex-wrap: wrap; }
}