/* ============================================================
   Homepage — Full-screen scroll-snap gallery
   ============================================================ */

/* Page-level scroll snap.
   scroll-snap-type on both html + body (matching Bricks custom CSS),
   but overflow-y ONLY on body — html must stay overflow:visible
   so body is the sole scroll container. */
html:has(body.home) {
  scroll-snap-type: y mandatory;
}

body.home {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: auto;
}

/* Gallery container */
.homepage-gallery {
  display: flex;
  flex-direction: column;
}

/* Each card = one full-viewport snap target */
.featured-image-card {
  height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

/* Images — fill the viewport, crop to fit */
.featured-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile image hidden on desktop */
.featured-image--mobile {
  display: none;
}

/* Empty state (no posts in homepage-gallery category) */
.homepage-gallery__empty {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--body-m);
  color: var(--text-primary);
  padding: var(--Space-2xl);
  text-align: center;
  scroll-snap-align: start;
}

/* -- Footer as snap target --
   The footer needs to be a snap target so users can scroll past the last
   gallery image and snap to the footer. Without this, scroll-snap mandatory
   would always snap back to the last image because there's no snap point
   below it. The actual element has class `site-footer` (not `footer`). */
body.home .site-footer {
  scroll-snap-align: start;
}

/* -- Responsive -- */

@media (max-width: 767px) {
  .featured-image--desktop {
    display: none !important;
  }

  .featured-image--mobile {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}