/* ============================================
   STORY COLLAGE — Scattered absolute-positioned tiles
   with centered overlay header. Body + quote sit below.
   ============================================ */

.sc2 {
  position: relative;
  overflow: hidden;
  /* Soft fade behind the centered header — color-tunable per bg variant */
  --sc2-bg-fade: rgba(255, 255, 255, 0.95);
}

/* ─── Canvas ─────────────────────────────────────────── */
.sc2__canvas {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) { .sc2__canvas { min-height: 520px; } }
@media (min-width: 1200px) { .sc2__canvas { min-height: 550px; } }

.sc2__tiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sc2__tile {
  position: absolute;
  pointer-events: auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--clr-bg-card-secondary);
  /* Subtle shadow gives depth without explicit borders */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
  will-change: transform;
  transition: box-shadow 0.4s ease;
}

.sc2__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sc2__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8e2d6 0%, #d4ccbb 40%, #c9bfaa 100%);
}

.sc2__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(60, 66, 46, 0.04) 10px, rgba(60, 66, 46, 0.04) 11px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 10px, rgba(60, 66, 46, 0.04) 10px, rgba(60, 66, 46, 0.04) 11px);
}

/* Hide image blocks beyond the 9 slotted positions to avoid stacking at (0,0). */
.sc2__tile:nth-child(n+10) {
  display: none;
}

/* ─── Tile positions — DESKTOP ──────────────────────── */
/* 9 tiles. Per-tile changes preserve the anchor edge implied by each
   instruction ("keep right where it's at" → switch to right-anchored, etc.). */
@media (min-width: 1200px) {
  .sc2__tile:nth-child(1)  { top: 0%;     left: -1%;    width: 362px; aspect-ratio: 1/1;       transform: rotate(-6deg);  z-index: 2; }
  .sc2__tile:nth-child(2)  { top: -2%;    left: 26%;    width: 375px; aspect-ratio: 4/3;       transform: rotate(-4deg);  z-index: 3; }
  /* 3 — square AR (288 × 288), slightly right (50% → 54%), height preserved. */
  .sc2__tile:nth-child(3)  { top: 2%;     left: 54%;    width: 288px; aspect-ratio: 1/1;       transform: rotate(6deg);   z-index: 3; }
  /* 4 — skinnier (4/5 → 3/4 keeps height ≈362), CCW 5° (7° → 2°). */
  .sc2__tile:nth-child(4)  { top: 0%;     right: -1%;   width: 272px; aspect-ratio: 3/4;       transform: rotate(2deg);   z-index: 2; }
  .sc2__tile:nth-child(5)  { top: 32%;    left: 22%;    width: 480px; aspect-ratio: 480 / 352; transform: rotate(-7deg);  z-index: 5; }
  /* 6 — 4:3, ~+48% width / +11% height. Bottom-right anchored so growth is up & left.
     (Switched from top:38% to bottom:20% — same visual position, different anchor.) */
  .sc2__tile:nth-child(6)  { bottom: 20%; right: 22%;   width: 340px; aspect-ratio: 4/3;       transform: rotate(-6deg);  z-index: 5; }
  .sc2__tile:nth-child(7)  { bottom: -2%; left: -1%;    width: 290px; aspect-ratio: 4/5;       transform: rotate(5deg);   z-index: 2; }
  /* 8 — v2 tweak at widest breakpoint: smaller (364 → 300), further to
     the right (right anchor 36% → 16%), and a touch lower (bottom -2% → -8%). */
  .sc2__tile:nth-child(8)  { bottom: -8%; right: 16%;   width: 300px; aspect-ratio: 16/9;      transform: rotate(3deg);   z-index: 3; }
  /* 9 (was old 10) — unchanged. */
  .sc2__tile:nth-child(9)  { bottom: -2%; right: -1%;   width: 350px; aspect-ratio: 1/1;       transform: rotate(7deg);   z-index: 2; }
}

