/* ============================================================
   FINISH CLOSE-UP PAGES  (.closeup-*)
   ------------------------------------------------------------
   Used by the nine finish close-up pages: unfinished, clear,
   whitewash, pecan, cherry, cordovan, graywash, painted white
   and painted black.

   WHY NEW CLASSES: these pages previously wrapped both the hero
   photo and the customer photos in .legacy-content / .legacy-row,
   and BOTH of those carry `max-width: 1000px` in styles.css. That
   cap - not just the inline style on the image - is what held the
   close-up to 1000px. Those legacy classes are still used on 63
   and 46 other pages respectively, so they are left untouched and
   only these pages get the new wrappers.
   ============================================================ */

/* ---- Hero close-up photo ----
   Spans the full container, matching the .finish-samples row above
   it, instead of being boxed to 1000px. */
.closeup-hero-wrap {
  max-width: none;
  margin: 0 auto 26px;
  text-align: center;
}

/* Never wider than the .finish-samples row above it.
   The row is now GROUPED by price category (Option D), which changes its
   geometry: nine swatches (5.1195 x their rendered height) plus 98px of gaps,
   padding and borders, with H = clamp(120px, 16.5cqw, 230px):

       row width = 5.1195 x H + 98px

   Below a ~1394px container H is 16.5cqw, giving 0.84472 x container + 98px.
   Above that H hits its 230px cap and the row stops growing at 1275px while
   staying centred - so a width:100% hero would overhang it. The min() below
   reproduces both halves of that curve.

   IF YOU CHANGE the height cap or the gaps in css/finish-samples.css, these
   two numbers must change with them. */
.closeup-hero {
  display: block;
  width: 100%;
  max-width: min(calc(84.472% + 98px), 1275px);
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background: #fff;
}

/* ---- Customer photo row ----
   Within any one page these photos share a natural height (e.g. all
   400px tall on the black page, all 350px on pecan), so setting one
   CSS height and leaving width auto lines them up in a single row at
   their true proportions. Nothing is stretched, squashed or cropped.

   The height is sized off the CONTAINER, not the viewport, because
   these pages sit inside .page-container, which gives back 384px
   less than the viewport. 26cqw keeps even the four-photo cherry
   page on one line down to roughly an 800px container. */
.closeup-photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  max-width: none;
  margin: 0 auto 22px;
  padding: 0;
}

/* Sized to match the .closeup-details row above it: that row measures
   4.798 x Hd + 14px and these four measure 3.168 x H + 42px, so H = 28cqw
   with a 370px cap puts the two rows within a few pixels of each other at
   every container width. */
