/* ==========================================================================
     pages/premii.html · page "Premii" (theme: assets/pages/premii.css; prefix pg-premii-)
     Medals through the years: head with computed figures; distinctions per year (one bar per year,
     one block per distinction: rows on phones, columns from 600 px; the counts are also in each
     bar's name, the legend and the "Cifrele pe an" table); the same distinctions per house and per
     label; the palmares year by year (competition cards; every level written as a text label, the
     competition's own medal artwork only where it exists, never a drawn stand-in); critic scores; sources.
     Medal levels wear calm matte metal tones, a scoped data-colour exception to kit rule 10
     ("no gold") that waits for the owner's OK: Aur #A9873E 3.06:1, Argint #687078 4.56:1,
     Bronz #7D3F17 7.33:1 on the ground (3:1 or more on white too). Never on text, links or
     borders. "Alte distincții" are hollow blocks, so they read without colour.
     ========================================================================== */
  .pg-premii-main { --pg-aur: #A9873E; --pg-argint: #687078; --pg-bronz: #7D3F17; }
  .pg-premii-main :is([data-medal="mare-aur"], [data-medal="aur"]) { --pg-medal: var(--pg-aur); }
  .pg-premii-main [data-medal="argint"] { --pg-medal: var(--pg-argint); }
  .pg-premii-main [data-medal="bronz"] { --pg-medal: var(--pg-bronz); }

  /* head: claim left, computed figures right */
  .pg-premii-head { padding-block: var(--sp-6) var(--sp-5); }
  .pg-premii-head__grid { display: grid; gap: var(--sp-6); }
  .pg-premii-head h1 { margin-top: var(--sp-2); text-wrap: balance; }
  .pg-premii-head .dvh-lead { margin-top: var(--sp-3); max-width: 46ch; }
  .pg-premii-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .pg-premii-figure { border-top: 3px solid var(--deep); padding-top: var(--sp-3); }
  .pg-premii-figure b { display: block; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; font-weight: 400; }
  .pg-premii-figure span { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); }

  /* distinctions per year: one bar per year, one block per distinction, the total at the bar's end */
  .pg-premii-chart { padding-block: var(--sp-5) var(--sp-7); }
  .pg-premii-chart__grid { display: grid; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
  .pg-premii-chart__main, .pg-premii-chart__aside { min-width: 0; }
  .pg-premii-h { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-title); }
  .pg-premii-chart__sub { margin-top: var(--sp-1); max-width: 62ch; }
  .pg-premii-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .pg-premii-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .pg-premii-legend__n { color: var(--muted); font-variant-numeric: tabular-nums; }
  .pg-premii-key { flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--pg-medal); }
  .pg-premii-key[data-medal="alta"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--muted); }
  .pg-premii-fig { position: relative; margin-top: var(--sp-5); }

  /* phones: one row per year, newest first; block width = the plot (less the value) / the largest year */
  .pg-premii-bars { --gap: 2px; --val-w: 34px; display: grid; gap: var(--sp-1); }
  .pg-premii-bars > li { display: flex; min-width: 0; }
  .pg-premii-bar { flex: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: var(--sp-2); min-height: 26px; color: var(--ink); text-decoration: none; border-radius: var(--radius-control); }
  .pg-premii-bar__year { color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); font-variant-numeric: tabular-nums; }
  a.pg-premii-bar:hover .pg-premii-bar__year { color: var(--ink); }
  .pg-premii-bar__plot { container-type: inline-size; display: flex; align-items: center; min-width: 0; }
  .pg-premii-bar__units { display: flex; gap: var(--gap); }
  .pg-premii-u { flex: none; width: calc((100cqi - var(--val-w) - (var(--max) - 1) * var(--gap)) / var(--max)); height: 16px; border-radius: 2px; background: var(--pg-medal); }
  .pg-premii-u[data-medal="alta"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--muted); }
  .pg-premii-bar__val { flex: none; margin-left: 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pg-premii-bar__val b { font-weight: var(--fw-strong); }
  .pg-premii-bar__val.is-empty { margin-left: 0; color: var(--muted); }
  .pg-premii-bar__star { color: var(--muted); }

  /* tooltip (premii.js; mouse hover and keyboard focus): the same facts as the bar's name and table row */
  .pg-premii-tip { position: absolute; z-index: var(--z-raised); width: max-content; max-width: 260px; padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: var(--shadow-pop); font-size: var(--fs-meta); line-height: var(--lh-meta); pointer-events: none; }
  .pg-premii-tip b { font-weight: var(--fw-strong); }
  .pg-premii-tip__row { display: flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
  .pg-premii-tip__row b { margin-left: auto; padding-left: var(--sp-4); }
  .pg-premii-tip__key { flex: none; width: 12px; height: 2px; background: var(--pg-medal); }
  .pg-premii-tip__key[data-medal="alta"] { background: var(--muted); }
  .pg-premii-tip__note { margin-top: 2px; color: var(--muted); }

  /* notes and the table view */
  .pg-premii-chart__aside { display: grid; gap: var(--sp-3); align-content: start; }
  .pg-premii-chart__note { max-width: 62ch; }
  .pg-premii-data > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; list-style: none; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-ui); }
  .pg-premii-data > summary::-webkit-details-marker { display: none; }
  .pg-premii-data > summary:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .pg-premii-data[open] > summary .dvh-icon { rotate: 180deg; }
  .pg-premii-table { width: 100%; max-width: 480px; font-size: var(--fs-meta); line-height: var(--lh-meta); font-variant-numeric: tabular-nums; }
  .pg-premii-table :is(th, td) { padding: 6px 0 6px var(--sp-2); border-top: 1px solid var(--line); text-align: right; font-weight: var(--fw-text); }
  .pg-premii-table :is(th, td):first-child { padding-left: 0; text-align: left; }
  .pg-premii-table thead th { border-top: 0; color: var(--muted); vertical-align: bottom; }
  .pg-premii-table tbody th { font-weight: var(--fw-ui); }
  .pg-premii-table b, .pg-premii-table tfoot :is(th, td) { font-weight: var(--fw-strong); }
  .pg-premii-table tfoot :is(th, td) { border-top-color: var(--control); }

  /* per house and per label ("Pe case și etichete", after the chart): the chart's rows grouped by house
     (brand line) and, inside a house, by label (wine + vintage, named as the source names it). One card
     per house: the house tint on its head (a house surface: dot, name, total), a white body so the medal
     tones keep the chart's contrast (Aur 3.38:1 on white, under 3:1 on the tints). One block per
     distinction with the same width in every bar of the section (--max = the largest group; the body is
     the size container). Every bar has its values written beside it, so the blocks are aria-hidden.
     The group whose diplomas name no house sits apart, after the houses, on a neutral head. */
  .pg-premii-labels { padding-block: 0 var(--sp-7); }
  .pg-premii-labels__grid { display: grid; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
  .pg-premii-labels__sub, .pg-premii-labels__note, .pg-premii-house__why { max-width: 62ch; }
  .pg-premii-labels__sub { margin-top: var(--sp-1); }
  .pg-premii-houses, .pg-premii-labels__foot { display: grid; gap: var(--sp-3); align-items: start; }
  .pg-premii-house { min-width: 0; background: var(--surface); border-radius: var(--radius-media); overflow: clip; }
  .pg-premii-house__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--house-tint); }
  .pg-premii-house--none .pg-premii-house__head { background: var(--band); }
  .pg-premii-house__name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); }
  .pg-premii-house__total { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); white-space: nowrap; }
  .pg-premii-house__total b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .pg-premii-house__body { container-type: inline-size; padding: var(--sp-4) var(--sp-4) var(--sp-1); }
  .pg-premii-house__why { margin-bottom: var(--sp-3); }
  .pg-premii-stack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  .pg-premii-stack--house > .pg-premii-levels { flex-basis: 100%; }   /* the house's legend line, always under its bar */
  .pg-premii-units { display: flex; gap: 2px; }
  .pg-premii-blk { flex: none; width: 8px; width: min(24px, (100cqi - (var(--max) - 1) * 2px - 1px) / var(--max)); height: 14px; border-radius: 2px; background: var(--pg-medal); }
  .pg-premii-blk[data-medal="alta"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--muted); }
  .pg-premii-levels { display: flex; flex-wrap: wrap; gap: 2px var(--sp-4); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
  .pg-premii-levels li { display: inline-flex; align-items: center; gap: 6px; }
  .pg-premii-levels b { color: var(--ink); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
  .pg-premii-wines { margin-top: var(--sp-3); }
  .pg-premii-wine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--line); }
  .pg-premii-wine__name { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-ui); text-wrap: pretty; }
  .pg-premii-wine__total { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
  .pg-premii-wine > .pg-premii-stack, .pg-premii-wine__shop { grid-column: 1 / -1; }
  .pg-premii-wine__shop { font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .pg-premii-more { border-top: 1px solid var(--line); }
  .pg-premii-more > .pg-premii-wines { margin-top: 0; }

  /* the level of every distinction in the palmares, written as a small text label with the chart's level
     key: never drawn as a medal. The competition's own medal artwork shows beside it only where it exists. */
  .pg-premii-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 8px 2px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control); }

  /* the palmares, year by year: competition cards on the band */
  .pg-premii-timeline { padding-block: var(--sp-7); background: var(--band); }
  .pg-premii-timeline__head { margin-bottom: var(--sp-5); }
  .pg-premii-timeline__note { max-width: 62ch; }
  .pg-premii-chips { --cluster: var(--sp-3) var(--sp-2); }   /* 12 px between rows: the chips' 44 px hit areas never overlap */
  .pg-premii-years { border-top: 1px solid var(--line); }
  .pg-premii-year { display: grid; gap: var(--sp-4); padding-block: var(--sp-6); border-bottom: 1px solid var(--line); }
  .pg-premii-year:last-child { border-bottom: 0; padding-bottom: 0; }
  .pg-premii-year__head { display: flex; align-items: baseline; gap: var(--sp-3); }
  .pg-premii-year__num { font-size: var(--fs-numeral); line-height: var(--lh-numeral); font-weight: var(--fw-display); letter-spacing: var(--track-display); font-variant-numeric: lining-nums; }
  .pg-premii-year__count { color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); }
  /* medals-count 2026-10-21: "Alte distincții" (diplomas, titles, mentions), after the medals' palmares on the same band, in no total */
  .pg-premii-timeline.pg-premii-others { padding-top: 0; }
  .pg-premii-others__head { padding-top: var(--sp-6); border-top: 1px solid var(--line); margin-bottom: var(--sp-4); }
  .pg-premii-others__head .pg-premii-timeline__note { margin-top: var(--sp-2); }
  .pg-premii-years--others { border-top: 0; }
  .pg-premii-years--others .pg-premii-year { padding-block: var(--sp-4); }
  .pg-premii-years--others .pg-premii-year__num { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .pg-premii-comps { display: grid; gap: var(--sp-3); }
  .pg-premii-comp { padding: var(--sp-4) var(--sp-4) var(--sp-1); background: var(--surface); border-radius: var(--radius-media); }
  .pg-premii-comp__name { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); }
  .pg-premii-comp__where { font-weight: var(--fw-text); color: var(--muted); }
  .pg-premii-comp__where::before { content: "· "; }
  .pg-premii-entries { margin-top: var(--sp-3); }
  .pg-premii-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding-block: var(--sp-3); border-top: 1px solid var(--line); }
  .pg-premii-entry--art { grid-template-columns: 48px minmax(0, 1fr) auto; }   /* a card where real medal artwork exists */
  .pg-premii-entry__art { display: grid; place-items: center; width: 48px; height: 48px; }
  .pg-premii-entry__art img { width: 48px; height: 48px; object-fit: contain; }
  .pg-premii-entry__medal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-strong); }
  .pg-premii-entry__wine { margin-top: 6px; font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); text-wrap: pretty; }
  .pg-premii-entry__shop { margin-top: var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-meta); }
  /* "Rezultatul oficial" (2026-10-19): the organiser's result page, a quiet meta-size link (muted, thin underline),
     24 px tall so it stays an easy target; the arrow says "new tab" and is left out of the link's name */
  .pg-premii-entry__src { margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); }
  .pg-premii-entry__src a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
  .pg-premii-entry__src a:hover { color: var(--ink); text-decoration-color: currentColor; }
  .pg-premii-entry__src a::after { content: "\2197"; content: "\2197" / ""; margin-inline-start: .3em; font-size: .9em; }
  .pg-premii-entry__side { display: flex; align-items: center; gap: var(--sp-3); }
  .pg-premii-entry__bottle { display: block; }
  .pg-premii-entry__diploma { display: block; border-radius: 2px; }
  .pg-premii-entry__diploma img { display: block; height: 60px; width: auto; border: 1px solid var(--line); border-radius: 2px; }

  /* critic scores */
  .pg-premii-critics-sec { padding-block: var(--sp-7) var(--sp-6); }
  .pg-premii-critics-sec__grid { display: grid; gap: var(--sp-5); }
  .pg-premii-critics-sec h2 { margin-top: var(--sp-2); }

  /* sources */
  .pg-premii-sources { padding-block: var(--sp-5) var(--sp-8); }
  .pg-premii-sources .dvh-container > * { max-width: 76ch; }
  .pg-premii-sources__title { font-family: var(--font-text); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-strong); }
  .pg-premii-sources .dvh-meta { margin-top: var(--sp-1); }

  /* diploma view (kit image view, white, wider than a bottle) */
  .pg-premii-view { width: min(calc(100vw - 2 * var(--page-gutter)), 760px); background: var(--surface); }
  .pg-premii-view img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 2 * var(--sp-5) - var(--sp-7) - var(--sp-8)); margin-inline: auto; }
  .pg-premii-view__cap { margin-top: var(--sp-3); text-align: center; }

  /* phones up to 420 px: the legend wraps as an even 2 x 2 instead of leaving one key alone */
  @media (max-width: 419.98px) {
    .pg-premii-legend { display: grid; grid-template-columns: repeat(2, max-content); }
  }

  /* from 600 px: one column per year, oldest on the left; every year labelled; bars at most 24 px wide */
  @media (min-width: 600px) {
    .pg-premii-bars { --uh: 14px; display: flex; flex-direction: row-reverse; gap: 0; }
    .pg-premii-bars > li { flex: 1 1 0; }
    .pg-premii-bar { display: flex; flex-direction: column-reverse; align-items: stretch; gap: var(--sp-2); min-height: 0; }
    .pg-premii-bar__year { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); text-align: center; }
    .pg-premii-bar__plot { flex-direction: column-reverse; justify-content: flex-start; height: calc(var(--max) * (var(--uh) + var(--gap)) + 24px); border-bottom: 1px solid var(--control); }
    .pg-premii-bar__units { flex-direction: column-reverse; }
    .pg-premii-u { width: min(24px, 100cqi - 16px); height: var(--uh); }
    .pg-premii-bar__val, .pg-premii-bar__val.is-empty { margin: 0 0 var(--sp-1); }
  }

  @media (min-width: 900px) {
    .pg-premii-head { padding-block: var(--sp-7) var(--sp-5); }
    .pg-premii-head__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-8); align-items: end; }
    .pg-premii-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* per house: two cards a row (houses in their order; then the no-house card beside the quiet note) */
    .pg-premii-houses, .pg-premii-labels__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
    .pg-premii-house__head { padding-inline: var(--sp-5); }
    .pg-premii-house__body { padding: var(--sp-4) var(--sp-5) var(--sp-2); }
    .pg-premii-labels__note { padding-top: var(--sp-3); }
    .pg-premii-timeline { padding-block: var(--sp-8); }
    .pg-premii-year { grid-template-columns: 176px minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-7); }
    .pg-premii-year__head { position: sticky; top: calc(var(--header-h) + var(--sp-5)); align-self: start; flex-direction: column; gap: var(--sp-2); }
    .pg-premii-comps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
    .pg-premii-comp { padding: var(--sp-5) var(--sp-5) var(--sp-2); }
    .pg-premii-entry--art { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .pg-premii-entry__art, .pg-premii-entry__art img { width: 56px; height: 56px; }
    .pg-premii-critics-sec { padding-block: var(--sp-8) var(--sp-7); }
    .pg-premii-critics-sec__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); align-items: start; }
  }

  /* wide screens: the chart in 8 of 12 columns, its notes and table view beside it */
  @media (min-width: 1100px) {
    .pg-premii-chart__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--sp-8); align-items: start; }
    .pg-premii-bars { --uh: 16px; }
  }

  /* Windows contrast themes: the chart keeps its own light ground and colours (like an image), the legend
     and label keys and tooltip keys keep their swatches with a system-colour edge, and the per-house
     blocks keep their tones like the chart's */
  @media (forced-colors: active) {
    .pg-premii-fig { forced-color-adjust: none; background: var(--ground); color: var(--ink); }
    .pg-premii-key, .pg-premii-tip__key { forced-color-adjust: none; outline: 1px solid CanvasText; }
    .pg-premii-units { forced-color-adjust: none; }
  }

  /* motion: the bars grow once on load (rows from the left, columns from the baseline), only when motion is welcome */
  @media (prefers-reduced-motion: no-preference) {
    .pg-premii-bar__units { transform-origin: 0 50%; animation: pg-premii-grow-x var(--dur-settle) var(--ease-emph) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
    @keyframes pg-premii-grow-x { from { scale: 0.001 1; } }
    @keyframes pg-premii-grow-y { from { scale: 1 0.001; } }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
    .pg-premii-bar__units { transform-origin: 50% 100%; animation-name: pg-premii-grow-y; animation-delay: calc(var(--j, 0) * 40ms + 120ms); }
  }