/* =========================================================================
   Sound Level Events & Productions: Spec E image fidelity
   Client hero photos for interior pages (services, packages, events,
   rental categories, about/contact/faq). Applied as a `.has-photo`
   modifier alongside the existing `.hero-service` and `.content-hero`
   bands defined in services.css / main.css, so pages with no usable
   client photo keep the plain dark-band fallback untouched.
   ========================================================================= */

.hero-service,
.content-hero {
  position: relative;
  overflow: hidden;
}

.hero-service.has-photo,
.content-hero.has-photo {
  color: var(--color-white);
  min-height: min(54vh, 520px);
  display: flex;
}

.hero-service.has-photo {
  align-items: flex-end;
}

.content-hero.has-photo {
  align-items: center;
  text-align: center;
}

.hero-service.has-photo .container,
.content-hero.has-photo .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.page-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.30) 0%, rgba(10, 10, 10, 0.5) 45%, rgba(10, 10, 10, 0.9) 100%);
}

.content-hero.has-photo .page-hero-media::after {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.65) 60%, rgba(10, 10, 10, 0.8) 100%);
}

@media (max-width: 480px) {
  .hero-service.has-photo,
  .content-hero.has-photo {
    min-height: 360px;
  }
}

/* =========================================================================
   Homepage hero: swap flat fallback for the client's own event photo,
   already handled by .hero / .hero__media in main.css. Nothing new here;
   the fix is the asset itself (see content/home.html).
   ========================================================================= */

/* =========================================================================
   Homepage project grid: "view more" reveal
   Items past the first 18 are rendered at build time but hidden until the
   visitor asks for more, so no extra network fetch and no layout shift on
   reveal (grid already reserves their row height).
   ========================================================================= */
.project-grid__extra {
  display: none;
}
.project-grid.is-expanded .project-grid__extra {
  display: block;
}
.project-grid__more {
  margin-top: var(--space-4);
  text-align: center;
}