/* ─── Tile positions — TABLET (768–1199px) ──────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .sc2__tile:nth-child(1)  { top: 0%;     left: -1%;    width: 270px; aspect-ratio: 1/1;       transform: rotate(-6deg);  z-index: 2; }
  .sc2__tile:nth-child(2)  { top: -2%;    left: 24%;    width: 290px; aspect-ratio: 4/3;       transform: rotate(-4deg);  z-index: 3; }
  .sc2__tile:nth-child(3)  { top: 2%;     left: 56%;    width: 220px; aspect-ratio: 1/1;       transform: rotate(6deg);   z-index: 3; }
  .sc2__tile:nth-child(4)  { top: 0%;     right: -1%;   width: 205px; aspect-ratio: 3/4;       transform: rotate(2deg);   z-index: 2; }
  .sc2__tile:nth-child(5)  { top: 32%;    left: 18%;    width: 370px; aspect-ratio: 480 / 352; transform: rotate(-7deg);  z-index: 5; }
  .sc2__tile:nth-child(6)  { bottom: 26%; right: 18%;   width: 250px; aspect-ratio: 4/3;       transform: rotate(-6deg);  z-index: 5; }
  .sc2__tile:nth-child(7)  { bottom: -2%; left: -1%;    width: 220px; aspect-ratio: 4/5;       transform: rotate(5deg);   z-index: 2; }
  .sc2__tile:nth-child(8)  { bottom: -2%; right: 30%;   width: 280px; aspect-ratio: 16/9;      transform: rotate(3deg);   z-index: 3; }
  .sc2__tile:nth-child(9)  { bottom: -2%; right: -1%;   width: 265px; aspect-ratio: 1/1;       transform: rotate(7deg);   z-index: 2; }
}

/* ─── Tile positions — MOBILE (<768px) ──────────────── */
@media (max-width: 767px) {
  .sc2__tile:nth-child(1)  { top: 0%;     left: -4%;    width: 160px; aspect-ratio: 1/1;       transform: rotate(-6deg);  z-index: 2; }
  .sc2__tile:nth-child(2)  { top: 6%;     left: 28%;    width: 170px; aspect-ratio: 4/3;       transform: rotate(-4deg);  z-index: 3; }
  .sc2__tile:nth-child(3)  { top: 0%;     right: 20%;   width: 130px; aspect-ratio: 1/1;       transform: rotate(6deg);   z-index: 4; }
  .sc2__tile:nth-child(4)  { top: 0%;     right: -5%;   width: 130px; aspect-ratio: 3/4;       transform: rotate(2deg);   z-index: 2; }
  .sc2__tile:nth-child(5)  { top: 32%;    left: -3%;    width: 230px; aspect-ratio: 480 / 352; transform: rotate(-7deg);  z-index: 5; }
  .sc2__tile:nth-child(6)  { bottom: 33%; right: -3%;   width: 165px; aspect-ratio: 4/3;       transform: rotate(-6deg);  z-index: 5; }
  .sc2__tile:nth-child(7)  { bottom: 0%;  left: -5%;    width: 145px; aspect-ratio: 4/5;       transform: rotate(5deg);   z-index: 2; }
  .sc2__tile:nth-child(8)  { bottom: 0%;  right: 26%;   width: 188px; aspect-ratio: 16/9;      transform: rotate(3deg);   z-index: 3; }
  .sc2__tile:nth-child(9)  { bottom: -2%; right: -4%;   width: 170px; aspect-ratio: 1/1;       transform: rotate(7deg);   z-index: 2; }
}

/* ─── Centered overlay header ───────────────────────── */
/* Sits above the tiles via z-index. Frosted-glass background applied
   via a ::before pseudo-element so the colored tint can have its own
   opacity without affecting the text inside the header. The blur is
   on that pseudo as well, so it visibly blurs the tiles behind it. */
.sc2__header {
  position: relative;
  z-index: 10;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl);
  max-width: 700px;
  border-radius: var(--sc2-frosted-radius, 16px);
}

@media (min-width: 1024px) {
  .sc2__header { gap: var(--space-md); padding: var(--space-2xl); }
}

.sc2__header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--sc2-frosted-color, #ffffff);
  opacity: var(--sc2-frosted-opacity, 0.35);
  backdrop-filter: blur(var(--sc2-frosted-blur, 16px));
  -webkit-backdrop-filter: blur(var(--sc2-frosted-blur, 16px));
  pointer-events: none;
}

