/* ==========================================================================
   Diamond section only. Loaded by the 13 pages under /products/diamond/,
   after /style.css, and by nothing else.

   Every class is prefixed .dia- : checked collision-free against every prefix
   in style.css (acct brand btn cart crumbs data el foot form haz head mkt nav
   note opt pdp promise qty search sec site stock table wrap).

   This file declares NO custom properties. style.css keeps the token set
   centralised -- check-pricing group T enforces that for .acct-*, and the same
   line is held here voluntarily. It also restyles nothing that already exists:
   .wrap, .sec, .el-head, .crumbs, .btn, .data-table, .table-scroll, .mono and
   .pd-uses are all reused as-is.

   Source of truth for the markup these rules style: tools/gen-diamond.py.
   ========================================================================== */

/* ---------- Category rows ----------

   One full-width row per product instead of the .mkt-card grid. A .mkt-card
   exists to carry a price, a pack-size select and a buy button; diamond is
   quote-only and has none of those, and what a buyer actually compares here is
   a handful of numbers. So the row reads strictly left to right: photo, name,
   what it is, the two or three specs that decide the purchase, the price line,
   the CTA. Rules between rows, no card chrome -- this has to sit beside the
   existing pages without looking like a different site. */

/* flow-root so the first and last rows' padding stays inside the section
   rather than collapsing through it. */
.dia-rows { display: flow-root; }

.dia-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 210px);
  gap: 30px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
/* The .sec above already draws a rule, so the first row must not draw another. */
.dia-row:first-child { padding-top: 2px; border-top: 0; }
.dia-row:last-child { padding-bottom: 2px; }

/* 130px is not arbitrary: it is the natural width of the narrowest product
   photo on disk (product_images/diamond/diamond-bdd.jpg, 130x230). A square box at
   that width means object-fit: cover only ever scales an image DOWN -- none of
   these photos is ever enlarged past its natural size, which at this
   resolution would be immediately visible. Same aspect-ratio + object-fit
   pattern as .pdp-photo and .stock-pic in style.css. */
.dia-row-media { width: 130px; }
.dia-row-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
}

/* min-width: 0 so a long unbroken spec value cannot push the grid track wider
   than its share. */
.dia-row-main { min-width: 0; }

.dia-row-name { margin: 0 0 6px; }
.dia-row-name a { color: var(--ink); text-decoration: none; }
.dia-row-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.dia-row-desc { margin: 0 0 12px; max-width: 62ch; color: var(--ink-soft); }

.dia-row-specs { list-style: none; margin: 0; padding: 0; }
.dia-row-specs li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 3px 0;
  font-size: var(--fs-small);
}
.dia-row-label { flex: none; min-width: 200px; color: var(--muted); }

.dia-row-buy { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* Plain text, deliberately not a badge: there is no price to put in a pill,
   and "Coming soon" in a chip reads as a marketing sticker rather than a fact. */
.dia-row-price { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.dia-row-cta { text-align: center; }
.dia-row-more { margin: 0; font-size: 13.5px; }

/* ---------- Product page ----------

   The two-column top block reuses .pdp from style.css (grid, 40px gap,
   align-items: start, collapsing at 820px) rather than inventing a second
   one. Only the media frame and the quote block below it are new. */

/* The photos are 130-432px. Scaling one up to fill a ~580px column would be
   the most conspicuous thing on the page, so the frame is a fixed-ratio box
   -- the same aspect-ratio + object-fit pattern .stock-pic uses -- and the
   image sits inside it, scaled down to fit when it is larger and left at its
   natural size when it is smaller. width/height attributes are on every <img>,
   written by the generator from the file on disk, so nothing reflows once the
   image loads. */
/* object-fit: scale-down is min(none, contain): the photo is scaled DOWN to
   fit the frame when it is bigger, and left at its natural size when it is
   smaller. Never enlarged. */

.dia-pdp-desc { min-width: 0; }

.dia-feats { margin: 0 0 4px; padding-left: 20px; max-width: 62ch; }
.dia-feats li { margin-bottom: 6px; }

/* Unboxed, like .buybox: a rule and some air, not a card. */
.dia-quote {
  max-width: 430px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-strong);
}
.dia-price { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: var(--ink); }
.dia-quote-note { margin: 0 0 18px; max-width: 46ch; font-size: 14px; color: var(--muted); }

.dia-back { margin-top: 30px; }

/* ---------- Narrow screens ----------

   820px, the breakpoint style.css already collapses .pdp at, so the row and
   the product page fold at the same width. No new breakpoint is introduced.
   The row goes to a single stacked column: photo, then name/description/specs,
   then the price line and the CTA. */
@media (max-width: 820px) {
  .dia-row { grid-template-columns: 1fr; gap: 18px; }
  .dia-row-buy { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .dia-row-cta { text-align: left; }
  .dia-row-label { min-width: 0; font-weight: 600; }
  .dia-quote { max-width: none; }
}