/* Home component: finish selector - machined editorial edition.
   Deep ink band with a soft metallic glow (no photo backdrop), real
   texture swatches in a responsive grid, one showcase panel with a
   clear divider between image and details. Selecting a swatch swaps
   the showcase image and scrolls it into view on small screens. */

.finishes-section {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) 0;
  color: var(--ds-band-text);
  background: var(--lu-ink-900);
  border-bottom: 1px solid var(--ds-band-hairline);
}

/* NO PHOTOGRAPH IN THIS BAND. It used to borrow
   images/lifestyle/finish-workshop.jpg, which made two neighbouring bands
   read as photo bands and left this one without the ink surface it is
   designed around. The photograph now lives on the category mosaic directly
   below ("categories-backdrop.jpg"); here only the glow is left, exactly as
   the note at the top of this file describes. */
.finishes-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--lu-teal-500) 17%, transparent), transparent 58%),
    radial-gradient(95% 75% at 8% 100%, color-mix(in srgb, var(--lu-deep-teal) 46%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--lu-ink-900) 62%, transparent), color-mix(in srgb, var(--lu-ink-900) 48%, transparent));
}

/* light theme keeps the pale version of the band: the same teal glow over an
   opaque light surface instead of the light workshop photo, so the ink text
   and the light cards tuned further down stay readable as they are. */
[data-theme="light"] .finishes-backdrop {
  background:
    radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--lu-teal-500) 10%, transparent), transparent 58%),
    radial-gradient(95% 75% at 8% 100%, color-mix(in srgb, var(--lu-mint) 13%, transparent), transparent 66%),
    linear-gradient(180deg, var(--lu-neutral-50), var(--lu-neutral-100));
}

/* light theme: the band text flips dark so it stays readable over the
   brighter veil (band tokens are theme-fixed, so scope them here) */
[data-theme="light"] .finishes-section {
  --ds-band-text: var(--lu-ink-900);
  --ds-band-text-soft: color-mix(in srgb, var(--lu-ink-900) 76%, transparent);
  --ds-band-text-muted: color-mix(in srgb, var(--lu-ink-900) 58%, transparent);
  --ds-band-hairline: color-mix(in srgb, var(--lu-ink-900) 16%, transparent);
  --ds-band-line: color-mix(in srgb, var(--lu-ink-900) 36%, transparent);
}

[data-theme="light"] .finishes-section .finish-spec-pill { color: var(--lu-teal-600); }

[data-theme="light"] .finishes-section .btn-secondary-glass {
  border-color: color-mix(in srgb, var(--lu-ink-900) 32%, transparent);
}

[data-theme="light"] .finishes-section .finish-swatch-btn {
  background: color-mix(in srgb, var(--lu-neutral-0) 58%, transparent);
}

[data-theme="light"] .finishes-section .finish-swatch-btn.is-active {
  box-shadow:
    inset 0 0 0 1px var(--lu-teal-600),
    0 14px 34px color-mix(in srgb, var(--lu-teal-500) 30%, transparent);
}

[data-theme="light"] .finish-image-caption {
  background: color-mix(in srgb, var(--lu-neutral-0) 72%, transparent);
}

[data-theme="light"] .finishes-section .finish-showcase-box {
  background: color-mix(in srgb, var(--lu-neutral-0) 52%, transparent);
  border-color: color-mix(in srgb, var(--lu-ink-900) 14%, transparent);
}

/* The heading spans both columns; the picker takes the narrow one beside the
   showcase. Logical grid flow means RTL mirrors itself. */
.finishes-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  column-gap: clamp(18px, 2.4vw, 34px);
  row-gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.finishes-heading-row { grid-column: 1 / -1; margin-bottom: var(--space-4); }

.finishes-heading-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-9);
}

.finishes-heading-note {
  align-self: flex-start;
  padding-top: var(--space-1);
  color: var(--ds-band-text-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 2.1;
  text-transform: uppercase;
}

.finishes-heading-note span { display: block; width: 70px; height: 1px; margin-top: var(--space-4); background: var(--ds-band-line); }

/* ---------- the picker: one named row per finish ----------
   The texture is still shown (34px), but the name leads and the process tag
   follows: nine of these rows are shorter than the nine tiles they replace, and
   a phone gets one scrollable row of pills instead of a block of squares. */

.finishes-picker { display: grid; gap: 4px; min-width: 0; }

.finish-swatch-btn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 12px 4px 4px;
  color: var(--ds-band-text);
  background: color-mix(in srgb, var(--lu-ink-800) 62%, transparent);
  border: 1px solid var(--ds-band-hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.finish-swatch-btn:hover { transform: translateY(-1px); }

.finish-swatch-btn:hover {
  border-color: color-mix(in srgb, var(--lu-mint) 55%, var(--ds-band-hairline));
}

.finish-swatch-btn.is-active {
  border-color: var(--lu-mint);
  background: color-mix(in srgb, var(--lu-ink-700) 70%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--lu-mint) 55%, transparent),
    0 10px 26px color-mix(in srgb, var(--lu-teal-500) 26%, transparent);
}

.finish-row-chip {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--lu-neutral-0) 18%, transparent);
}

