/*
 * Home page composition: hero, tri-column, red intro band, news strip,
 * verse pull-quote, "Who is Jesus?", FIEC partnership strip. Loaded
 * only from templates/index.html.
 *
 * Numbers (sizes, weights, colors) are pulled from tokens.css and from
 * reference/design-notes.md.
 */

/* ----- Shared bits used across home-page sections ----- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--size-button);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  border: 2px solid transparent;
  letter-spacing: 0.5px;
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

.btn--brand {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.btn--brand:hover,
.btn--brand:focus {
  background: #9b1010;
}

.btn--inverted {
  background: #fff;
  color: var(--color-brand);
}

.btn--inverted:hover,
.btn--inverted:focus {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.link-cta {
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--color-brand);
  text-decoration: none;
  letter-spacing: 0.5px;
  font-size: 14px;
}

.link-cta:hover,
.link-cta:focus {
  text-decoration: underline;
}

.section-heading {
  font-size: var(--size-section);
  line-height: var(--line-section);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  text-align: center;
  margin: 0 0 32px;
}

/* ----- Hero carousel -----
   Slides stack absolutely; only `.is-active` has opacity 1. A small
   JS (in `base.html`) cycles the active class every 6s and on
   prev/next/dot input. Honors `prefers-reduced-motion` by skipping
   the autoplay timer. */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-on-brand);
}

.hero__rotator {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.hero__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Two stacked gradients:
     1. Bottom-up so the strapline and CTA (which sit low) stay
        readable on bright daylight slides without dulling the top.
     2. Left-to-right so the left-anchored heading reads on busy
        slides. Right side stays nearly transparent.
     The left column is deep on purpose: the red wordmark (#db1414,
     luminance 0.156) only clears 3:1 contrast when its ground is
     near-black (L below 0.019), so anything brighter than ~0.85
     alpha lets bright photo pixels push the brand word below the
     WCAG large-text minimum. Verified against all three slides. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 80px;
  max-width: var(--container-desktop);
}

.hero__kicker {
  /* A span inside the h1 (so the full church name is the page
     heading) rendered as its own line above "Felixstowe". */
  display: block;
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 1.1;
  font-weight: var(--weight-hero-kicker);
  letter-spacing: var(--tracking-hero-kicker);
  text-transform: uppercase;
  color: var(--color-on-brand);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hero__title {
  margin: 0 0 16px;
  font-size: clamp(2.25rem, 8vw, 4.375rem);
  line-height: 1;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-brand-bright);
  /* The kicker and strapline get by with a drop shadow; the red
     wordmark needs a tight dark halo as well. Red at luminance 0.156
     only clears 3:1 against near-black, and no scrim can push bright
     photo pixels that low without blacking out the whole image, so
     the halo provides the guaranteed ground right behind each glyph. */
  text-shadow:
    0 0 14px rgba(0, 0, 0, 0.85),
    0 0 5px rgba(0, 0, 0, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.6);
}

.hero__strapline,
.hero__sub {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.hero__strapline {
  max-width: 680px;
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.5;
}

.hero__sub {
  max-width: 680px;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
}

/* The service-times line: the one fact a newcomer came for, so it is
   the boldest body text in the hero. Same shadow as the strapline. */
.hero__times {
  margin: 0 0 28px;
  font-size: 17px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.hero__cta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ----- Carousel controls (prev/next arrows + dots + pause) -----
   All ship with the [hidden] attribute and are revealed by the
   carousel JS; the explicit guards below keep [hidden] winning over
   the display values these rules set. */
.hero__nav[hidden],
.hero__dots[hidden] {
  display: none;
}

.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-on-brand);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease-out;
}

.hero__nav:hover,
.hero__nav:focus-visible {
  background: rgba(0, 0, 0, 0.6);
}

.hero__nav--prev { left: 16px; }
.hero__nav--next { right: 16px; }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

/* Each dot is a 28px touch target; the visible 10px disc is the
   content box (the padding stays transparent via background-clip). */
.hero__dot {
  width: 28px;
  height: 28px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  background-clip: content-box;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease-out, transform 0.15s ease-out;
}

.hero__dot:hover,
.hero__dot:focus-visible {
  background: rgba(255, 255, 255, 0.8);
  background-clip: content-box;
}

.hero__dot.is-active {
  background: #fff;
  background-clip: content-box;
  transform: scale(1.2);
}

/* Pause/play toggle at the head of the dots pill. The two icons swap
   with the .is-paused class the carousel JS toggles. */
.hero__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.15s ease-out;
}

