/* ==========================================================================
   FILMS PAGE STYLES — Darpan Studio
   ========================================================================== */

/* Solid White Header Override for Films Page */
.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid #eaeaea !important;
  position: sticky !important;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.site-header .brand-name {
  color: #111111 !important;
}

.site-header .nav-link {
  color: #222222 !important;
}

.site-header .nav-link.active-page {
  color: var(--color-accent-gold) !important;
  font-weight: 600;
}

.site-header .nav-link.active-page::after {
  width: 100% !important;
  background-color: var(--color-accent-gold) !important;
}

/* Full-Width Hero Video Banner */
.films-hero-section {
  width: 100%;
  height: 75vh;
  min-height: 500px;
  position: relative;
  overflow: hidden;
  background-color: #000000;
}

.films-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.1);
}

/* 4 Curved Feature Cards Grid Section */
.films-grid-section {
  padding: 4rem 1.5rem 6rem 1.5rem;
  background-color: #ffffff;
}

.films-grid-container {
  max-width: 1520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.films-row {
  display: grid;
  width: 100%;
  gap: 2.2rem;
}

/* Row 1: Equal 50%-50% Width */
.films-row-equal {
  grid-template-columns: repeat(2, 1fr);
}

/* Row 2: Left card narrower (0.82fr), Right card wider (1.18fr) */
.films-row-asym {
  grid-template-columns: 0.82fr 1.18fr;
}

.film-card {
  position: relative;
  width: 100%;
  height: 470px;
  overflow: hidden;
  cursor: pointer;
  background-color: #f4f2ee;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.film-card:hover {
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.22);
}

/* Desktop Corner Curves for 2x2 Grid */
.film-card.card-curve-tl { border-top-left-radius: 90px; }
.film-card.card-curve-tr { border-top-right-radius: 90px; }
.film-card.card-curve-bl { border-bottom-left-radius: 90px; }
.film-card.card-curve-br { border-bottom-right-radius: 90px; }

.film-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.film-card:hover .film-card-img {
  transform: scale(1.05);
}

/* Bottom Dark Gradient Banner with Thin Divider Line */
.film-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.film-card-line {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}

.film-card-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Mobile Layout: Asymmetric Curves via CSS Grid Areas */
@media (max-width: 768px) {
  .films-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "wedding instacut"
      "special instacut"
      "prewedding prewedding";
    gap: 0.9rem;
  }

  .films-row {
    display: contents;
  }

  .film-card.card-wedding {
    grid-area: wedding;
    height: 180px;
    border-radius: 0;
    border-top-left-radius: 40px;
  }

  .film-card.card-special {
    grid-area: special;
    height: 180px;
    border-radius: 4px;
  }

  .film-card.card-instacut {
    grid-area: instacut;
    height: 369px;
    border-radius: 0;
    border-top-right-radius: 40px;
  }

  .film-card.card-prewedding {
    grid-area: prewedding;
    height: 220px;
    border-radius: 0;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .film-card-overlay {
    padding: 1rem 0.8rem;
  }

  .film-card-line {
    margin-bottom: 0.5rem;
  }

  .film-card-title {
    font-size: 1.1rem;
  }
}