/**
 * article.css — tokenized styling for the markdown article interiors (step 4).
 *
 * With the content collections, scraped paragraph wrappers are gone; these rules
 * map the patterns that have no vendored equivalent: the CSS-only slider strip
 * (slick replacement), the lead blockquote, the HintBox background, the blog
 * post date and the draft watermark. Loaded after shell.css, before menu.css.
 * Colors, spacing, radii, shadows and fonts must come from tokens.css —
 * never hardcode a color here (the draft watermark's SVG data URI is the one
 * documented exception: CSS cannot reference a token inside a data URI).
 */

/* ---------- Step 4: content collections ----------------------------- *
 * The article interiors are markdown now; these rules map the scraped
 * paragraph patterns that have no vendored equivalent anymore.          */

/* Slider strip — CSS-only replacement for slick (scroll-snap, no JS). */
.slider-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slider-strip::-webkit-scrollbar {
  display: none;
}

.slider-strip > .paragraph-section {
  scroll-snap-align: start;
  margin-bottom: 0;
  /* positioning context for the absolutely-positioned .slider--text caption
     (vendored CSS pins it to the slide bottom); without this the caption
     escapes and floats over the page content */
  position: relative;
}

/* Inline (klein) sliders sit in the content column: full-width images.
   Gross (hero) slides share one aspect ratio so the strip — and the caption
   pinned to its slide's bottom edge — stays at the same height for every
   slide (the two scraped hero images have different aspect ratios).
   Carries over the step-3 slick fix for the CSS-only strip. */
.slider-strip--klein img {
  width: 100%;
  height: auto;
  display: block;
}

.slider-strip--gross img {
  width: 100%;
  aspect-ratio: 5 / 2;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Markdown body images: the scraped width/height attributes are gone. */
/* ---------- Content column (markdown pages) ------------------------- *
 * The scraped node templates provided the grid (1140px + gutters) and the
 * typography for page bodies; markdown content renders as bare elements and
 * lost that layer. Rebuild it here: a centered content column for every
 * direct child of .region--content (title block, main block, downloads),
 * a readable prose measure, vertical rhythm, real list markers and
 * tokenized tables. The slider/breadcrumb sections sit OUTSIDE
 * .region--content and stay full-bleed.
 */
.region--content > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .region--content > * {
    padding-inline: var(--space-6);
  }
}

.block-system-main-block {
  padding-block: var(--space-4) var(--space-8);
}

/* Vertical rhythm: one flow rule instead of per-element margin guessing. */
.block-system-main-block > * + * {
  margin-block-start: var(--space-4);
}

.block-system-main-block > :is(h2, h3, h4) {
  margin-block-start: var(--space-6);
  margin-block-end: var(--space-2);
}

.block-system-main-block h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.block-system-main-block h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.block-system-main-block h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Prose measure: long text reads badly across the full 1140px column;
   cap paragraphs and lists. Tables, headings, figures stay full-width. */
.block-system-main-block > :is(p, ul, ol, blockquote, dl) {
  max-width: 75ch;
}

/* Lists: the vendored CSS strips list markers (.content-wrapper ul
   {list-style:none} plus the li:before resets) — restore readable ones
   for markdown content. */
.block-system-main-block ul,
.block-system-main-block ol {
  padding-inline-start: var(--space-5);
}

.block-system-main-block ul {
  list-style: disc;
}

.block-system-main-block ol {
  list-style: decimal;
}

.block-system-main-block li + li {
  margin-block-start: var(--space-2);
}

/* Long URLs (supplier links etc.) must wrap instead of forcing horizontal
   overflow on narrow screens. */
.block-system-main-block :is(a, li, p) {
  overflow-wrap: anywhere;
}

/* Tables — price lists etc. Scroll horizontally instead of overflowing on
   narrow screens; borders and zebra striping from tokens so dark mode
   follows automatically. */
.region--content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.region--content :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.region--content thead th {
  background-color: var(--color-surface-muted);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.region--content tbody tr:nth-child(even) td {
  background-color: var(--color-surface-muted);
}

.region--content figure {
  margin-block: var(--space-5);
}

.region--content figcaption {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Slider viewport: positioning context for the border arrows. */
.slider-viewport {
  position: relative;
}

/* Prev/next border arrows over the image — like the scraped slick arrows.
   Scrim background keeps white chevrons readable over any photo. */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-scrim);
  color: var(--color-on-scrim);
  cursor: pointer;
}

.slider-arrow--prev {
  left: var(--space-3);
}

.slider-arrow--next {
  right: var(--space-3);
}

.slider-arrow:hover {
  background-color: rgb(0 0 0 / 0.6);
}

.slider-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* While mouse-dragging, snap is off so the strip follows the pointer. */
.slider-strip {
  cursor: grab;
}

.slider-strip.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.slider-strip img {
  user-select: none;
  -webkit-user-drag: none;
}

/* Autoplay dot indicators (Slider.astro). Overlaid on the image bottom-center
   so they are always visible (in-flow dots fall below the fold on short
   desktop windows); they sit on the caption band, under the CTA button. */
.slider-dots {
  position: absolute;
  bottom: var(--space-2);
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.slider-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  /* solid gray fill: clearly visible on the dark header band in dark mode
     and on the page background in light mode */
  background-color: var(--color-text-muted);
  box-shadow: 0 0 0 1px var(--color-bg);
  cursor: pointer;
}

.slider-dot:hover {
  background-color: var(--color-primary);
}

.slider-dot[aria-selected='true'] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.region--content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Lead (p-anrisstext) — markdown blockquote styled like the scraped lead. */
.region--content blockquote {
  width: 60%;
  margin: var(--space-8) auto;
  text-align: center;
  font-size: var(--text-lg);
  background: none;
  border: none;
  padding: 0;
}

@media only screen and (max-width: 480px) {
  .region--content blockquote {
    width: 90%;
  }
}

/* HintBox — tokenized replacement for "Hintergrund mit-hintergrund". */
.hintbox {
  background-color: var(--color-primary-soft);
  padding: var(--space-5) 3%;
  margin-bottom: var(--space-5);
}

.hintbox__inner {
  max-width: 1140px;
  margin: 0 auto;
}

/* ---------- Draft watermark (step 5 preview) ------------------------- */
.draft-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/*
 * Diagonal repeating "BROUILLON / DRAFT" overlay. The repeating text lives in
 * an SVG data URI (CSS cannot repeat text), so its ink color cannot reference
 * a token; a neutral dark gray at low element opacity works on both themes.
 */
.draft-watermark {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Ctext x='210' y='210' transform='rotate(-30 210 210)' text-anchor='middle' font-family='sans-serif' font-size='44' font-weight='bold' fill='%2316202c'%3EBROUILLON / DRAFT%3C/text%3E%3C/svg%3E");
  background-size: 420px 420px;
}