.finish-swatch-btn.is-active .finish-row-chip {
  border-color: color-mix(in srgb, var(--lu-mint) 60%, transparent);
}

.finish-row-name {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finish-row-tech {
  color: var(--ds-band-text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- showcase split ---------- */

.finish-showcase-box {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: clamp(22px, 3vw, 42px);
  padding: clamp(16px, 2.6vw, 30px);
  border: 1px solid var(--ds-band-hairline);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--lu-ink-900) 72%, transparent);
}

.finish-showcase-media {
  position: relative;
  margin: 0;
  min-width: 0;
  display: flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--lu-ink-900);
}

.finish-showcase-img {
  display: block;
  width: 100%;
  height: 100%;
  /* it was 460px: the picker beside it is ~430px tall now, and the band no
     longer has to be taller than the two columns need */
  min-height: 340px;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.finish-image-caption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lu-ink-900) 72%, transparent);
  color: var(--ds-band-text-soft);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.finish-showcase-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: var(--space-7) var(--space-6);
  border-left: 1px solid color-mix(in srgb, var(--lu-mint) 30%, var(--ds-band-hairline));
}

.finish-detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  color: var(--ds-band-text-muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.finish-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--lu-mint);
  font-weight: var(--weight-bold);
}

.finish-counter b { color: var(--ds-band-text); font-weight: var(--weight-bold); }

.finish-title {
  margin: var(--space-6) 0 var(--space-4);
  color: var(--ds-band-text);
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.005em;
  line-height: 1.08;
}

.finish-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ds-band-text-soft);
  margin: 0 0 var(--space-6) 0;
}

.finish-tech-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--ds-band-hairline);
  border-bottom: 1px solid var(--ds-band-hairline);
  margin-bottom: var(--space-6);
}

.tech-spec-item { min-width: 0; }

.tech-spec-item b {
  display: block;
  font-size: var(--text-sm);
  color: var(--ds-surface-alt);
}

.tech-spec-item span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-band-text-muted);
  margin-bottom: 3px;
}

.finish-actions { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }

/* mint-on-teal machined CTA for this dark band */
.finishes-section .btn-primary-teal {
  background: var(--lu-mint);
  color: var(--lu-deep-teal);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  padding: var(--space-4) var(--space-6);
}

.finishes-section .btn-primary-teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--lu-mint) 28%, transparent);
}

.finishes-section .btn-secondary-glass {
  background: transparent;
  border-color: color-mix(in srgb, var(--lu-neutral-0) 32%, transparent);
  color: var(--ds-band-text);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
}

.finishes-section .btn-secondary-glass:hover {
  border-color: var(--lu-mint);
  color: var(--lu-mint);
}

/* ---------- responsive: grid collapses, nothing overflows ---------- */

@media (max-width: 1080px) {
  /* one column, and the picker becomes a single scrollable row of pills: the
     tile grid that turned into a 2x5 block of squares here was the tallest
     thing on the page */
  .finishes-container { grid-template-columns: minmax(0, 1fr); }

  .finishes-picker {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .finish-swatch-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;            /* touch target */
    padding: 4px 15px 4px 6px;
    border-radius: 999px;
    scroll-snap-align: start;
  }

  .finish-row-chip { width: 32px; height: 32px; border-radius: 50%; }
  .finish-row-tech { display: none; }

  .finish-showcase-box { grid-template-columns: 1fr; gap: 18px; }
  .finish-showcase-details {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--lu-mint) 30%, var(--ds-band-hairline));
    padding: var(--space-6) var(--space-2) var(--space-2);
  }
  .finish-showcase-img { min-height: 0; aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  .finishes-section { padding: var(--space-10) 0; }
  .finishes-heading-row { flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-2); }
  /* the decorative four-line note keeps its words but loses its air */
  .finishes-heading-note { line-height: 1.7; }
  .finishes-heading-note span { width: 44px; margin-top: var(--space-3); }
  .finish-showcase-details { padding: var(--space-5) var(--space-2) var(--space-1); }
  /* four spec rows become two columns of two - same data, half the height */
  .finish-tech-specs { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
  .finish-desc { margin-bottom: var(--space-4); }
  .finish-actions { gap: var(--space-3); }
  .finishes-section .btn-primary-teal,
  .finishes-section .btn-secondary-glass { padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .finish-showcase-img { transition: none; }
}