/* ============================================================
   HOMEPAGE IMAGE EXPERIENCE
   Premium responsive hero + curated atmosphere section
   ============================================================ */

/* --- Responsive Hero Background ---
   Desktop: original storefront (hero.webp from main CSS — no override needed)
   Tablet/Mobile: switch to interior photos for better fit
   ----------------------------------- */

@media (min-width: 601px) and (max-width: 1024px) {
  .hero {
    background-image: url('../assets/images/homepage/hero-tablet-crop.webp');
    background-position: center center;
    background-size: cover;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 100svh;
  }
}


/* ============================================================
   ATMOSPHERE SECTION — "Inside SEFA"
   Premium editorial image layout
   ============================================================ */

.atmosphere {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background-color: var(--color-bg, #111);
  overflow: hidden;
}

.atmosphere__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.atmosphere__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.atmosphere__title {
  font-family: var(--font-heading, 'Bebas Neue', sans-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-white, #f5f5f5);
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}

.atmosphere__subtitle {
  font-size: 1.0625rem;
  color: rgba(245, 245, 245, 0.55);
  font-weight: 400;
  margin: 0;
}

/* --- Image Grid: asymmetric editorial layout --- */
.atmosphere__grid {
  display: grid;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: clamp(520px, 60vw, 780px);
}

/* Large featured image — spans left column, all three rows */
.atmosphere__img--featured {
  grid-column: 1;
  grid-row: 1 / 4;
}

/* Three stacked images on the right */
.atmosphere__img--top {
  grid-column: 2;
  grid-row: 1;
}

.atmosphere__img--middle {
  grid-column: 2;
  grid-row: 2;
}

.atmosphere__img--bottom {
  grid-column: 2;
  grid-row: 3;
}

/* --- Image containers --- */
.atmosphere__img {
  position: relative;
  overflow: hidden;
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  background-color: var(--color-charcoal, #2b2b2b);
}

.atmosphere__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(17, 17, 17, 0.25) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

.atmosphere__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.atmosphere__img:hover img {
  transform: scale(1.03);
}

/* All images fill their grid cells — no aspect-ratio needed on desktop */

/* --- Image caption overlay --- */
.atmosphere__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1rem 0.875rem;
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.7) 0%,
    transparent 100%
  );
  z-index: 1;
  border-radius: 0 0 inherit inherit;
}

.atmosphere__caption-text {
  font-family: var(--font-heading, 'Bebas Neue', sans-serif);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  color: rgba(245, 245, 245, 0.9);
  letter-spacing: 0.1em;
  margin: 0;
}

/* Staggered reveal delays for the grid items */
.atmosphere__img--top.reveal {
  transition-delay: 0.15s;
}

.atmosphere__img--middle.reveal {
  transition-delay: 0.3s;
}

.atmosphere__img--bottom.reveal {
  transition-delay: 0.45s;
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet — featured full width, others in 3-column row below */
@media (max-width: 768px) {
  .atmosphere__grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }

  .atmosphere__img--featured {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 21 / 9;
  }

  .atmosphere__img--top,
  .atmosphere__img--middle,
  .atmosphere__img--bottom {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Mobile — single column stack */
@media (max-width: 520px) {
  .atmosphere__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    gap: clamp(0.5rem, 2vw, 0.625rem);
  }

  .atmosphere__img--featured,
  .atmosphere__img--top,
  .atmosphere__img--middle,
  .atmosphere__img--bottom {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
}