.sc2__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.sc2__heading {
  margin: 0;
  line-height: 0.98;
  letter-spacing: 0.018em;
  font-size: clamp(2rem, 4.5vw + 0.5rem, 4rem);
  display: flex;
  flex-direction: column;
  text-wrap: balance;
}

.sc2__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-primary);
}

.sc2__heading-line2 {
  display: block;
  font-weight: 400;
  color: var(--clr-primary);
  line-height: 1.15;
  font-size: 0.85em;
  margin-top: 4px;
}

/* ─── Footer (body + quote, centered, below) ─────────── */
.sc2__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  margin: var(--space-2xl) auto 0;
  max-width: 760px;
}

@media (min-width: 1024px) {
  .sc2__footer { margin-top: var(--space-3xl); }
}

.sc2__body {
  font-size: var(--font-size-base);
  line-height: 1.7;
  font-weight: 400;
  color: var(--clr-text-secondary);
  text-wrap: pretty;
  max-width: 60ch;
}

@media (min-width: 1024px) {
  .sc2__body { font-size: var(--font-size-lg); line-height: 1.65; }
}

.sc2__body p { margin: 0 0 var(--space-sm); }
.sc2__body p:last-child { margin-bottom: 0; }
.sc2__body strong, .sc2__body b { font-weight: 600; color: var(--clr-primary); }
.sc2__body em, .sc2__body i { font-style: italic; }

.sc2__quote {
  margin: 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--clr-border-light);
  border-bottom: 1px solid var(--clr-border-light);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.875rem);
  line-height: 1.3;
  color: var(--clr-primary);
  max-width: 80ch;
  text-wrap: balance;
}

.sc2__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-xl);
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sc2__cta:hover { opacity: 0.92; transform: translateY(-1px); }
.sc2__cta:focus-visible { outline: 2px solid var(--clr-brand-accent); outline-offset: 4px; }
.sc2__cta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ─── Background-color variants (tuning the heading backdrop) ─── */
.sc2.bg-neutral-light  { --sc2-bg-fade: rgba(221, 224, 213, 0.95); }
.sc2.bg-card-secondary { --sc2-bg-fade: rgba(242, 223, 207, 0.95); }
.sc2.bg-accent-warm    { --sc2-bg-fade: rgba(250, 240, 232, 0.95); }
.sc2.bg-accent-dark    { --sc2-bg-fade: rgba(45, 49, 34, 0.92); }
.sc2.bg-primary        { --sc2-bg-fade: rgba(60, 66, 46, 0.92); }

/* Dark variants — invert text + recolor footer rules + shadow tweaks */
.sc2.bg-accent-dark .sc2__eyebrow,
.sc2.bg-primary    .sc2__eyebrow { color: var(--clr-brand-accent); }

.sc2.bg-accent-dark .sc2__heading-line1,
.sc2.bg-primary    .sc2__heading-line1 { color: var(--clr-text-inverse); }

.sc2.bg-accent-dark .sc2__heading-line2,
.sc2.bg-primary    .sc2__heading-line2 { color: var(--clr-brand-accent); }

.sc2.bg-accent-dark .sc2__body,
.sc2.bg-primary    .sc2__body { color: var(--clr-text-inverse); opacity: 0.82; }

.sc2.bg-accent-dark .sc2__quote,
.sc2.bg-primary    .sc2__quote {
  color: var(--clr-text-inverse);
  border-top-color: rgba(253, 252, 250, 0.18);
  border-bottom-color: rgba(253, 252, 250, 0.18);
}

.sc2.bg-accent-dark .sc2__cta,
.sc2.bg-primary    .sc2__cta {
  background: var(--clr-text-inverse);
  color: var(--clr-primary);
}

.sc2.bg-accent-dark .sc2__tile,
.sc2.bg-primary    .sc2__tile {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20);
}

/* ─── Reduced motion — no rotation tricks ─────────── */
@media (prefers-reduced-motion: reduce) {
  .sc2__tile { transition: none; }
}