/* =========================================================
   home.css – Landing‑page‑only styles (hero, slider, layout)
   Cleaned: No header/nav override
   ========================================================= */

/* ---------------------- TYPOGRAPHY (home page only) ----------------------
   Scoped under body.home so the rest of the site is unaffected. Playfair
   Display gives headings an editorial/heritage feel that suits a 200‑year‑
   old cathedral; Inter (now actually loaded via Google Fonts, previously
   just a name with no font-face behind it) stays for body copy. */
:root {
  --home-font-heading: 'Playfair Display', Georgia, serif;
  --home-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --home-ink: #2b241d;
  --home-muted: #5c5248;
  --home-accent: #9a4b1d;
  --home-accent-dark: #6b3512;
}

body.home {
  font-family: var(--home-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--home-ink);
}

body.home h1,
body.home h2,
body.home h3 {
  font-family: var(--home-font-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--home-ink);
}

/* ---------------------- HERO BANNER ---------------------- */
.hero-banner {
  position: relative;
  overflow: hidden;
}
.hero-banner img {
  width: 100%;
  height: 50vh;
  object-fit: cover;
}

/* Ken Burns animation */
@keyframes kbZoom {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.15) translateX(-4%); }
}
.hero-banner .kenburns {
  animation: kbZoom 20s ease-in-out infinite alternate;
  transition: animation-play-state 0.2s;
}
.hero-banner:hover .kenburns {
  animation-play-state: paused;
}

/* ---------------------- HERO SLIDER ---------------------- */
.hero-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
  /* Dark fallback while the large hero JPGs download/decode. Without it
     the backdrop is white and the header's WHITE hamburger/nav links are
     invisible until the first image paints — looked like the menu button
     "loaded late" on mobile. */
  background: #2b241d;
}
.hero-slider .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  animation: slideFade 28s linear infinite, slideZoom 4s ease-in-out infinite;
  animation-fill-mode: forwards;
}
/* 7 slides x 4s = 28s loop */
.hero-slider .slide:nth-child(1) { animation-delay: 0s, 0s; }
.hero-slider .slide:nth-child(2) { animation-delay: 4s, 4s; }
.hero-slider .slide:nth-child(3) { animation-delay: 8s, 8s; }
.hero-slider .slide:nth-child(4) { animation-delay: 12s, 12s; }
.hero-slider .slide:nth-child(5) { animation-delay: 16s, 16s; }
.hero-slider .slide:nth-child(6) { animation-delay: 20s, 20s; }
.hero-slider .slide:nth-child(7) { animation-delay: 24s, 24s; }

@keyframes slideFade {
  0%, 11%   { opacity: 1; }
  15%, 100% { opacity: 0; }
}
@keyframes slideZoom {
  0%   { transform: scale(1); }
  80%, 100% { transform: scale(1.12); }
}

/* ---------------------- EMBLEM STRIP ---------------------- */
.emblem-strip {
  background: #f8f5ee;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.emblem-strip img {
  height: 120px;
  width: 120px;
  border-radius: 50%;
}
.emblem-copy h2 {
  font-size: 1.9rem;
  margin: 0;
  color: #463016;
}
.emblem-copy p {
  margin-top: 4px;
  color: #463016;
}

/* Emblem animation */
@keyframes emblemZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}
.emblem-zoom {
  animation: emblemZoom 18s ease-in-out infinite alternate;
  transform-origin: center;
}
.emblem-zoom:hover {
  animation-play-state: paused;
}

/* ---------------------- WELCOME CARD ---------------------- */
/* body.home prefix beats base.css's `.container { margin: 0 auto }`,
   which loads later and was zeroing this card's top margin. */
body.home .welcome-card {
  /* Same width as the About Our Church content cards below. */
  max-width: 1040px;
  /* Extra top margin so the card doesn't sit flush against the full-bleed
     hero slider — gives the eye a resting point after the imagery. */
  margin: 4rem auto 2.5rem;
  padding: 2rem clamp(1.5rem, 4vw, 2.5rem);
  background: #fff;
  /* Same brand-brown outline as the Vatican News boxes for consistency. */
  border: 1.5px solid #b45309;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.welcome-card h2 {
  font-size: clamp(1.75rem, 1.2vw + 1.25rem, 2.25rem);
  color: var(--home-accent-dark);
  margin-bottom: 1.25rem;
}
.welcome-card p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--home-muted);
  text-align: justify;
}
/* Closing tagline sits on its own centered line below the paragraph. */
body.home .welcome-card .welcome-tagline {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--home-accent-dark);
}

/* ---------------------- ICON TILES ---------------------- */
.icon-tiles {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0;
}
.tile {
  flex: 1 1 180px;
  max-width: 220px;
  background: #fff;
  border: 2px solid #a05d20;
  border-radius: 8px;
  text-align: center;
  padding: 1.25rem;
  transition: 0.25s;
  text-decoration: none;
  color: #463016;
}
.tile i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #a05d20;
}
.tile:hover {
  background: #a05d20;
  color: #fff;
}

