/* Detail page — the 514 prerendered pages at /paddles/browse/p/<id>.

   The .pd-* block: title, price + single CTA, sections, detail metric bars and
   the spec table. Split out of paddle-finder.css so the catalog's 29 KB of
   grid CSS stops shipping to pages that have no grid.

   Does NOT include the "Similar paddles" comparison card — that is .pd-cc-*
   in paddle-card.css, shared with /paddles/browse/compare.

   Needs, and does not define: .pn-tag (paddle-shared.css).

   .pd-wrap sits INSIDE a `.container`. It owns vertical rhythm only, so the
   1120px measure stays defined in exactly one place.

   Buy CTAs (.pd-cta) carry `.btn` as well, so there is one primary-button
   definition on the site, not two.

   Breakpoint is 940px, not the site's 900px nav breakpoint — see
   paddle-catalog.css's header for why the two are unrelated. */

/* ==========================================================================
   Detail — /paddles/browse/p/<id>
   ========================================================================== */

/* Vertical rhythm only — the 1120px measure belongs to .container, which this
   sits inside. */
.pd-wrap {
  padding-block: var(--space-2) var(--space-4);
}

/* Two columns on desktop: the sticky spec rail (.pd-aside, pulled left by
   order:-1) and the analysis (.pd-main). The reco/similar sections live in
   .pd-tail, a SIBLING of this grid rather than a child — see the template
   comment on .pd-tail for why the sticky aside forces that. */
.pd-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* Sticky, so the specification numbers stay on screen while you read the
   performance bars and picks beside them.

   order:-1 is what puts this rail in the LEFT column even though .pd-main is
   ahead of it in the DOM. The source order is deliberate — the aside opens with
   an <h2> ("Full specifications"), so if it came first the <h1> naming the
   paddle would not be the first heading on the page — and grid auto-placement
   honours `order`, so the visual two-column layout survives the accessible
   source order with one declaration and no explicit grid-column on either
   child. This is reset to 0 in the max-width:940px block; leaving it at -1 there
   would put the spec table above the paddle's name on every phone. */
.pd-aside {
  order: -1;
  position: sticky;
  top: calc(var(--header-h, 130px) + 12px);
}

/* The rail's section label. A real <h2> for the heading outline, but sized like
   the site's other rail labels — a mono uppercase eyebrow — so the spec card
   below it stays the visual anchor rather than a heavy serif heading. */
