/* ==========================================================================
   techsheet: "Fișa tehnică" (inc/woo-techsheet.php, prefix pg-ts) on wine pages and /kavi/; enqueued there only
   (handle dvh-woo-techsheet). Kit tokens and type roles only: no new colours, sizes or radii.
   2026-10-20 redesign: one white sheet on the band (house rule on top), the key-facts strip, then full-width rows
   (heading column + facts on a three-column grid from 900 px) instead of side-by-side cards of uneven height, so a
   short section never leaves a hole. Icons: the inline sprite (dvts-*), 1.5 px strokes at every size.
   Phone first (390 px: one column, two-up key facts, two-up pairing tiles). Print: the sheet alone, ink on white.
   ========================================================================== */

.pg-ts { background: var(--band); border-top: 3px solid var(--house-deep); padding-block: var(--section-inner); }
.pg-wine-ts { margin-top: var(--sp-7); }
.pg-ts__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pg-ts__sheet { background: var(--surface); border-radius: var(--radius-media); padding: var(--sp-5) var(--sp-4); }

/* icons: one stroke weight everywhere (1.5 px at 20 and 24 px; scaled down for the 32 px pairing tiles) */
.pg-ts__i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); }
.pg-ts__i--sm { width: 16px; height: 16px; stroke-width: 1.6; }

/* ---- head: house eyebrow, title, the PDF button beside them (below on phones) ---- */
.pg-ts__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-5); padding-bottom: var(--sp-5); }
.pg-ts__titles > * + * { margin-top: var(--sp-2); }
.pg-ts__printname { display: none; }
.pg-ts__pdf { display: grid; justify-items: start; gap: var(--sp-1); max-width: 100%; }
.pg-ts__pdf .dvh-btn { max-width: 100%; white-space: normal; text-align: left; gap: var(--sp-2); padding-block: var(--sp-2); }
.pg-ts__pdf .pg-ts__i { color: currentColor; }
.pg-ts__pdf .dvh-meta { margin: 0; }
/* techsheet-pdf 2026-10-20: the winery's original sheet under the button, a quiet text link with its size */
.pg-ts__orig { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); margin: var(--sp-1) 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.pg-ts__orig a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 24px; color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
.pg-ts__orig a:hover { text-decoration-thickness: 2px; }
.pg-ts__orig .pg-ts__i { width: 16px; height: 16px; }

/* ---- key facts: vintage, alcohol, volume, serving temperature, residual sugar ---- */
.pg-ts__key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.pg-ts__stat { min-width: 0; padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; }
.pg-ts__stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
.pg-ts__stat--wide { grid-column: 1 / -1; }
.pg-ts__stat dt { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-text); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-strong); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.pg-ts__stat dt .pg-ts__i { color: var(--muted); }
.pg-ts__stat dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-1); margin: var(--sp-2) 0 0; }
.pg-ts__num { font-family: var(--font-display); font-size: var(--fs-numeral); line-height: var(--lh-numeral); font-weight: var(--fw-display); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pg-ts__unit { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--muted); white-space: nowrap; }
.pg-ts__statnote { flex-basis: 100%; margin-top: var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }

/* ---- rows: one per section ---- */
.pg-ts__row { padding-block: var(--sp-5); border-top: 1px solid var(--line); }
.pg-ts__key + .pg-ts__rows > .pg-ts__row:first-child { border-top: 0; }
.pg-ts__row:last-child { padding-bottom: 0; }
.pg-ts__row--slim { padding-block: var(--sp-4); }
.pg-ts__rows + * { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pg-ts__rowhead { margin-bottom: var(--sp-4); }
.pg-ts__rowh { display: flex; align-items: center; gap: var(--sp-3); margin: 0; font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); }
.pg-ts__badge { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--band); }
.pg-ts__badge .pg-ts__i { width: 24px; height: 24px; }
.pg-ts__rownote { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); text-wrap: pretty; }

