/* ═══════════════════════════════════════════════════════════════ */
/*  IMAGE TREATMENTS                                                */
/*  Three patterns for integrating new marketing photos into        */
/*  index.html as a foreground layer over the existing noir-        */
/*  parallax background system.                                     */
/*                                                                  */
/*  Pattern A: Side-by-side portrait + paragraph cluster            */
/*  Pattern B: Contained landscape banner (inline rhythm break)     */
/*  Pattern C: Full-bleed landscape closer / prelude                */
/*                                                                  */
/*  Per-image crops (aspect-ratio, object-position) are applied    */
/*  via inline style attributes on the <img> elements, not in this */
/*  file. Each crop is tuned to the specific source image's        */
/*  composition. See docs/superpowers/specs/2026-04-06-image-      */
/*  integration-design.md for the per-image crop spec table.       */
/* ═══════════════════════════════════════════════════════════════ */


/* ─── PATTERN A: SIDE-BY-SIDE ─────────────────────────────────── */
/*
   A portrait image paired with a multi-paragraph text cluster.
   The cluster must be a thematically cohesive group of paragraphs
   that fills enough vertical space to balance against the image
   (target ~70% fill of image height with text content).

   Default: image LEFT, text RIGHT.
   Modifier .side-by-side--image-right flips to text LEFT, image RIGHT.
*/

.side-by-side {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
  margin: 3rem auto;
  max-width: 900px;
  position: relative;
}

.side-by-side--image-right {
  grid-template-columns: 1fr 260px;
}

.side-by-side__image {
  position: relative;
}

.side-by-side__image img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(204, 0, 0, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* Scanline overlay matches the existing explanation-section aesthetic */
.side-by-side__image::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  opacity: 0.4;
}

.side-by-side__text {
  padding-top: 0.25rem;
}

/* Text cluster paragraphs use tighter spacing and slightly smaller
   font than the surrounding section flow, so the cluster reads as
   a visual unit rather than three loose paragraphs.

   When the side-by-side appears inside .explanation-section (which is
   most uses), we have to override the existing .explanation-section p
   cascade explicitly. The existing layout.css applies: 1.2rem font,
   padding-left for chevron, ::before chevron bullet, and a callout/
   lead treatment on p:first-of-type (red border, background, larger
   font). All of those need to be suppressed inside the cluster. */
.side-by-side__text p,
.explanation-section .side-by-side__text p,
.explanation-section .side-by-side__text p:first-of-type {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 1.1rem;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.88);
}

.explanation-section .side-by-side__text p::before {
  display: none;
}

.side-by-side__text p:last-child,
.explanation-section .side-by-side__text p:last-child {
  margin-bottom: 0;
}

/* Mobile: collapse to single column. HTML order determines
   stacking — for default variant, image stacks above text;
   for reverse variant, text stacks above image. Both work. */
@media (max-width: 768px) {
  .side-by-side,
  .side-by-side--image-right {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .side-by-side__image img {
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 3/4;
  }

  /* On mobile the side-by-side collapses to stacked vertical, so the
     cluster text loses its spatial separation from the surrounding
     section flow. The smaller-font / no-chevron cluster styling that
     reads as "visually distinct sub-block" on desktop reads as
     "inconsistent typography" on mobile. Restore the cluster text to
     match the section's normal paragraph styling — but KEEP the
     no-callout-treatment overrides so the first cluster paragraph
     doesn't get the lead/border/background that would otherwise apply
     via .explanation-section p:first-of-type. */
  .explanation-section .side-by-side__text p,
  .explanation-section .side-by-side__text p:first-of-type {
    font-size: 1.1rem;
    line-height: 1.9;
    padding: 0 0 0 1.2rem;
    margin-bottom: 1.8rem;
    /* font-weight, color, border, background remain overridden from
       the desktop rules above — no callout, no border, no bg tint. */
  }

  .explanation-section .side-by-side__text p::before {
    display: inline;
  }
}


/* ─── PATTERN B: CONTAINED LANDSCAPE BANNER ──────────────────── */
/*
   A landscape image placed between paragraphs as a rhythmic break.
   Sits inside the section's content column (max-width 900px).

   aspect-ratio and object-position MUST be set per-image via
   inline style attributes on the <img> element. They depend on
   the source composition and are tuned to preserve specific
   subjects (heads, key objects). See the per-image crop spec
   table in the design doc.
*/

.inline-banner {
  margin: 2.5rem auto;
  max-width: 900px;
  position: relative;
}

.inline-banner img {
  width: 100%;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(204, 0, 0, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
}

.inline-banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  opacity: 0.4;
}


/* ─── PATTERN C: FULL-BLEED CLOSER / PRELUDE / INTERLUDE ─────── */
/*
   Landscape image that breaks out of the section's content
   container to span the full viewport width. Three variants:

   - .section-closer-image: positioned as the LAST child of a
     section, hugs the bottom edge. Used for emotional payoff or
     thriller climax moments.

   - .section-prelude-image: positioned as the FIRST child of a
     section, hugs the top edge. Used for visual transitions
     into a section.

   - .section-interlude-image: standalone full-bleed image placed
     BETWEEN sections (as a body-level sibling, not inside any
     section). No parent padding to escape, so no negative margins
     needed — just full viewport width.

   object-position MUST be set per-image via inline style
   attribute on the <img> element. aspect-ratio is fixed at
   21/9 for all three variants for visual consistency.
*/

.section-closer-image,
.section-prelude-image {
  position: relative;
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-right: -2rem;
}

.section-interlude-image {
  position: relative;
  width: 100%;
  margin: 0;
}

.section-closer-image img,
.section-prelude-image img,
.section-interlude-image img {
  width: 100%;
  display: block;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-top: 1px solid rgba(204, 0, 0, 0.5);
  border-bottom: 1px solid rgba(204, 0, 0, 0.5);
}

.section-closer-image::after,
.section-prelude-image::after,
.section-interlude-image::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  opacity: 0.5;
}

/* Section-specific margin overrides to hug section vertical edges.
   Each value matches the parent section's vertical padding so the
   negative margin cancels it out exactly.

   .narrative has padding: 8rem 2rem (from layout.css).
   #why-we-made-this has inline padding: 5rem 2rem.
   .interest-form has padding: 6rem 2rem (from layout.css). */

#narrative .section-closer-image {
  margin-top: 3rem;
  margin-bottom: -8rem;
}

#why-we-made-this .section-closer-image {
  margin-top: 3rem;
  margin-bottom: -5rem;
}

#submit-evidence .section-prelude-image {
  margin-top: -6rem;
  margin-bottom: 4rem;
}

/* Allow full-bleed images to escape the parent section's
   overflow:hidden (which would otherwise clip the negative margins).
   These three sections all have overflow:hidden in layout.css. */

#narrative,
#why-we-made-this,
#submit-evidence {
  overflow: visible;
}