/* ==========================================================================
   Spark Audio — product.css
   The product page template (autopitch.html, compressor.html, eq.html,
   delay.html, reverb.html). Load it after site.css.

   Re-colouring a page: set two custom properties on <main class="product">,
     style="--plugin-accent: var(--compressor); --plugin-deep: var(--compressor-deep)"
   Colour rule: amber (--accent) stays on everything you can click (buttons,
   links, hover and focus). The plugin accent only marks things you read:
   the glow behind the window, icons, position dots and suggested values.

   Contents
   01  Page tokens
   02  Breadcrumb
   03  Product hero (copy, buy row, spec line)
   04  Window shot (real screenshot or mockup in a frame)
   05  Facts strip and column icons
   06  Key/value list (starting settings, small summaries)
   07  Control grid (collapsed borders)
   08  Detailed page (sticky shot + parameter list)
   09  Compare (two cells)
   10  Split section + knob gestures
   11  Spec table
   12  More from Spark (tile row)
   13  CTA band additions
   ========================================================================== */


/* 01  Page tokens ---------------------------------------------------------- */

.product {
  --plugin-accent: var(--accent);
  --plugin-deep: var(--surface);
  --plugin-glow: color-mix(in srgb, var(--plugin-accent) 20%, transparent);
}


/* 02  Breadcrumb ----------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: rgba(230, 232, 236, 0.28); }
.crumbs a { color: var(--muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text-soft); }


/* 03  Product hero --------------------------------------------------------- */

.product-hero { position: relative; overflow: hidden; }
.product-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-block: 40px 80px;
}
@media (min-width: 1024px) {
  .product-hero__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 72px;
    min-height: min(calc(86vh - var(--header-h)), 720px);
    padding-block: 64px 104px;
  }
}
.product-hero__title { margin-bottom: 24px; }
/* Sized so the longest name, "Spark Compressor", stays on one line beside the
   window, and all five heroes line up when you move between them. */
@media (min-width: 1024px) {
  .product-hero__title { font-size: clamp(44px, 3.4vw + 12px, 62px); }
}
.product-hero__lead { max-width: 30rem; }

.buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 40px;
}
.buy__price { display: flex; align-items: baseline; gap: 10px; }
@media (max-width: 519.98px) {
  .buy .btn { flex: 1 1 100%; }
}
.buy__amount {
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.buy__once { color: var(--muted); font-size: var(--fs-xsmall); }
.buy__bundle { margin-top: 22px; }
.buy__bundle .text-link { color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
.buy__bundle .text-link:hover { color: var(--accent); }

/* Every item starts with a separator dot, and the list is pulled 24px left
   and clipped, so the dot before the first item on each line (including a
   wrapped one) is never shown. */
.product-hero__specs {
  display: flex;
  flex-wrap: wrap;
  max-width: calc(30rem + 24px);
  margin: 40px 0 0 -24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  clip-path: inset(0 0 0 24px);
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.product-hero__specs li::before {
  content: "·";
  display: inline-block;
  width: 24px;
  text-align: center;
  color: rgba(230, 232, 236, 0.3);
}


/* 04  Window shot ---------------------------------------------------------- */
/* <figure class="shot"><div class="shot__frame"><img …></div></figure>
   For a plugin without a screenshot, put
   <div class="pui pui--flat" data-plugin-ui="id" data-flat></div>
   inside .shot__frame instead of the <img> (the classes reserve its 10:7 box
   before plugin-ui.js draws it), and add
   <figcaption class="shot__caption">An illustration of the … window.</figcaption>. */

.shot { position: relative; margin: 0; }
/* The glow stays inside the figure's width (no sideways scroll on phones);
   the blur carries it past the edges. */
.shot::before {
  content: "";
  position: absolute;
  inset: -10% 0 -16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--plugin-glow) 55%, transparent);
  filter: blur(56px);
  pointer-events: none;
}
.shot__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: #141618;
  box-shadow: 0 32px 64px -40px rgba(0, 0, 0, 0.8), 0 10px 24px -16px rgba(0, 0, 0, 0.45);
}
.shot__frame img,
.shot__frame .pui { width: 100%; }
/* Hangs below the frame without adding to the figure's height, so a captioned
   window sits exactly where an uncaptioned one does. */
.shot__caption {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--fs-xsmall);
  line-height: 1.5;
}


/* 05  Facts strip and column icons ----------------------------------------- */

.product .facts__item svg { color: var(--plugin-accent); opacity: 1; }
.product .column__icon { color: var(--plugin-accent); }
.column__foot { margin-top: auto; }
.column__foot-title { margin-bottom: 12px; color: var(--muted); font-size: var(--fs-xsmall); }


/* 06  Key/value list ------------------------------------------------------- */
/* <dl class="kv"><div><dt>Hard Tune</dt><dd>0%</dd></div>…</dl> */

.kv { border-top: 1px solid var(--line); }
.kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }


/* 07  Control grid --------------------------------------------------------- */

.control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 680px) { .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.control {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease);
}
@media (min-width: 680px) { .control { padding: 40px; } }
.control:hover { background: var(--surface); }

.control__where {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: var(--fs-xsmall);
}
/* Little map of the window: which knob or menu this is. */
.control__map { width: 36px; height: 14px; flex: none; overflow: visible; }
.control__map * { fill: none; stroke: rgba(230, 232, 236, 0.28); stroke-width: 1.2; }
.control__map .is-on { fill: var(--plugin-accent); stroke: var(--plugin-accent); }

