/* ============================================================
   Wood-stain gallery - the "Über 50 Beizvarianten" section that
   lives BELOW the configurator on grosses-regal.html (not inside
   the options-pane accordion). Styled as a regular product-info
   block, mirroring the .lt-info section's padding, wrap width
   and typography so it reads as one continuous product page.

   The tiles ship as uniform 280x210 swatches (just the wood color,
   no baked-in label) plus an HTML <figcaption> for the variant
   name. JS in /js/wood-stain-gallery.js builds the tile DOM from
   js/wood-stain-variants.json on first activation of each species
   tab; tabs hide/show pre-built tiles after that for snappy switching.

   Required design tokens from the host page:
     --accent, --fg, --fg-mute, --hairline, --hairline-strong,
     --pill-bg, --bg, --bg-surface, --font-sans, --font-mono
============================================================ */

/* Outer section - matches the .lt-info pattern (same padding,
   same top border so the page reads as one continuous block). */
.ws-section {
  padding: 80px 0 40px;
  border-top: 1px solid var(--hairline);
}
.ws-section-inner {
  /* .wrap is provided by the host page's global stylesheet; we
     just add the matching max-width fallback here so the section
     still constrains correctly if .wrap is missing. */
  max-width: 1240px;
  margin: 0 auto;
}

.ws-section-head {
  max-width: 760px;
  margin-bottom: 40px;
}
.ws-section-head .eyebrow {
  display: block;
  margin-bottom: 16px;
}
.ws-section-head h2 {
  margin-top: 16px;
}
.ws-section-head .ws-section-lede,
.ws-section-head .lede {
  margin-top: 24px;
}

/* Tab bar - reuses the .seg-row / .seg-btn pattern from the
   configurator. Constrain to a reasonable width so on wide
   screens the three buttons don't stretch to comic widths. */
.ws-tabs {
  max-width: 480px;
  margin: 0 0 32px;
}

/* The gallery grid. Tiles auto-fill the row, each tile is a
   fixed 4:3 swatch + caption underneath. */
.ws-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px 14px;
}

/* One tile = swatch image on top + variant name in HTML text below. */
.ws-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 180ms ease;
}
.ws-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: #fff;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.ws-tile figcaption {
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--fg-mute);
  text-align: center;
  line-height: 1.3;
}
.ws-tile:hover {
  transform: translateY(-2px);
}
.ws-tile:hover img {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 133, 57, 0.35);
}

/* Below the gallery: process explainer + checklist + email CTA.
   Pulled in from the prior accordion layout, retuned to live as
   regular product copy. */
.ws-explain {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  max-width: 760px;
}
.ws-explain h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fg);
}
.ws-explain p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-mute);
  margin: 0 0 16px;
}

.ws-callout {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--accent);
  background: rgba(255, 133, 57, 0.04);
  border-radius: 10px;
}
.ws-callout-title {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  font-weight: 700;
}
.ws-callout ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.ws-callout li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-mute);
  font-size: 14px;
  line-height: 1.5;
}
.ws-callout li::before {
  content: '-';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--accent);
  font-family: var(--font-mono), monospace;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}

.ws-props-eyebrow {
  margin: 22px 0 12px;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Properties checklist - mirrors the .lt-list.lt-list-check style
   used on the same page so the visual rhythm stays consistent. */
.ws-props {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}
.ws-props li {
  position: relative;
  padding-left: 28px;
  color: var(--fg-mute);
  font-size: 14.5px;
  line-height: 1.55;
}
.ws-props li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  text-align: left;
  color: var(--accent);
  font-family: var(--font-mono), monospace;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}

.ws-cta {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(244, 236, 216, 0.025);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-mute);
}
.ws-cta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 133, 57, 0.5);
  transition: border-color 160ms ease;
}
.ws-cta a:hover { border-bottom-color: var(--accent); }

/* Responsive: tighter grid + smaller padding on phones. */
@media (max-width: 640px) {
  .ws-section { padding: 56px 0 32px; }
  .ws-section-head { margin-bottom: 28px; }
  .ws-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px 10px;
  }
  .ws-tile figcaption { font-size: 11px; }
}