/* ============================================================================
 * photo-overlays.css — editorial scrim for hero slots that have a real photo.
 *
 * Loaded AFTER style.css so it can layer on top of existing rules without
 * specificity battles. Only targets elements that have a background-image
 * inline style — gradient placeholders keep their original look untouched.
 *
 * Pattern: subtle two-stop vertical gradient — darker top (for meta / eyebrow)
 * and darker bottom (for title / lede), with the photo character preserved
 * through the middle.
 * ========================================================================= */

/* Force the photo plate to fill its hero.
 *
 * The base `.brand-hero__plate` / `.cat-hero__plate` are `position:absolute;
 * inset:0` with NO explicit height — that absolute+inset is the only thing
 * sizing them. But several category heroes add a decorative co-class
 * (.stone-tile, .plaster-macro, .panel-bg, .molding-hero …) that re-declares
 * `position:relative`; being later in style.css at equal specificity, it wins
 * and collapses the empty plate to 0px, so the section's dark background shows
 * through (hero renders solid black).
 *
 * The [style*="background-image"] attribute selector has specificity 0,2,0 —
 * higher than any single-class co-class — and this file loads after style.css,
 * so this reliably restores absolute+inset on every photo plate regardless of
 * co-class. Plates WITHOUT a photo keep their decorative behaviour untouched. */
.brand-hero__plate[style*="background-image"],
.cat-hero__plate[style*="background-image"] {
  position: absolute;
  inset: 0;
}

/* ── UNIVERSAL HERO SCRIM — one preset for every photo hero ───────────────
 * Robust on ANY image regardless of brightness: darkens the LEFT column (where
 * left-aligned copy sits at every height — eyebrow, title, lede, cta) + the
 * BOTTOM (bottom-anchored titles) + a slight TOP (top eyebrow/meta), leaving the
 * image's centre-right clear so the photo still reads. Anchored to the text
 * zones per Material Design "scrim" + Smashing Magazine accessible-text-over-
 * image guidance. Pairs with the text-shadow insurance below. */
.insp-cover__art[style*="background-image"]::after,
.brand-hero__plate[style*="background-image"]::after,
.cat-hero__plate[style*="background-image"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.38) 28%,
      rgba(0, 0, 0, 0.12) 52%,
      rgba(0, 0, 0, 0.00) 76%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.00) 22%,
      rgba(0, 0, 0, 0.00) 45%,
      rgba(0, 0, 0, 0.50) 80%,
      rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Tenevoy (--shadow) hero carries a very LIGHT wood-interior photo with the
 * headline + lede anchored to the LEFT. The generic top/bottom scrim above
 * isn't enough on a pale image, so override it with a strong left-to-right
 * gradient (plus a softer top/bottom pass) so the white copy stays legible.
 * Specificity 0,3,1 beats the generic rule above and the old display:none in
 * style.css, and this file loads last — so this is what renders. */
.cat-hero--shadow .cat-hero__plate[style*="background-image"]::after {
  display: block;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.40) 38%,
      rgba(0, 0, 0, 0.08) 70%,
      rgba(0, 0, 0, 0.00) 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.00) 34%,
      rgba(0, 0, 0, 0.42) 100%);
}

/* v2-slide hero is intentionally NOT in this list — style.css already adds
 * .v2-hero .photo::after AND .v2-slide__overlay; stacking a third gradient
 * crushes the photo to near-black at the bottom. */

/* Children of the brand-hero and cat-hero sit above the scrim. The v2-slide
 * uses style.css's own overlay/positioning — DO NOT include .v2-slide__text
 * here; setting position:relative on it breaks the bottom-anchor and the
 * headline ends up at the top-left of the slot, clipped by overflow:hidden.
 *
 * The __meta labels are DELIBERATELY EXCLUDED: their base rule anchors them to
 * the top-right CORNER via `position:absolute; top; right`. Forcing them to
 * `relative` turned those corner-anchors into flow offsets, which dropped the
 * meta below the hero and shoved it `right:80px` = 80px off the LEFT edge, so
 * "2 200 оттенков" was clipped. They already carry z-index:2 in their base
 * rule, so absolute keeps them above the z-index:1 scrim without this rule. */
.brand-hero__copy,
.cat-hero__copy {
  position: relative;
  z-index: 2;
}

/* Text-shadow insurance — a soft, mostly-blur shadow keeps white copy legible
 * even over the brightest patch the scrim can't fully neutralise. Subtle enough
 * that it doesn't read as a hard drop shadow on the display serif. */
.insp-cover__copy,
.brand-hero__copy, .brand-hero__meta,
.cat-hero__copy, .cat-hero__meta {
  text-shadow: 0 1px 26px rgba(0, 0, 0, 0.38);
}

/* ============================================================================
 * LAZY RENDERING — defers off-screen image work.
 *
 * The img→background-image refactor (done to fix hero layout collapse) removed
 * native loading="lazy". content-visibility:auto restores deferral: browsers
 * skip layout/paint AND defer the background-image fetch for these elements
 * until they approach the viewport. Applied ONLY to below-fold, repeating
 * card/tile/gallery art — never heroes (those are the LCP and must paint fast).
 *
 * contain-intrinsic-size reserves height so the scrollbar doesn't jump while
 * off-screen content is unrendered. Values approximate each block's real height.
 * Progressive enhancement: unsupported browsers simply load eagerly (no regression).
 * ========================================================================= */
.home-proj-card__art,
.home-art-card__art,
.insp-card__art,
.insp-mood__art,
.jour-card__art,
.proj-tile__art,
.cats-card__art,
.brand-collection__art,
.proj-detail__photo-art,
.prom__art,
.art-related__art,
.proj-related__art,
.brand-feat-proj__art,
.brand-story__art {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* ============================================================================
 * TOUCH TARGET — burger trigger.
 * style.css sizes .v2-burger at 28x24px (below the 44x44 WCAG 2.5.5 / Apple HIG
 * minimum). Extend the hit area with padding + negative margin so the tappable
 * region is 48x44 while the visual glyph stays 28x24 in place.
 * ========================================================================= */
.v2-burger {
  padding: 10px;
  margin: -10px;
  box-sizing: content-box;
}