/* landing-film-strip.css v5.4.0 | Buktika | Landing — Film Strip / Section 1
   Replaces: .landing-fence section entirely. Owner override OVR-6.
   Depends:  global.css v3.14.0, themes.css v2.4.0, landing.css v8.13.0
   Deployed: /assets/css/landing/partials/landing-film-strip.css
   Layout:   .sdx-film-strip is flex column. Background #0c0905 is the celluloid.
             .film-rail top/bottom hold the sprocket holes.
             .film-frames is a flex row with gap — the celluloid background
             shows through the gap as the natural vertical separators. No dividers.
   All selectors scoped under .page-landing.
   ChangeLog:
     v5.4.0 (2026-06-30): READABILITY. Removed the mobile 0.9rem floor and
              !important size override from the fence narrative. Long-form
              film-frame prose now retains the 1rem body floor and 1.7 leading.
     v5.3.0 (2026-03-11): OPTION B — side frame desaturation. LH and RH mock frame
              base colours collapsed toward celluloid #0c0905. Both frames now read
              as film-edge texture rather than competing imagery. Centre image
              dominates. Film structure and sprocket holes preserved intact.
              LH: was #5c3a18/#3a2510/#1a1208 → now #1a1208/#0f0c08/#0c0905.
              RH: was #1a3012/#0e1f0c/#0a1408 → now #111a0d/#0c120a/#0c0905.
              Fade-to-celluloid gradients retained — structural, not decorative. */

/* 1) Page variable binding ------------------------------------------------- */
/* none */

/* 2) Base — the celluloid backing ------------------------------------------ */

.page-landing .sdx-film-strip {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #0c0905;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.55),
    0 18px 48px rgba(0,0,0,0.38),
    0 2px 4px  rgba(0,0,0,0.70);
}

/* 5) Rails ----------------------------------------------------------------- */

.page-landing .film-rail {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  background: #0c0905;
  padding: 0.4rem 0 0;
  overflow: hidden;
}

/* Sprocket hole row */
.page-landing .film-sprockets {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.8rem;
  overflow: hidden;
  height: 3.8rem;
}

/* Individual hole — owner-confirmed values */
.page-landing .film-sprocket-hole {
  flex-shrink: 0;
  width: 2.2rem;
  height: 3.2rem;
  border-radius: 0.35rem;
  background: #ffeee9a1;
  border: 1.5px solid #2c2318;
  box-shadow:
    inset 0 6px 4px rgba(0,0,0,0.9),
    inset 0 4px 20px rgba(0,0,0,0.7),
    0 0 0 2px #080604;
  margin: 0 1.55rem;
}

/* Metadata text strip */
.page-landing .film-rail-text {
  height: 1.1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 1rem;
}
.page-landing .film-rail-text span {
  display: block;
  white-space: nowrap;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: rgba(245,176,20,0.6);
  user-select: none;
  pointer-events: none;
}
.page-landing .film-rail--bottom .film-rail-text span {
  color: rgba(245,176,20,0.45);
}

/* 6) Frames row ------------------------------------------------------------ */

/* Flex row — gap exposes the #0c0905 celluloid background as vertical separators */
.page-landing .film-frames {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3rem;
  background: transparent;
}

/* All three frames share these base rules */
.page-landing .film-frame {
  position: relative;
  overflow: hidden;
}

/* LH mock frame — collapsed toward celluloid. Texture only, no readable colour.
   Fade-to-celluloid gradient retained for structural gap blending. */
.page-landing .film-frame--lh {
  flex: 0 0 10%;
  background: linear-gradient(to left, rgba(12,9,5,0) 0%, rgba(12,9,5,0.92) 100%), linear-gradient(155deg, #9e825f 0%, #524a3e 50%, #090602 100%);
}

/* RH mock frame — collapsed toward celluloid. Texture only, no readable colour.
   Fade-to-celluloid gradient retained for structural gap blending. */
.page-landing .film-frame--rh {
  flex: 0 0 10%;
  background:
    linear-gradient(to right,
      rgba(12,9,5,0) 0%,
      rgba(12,9,5,0.92) 100%
    ),
    
      linear-gradient(155deg,
      #2d43235e 0%,
      #23301e 50%,
      #3d501a 100%
    );
}

/* CENTER frame — real photo, drives the section height */
.page-landing .film-frame--center {
  flex: 1 1 auto;
  min-height: 900px;
}

/* Photo background — fills center frame */
.page-landing .film-frame-photo {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(160deg,
      rgba(160,100,30,0.18) 0%,
      rgba(100,60,10,0.08)  50%,
      rgba(50,80,30,0.22)  100%
    ),
    url('/assets/images/landing/section-fence-bg.webp');
  background-size: cover;
  background-position: center 40%;
  filter: saturate(0.78) contrast(1.08) sepia(0.28) brightness(0.90);
}

/* Vignette over photo */
.page-landing .film-frame-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 35%, rgba(0,0,0,0.55) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Frame number */
.page-landing .film-frame-num {
  position: absolute;
  bottom: 0.5rem;
  right: 0.6rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.42rem;
  font-weight: 700;
  color: rgba(245,176,20,0.38);
  z-index: 9;
  user-select: none;
  pointer-events: none;
}

/* 8) Text overlay on center frame ------------------------------------------ */

/* Fills the center frame absolutely — text sits on top of the photo */
.page-landing .film-fence-content {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.24) 60%,
    rgba(0,0,0,0.05) 100%
  );
}

.page-landing .film-frame--center .landing-fence-inner {
  background-image: none !important;
  background:       none !important;
  overflow:         visible !important;
  padding:          3rem 2.5rem !important;
  position:         relative !important;
  z-index:          6 !important;
  max-width:        48rem !important;
  margin:           0 auto !important;
  width:            100% !important;
}
.page-landing .film-frame--center .landing-fence-inner::before {
  display: none !important;
  content: none !important;
}

/* 9) Media queries --------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-landing .film-sprocket-hole { width: 2rem;   height: 2.8rem; margin: 0 1.2rem; }
  .page-landing .film-frame--lh,
  .page-landing .film-frame--rh     { flex-basis: 8%; }
}

@media (max-width: 680px) {
  .page-landing .film-sprocket-hole { width: 1.6rem; height: 2.2rem; margin: 0 0.9rem; }
  .page-landing .film-frames        { gap: 1.2rem; }
  .page-landing .film-frame--lh,
  .page-landing .film-frame--rh     { flex-basis: 5%; }

  /* 1. Increased height and allowed scrolling for long text */
  .page-landing .film-frame--center { 
    min-height: 600px; /* Increased from 480px to accommodate text */
  }

  .page-landing .film-fence-content {
    overflow-y: auto; /* Allows scrolling inside the "frame" if text is too long */
    -webkit-overflow-scrolling: touch;
    align-items: flex-start; /* Better for long-form reading on mobile */
    padding-top: 2rem;
  }

  /* 2. Fluid typography for paragraphs */
  .page-landing .landing-fence-para {
    font-size: var(--body);
    line-height: 1.7;
    margin-bottom: 0.8rem !important;
  }

  /* 3. Pull-quote scaling */
  .page-landing .landing-fence-pull {
    font-size: var(--body);
    line-height: 1.5;
    margin-top: 1rem !important;
  }

  .page-landing .film-frame--center .landing-fence-inner { 
    padding: 1.5rem 1.25rem !important; 
  }
}

/* 10) Dark mode ------------------------------------------------------------ */
/* Celluloid palette is self-contained. No dark override needed. */