/* facts: icon, label (sentence case, muted), value; a three-column grid that keeps its columns from row to row */
.pg-ts__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(13rem, calc((100% - 2 * var(--sp-6)) / 3))), 1fr)); gap: var(--sp-4) var(--sp-6); margin: 0; }
.pg-ts__fact { position: relative; min-width: 0; padding-left: calc(20px + var(--sp-3)); }
.pg-ts__fact--wide { grid-column: 1 / -1; }
.pg-ts__fact dt { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.pg-ts__fact dt .pg-ts__i { position: absolute; left: 0; top: 0; }
.pg-ts__fact dd { margin: 2px 0 0; font-size: var(--fs-body); line-height: 1.5; font-weight: var(--fw-ui); overflow-wrap: break-word; }
.pg-ts__fact--wide dd { max-width: 40rem; }
.pg-ts__fact--key dd { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-display); text-wrap: balance; }
.pg-ts__fact dd .dvh-pending { font-family: var(--font-text); font-size: var(--fs-meta); }
/* a link inside a fact ("Ce înseamnă IGP Codru"): its own line, a 44 px target */
.pg-ts__link { display: flex; width: fit-content; max-width: 100%; align-items: center; min-height: var(--tap); color: var(--link); font-weight: var(--fw-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pg-ts__link:hover { text-decoration-thickness: 2px; }

/* tasting: the notes, then eye, nose, palate (stacked on phones, side by side when there is room) */
.pg-ts__notes { max-width: 60ch; margin: 0 0 var(--sp-5); font-family: var(--font-display); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-display); text-wrap: pretty; }
.pg-ts__notes:last-child, .pg-ts__notes--pend { margin-bottom: 0; }
.pg-ts__notes--pend { font-family: var(--font-text); font-size: var(--fs-ui); }
.pg-ts__senses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-5) var(--sp-6); }
.pg-ts__sense { min-width: 0; }
.pg-ts__sense-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-family: var(--font-text); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); }
.pg-ts__sense-h .pg-ts__i { width: 24px; height: 24px; }
.pg-ts__pairs { margin: 0; }
.pg-ts__pairs > div { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--sp-3); padding-block: 6px; }
.pg-ts__pairs dt { padding-top: 1px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.pg-ts__pairs dd { margin: 0; font-size: var(--fs-ui); line-height: 1.5; font-weight: var(--fw-ui); overflow-wrap: break-word; }

/* food pairing: tiles (icon over the name), then the pairing sentence */
.pg-ts__dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pg-ts__dish { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-4) var(--sp-2) var(--sp-3); border-radius: var(--radius-media); background: var(--ground); text-align: center; }
.pg-ts__dish .pg-ts__i { width: 32px; height: 32px; stroke-width: 1.125; }
/* painted vignette (Media Library, its ground = --ground, so it sits in the tile without a box) */
.pg-ts__dish--pic { padding-top: var(--sp-2); }
.pg-ts__dishimg { display: block; width: 80px; height: 80px; object-fit: contain; }
.pg-ts__dishname { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-ui); overflow-wrap: break-word; hyphens: auto; }
.pg-ts__dishsub { display: block; margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-text); color: var(--muted); }
.pg-ts__dishsub::first-letter { text-transform: none; }
.pg-ts__pairtext { max-width: 40rem; margin: var(--sp-4) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.pg-ts__pairtext:first-child { margin-top: 0; }
.pg-ts__dishes + .pg-ts__facts, .pg-ts__pairtext + .pg-ts__facts { margin-top: var(--sp-5); }
.pg-ts__subh { margin: 0 0 var(--sp-3); font-family: var(--font-text); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); }

