/*
 * Page-specific styles for /products/k7d.
 *
 * Port of the design's inline <style> block in `Imaginando K7D.html`.
 * Section-wise the page is structurally identical to DLYM (hero,
 * overview, engine mosaic, dry/wet, specs, reviews, pricing,
 * requirements, help) — the differences live in pricing (3 cols with
 * a featured ribbon + demo banner + edu/mobile split) and dry/wet,
 * which K7D keeps in its original neutral form (DLYM-only got the
 * plugin-chassis redesign).
 *
 * Already in /style.css (intentionally NOT duplicated):
 *   :root tokens, html/body/a/button resets, ::selection, .mono, .wrap,
 *   .btn / .btn.primary / .btn.ghost / .btn .arrow, .section, .reveal.
 *
 * NOT-quite-the-same in /style.css (overridden below):
 *   .sec-head — global is the homepage scale; product-detail wants the
 *               larger h2 with accent on em + a mono right-column meta.
 *   .hero     — global is the homepage hero; product hero is taller.
 */

/* ============================================================
 * Section heading override — product-detail scale.
 * ============================================================ */
.sec-head { margin-bottom: 48px; flex-wrap: wrap; }
.sec-head h2 {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  max-width: none;
  margin: 8px 0 0;
}
.sec-head h2 em { color: var(--accent); }
.sec-head .meta {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  max-width: 30ch;
}

/* ============================================================
 * HERO
 * ============================================================ */
/* ============================================================
 * HERO — K7D tint + visual only. Chrome is shared (`.phero-*` in
 * public/style.css, via +productHero — refs #444). K7D keeps its
 * gradient, 1100px collapse, wider copy columns, borderless shot, and
 * its tighter meta cells (so "TAPE MECHANICAL CONTROLS" wraps to two
 * lines, not three).
 * ============================================================ */
.phero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 80%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
}
.phero h2 { max-width: 22ch; }
.phero .lede { max-width: 50ch; }
.phero-meta .cell { padding: 18px 18px; gap: 8px; }
.phero-meta .cell .num { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; }
.phero-meta .cell .lbl { font-size: 9.5px; letter-spacing: 0.08em; line-height: 1.4; }
@media (max-width: 1100px) {
  .phero-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero-img-col { margin-top: 0; }
}

/* OVERVIEW — the `.ov-*` block is now shared in public/style.css
 * (Product "Overview" section). K7D uses it unchanged. */

/* ============================================================
 * ENGINE — feature mosaic (same shape as DLYM)
 * ============================================================ */
