/* Hosted e-label (GET /e/{code}). The page loads the vendored design system and this
   file only — it deliberately inherits no storefront chrome (ADR 0034 §6.7).
   Ported/adapted from enotale-design's PUB_56_ELABEL page-scoped styles; semantic
   tokens only, dark-safe (theme.css remaps them all). */

/* 406px: the narrow column the design settled on after measuring that a wider one
   leaves the `.spec-list` and packaging-list rows reading as sparse two-column
   forms rather than a label beside its value — matches the reference upper bound
   (wine-elabels.eu, ~415px) for this content shape. */
.elabel {
    max-width: 406px;
    margin-inline: auto;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
}

/* The vendored .spec-list value column is minmax(0, 1fr), which lets the COLUMN shrink
   but not the word inside it: an SKU like HORIZONTMAVRUDREZERV-2021 has no break
   opportunity, so it spilled out of its cell and the next pair's label painted on top
   of it in the two-pair .spec-list--dense grid. A lot code is exactly the kind of
   unbreakable string this list is for. */
.spec-list dd {
    overflow-wrap: anywhere;
}

/* The prototype's base reset zeroes the user-agent `dd` indent; the storefront bundle
   this page loads does not, so without this the stacked values sit 40px in. */
.elabel .spec-list dd {
    margin: 0;
}

/* .spec-list's own stacking rule is a VIEWPORT media query (core.css, <=480px), but
   .elabel caps the ELEMENT at 406px regardless of viewport — a 1440px viewport never
   triggers that query even though the column itself is narrow. This page-scoped
   override promotes single-column stacking unconditionally. */
.elabel .spec-list {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
}
.elabel .spec-list dt {
    margin-top: var(--spacing-sm);
}
.elabel .spec-list dt:first-child {
    margin-top: 0;
}

/* ---- Language selector: sticky utility row ---- */
/* The e-label is long, and EU 2021/2117 makes multilingual access a standing
   requirement, not a one-screen convenience — position:sticky keeps the switcher
   reachable at every scroll position. --color-surface-primary seals the bar so
   scrolling content does not bleed through; z-raised sits above normal content but
   below dropdowns/modals. */
.elabel-lang-compact {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    background: var(--color-surface-primary);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-xs);
    padding-block: var(--spacing-xs);
}

/* min-height overrides .form-select--compact's min-height:0 (same specificity;
   this rule comes later in source order and therefore wins) — WCAG 2.5.5 touch target. */
.elabel-lang-select {
    max-width: 12rem;
    min-height: var(--touch-target-min);
}

.elabel-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    cursor: pointer;
    line-height: 1;
}

.elabel-lang-btn:hover {
    background: var(--color-surface-sunk);
}

/* ---- Identification header: bottle as hero, then eyebrow / H1 / winery ---- */
/* Single column at all widths. BOTTLE ORDER: HTML has text first (screen-reader
   order: eyebrow → H1 → winery, then visual confirmation); CSS puts the image
   first (order:-1) so a sighted scanner sees the bottle before reading the
   declaration. */
.elabel-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.elabel-head__text {
    width: 100%;
}

/* Full column width at every viewport — the column itself is capped at 406px by
   .elabel, so width:100% already bounds the image; no separate desktop cap needed.
   alt="" is correct: the bottle is decorative, identification is in the text. */
.elabel-head__bottle {
    order: -1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* ---- Shared table base (nutrition) ---- */
.elabel-table {
    width: 100%;
    border-collapse: collapse;
}

.elabel-table th,
.elabel-table td {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-default);
    font-family: var(--font-ui);
    font-size: var(--font-size-small);
    line-height: var(--line-height-compact);
    text-align: left;
    vertical-align: top;
}

.elabel-table tbody tr:last-child th,
.elabel-table tbody tr:last-child td {
    border-bottom: 0;
}

.elabel-table th[scope="row"] {
    font-weight: var(--font-weight-ui-semibold);
    color: var(--color-text-muted);
}

.elabel-table td {
    font-weight: var(--font-weight-ui-regular);
    color: var(--color-text-primary);
}