/* awards: medal chips with the organiser's result page; critics' scores */
.pg-ts__awards { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pg-ts__award { position: relative; padding-left: calc(20px + var(--sp-3)); font-size: var(--fs-body); line-height: 1.5; }
.pg-ts__award > .pg-ts__i { position: absolute; left: 0; top: 2px; }
.pg-ts__medal { margin-right: var(--sp-3); }
.pg-ts__medal b { font-weight: var(--fw-strong); }
.pg-ts__src { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 24px; padding-block: 10px; margin-block: -10px; color: var(--link); font-size: var(--fs-meta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pg-ts__src .pg-ts__i { color: currentColor; }
.pg-ts__src:hover { text-decoration-thickness: 2px; }
.pg-ts__critic { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); align-items: baseline; margin-top: var(--sp-4); }
.pg-ts__awards + .pg-ts__critic { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pg-ts__score { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums lining-nums; }
.pg-ts__score small { font-family: var(--font-text); font-size: var(--fs-meta); color: var(--muted); }
.pg-ts__critic-name { margin: 0; font-size: var(--fs-ui); font-weight: var(--fw-ui); }
.pg-ts__critic .dvh-meta { margin: 2px 0 0; }
.pg-ts__critic .dvh-meta a { color: var(--link); }
.pg-ts__critic .dvh-meta .pg-ts__i { display: inline-block; margin-left: 2px; vertical-align: -3px; color: currentColor; }

/* lab data: a compact two-column table, numbers aligned */
.pg-ts__lab { width: 100%; max-width: 30rem; border-collapse: collapse; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.pg-ts__lab th { padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; text-align: left; font-weight: var(--fw-text); color: var(--muted); }
.pg-ts__lab td { padding: var(--sp-2) 0; text-align: right; font-weight: var(--fw-ui); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pg-ts__lab tr + tr > * { border-top: 1px solid var(--line); }
/* the lot and year of the analysis, under the table (lab-score 2026-10-20) */
.pg-ts__labnote { max-width: 40rem; margin-top: var(--sp-3); }
.pg-ts__pts { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* the label: artist and story, the label detail beside them when the house has a label page */
.pg-ts__label { display: grid; gap: var(--sp-4); }
.pg-ts__labelfig { width: 8.5rem; margin: 0; }
.pg-ts__labelfig figcaption { margin-top: var(--sp-2); }
.pg-ts__labeltext > * { margin: 0; }
.pg-ts__labeltext > * + * { margin-top: var(--sp-3); }
.pg-ts__label-k { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.pg-ts__artist { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-display); }
.pg-ts__labelstory { max-width: 40rem; font-size: var(--fs-body); line-height: var(--lh-body); }
.pg-ts__labeltext .dvh-btn { margin-top: var(--sp-2); }

@media (max-width: 599.98px) {
  /* an odd last pairing tile takes the whole row (no empty slot beside it) */
  .pg-ts__dish:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 600px) {
  .pg-ts__sheet { padding: var(--sp-6); }
  .pg-ts__label--fig { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}

@media (min-width: 900px) {
  .pg-ts__sheet { padding: var(--sp-7); }
  .pg-ts__head { padding-bottom: var(--sp-6); }
  /* the key numbers in one row, hairlines between them */
  .pg-ts__key { grid-template-columns: repeat(var(--ts-n, 4), minmax(0, 1fr)); }
  .pg-ts__stat, .pg-ts__stat--wide { grid-column: auto; padding: var(--sp-5); }
  .pg-ts__stat:nth-child(n + 3) { border-top: 0; }
  .pg-ts__stat + .pg-ts__stat { border-left: 1px solid var(--line); }
  .pg-ts__stat:first-child { padding-left: 0; }
  /* rows: the heading in a column of its own, the facts beside it */
  .pg-ts__row { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); column-gap: var(--sp-7); align-items: start; padding-block: var(--sp-6); }
  .pg-ts__row--slim { padding-block: var(--sp-5); }
  .pg-ts__rowhead { margin-bottom: 0; }
  .pg-ts__rowh .pg-ts__badge { width: 44px; height: 44px; }
  .pg-ts__dishes { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

/* ---- print: the sheet alone, ink on white (the PDF stays the official document) ---- */
@media print {
  @page { margin: 14mm 12mm; }
  .dvh-skip, .dvh-topbar, .dvh-header, .dvh-footer, .dvh-buybar, .dvh-cookie, .dvh-agegate, .dvh-drawer, .dvh-zoomview, dialog, [class*="dvoc"], [class*="dvcc"],
  main > :not(.pg-ts), .pg-ts__pdf, .pg-ts__link, .pg-ts__labeltext .dvh-btn { display: none !important; }
  body { background: #fff; }
  .pg-ts { margin: 0; padding: 0; background: none; border-top: 0; break-before: auto; }
  .pg-ts .dvh-container { max-width: none; padding: 0; }
  .pg-ts__sheet { padding: 0; border-radius: 0; }
  .pg-ts__printname { display: block; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .pg-ts__head { padding-bottom: 12pt; }
  .pg-ts__key { grid-template-columns: repeat(var(--ts-n, 4), minmax(0, 1fr)); }
  .pg-ts__stat, .pg-ts__stat--wide { grid-column: auto; padding: 8pt 10pt; border-top: 0 !important; }
  .pg-ts__stat + .pg-ts__stat { border-left: 1px solid var(--line); }
  .pg-ts__stat:first-child { padding-left: 0; }
  .pg-ts__num { font-size: 26pt; }
  .pg-ts__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 18pt; padding-block: 10pt; break-inside: avoid; }
  .pg-ts__rowhead { margin: 0; }
  .pg-ts__badge { width: auto; height: auto; background: none; }
  .pg-ts__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8pt 14pt; }
  .pg-ts__senses { grid-template-columns: repeat(var(--ts-senses, 3), minmax(0, 1fr)); gap: 8pt 14pt; }
  .pg-ts__pairs > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 3pt; }
  .pg-ts__dishes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6pt; }
  .pg-ts__dish { padding: 6pt 2pt; background: none; border: 1px solid var(--line); }
  .pg-ts__notes { font-size: 12pt; }
  .pg-ts a { color: inherit; text-decoration: none; }
  .dvh-rise { opacity: 1 !important; transform: none !important; translate: none !important; }
}