.hero__pause:hover,
.hero__pause:focus-visible {
  color: #fff;
}

.hero__pause .hero__pause-icon--play {
  display: none;
}

.hero__pause.is-paused .hero__pause-icon--play {
  display: block;
}

.hero__pause.is-paused .hero__pause-icon--pause {
  display: none;
}

/* On phones and small tablets the mid-height arrows sit right on top
   of the hero text, so they drop to the bottom corners instead, level
   with the dots pill and clear of every line of copy. */
@media (max-width: 767px) {
  .hero__nav {
    width: 40px;
    height: 40px;
    top: auto;
    bottom: 10px;
    transform: none;
  }
  .hero__nav--prev { left: 12px; }
  .hero__nav--next { right: 12px; }
}

/* ----- Tri-column ----- */
.tri {
  margin: var(--section-y) auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.tri__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.tri__card--bordered {
  border: 1px solid var(--color-brand);
  border-radius: 4px;
}

/* Heading sits at the top of every card so on mobile (stacked) the
   visitor reads the section name before the visual element. Same
   colour and size across all three cards for consistency. */
.tri__heading {
  font-size: 22px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-heading);
  letter-spacing: 0.4px;
  margin: 0;
  padding: 20px 24px 14px;
}

.tri__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.tri__map {
  width: 100%;
  height: 200px;
}

.tri__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tri__body {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.tri__body p {
  margin: 0;
}

.tri__address {
  font-style: normal;
}

.tri__contact a {
  color: var(--color-brand);
}

/* ----- Red intro band ----- */
.intro-band {
  background: var(--color-brand);
  color: var(--color-on-brand);
  padding: var(--section-y) 0;
}

.intro-band__inner {
  text-align: center;
}

.intro-band__heading {
  font-size: var(--size-intro);
  line-height: 1.1;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-on-brand);
  margin: 0 0 24px;
}

.intro-band__lead {
  max-width: 760px;
  margin: 0 auto 16px;
  font-size: 18px;
  line-height: 1.6;
}

.intro-band__mission {
  max-width: 760px;
  margin: 0 auto 24px;
  font-size: 18px;
  line-height: 1.6;
}

/* ----- News strip (home-page wrapper around .news-card list) ----- */
.news-strip {
  margin: var(--section-y) auto;
  text-align: center;
}

.news-strip__cta {
  margin: 40px 0 0;
}

/* ----- Verse pull-quote -----
   Treated as a thematic hinge between the news strip and the
   "Who is Jesus?" call. Hairline rules above and below, generous
   vertical breathing room, italic but calm. */
.verse {
  margin: var(--section-y) auto;
  padding: 56px 24px;
  text-align: center;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  max-width: var(--container-desktop);
}

.verse__quote {
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: #555;
  margin: 0 auto;
  max-width: 720px;
  font-weight: var(--weight-regular);
}

/* ----- Who is Jesus? ----- */
.who-jesus {
  margin: var(--section-y) auto;
  text-align: center;
  max-width: 800px;
}

.who-jesus__heading {
  font-size: var(--size-section);
  line-height: var(--line-section);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  margin: 0 0 16px;
}

.who-jesus__body {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ----- FIEC partnership strip ----- */
.fiec {
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  border-top: 1px solid var(--color-rule);
  max-width: var(--container-desktop);
}

.fiec__kicker {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #6b6b6b;
}

.fiec__link {
  display: inline-block;
  opacity: 0.85;
  transition: opacity 0.15s ease-out;
}

.fiec__link:hover,
.fiec__link:focus-visible {
  opacity: 1;
}

.fiec__link img {
  height: 56px;
  width: auto;
  display: inline-block;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  .tri,
  .news-strip__grid {
    grid-template-columns: 1fr;
  }

  .hero__title {
    font-size: 56px;
    line-height: 56px;
  }

  .hero__kicker {
    font-size: 36px;
    line-height: 44px;
  }

  .intro-band__heading {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 480px;
  }

  .hero__inner {
    padding-top: 48px;
    /* The carousel controls own the hero's bottom 50px at this width
       (40px arrows at bottom 10px, dots pill level with them), so the
       content needs more than the top's 48px to stay clear of them:
       50px of controls plus a 34px visual gap. */
    padding-bottom: 84px;
  }

  .hero__title {
    font-size: 44px;
    line-height: 44px;
  }

  .hero__kicker {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 2px;
  }

  .intro-band {
    padding: 48px 0;
  }

  .intro-band__heading {
    font-size: 28px;
  }

  .section-heading,
  .who-jesus__heading {
    font-size: 28px;
    line-height: 36px;
  }
}