/* ── RVVL Site v6 — Image System ────────────────────────────────
 * Pattern A: Hero backgrounds (.hero-bg)
 * Pattern B: Visual breather sections (.s-breather, .breather-bg)
 * Pattern C: Right-column editorial images (.col-img-right)
 *
 * img-loader.js adds .loaded class when real image is ready.
 * Until then, CSS gradient placeholders maintain layout and feel.
 * ─────────────────────────────────────────────────────────────── */

/* ── Position context for all section types ─── */
.snap-section,
.about-section,
.about-hero {
  position: relative;
}

/* Content layers float above bg image layers */
.snap-section > .section-body,
.snap-section > .marquee,
.about-hero > .ah-inner,
.about-hero > .marquee,
.about-section > .as-body,
.about-section > .marquee {
  position: relative;
  z-index: 2;
}

/* ── PATTERN A — Hero Background ─────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Warm dark gradient placeholder */
  background: linear-gradient(160deg, #1e1a15 0%, #0a0907 100%);
}

.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg.loaded img { opacity: 1; }

/* Dark overlay — keeps text legible over any photo */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    170deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.3) 55%,
    rgba(0,0,0,0.48) 100%
  );
  z-index: 1;
}

/* Subtle placeholder frame — fades out when image loads */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.hero-bg.loaded::before { opacity: 0; }

/* ── PATTERN B — Visual Breather ─────────────── */
.s-breather {
  background: #0d0b09;
  overflow: hidden;
}

.breather-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(148deg, #1e1a15 0%, #0a0907 100%);
}

.breather-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.breather-bg.loaded img { opacity: 1; }

/* Very light overlay — let the image breathe */
.breather-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.12);
  z-index: 1;
}

/* Placeholder frame */
.breather-bg::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.breather-bg.loaded::before { opacity: 0; }

/* Breather marquee sits above the image */
.s-breather > .marquee {
  position: relative;
  z-index: 3;
  margin-top: auto;
}

/* ── PATTERN C — Right Column Image ──────────── */
.col-img-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  overflow: hidden;
  z-index: 1;
  /* Default: dark section placeholder */
  background: linear-gradient(180deg, #1e1a15 0%, #0d0b09 100%);
}

/* Bone section variant */
.s-bone .col-img-right {
  background: linear-gradient(180deg, #ddd6c8 0%, #cdc5b6 100%);
}

.col-img-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.col-img-right.loaded img { opacity: 1; }

/* Left-edge fade: blends image into section background */
.col-img-right::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 180px;
  z-index: 2;
  pointer-events: none;
  /* Default: dark section fade */
  background: linear-gradient(to right, #0d0b09, transparent);
}
.s-bone .col-img-right::after {
  background: linear-gradient(to right, #f4f0ea, transparent);
}

/* Subtle placeholder frame */
.col-img-right::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.s-bone .col-img-right::before {
  border-color: rgba(0,0,0,0.07);
}
.col-img-right.loaded::before { opacity: 0; }

/* Transparency page hero uses .trans-hero (not snap-section) */
.trans-hero {
  position: relative;
}
.trans-hero .trans-hero-inner,
.trans-hero .marquee {
  position: relative;
  z-index: 2;
}

/* ── Dark hero text overrides ─────────────────── */
/* about.html hero — flip to white when s-dark is added */
.about-hero.s-dark .ah-eyebrow {
  color: rgba(255,255,255,0.6);
}
.about-hero.s-dark .ah-sub {
  color: rgba(255,255,255,0.7);
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .col-img-right {
    width: 38%;
  }
  .col-img-right::after {
    width: 120px;
  }
}

@media (max-width: 768px) {
  .col-img-right {
    display: none;
  }
}