/* Nutrition values: right-aligned, tabular figures (EU 1169/2011 tabular norm). */
.elabel-nutrition td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* «от които …» sub-rows (saturates under fat, sugars under carbs): indented and
   subordinated, independent of whether their parent row is present. */
.elabel-nutrition .is-sub th {
    padding-left: var(--spacing-md);
    font-weight: var(--font-weight-ui-regular);
}

.elabel-nutrition .is-sub td {
    color: var(--color-text-muted);
}

/* ---- Section heading pictograms ---- */
/* aria-hidden SVG inline in <h2>; vertical-align aligns the icon optically to the
   cap-line of the heading text. No flex on the <h2> — normal inline wrapping keeps
   the glyph with the first word. */
.elabel svg.elabel-icon {
    display: inline;
    vertical-align: -0.15em;
    margin-inline-end: var(--spacing-xs);
    flex-shrink: 0;
}

/* ---- Allergen callout ---- */
/* Tone: waiting (--status-pill-tone-waiting-{bg,fg}) — an allergen notice is
   information to read before drinking, not a degraded/errored state, so it does not
   borrow the "warning" (action/error) tone. role="note" exposes it to AT as a
   supplementary notice; the ⚠ glyph is aria-hidden since the text already carries
   the meaning. */
.elabel-allergen {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--status-pill-tone-waiting-bg);
    color: var(--status-pill-tone-waiting-fg);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-ui-semibold);
    line-height: var(--line-height-compact);
}

.elabel-allergen__mark {
    flex-shrink: 0;
    font-style: normal;
}

/* ---- Responsible-consumption marks: icon left, caption right ---- */
/* A row layout rather than a 3-up flex row: at a ~350px card inner width, three
   narrow columns break long Cyrillic caption words mid-character (e.g.
   «шофирайте»). One mark per row gives the caption the full column width. */
.elabel-marks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.elabel-marks figure {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.elabel-marks figcaption {
    flex: 1;
    text-align: left;
}

/* ---- Packaging list: CSS subgrid, bin icon in its own fixed column ---- */
/* [mark: 2.5rem] [text: 1fr] [icon: 1rem] [label: 1fr] — each <li> is a subgrid row
   spanning all four tracks so the border-bottom spans the full row with no gap
   artefacts, and every row's icon shares one column regardless of text length.
   The label column is 1fr (not max-content, unlike the design source): our
   disposal-hint text is a full localized phrase (ElabelTranslations::disposalHint,
   e.g. "биоотпадъци или пункт за събиране на корк"), not a one-word bin name, so it
   wraps instead of forcing the row wider than the 406px column. */
.elabel-packaging-list {
    display: grid;
    grid-template-columns: 2.5rem 1fr 1rem 1fr;
    column-gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.elabel-packaging-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding-block: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-default);
}

.elabel-packaging-row:last-child {
    border-bottom: 0;
}

.elabel-packaging-row__text {
    font-family: var(--font-ui);
    font-size: var(--font-size-small);
    line-height: var(--line-height-compact);
    min-width: 0;
}

.elabel-packaging-row__part {
    display: block;
    font-weight: var(--font-weight-ui-semibold);
    color: var(--color-text-muted);
}

.elabel-packaging-row__material {
    display: block;
    color: var(--color-text-primary);
}

.elabel-packaging-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* No margin needed in grid context — column-gap already separates the columns. */
.elabel-packaging-row__icon svg.elabel-icon {
    margin-inline-end: 0;
    vertical-align: middle;
}

.elabel-packaging-row__label {
    font-family: var(--font-ui);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    justify-self: start;
}

/* ---- Producer contact links: tap target >= 44px (WCAG 2.5.5) ---- */
.elabel-contact-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min);
    color: inherit;
    text-decoration: underline;
}

/* ---- Attribution link tap area ---- */
/* Measured at h=15px (text-micro at 12px + no padding); display:inline-block +
   padding-block raises it toward the 44px target. Full 44px is not achievable on an
   inline sentence — accepted, same treatment as the design's own footer link. */
.elabel footer a {
    display: inline-block;
    padding-block: var(--spacing-xs);
}