/*
 * 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. */
  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.68) 0%, rgba(0, 0, 0, 0.5) 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);
}

.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 32px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
}

/* ----- Carousel controls (prev/next arrows + dots) ----- */
.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: 20px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  padding: 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);
}

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

@media (max-width: 767px) {
  .hero__nav {
    width: 36px;
    height: 36px;
  }
  .hero__nav--prev { left: 8px; }
  .hero__nav--next { right: 8px; }
}

/* ----- 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;
    padding-bottom: 48px;
  }

  .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;
  }
}