/* ── Section container ── */
.section {
  padding: var(--space-16) var(--space-6);
}
.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--color-accent);
}
.section__title {
  text-align: left;
  margin-bottom: var(--space-5, 1.25rem);
  max-width: 26ch;
}
.section__subtitle {
  text-align: left;
  max-width: var(--max-width-text);
  margin: 0 0 var(--space-12);
  font-size: var(--text-lg);
}

/* ── Alternating section backgrounds ── */
.blend-section,
.masks-section,
.io-section,
.stats-section,
.compat-section {
  background: var(--color-bg-alt);
}

/* ── Media frames ── */
.media-frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.media-frame--16x9 { aspect-ratio: 16 / 9; }
.media-frame--4x3  { aspect-ratio: 4 / 3; }
.media-frame--21x9 { aspect-ratio: 21 / 9; }
.media-frame--1x1  { aspect-ratio: 1 / 1; }

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
   Drop-in image slots.
   Each modifier maps to a real file under assets/images/<area>/.
   When the file is missing, no warning fires — the URL is silently
   dropped and the underlying media-frame surface + the .placeholder
   inside (with its "Drop in <path>" hint) remain visible. Drop the
   file in and refresh: the image fills the frame.
   Slugs are alphabetical. Match HTML data-tab attributes (layers)
   and the screenshot keys.
*/
.media-frame--layer,
.media-frame--screenshot {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.media-frame--layer-adjustment  { background-image: url('../assets/images/layers/adjSite.png');           }
.media-frame--layer-fill        { background-image: url('../assets/images/layers/fillSite.png');         }
.media-frame--layer-group       { background-image: url('../assets/images/layer-types/group.png');       }
.media-frame--layer-paint       { background-image: url('../assets/images/layers/paintSite.png');        }
.media-frame--layer-procedural  { background-image: url('../assets/images/layers/procSite.png');         }
.media-frame--layer-reference   { background-image: url('../assets/images/layers/refSite.png');          }

/* Transparent product renders (a single object on a transparent background):
   show the WHOLE subject, centred on the card surface — never crop it.
   `cover` was scaling the square 800x800 render up to fill the 4:3 frame and
   slicing the object's top/side corners against the frame edge. `contain`
   fits the subject inside the frame with clean margins instead. */
.media-frame--layer-adjustment,
.media-frame--layer-fill,
.media-frame--layer-paint,
.media-frame--layer-procedural,
.media-frame--layer-reference {
  background-size: contain;
}

.media-frame--screenshot-hero         { background-image: url('../assets/images/screenshots/hero.png');         }
.media-frame--screenshot-pbr          { background-image: url('../assets/images/screenshots/pbr-channels.png'); }
.media-frame--screenshot-smart-masks  { background-image: url('../assets/images/screenshots/smart-masks.png');  }
.media-frame--screenshot-bake         { background-image: url('../assets/images/screenshots/bake.png');         }

/* Placeholders are a DEV-ONLY drop-in guide ("Drop in <path>"). They must
   never show on the public site — hidden globally. A frame with no image
   simply shows its clean dark surface. (Was gated on an `is-filled` class
   that nothing ever set, so the dev hints overlaid every real image.) */
.media-frame .placeholder { display: none; }

/* ── Placeholder ── */
.placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-4);
  text-align: center;
}
.placeholder svg {
  opacity: 0.4;
}

/* ── Responsive helpers ── */
@media (max-width: 767px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  .section { padding: var(--space-12) var(--space-4); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  h1 { font-size: var(--text-4xl); }
}