.control__name { margin-bottom: 12px; }
.control__text { max-width: 26rem; color: var(--muted); font-size: 15px; line-height: 1.7; }
.control__text a { color: var(--text); text-decoration-color: var(--line-strong); }
.control__text a:hover { color: var(--accent); text-decoration-color: currentColor; }
.control__foot { margin-top: auto; padding-top: 32px; }
.control__start {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xsmall);
}
.control__value {
  color: var(--plugin-accent);
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* 08  Detailed page -------------------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}
@media (min-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .detail__shot { position: sticky; top: calc(var(--header-h) + 40px); }
}

.param-list { border-top: 1px solid var(--line); }
.param {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .param { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; }
}
.param dt { font-size: 15px; font-weight: 500; line-height: 1.6; }
.param dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }


/* 09  Compare -------------------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 768px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare__cell {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 680px) { .compare__cell { padding: 40px; } }
@media (min-width: 1024px) { .compare__cell { padding: 48px; } }
.compare__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 40px;
}
/* Two cells side by side but too narrow for a chip beside the name: the chip
   wraps under it, so both title rows get that height and the lines below
   stay level. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .compare__top { align-items: flex-start; align-content: flex-start; min-height: 84px; }
}
.compare__name { font-size: clamp(28px, 1vw + 20px, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.compare__engine { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); }
.compare__text { margin-top: 20px; max-width: 30rem; color: var(--text-soft); font-size: 16px; line-height: 1.7; }
.compare-note {
  max-width: 46rem;
  margin-top: 40px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.compare-note strong { color: var(--text); font-weight: 500; }


/* 10  Split section + knob gestures ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 72px;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; }
}
.split__title { margin-bottom: 28px; }
.split .prose { max-width: 34rem; }
.split .kv { margin-top: 40px; max-width: 34rem; }
.split__intro { margin-top: 12px; color: var(--muted); font-size: 15px; }

.gestures { margin-top: 32px; border-top: 1px solid var(--line); }
.gesture {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
}
.gesture svg { width: 20px; height: 20px; color: var(--plugin-accent); }
.gesture__what { font-weight: 500; }
.gesture__does { grid-column: 2; color: var(--muted); }
@media (min-width: 560px) {
  .gesture { grid-template-columns: 20px 9.5rem minmax(0, 1fr); gap: 16px; }
  .gesture__does { grid-column: auto; }
}


/* 11  Spec table ----------------------------------------------------------- */

.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 1024px) {
  .specs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
}
.specs__intro p { margin-top: 20px; max-width: 24rem; color: var(--muted); }
.specs__intro .text-link { margin-top: 24px; }

.spec-table { border-top: 1px solid var(--line); }
.spec-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .spec-table > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; }
}
.spec-table dt { color: var(--muted); font-size: 15px; line-height: 1.6; }
.spec-table dd { margin: 0; color: var(--text); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.spec-table dd span.muted { display: block; margin-top: 2px; font-size: 15px; }


/* 12  More from Spark ------------------------------------------------------ */
/* A zero-gap row of 1x1 knob tiles, reusing .tiles / .tile--knob (site.css
   section 13 places the knob and the link). Each tile shows that plugin's
   centre knob: drawn by plugin-ui.js (data-plugin-ui … data-part="knob"), or
   for AutoPitch, cropped from the real screenshot with .tile__shot. */

.more__head { padding-top: var(--section-y); }
.tiles--row { --knob-max: 144px; }
@media (min-width: 1100px) {
  .tiles--row { grid-auto-rows: minmax(340px, auto); }
}
@media (max-width: 719.98px) {
  .tiles--row { --knob-max: 120px; }
  .tiles--row .tile { min-height: 0; padding-block: 28px; }
  .tiles--row .tile--knob .tile__more { bottom: 28px; }
}

/* The AutoPitch Correction dial, cut from autopitch-main.png (1080 x 756,
   the plugin's 1200 x 840 design canvas at 0.9). The SVG's viewBox is the
   same 324-unit box around the dial centre (539.5, 362.3) that the drawn
   dials use (324 x 0.9 = 291.6 px), and the mask keeps only the face, the
   track and sweep, the end dot and the tick marks, so the tile colour shows
   around and between them exactly as on its neighbours.
   Markup (identical on every page that lists AutoPitch):
   <svg class="tile__knob tile__media tile__shot" viewBox="393.7 216.5 291.6 291.6" …>
     <defs><mask id="autopitch-knob-mask" …>…</mask></defs>
     <image href="assets/img/autopitch-main.png" width="1080" height="756" mask="url(#autopitch-knob-mask)"/>
   </svg> */
.tile__shot { aspect-ratio: 1; overflow: visible; }


/* 13  CTA band additions --------------------------------------------------- */
/* "Get Spark Compressor for $7.99." is too long to share a row with the
   button at this size, so on every product page the button sits below. */

.product .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
@media (min-width: 720px) {
  .product .cta-band__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 40px; max-width: none; }
  .product .cta-band__note { max-width: 24rem; }
}

.cta-band__note a { color: var(--on-accent); text-underline-offset: 3px; }
.cta-band__note a:hover { text-decoration-thickness: 2px; }