.ftile {
  position: relative;
  border: 0.5px solid var(--line);
  border-radius: 18px;
  background: var(--card, #0e0e12);
  /* No bottom padding — the `.vis` band sits flush with the card's
     bottom edge, like DLYM / GRFX. The negative margins on .vis below
     extend it past the side padding to fill edge-to-edge. */
  padding: 28px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  min-height: 280px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ftile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ftile.featured {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, var(--card, #0e0e12)), var(--card, #0e0e12));
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
}
.ftile .ix { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.ftile h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.ftile h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.ftile p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; max-width: 50ch; }
/* Clip the oversized SVG. Inline SVGs use
   `preserveAspectRatio="xMidYMid slice"`, so the geometry fills the
   entire band and overflow gets cropped — intentional "fragment"
   look. Drops the earlier flex centering + padding since the SVG
   now fills 100% × 100% via slice. Negative side margins break out
   of the .ftile's 28px side padding so the band reaches the card's
   actual edge (matches DLYM / GRFX). */
.ftile .vis {
  margin-top: auto;
  height: 120px;
  margin-left: -28px;
  margin-right: -28px;
  border-top: 0.5px dashed var(--line);
  display: block;
  overflow: hidden;
}
.fv-svg { width: 100%; height: 100%; display: block; }
.fv-svg path { fill: none; stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 50%, transparent)); }
.fv-svg path.alt { stroke: var(--accent); opacity: 0.55; }
.fv-svg path.deep { stroke: var(--accent); opacity: 0.42; }

/* ============================================================
 * DRY / WET — plugin-chassis panel, K7D-specific.
 *
 * Values verbatim from the Figma export:
 *   - 559×410 panel, gradient over a #26292D base
 *   - Three separate 87×41 outlined tab pills, 20px gap
 *   - Oswald 400 16px tab labels, 18px caption label
 *   - 11 dots on a 30° ring around a centred 101.2px knob
 *   - 46×46 play button + 4px progress line, transport at y=324
 *
 * Children land at their Figma y-positions via explicit margins
 * (tabs at 42, knob-rig at 124, label at 280, transport at 324).
 * Panel uses no horizontal padding — each child controls its own
 * horizontal placement: tabs / knob-rig / label are centred by
 * `align-items: center` on the column, and the transport row uses
 * its own asymmetric inset (40px left, 43.5px right) per spec.
 * ============================================================ */
.dw-single {
  /* Scoped accent override per the spec. !important to beat the
     page-level light-theme `--accent` which also uses !important. */
  --accent: #339950 !important;

  max-width: 559px;
  min-height: 410px;
  margin: 0 auto;
  border-radius: 15px;
  /* Two-layer gradient — light → dark overlay sitting on top of the
     panel's #26292D solid base. Held constant across themes. */
  background:
    linear-gradient(141.5deg, rgba(102, 102, 102, 0.2) 10.9%, rgba(0, 0, 0, 0.2) 100.48%),
    #26292D;
  padding: 42px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

/* Source tab row — fixed 301×41 wrapper holding three separate
   87×41 outlined pill cells with a 20px gap between adjacent
   cells. Each cell has its own border + text colour (no shared
   container border like DLYM). */
.dw-switch {
  display: flex;
  width: 301px;
  height: 41px;
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
}
.dw-seg {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #FFFFFF;
  border-radius: 6px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "Oswald", "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.dw-seg.on { border-color: var(--accent); color: var(--accent); }

/* Knob + dots rig. Sized to the Figma's 149.06×141.6 bounding box.
   margin-top is 41px so the rig's TOP lands at panel-y=124 (= 83
   tabs bottom + 41 spec gap). The knob is centred inside the rig
   per the user's pick — the spec's literal coordinates put it in
   the upper-left of the rig which appears to be a Figma export
   quirk; visually the knob sits at the geometric centre. */
.dw-knob-rig {
  position: relative;
  width: 149.06px;
  height: 141.6px;
  margin-top: 41px;
  display: grid;
  place-items: center;
}
.dw-knob-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dw-knob-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8.21px;
  height: 8.21px;
  border-radius: 50%;
  background: #FFFFFF;
  /* Centre the dot at the rig's centre, then rotate around that
     centre and translate outward by the ring radius (70px — fits
     inside the 141.6px-tall rig with ~1px breathing room). */
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-70px);
  transition: background 0.15s ease;
}
.dw-knob-dot.on {
  background: var(--accent);
}

/* Knob — the asset at https://cdn.imaginando.pt/website3/products/k7d/k7d-effect-knob.svg is
   applied as a CSS mask so its strokes pick up the parent's
   `currentColor` via `background-color: currentColor`. Default
   colour is white; hover / focus / active flip to accent green —
   that's how the indicator + ring colour shift on interaction
   without touching the SVG file. JS rotates this element via a
   CSS transform on `.dw-knob-img`. */
.dw-knob {
  width: 125px;
  height: 125px;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  transition: color 0.2s ease;
}
.dw-knob:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent);
}
.dw-knob-img {
  width: 100%;
  height: 100%;
  display: block;
  background-color: currentColor;
  mask-image: url(https://cdn.imaginando.pt/website3/products/k7d/k7d-effect-knob.svg);
  -webkit-mask-image: url(https://cdn.imaginando.pt/website3/products/k7d/k7d-effect-knob.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: rotate(180deg); /* value 0.6 × 300deg */
  transform-origin: 50% 50%;
  transition: transform 0.12s ease-out, background-color 0.2s ease;
}

/* DRY/WET label — Oswald 400 18px white, top: 280 (= rig bottom
   124+141.6=265.6 + 14.4 margin = 280). */
.dw-label {
  font-family: "Oswald", "Inter Tight", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-top: 14.4px;
}

/* Transport — width: 100% with asymmetric horizontal padding so the
   play button sits at panel-x=40 and the progress line ends at
   panel-x=515.5 (= 559 − 43.5 right inset). 16.5px gap between the
   play button right edge (panel-x=86) and the line start
   (panel-x=102.5). margin-top of 17px lands the row's top at
   panel-y=324 (= label bottom 307 + 17). */
.dw-transport {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 17px;
  padding: 0 43.5px 0 40px;
  gap: 16.5px;
  box-sizing: border-box;
}
.dw-play {
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid #454545;
  display: grid;
  place-items: center;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  background: transparent;
  padding: 0;
}
.dw-play:hover { border-color: var(--accent); }
.dw-play.on { background: var(--accent); color: #26292D; border-color: var(--accent); }
.dw-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  /* Faint-accent track + solid fill — the Figma shows a single 4px
     accent line; the tinted track still reads as a continuous
     accent line at rest while keeping audio progress visible. */
  background: color-mix(in oklab, var(--accent) 28%, transparent);
  overflow: hidden;
}
.dw-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 0%;
  transition: width 0.12s linear;
}

/* ============================================================
 * REQUIREMENTS — 3 cards + formats strip
 * ============================================================ */
.req-grid { grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--card, #0e0e12); }
.req-grid .req:last-child { border-right: 0; }
@media (max-width: 900px) {
  .req-grid .req:nth-child(2n+1) { border-right: 0.5px solid var(--line); }
}
@media (max-width: 520px) {
  .req-grid .req { border-right: 0; }
}

/* ============================================================
 * HELP — 3 cards (manual / video tutorials / chat)
 * ============================================================ */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; } }
.hcard {
  position: relative;
  border: 0.5px solid var(--line);
  border-radius: 14px;
  background: var(--card, #0e0e12);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  color: inherit;
}
.hcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.hcard .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 4px;
}
.hcard .icon svg { width: 20px; height: 20px; }
.hcard .kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.hcard h4 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.hcard h4 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.hcard p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; flex: 1; }
.hcard .more {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hcard .more .arrow { transition: transform 0.25s ease; }
.hcard:hover .more .arrow { transform: translateX(3px); }