/* ---------------------- CONTENT CARDS ---------------------- */
.content-card {
  display: flex;
  gap: 2rem;
  margin: 2rem auto;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1040px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.content-card.reverse {
  flex-direction: row-reverse;
}
/* Fixed aspect-ratio + object-fit so the photo reads as an intentional
   portrait crop rather than a raw <img width> squeeze. Sized modestly so
   the image supports the text instead of dominating it. */
.content-card img {
  flex: 0 1 280px;
  max-width: 280px;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.content-card h3 {
  color: var(--home-accent-dark);
  margin-bottom: 0.75rem;
}
.card-body {
  flex: 1 1 420px;
  min-width: 0;
  padding: 0.5rem 1rem;
}
.card-body p,
.relic-text p {
  text-align: justify;
}

/* ---------------------- GALLERY ---------------------- */
.gallery-wrapper {
  overflow: hidden;
  max-width: 1200px;
  margin: 2.5rem auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
/* Like .gallery-title, this class existed only in the HTML — no rule, so
   the "View more" button sat flush left under the centered gallery. */
.center-button {
  text-align: center;
  margin-top: 1.75rem;
}
/* Was previously unstyled, so it fell back to the browser default
   left-aligned block heading while every other section on the page
   is centered. */
.gallery-title {
  text-align: center;
  font-family: var(--home-font-heading);
  font-size: clamp(1.5rem, 1vw + 1.25rem, 2rem);
  letter-spacing: 2px;
  color: var(--home-accent-dark);
  margin-bottom: 2rem;
}
.gallery-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--home-accent);
  border-radius: 2px;
  margin: 0.75rem auto 0;
}
.gallery-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scrollImgs 22s linear infinite;
}
.gallery-track img {
  flex: 0 0 auto;
  width: 320px;
  height: 210px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
@keyframes scrollImgs {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}

/* ---------------------- VATICAN NEWS STRIP ---------------------- */
.vatican-news-wrapper {
  display: flex;
  gap: 2rem;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  max-width: 1200px;
  margin: 2.5rem auto 3rem;
  padding: 0 1rem;
}
.vatican-container {
  flex: 1 1 300px;
  max-width: 320px;
  background: #fff;
  /* Border picks up the footer's brand brown (#b45309) so the row reads
     as a deliberate lead-in to the footer right below it. */
  border: 1.5px solid #b45309;
  border-radius: 8px;
  text-align: center;
  padding: 1.75rem 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  /* Column layout keeps the three "Click here" buttons on one baseline
     even when a title (e.g. Archdiocese of Hyderabad) wraps to two lines. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
}
.vatican-title {
  display: flex;
  align-items: center;
  flex: 1;
}
.vatican-container:hover {
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.18);
  transform: translateY(-3px);
}
.vatican-title {
  font-family: var(--home-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--home-accent-dark);
}
.vatican-button {
  display: inline-block;
  padding: 12px 22px;
  background: #9A4B1D;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s;
}
.vatican-button:hover {
  background: #7e3713;
}

/* ---------------------- RELIC SECTION ---------------------- */
.relic-section {
  padding: 100px 5%;
}
.relic-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.relic-image img {
  width: 500px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.relic-text {
  max-width: 500px;
  text-align: left;
}
.relic-section.alt .relic-container {
  flex-direction: row-reverse;
}

/* ---------------------- RESPONSIVE TWEAKS ---------------------- */
@media (max-width: 768px) {
  .hero-slider,
  .hero-banner img,
  .hero-banner .kenburns {
    height: 50vh;
  }

  .content-card,
  .content-card.reverse {
    flex-direction: column;
    text-align: center;
  }
  .content-card img {
    /* In the stacked column layout the flex-basis (280px) becomes the
       HEIGHT and fights the aspect-ratio — reset it. */
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* Tighter reading rhythm on phones — the desktop 1.75–1.8 line-height
     feels airy and stretched in a narrow single column. */
  body.home {
    font-size: 16px;
    line-height: 1.6;
  }
  body.home .welcome-card p,
  .card-body p,
  .relic-text p {
    font-size: 1rem;
    line-height: 1.6;
  }
  .card-body {
    max-width: 100%;
  }

  .gallery-track img {
    width: 260px;
    height: 170px;
  }

  .relic-text {
    text-align: center;
    max-width: 100%;
  }

  /* Stack the three link boxes — the nowrap row forced a hidden
     horizontal scroll and cut off the third box on phones. */
  .vatican-news-wrapper {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .vatican-container {
    max-width: 100%;
  }
}

/* ---------------------- TRANSPARENT MOTTO BAR & HEADER ---------------------- */

.header__image {
  max-width: 120px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  margin-bottom: 8px;
  border: 1.5px solid rgba(255 255 255 / 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.header__caption,
.header__title,
.header__location {
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

/* Responsive adjustments for header and motto bar */
@media (max-width: 900px) {
  .header {
    position: fixed;
    top: 30px;
    padding: 15px 10px;
  }
  .header__left,
  .header__center,
  .header__right {
    max-width: 100%;
    margin-bottom: 15px;
  }
  .header__image {
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  #motto-bar {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
  .header__title {
    font-size: 1.4rem;
  }
  .header__location {
    font-size: 0.9rem;
  }
  .header__caption {
    font-size: 0.75rem;
    max-width: 100%;
  }
}