/* Reusable Editorial Art component: an artwork-led pause between homepage chapters. */
.franz-editorial-art {
  --franz-editorial-art-parallax: 0px;
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 11vw, 160px);
  background: var(--franz-cream);
  color: var(--franz-text);
}

.franz-editorial-art__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: clamp(48px, 8vw, 144px);
}

.franz-editorial-art--text-left .franz-editorial-art__artwork { order: 2; }
.franz-editorial-art--text-left .franz-editorial-art__content { order: 1; }

.franz-editorial-art--full-bleed .franz-editorial-art__inner {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.franz-editorial-art--full-bleed .franz-editorial-art__content {
  padding: clamp(48px, 8vw, 128px) clamp(32px, 7vw, 112px) clamp(48px, 8vw, 128px) 0;
}

.franz-editorial-art__artwork {
  position: relative;
  aspect-ratio: 1.2 / 1;
  min-height: clamp(560px, 66vw, 860px);
  margin: 0;
  background: var(--franz-soft);
}

.franz-editorial-art__image {
  transform: translate3d(0, var(--franz-editorial-art-parallax), 0) scale(1.04);
  will-change: transform;
}

.franz-editorial-art__artwork figcaption {
  position: absolute;
  right: 20px;
  bottom: 16px;
  left: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.franz-editorial-art__content { max-width: 28rem; }
.franz-editorial-art__content h2 {
  max-width: 7ch;
  margin: 0;
  font-size: clamp(4.2rem, 8.5vw, 10rem);
  font-weight: 520;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.franz-editorial-art__subline {
  margin: clamp(28px, 4vw, 48px) 0 0;
  color: var(--franz-text-light);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   Portrait format (Artwork 003 "New Vision")
   The default frame leans landscape (1.2 / 1) and would crop a standing
   composition. Give the frame the artwork's own 4:5 proportion, rebalance the
   columns and keep the portrait-tuned two-word headline clamp. Mobile keeps its
   own 4 / 5 (below). Nothing here is shared with the landscape block.
--------------------------------------------------------------------------- */
.franz-editorial-art--portrait .franz-editorial-art__inner {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
}

.franz-editorial-art--portrait .franz-editorial-art__artwork {
  aspect-ratio: 4 / 5;
  min-height: 0;
  max-inline-size: min(100%, 720px);
  margin-inline-start: auto;
}

.franz-editorial-art--text-left.franz-editorial-art--portrait .franz-editorial-art__artwork {
  margin-inline: 0 auto;
}

/* ---------------------------------------------------------------------------
   Landscape format (Artwork 007 "High Altitude")
   The 3:2 frame applies on every breakpoint so object-fit: cover never crops
   the sides. The headline is held to two lines ("MADE FOR" / "ALTITUDE.")
   instead of fragmenting under the portrait-tuned three-line 7ch clamp.
   The desktop block gives landscape its own grid and display size.
--------------------------------------------------------------------------- */
.franz-editorial-art--landscape .franz-editorial-art__artwork {
  aspect-ratio: 3 / 2;
  min-height: 0;
}

.franz-editorial-art--landscape .franz-editorial-art__content h2 {
  max-width: 10ch;
}

@media (min-width: 781px) {
  /* Landscape desktop: a generous horizontal statement. The artwork column
     takes ~70% of the row, the text column stays wide enough for a two-line
     headline, and a width cap keeps ultrawide screens in FRANZ cream negative
     space instead of running the artwork to the browser edge. */
  .franz-editorial-art--landscape .franz-editorial-art__inner {
    grid-template-columns: minmax(0, 2.9fr) minmax(300px, 1fr);
    gap: clamp(28px, 2.8vw, 48px);
  }
  .franz-editorial-art--landscape .franz-editorial-art__artwork {
    max-inline-size: min(100%, 1440px);
    margin-inline-start: auto;
  }
  .franz-editorial-art--text-left.franz-editorial-art--landscape .franz-editorial-art__artwork {
    margin-inline: 0 auto;
  }
  /* The shared full-bleed cushion (up to 112px) is oversized for the narrower
     landscape text column; a smaller cushion keeps the headline off the edge
     without squeezing it. It sits on the side that faces the viewport edge
     (opposite the artwork). */
  .franz-editorial-art--full-bleed.franz-editorial-art--landscape .franz-editorial-art__content {
    padding-inline: 0 clamp(20px, 2.8vw, 48px);
  }
  .franz-editorial-art--text-left.franz-editorial-art--full-bleed.franz-editorial-art--landscape .franz-editorial-art__content {
    padding-inline: clamp(20px, 2.8vw, 48px) 0;
  }
  .franz-editorial-art--landscape .franz-editorial-art__content {
    max-width: 30rem;
  }
  .franz-editorial-art--landscape .franz-editorial-art__content h2 {
    font-size: clamp(2.25rem, 3.2vw, 3.6rem);
  }
}

@media (max-width: 780px) {
  .franz-editorial-art { padding-block: clamp(72px, 18vw, 104px); }
  /* `minmax(0, 1fr)`, not `1fr`: the single stacked track carries both the
     artwork and the text block, and `1fr` keeps an automatic minimum equal to
     the widest item's min-content. The headline's `max-width: 7ch` at the
     mobile font floor plus the text block's own padding is 321.8px at a 320px
     viewport, so the track grew past the 272px content column and the artwork,
     sized at `width: 100%` of that track, was cut off by the section's
     `overflow: hidden`. A zero floor lets the track match the container. */
  .franz-editorial-art__inner,
  .franz-editorial-art--full-bleed .franz-editorial-art__inner {
    grid-template-columns: minmax(0, 1fr);
  /* ARTWORK-02A: the mobile collapse used to enumerate the variants it had to
     beat -- a bare `.franz-editorial-art__inner` (0,1,0) plus one entry for
     `--full-bleed` (0,2,0). Any variant rule carrying a modifier class
     therefore outranked the bare selector and kept its desktop grid on
     phones. `--portrait` is exactly that case: its two-column rule lives
     outside every media query, so a *contained* (non-full-bleed) portrait
     section kept `minmax(0, 1fr) minmax(280px, 0.85fr)` at 390px, the 280px
     text column took the row, and the artwork collapsed to a ~30px sliver
     (seen on /brillenservice/). Matching on the component root instead of on
     each variant fixes the class of bug rather than the one instance: it
     reaches 0,2,0 and, being later in the file, wins against every
     single-modifier variant without needing to name any of them. The
     full-bleed pure-art rule further down stays at 0,3,0 and still wins; it
     collapses to a single column too, so the outcome is unchanged. */
  .franz-editorial-art .franz-editorial-art__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .franz-editorial-art--full-bleed .franz-editorial-art__content {
    padding: clamp(64px, 18vw, 104px) var(--franz-content-padding) clamp(72px, 20vw, 120px);
  }
  .franz-editorial-art--text-left .franz-editorial-art__artwork,
  .franz-editorial-art--text-left .franz-editorial-art__content { order: initial; }
  .franz-editorial-art__artwork {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .franz-editorial-art__content h2 { font-size: clamp(4rem, 18vw, 7rem); }
  .franz-editorial-art--landscape .franz-editorial-art__content h2 { font-size: clamp(3rem, 12vw, 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .franz-editorial-art__image {
    transform: none;
    will-change: auto;
  }
}

/* ---------------------------------------------------------------------------
   Pure-art moment: title_visually_hidden (EDITORIAL-ART-ENGINE-CSS-CLEANUP-01)
   The renderer adds .franz-editorial-art--headline-hidden whenever the headline
   is intentionally invisible. When that is combined with --full-bleed there is
   no visible copy to fill the text column, so the default two-column grid left
   an empty phantom column beside the artwork (seen on /sportoptik/ 007,
   /sonnenbrillen/ 002, /brillen/ 001, /sehtest/ 006). Collapse the column and
   centre the artwork at its declared format size — portrait keeps its own
   max-inline-size, landscape keeps the wide 3:2 treatment. The <h2> stays in
   the DOM (clip-hidden here as well as via .screen-reader-text) for the
   section's aria-labelledby. Contained pure-art moments (--headline-hidden
   without --full-bleed, e.g. /brillenservice/ 006) are untouched.
--------------------------------------------------------------------------- */
.franz-editorial-art--full-bleed.franz-editorial-art--headline-hidden .franz-editorial-art__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.franz-editorial-art--full-bleed.franz-editorial-art--headline-hidden .franz-editorial-art__artwork {
  margin-inline: auto;
}

.franz-editorial-art--full-bleed.franz-editorial-art--headline-hidden .franz-editorial-art__content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}