/* ============================================================
   FINISH SAMPLES ROW  (.finish-samples)
   ------------------------------------------------------------
   Replacement for the old .finishes-grid tile strip.

   Deliberately a NEW class name: .finishes-grid is still in use on
   ~36 pages and is defined in three stylesheets (finishes-plus.css,
   shop-15.css, racks.css). Nothing here touches it, so this row can
   be trialled on finishes.htm alone and rolled out page by page.

   To roll out later, a page needs exactly two things:
     1. <link rel="stylesheet" href="css/finish-samples.css">
     2. the <div class="finish-samples"> markup block

   SIZING: every sample PNG is 410px tall with widths from 221-250px.
   Setting a shared HEIGHT and letting width stay auto therefore gives
   a row of equal-height swatches at their true proportions - nothing
   is stretched, squashed or cropped. The clamp scales that height with
   the viewport so the row stays as large as it can while still fitting
   nine across; below roughly 1000px it wraps instead of overflowing.
   ============================================================ */

.finish-samples {
  display: flex;
  flex-wrap: wrap;          /* wraps rather than overflowing on small screens */
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin: 0 auto 30px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* One anchor wraps both the swatch and its title, so the whole tile is
   clickable and assistive tech announces a single link, not two. */
.finish-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.finish-sample img {
  display: block;
  width: auto;
  /* 9 swatches + 8 gaps fit the 1360px content box at the 248px cap */
  height: clamp(110px, 16.6vw, 248px);
  /* Same border, shadow and white ground as the old tiles - only the
     corner radius is reduced, per request (was 10px). */
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.finish-sample-title {
  display: block;
  margin-top: 9px;
  text-align: center;
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  color: #333;
  transition: color 0.2s ease;
}

/* Matches the lift-on-hover used by the old tiles */
.finish-sample:hover img,
.finish-sample:focus-visible img {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.finish-sample:hover .finish-sample-title,
.finish-sample:focus-visible .finish-sample-title {
  color: #0f766e;           /* the teal used for headings site-wide */
  text-decoration: underline;
}

.finish-sample:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Phones: step the swatches up a little and let them settle into
   three per row rather than shrinking to stamps. */
@media (max-width: 600px) {
  .finish-samples {
    gap: 12px;
  }

  .finish-sample img {
    height: 132px;
  }

  .finish-sample-title {
    margin-top: 7px;
    font-size: 0.85rem;
  }
}

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

  .finish-sample:hover img,
  .finish-sample:focus-visible img {
    transform: none;
  }
}



/* Equal-height tiles so every badge lines up, even when a title
   wraps to two lines ("Painted White" on a narrow screen). */
.finish-samples {
  align-items: stretch;
}


/* Pin the badges to the bottom of each tile so they form a clean
   line across the row regardless of title length. */
.finish-sample {
  justify-content: flex-start;
}

.finish-sample-title {
  margin-bottom: 0;
}


/* Category 1 — least expensive */

/* Category 2 */

/* Category 3 */

/* Category 4 — most expensive */

/* Explanatory line above the row.
   Sized to sit on ONE line across the desktop range. Two things make that work:
   no max-width (the 900px cap was forcing the wrap), and a 1rem font cap -- at
   the old 1.05rem cap the sentence needed ~1345px against a 1344px container,
   so it wrapped on the widest screens. It now needs ~1165px at worst, leaving
   ~180px of headroom. Below ~1100px it wraps to two or three lines, which is
   fine and expected on tablets and phones. */
.finish-samples-note {
  max-width: none;
  margin: 0 auto 18px;
  padding: 0 8px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.5;
  color: #444;
  text-wrap: balance;       /* evens out the lines once it does wrap */
}

.finish-samples-note strong {
  color: #0f766e;
}



/* ============================================================
   CONTAINER-RELATIVE SIZING
   ------------------------------------------------------------
   The vw-based height above assumes the row sits in the 1400px
   .finishes-container on finishes.htm. The nine close-up pages
   put it inside .page-container instead, which has
   `padding: 1rem 12rem` and therefore hands back 384px LESS than
   the viewport - so a viewport-based clamp wrapped the row on any
   screen narrower than about 1730px.

   Sizing off the container instead of the viewport makes the row
   fit whatever it is dropped into, which is also what the pending
   rollout to the shopping pages needs (their containers are
   narrower again). The vw rule above stays as the fallback for
   browsers without container query support.

   Maths: the nine swatches span 5.12x their height, plus 8 gaps
   of 8px. At 18cqw the row needs 0.9216 x container + 64px, so it
   stays on one line for any container wider than ~816px.
   ============================================================ */
@supports (container-type: inline-size) {
  .finish-samples {
    container-type: inline-size;
  }

  .finish-sample img {
    height: clamp(110px, 18cqw, 248px);
  }

  /* Keep the phone size winning over the container rule */
  @media (max-width: 600px) {
    .finish-sample img {
      height: 132px;
    }
  }
}


/* ============================================================
   OPTION D — CATEGORY GROUPING
   ------------------------------------------------------------
   The nine swatches are now wrapped four to a row's worth of
   groups (1 / 1 / 5 / 2) so each price category reads as its own
   white card with a thin gray outline and a shadow that deepens
   with price. The per-tile "Category N" badge is replaced by one
   caption per group, so "Category 3" appears once instead of
   five times.

   These rules come last so they win over the flat-row rules above.

   GEOMETRY: grouping costs 98px of gaps, padding and borders
   (against 64px for the flat row), so the swatch height cap comes
   down from 248px to 200px to keep all nine on one line:

       row width = 5.1195 x H + 98      H = clamp(100px, 14cqw, 200px)

   That tops out at 1122px. css/finish-closeup.css sizes the hero
   photo off this same figure - if you change the height cap or the
   gaps here, update the hero's max-width to match.
   ============================================================ */

.finish-samples {
  gap: 10px;                /* between category groups */
  align-items: flex-start;
}

.finish-group {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 4px;                 /* between swatches inside a group */
  padding: 5px;
  border: 1px solid #b3b3b3;
  border-radius: 10px;
  background: #fff;
}

/* Shadow deepens with price */
.finish-group.cat-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, .10); }
.finish-group.cat-2 { box-shadow: 0 3px 8px rgba(0, 0, 0, .14); }
.finish-group.cat-3 { box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.finish-group.cat-4 { box-shadow: 0 10px 26px rgba(0, 0, 0, .24); }

/* width:0 + min-width:100% lets the caption span its group without
   contributing to the group's intrinsic width. Without this the caption
   text sets the panel width and every group renders ~90px too wide. */
.finish-group-cap {
  display: block;
  width: 0;
  min-width: 100%;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 2px 0 8px;
}

/* Same treatment for the tile labels */
.finish-sample-title {
  width: 0;
  min-width: 100%;
  margin-top: 8px;
}

.finish-sample {
  position: relative;       /* so a hovered swatch can sit above its neighbours */
}

.finish-sample img {
  height: clamp(100px, 10vw, 200px);   /* fallback if container queries are unavailable */
  transition: transform .18s ease, box-shadow .18s ease;
}

.finish-sample:hover,
.finish-sample:focus-visible {
  z-index: 3;
}

.finish-sample:hover img,
.finish-sample:focus-visible img {
  transform: scale(1.07);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}

@supports (container-type: inline-size) {
  .finish-samples { container-type: inline-size; }
  .finish-sample img { height: clamp(100px, 14cqw, 200px); }

  @media (max-width: 600px) {
    .finish-sample img { height: 132px; }
  }
}

@media (max-width: 600px) {
  .finish-samples { gap: 10px; }
  .finish-group { gap: 4px; padding: 5px; }
  .finish-sample img { height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .finish-sample img { transition: none; }
  .finish-sample:hover img,
  .finish-sample:focus-visible img { transform: none; }
}


/* ============================================================
   TITLE FITS ON ONE LINE
   ------------------------------------------------------------
   "Painted White" is the widest label (6.667em in Arial bold) and
   it sits on the NARROWEST swatch (paintedwhitesample is 221x410
   against Unfinished's 250x410, so only 0.539 x H wide). At the
   previous 200px height cap that gave a 108px swatch under a 115px
   label - hence the wrap.

   Three changes fix it:
     1. height cap 200 -> 230px, so the narrowest swatch is 124px
     2. label font capped at .95rem instead of 1rem
     3. the font is now CONTAINER-relative, not viewport-relative.
        It was clamp(.82rem, 1.05vw, 1rem) while the swatch scaled on
        cqw - so on the close-up pages (.page-container hands back
        384px less than the viewport) the swatch shrank faster than
        its label and wrapped even when the desktop looked right.

   nowrap is belt-and-braces: the label can never break to a second
   line, and at these sizes it has 12-14px of room to spare anyway.

   Row is 5.1195 x H + 98, topping out at 1275px - css/finish-closeup.css
   sizes the hero photo off that figure and must change with it.
   ============================================================ */

.finish-sample img {
  height: clamp(120px, 11vw, 230px);       /* fallback without container queries */
}

.finish-sample-title {
  white-space: nowrap;
  font-size: clamp(0.68rem, 0.78vw, 0.95rem);   /* fallback */
}

@supports (container-type: inline-size) {
  .finish-sample img {
    height: clamp(120px, 16.5cqw, 230px);
  }

  .finish-sample-title {
    font-size: clamp(0.68rem, 1.15cqw, 0.95rem);
  }

  @media (max-width: 600px) {
    .finish-sample img { height: 150px; }
    .finish-sample-title { font-size: 0.7rem; }
  }
}

@media (max-width: 600px) {
  .finish-sample img { height: 150px; }
  .finish-sample-title { font-size: 0.7rem; margin-top: 7px; }
}