.closeup-photo {
  display: block;
  width: auto;
  height: clamp(150px, calc(var(--photo-cqw, 28) * 1cqw), var(--photo-cap, 370px));
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.closeup-photo:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Heading above the customer photos */
.closeup-photos-heading {
  max-width: 900px;
  margin: 26px auto 14px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700;
  color: #0f766e;
}

@supports (container-type: inline-size) {
  .closeup-photos {
    container-type: inline-size;
  }
}

/* Fallback height for browsers without container queries */
@supports not (container-type: inline-size) {
  .closeup-photo {
    height: clamp(150px, 19.5vw, 370px);
  }
}

/* ---- Phones ---- */
@media (max-width: 700px) {
  .closeup-photos {
    gap: 12px;
  }

  .closeup-photo {
    height: 200px;
  }

  .closeup-hero {
    border-radius: 8px;
  }
}

@media (max-width: 460px) {
  .closeup-photo {
    height: 165px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .closeup-photo {
    transition: none;
  }
  .closeup-photo:hover {
    transform: none;
  }
}


/* ============================================================
   FINISH DETAIL ROW  (.closeup-details)
   ------------------------------------------------------------
   The "front" and "shelf" product shots, shown side by side above
   the customer photos. Both are wide landscape images of a similar
   ratio (blackfront 849x350 = 2.43, blackshelf 1186x500 = 2.37), so
   a shared height lines them up with no cropping or distortion.

   The 48px gap (up from 14px) needed the height cap to come down from 250 to
   241px, so the row still measures the same as the four customer photos below
   it: 4.8434 x H + 48 against their 3.168 x H + 42. Change one, recheck the
   other. Ratios: blackfrontrev 865x350 = 2.4714, blackshelf 1186x500 = 2.372.

   Container-relative like everything else on these pages, because
   .page-container hands back 384px less than the viewport.
   ============================================================ */

.closeup-title {
  margin: 0 auto 6px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 800;
  color: #0f766e;
}

.closeup-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  max-width: none;
  margin: 18px auto 24px;
  padding: 0;
}

/* These two shots get a padded frame: the image sits inside a white box with
   14px of space on every side. box-sizing is forced to content-box because
   styles.css sets border-box globally - without it the padding would eat INTO
   the image instead of adding a margin around it inside the frame.
   The height below is the IMAGE height; the frame is that plus 28px. */
.closeup-detail {
  display: block;
  box-sizing: content-box;
  width: auto;
  height: clamp(130px, 12vw, 236px);       /* fallback */
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.closeup-detail:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* The standing note, set to TWO lines on desktop.
   At 267 characters that needs ~134 characters per line; the old 860px cap at
   ~16px gave only 101, hence three lines.

   The font is container-relative, which keeps characters-per-line CONSTANT at
   any container width - line length and glyph width scale together - so the
   note stays on two lines instead of reflowing to three on a narrower screen.
   .closeup-note-wrap exists purely to give cqw something to measure. */
.closeup-note-wrap {
  container-type: inline-size;
  max-width: 1250px;
  margin: 0 auto 26px;
}

.closeup-note {
  max-width: none;
  margin: 0;
  padding: 0 10px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1.02rem);   /* fallback */
  line-height: 1.6;
  color: #444;
}

@supports (container-type: inline-size) {
  .closeup-note { font-size: clamp(0.82rem, 1.3cqw, 1.02rem); }
}

.closeup-note strong {
  color: #b45309;
}

@supports (container-type: inline-size) {
  .closeup-details { container-type: inline-size; }
  .closeup-detail { height: clamp(130px, calc(var(--detail-cqw, 17.85) * 1cqw), var(--detail-cap, 236px)); }
}

@media (max-width: 700px) {
  .closeup-details { gap: 12px; }
  .closeup-detail { height: 150px; padding: 10px; }
}

@media (max-width: 460px) {
  .closeup-detail { height: 124px; padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .closeup-detail { transition: none; }
  .closeup-detail:hover { transform: none; }
}

/* Divider closing the page */
.closeup-rule {
  border: 0;
  border-top: 1px solid #e0dcd5;
  max-width: 1100px;
  margin: 34px auto 10px;
}

/* Captions under the two product shots.
   width:0 + min-width:100% keeps a caption from widening its figure, so the
   image alone still determines the column width and the equal-height pairing
   holds. Both captions fit on one line down to an ~896px container; below that
   they wrap to two rather than stretching the layout. */
.closeup-detail-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closeup-detail-cap {
  width: 0;
  min-width: 100%;
  /* 18px, not 10px: the image shadow (0 4px 10px) reaches about 9px below the
     image edge, so a 10px gap left the caption sitting in it, visually touching
     the rounded corner. 18px clears it with about 9px of breathing room. */
  margin-top: 18px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.85rem, 1vw, 1rem);      /* fallback */
  font-weight: 400;
  line-height: 1.3;
  color: #333;
}

@supports (container-type: inline-size) {
  .closeup-detail-cap { font-size: clamp(0.85rem, 1.15cqw, 1rem); }
}

@media (max-width: 700px) {
  .closeup-detail-cap { margin-top: 14px; font-size: 0.85rem; }
}


/* ============================================================
   ORDER SAMPLES BUTTON  (.closeup-cta)
   ------------------------------------------------------------
   Sits under the standing note and links to the sample-set cart
   form on finishes.htm. Deep-links to #order-samples so the
   visitor lands on the order box rather than the top of the page.
   ============================================================ */

.closeup-cta-wrap {
  text-align: center;
  margin: 0 auto 34px;
}

.closeup-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 15px 34px;
  border-radius: 999px;
  border: 2px solid #0f766e;
  background: #0f766e;
  color: #fff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 6px 18px rgba(15, 118, 110, .30);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

.closeup-cta:hover,
.closeup-cta:focus-visible {
  background: #0b5c55;
  border-color: #0b5c55;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 118, 110, .40);
}

.closeup-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(15, 118, 110, .30);
}