.pd-aside-head {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Recommendations + similar paddles, full width under both columns. A sibling
   of .pd-grid (not a grid child — see the .pd-tail template comment), so it is
   already a full-width block; min-width:0 only keeps the similar row's
   horizontal scroller from forcing the page wider than the viewport. Its
   children (.pd-recos, .pd-similar) bring their own margin-top. */
.pd-tail {
  min-width: 0;
}

.pd-main {
  min-width: 0;
}

/* Product photo at the top of .pd-main (assets/paddle-images/<id>.png). The PNG
   is a square, transparent, face-on cutout, so it drops onto the tinted well
   with no plate of its own. object-fit keeps portrait and widebody shapes
   honest; max-height bounds the tall ones so the name/buy still sit near the
   top of the fold. */
.pd-figure {
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(130% 125% at 50% 24%, rgba(var(--ink-rgb), 0.05), transparent 70%);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.pd-figure-img {
  max-width: 100%;
  max-height: 300px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(var(--ink-rgb), 0.18));
}

.pd-title {
  margin: 0.2rem 0 0.5rem;
  font-size: clamp(1.625rem, 3.4vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.pd-title-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.pd-blurb {
  margin: 0 0 var(--space-2);
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--body-ink);
}

/* ---------- price + single CTA ---------- */

/* One card, one CTA. The design is explicit that a paddle shows EITHER a buy
   link or a "search the brand" fallback, never both — two buttons here would
   make the affiliate link look like the paid option next to a free one. */
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--space-2);
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.pd-price {
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

/* Expects to sit with .pd-price inside an unclassed wrapper, so the caption
   tucks under the number rather than beside it. */
.pd-price-note {
  margin: 0.15rem 0 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

/* Fallback for the wrapper-less case: as a direct flex child the caption would
   otherwise sit inline between the price and the CTA. `order` pushes it below
   the button rather than letting it break the row and drop the CTA to line
   two, which is the one arrangement that reads as broken. */
.pd-buy > .pd-price-note {
  flex-basis: 100%;
  order: 1;
}

/* Modifier on .btn — expects `class="btn pd-cta"`, matching what
   paddle-tray.js already does with .pt-go. Only the placement is new. */
.pd-cta {
  margin-left: auto;
}

/* The affiliate disclosure, full width under the CTA. flex-basis:100% forces
   its own row so it can never end up beside the button and get skimmed past. */
/* Commission disclosure — the .affiliate-note skin for the hero CTA.
   Sentence and class come from assets/paddle-cta.js; only the look is here. */
.affiliate-note--detail {
  flex-basis: 100%;
  order: 2;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- sections ---------- */

.pd-section {
  margin-top: var(--space-3);
}

.pd-section > h2 {
  margin: 0 0 0.35rem;
  font-size: 1.3125rem;
}

.pd-caption {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- detail metric bars ---------- */

.pd-bars {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

/* min-width:0 so a long note under a bar wraps instead of setting a min-content
   floor that widens .pd-bars past the column. */
.pd-bar {
  min-width: 0;
}

.pd-bar-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.pd-bar-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}

/* The tier word ("High", "Very high") stands in for the number that licensing
   forbids printing, so it carries the emphasis a numeral would have had. */
.pd-bar-word {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}

/* bandPhrase() — "top quarter of the catalog". A qualitative position, never a
   percentile. */
.pd-bar-band {
  font-family: var(--font-body);
  font-size: 0.71875rem;
  color: var(--ink-faint);
}

/* position:relative so .pd-median can be placed against it. */
.pd-track {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.09);
  overflow: hidden;
}

.pd-fill {
  height: 100%;
  border-radius: inherit;
}

/* Terciles, so the colour says "where this lands" without printing where. */
.pd-fill--high {
  background: var(--bay);
}

.pd-fill--mid {
  background: var(--optic-text);
}

.pd-fill--low {
  background: var(--poppy-deep);
}

/* Hand speed only. A heavy paddle is slower, not worse, so colouring it clay
   would assert a judgement the data does not support. */
.pd-fill--neutral {
  background: var(--ink-soft);
}

/* The catalog median. transform, not `left: calc(50% - 0.75px)`, because a
   subpixel left offset lands the tick a hair off centre at some zoom levels
   and the whole point of the tick is that it is exactly the middle. */
.pd-median {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(var(--ink-rgb), 0.35);
}

.pd-bar-note {
  margin: 0.35rem 0 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.pd-nolab {
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--rule-25);
  border-radius: var(--radius-m);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- spec table ---------- */

/* border-collapse: SEPARATE, deliberately. `collapse` merges the cell borders
   into the table box and the rounded corners stop clipping — the stripes then
   square off the bottom two corners of the card. */
.pd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* Stripe is ink at 3%, not --fog-dim at low alpha: there is no --fog-dim-rgb
   triplet in :root and this file does not add tokens. Ink-on-paper at 3% lands
   within a hair of the intended warm tint and cannot drift from the palette. */
.pd-table tbody tr:nth-child(even) {
  background: rgba(var(--ink-rgb), 0.03);
}

.pd-table th,
.pd-table td {
  padding: 0.5rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.pd-table th {
  width: 44%;
  font-family: var(--font-display);
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.pd-table td {
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  color: var(--ink);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 940px) {
  .pd-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Unstick, or the spec rail pins itself to the top of a one-column page and
     the rest of the content scrolls past a table that never moves.

     order back to 0 so the single column follows DOM order: title, price, CTA
     and the performance bars first, then the full spec table, then the picks.
     The desktop rule sets -1 only to pull this into the left column; carried
     into one column that same -1 would hoist the spec table above the paddle's
     own name. */
  .pd-aside {
    order: 0;
    position: static;
  }
}

@media (max-width: 560px) {
  /* The CTA drops to its own full-width row rather than squeezing beside a
     26px price. */
  .pd-cta {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}