.closeup-cta:focus-visible {
  outline: 3px solid #0b5c55;
  outline-offset: 4px;
}

.closeup-cta-main {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 700;
  letter-spacing: .01em;
}

.closeup-cta-sub {
  font-size: clamp(.78rem, .9vw, .86rem);
  font-weight: 400;
  opacity: .88;
}

@media (max-width: 600px) {
  .closeup-cta {
    padding: 14px 22px;
    width: 100%;
    max-width: 380px;
  }
}

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

/* ------------------------------------------------------------
   PER-PAGE GEOMETRY
   Each finish has different image proportions, so the heights that
   keep the detail row and the customer row the same width differ
   page to page. Rather than a rule per page, both rows read two
   custom properties, set inline on the row in the page itself:

     <div class="closeup-details" style="--detail-cqw:18.15; --detail-cap:240px;">
     <div class="closeup-photos"  style="--photo-cqw:25.1;  --photo-cap:330px;">

   Defaults (17.85/236px and 28/370px) are the black page's values,
   so that page needs no inline values.

   To derive them for a new page:
     detail row   = (sum of the 2 detail ratios) x imgH + 4x14 padding + 14 gap
     customer row = (sum of the N photo ratios)  x H    + (N-1) x 14 gap
   Pick the caps so both rows land on ~1214px, then divide each cap
   by ~1322 to get its cqw factor.
   ------------------------------------------------------------ */


/* ============================================================
   CHANGE-OF-FINISH CALLOUT  (.closeup-alert)
   ------------------------------------------------------------
   For notices a returning customer must not miss - currently the
   Painted White colour change. Styled as an alert rather than body
   text so it reads as a notice, using the amber the site already
   uses for warnings (#b45309, and the #fff5a8/#e0cf66 pair from
   shop-15.css, softened here so a full paragraph is comfortable
   to read).
   ============================================================ */

.closeup-alert {
  max-width: 1000px;
  margin: 0 auto 24px;
  padding: 16px 22px;
  border: 1px solid #e0cf66;
  border-left: 5px solid #b45309;
  border-radius: 10px;
  background: #fffbe8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.6;
  color: #4a3c1a;
  text-align: left;
}

.closeup-alert strong {
  color: #b45309;
  letter-spacing: .02em;
}

/* The paint reference reads as a spec, so set it apart slightly */
.closeup-alert .closeup-alert-ref {
  white-space: nowrap;
  font-weight: 700;
  color: #6b4226;
}

@media (max-width: 600px) {
  .closeup-alert {
    padding: 14px 16px;
    border-left-width: 4px;
    font-size: 0.92rem;
  }
}

/* Small clarifying line under a customer photo row - e.g. where some of the
   photos are our own studio shots rather than customer submissions. Worded by
   POSITION IN SEQUENCE ("the first two"), never by screen position ("the photo
   on the left"), because the row wraps on tablets and phones and left/middle/
   right stops being true. */
.closeup-photos-note {
  max-width: 900px;
  margin: -6px auto 24px;
  padding: 0 12px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  line-height: 1.55;
  color: #6b7280;
  font-style: italic;
}


/* ============================================================
   PRICE CATEGORY NOTE  (.closeup-price-note)
   ------------------------------------------------------------
   Used on the two Category 4 pages (Painted Black, Painted White)
   to explain why the painted finishes cost more. Deliberately NOT
   the amber .closeup-alert treatment: amber reads as a caution,
   and this is a positive explanation of value. The teal matches
   the Category 4 badge in the finish selector above, so the note
   visually belongs to the price tier it is talking about.
   ============================================================ */

.closeup-price-note {
  max-width: 1000px;
  margin: 0 auto 26px;
  padding: 16px 22px;
  border: 1px solid #b3d8d1;
  border-left: 5px solid #0f766e;
  border-radius: 10px;
  background: #f2f9f8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.6;
  color: #33463f;
  text-align: left;
}

.closeup-price-note strong {
  color: #0f766e;
}

@media (max-width: 600px) {
  .closeup-price-note {
    padding: 14px 16px;
    border-left-width: 4px;
    font-size: 0.92rem;
  }
}