/**
 * Darealmop_StrainGenetics — Strain spec-band skeleton.
 *
 * STRUCTURE ONLY. This stylesheet lays out the badge row and the spec-chip grid
 * (flex / grid / gap / radius / padding). It ships NO appearance: every colour,
 * font, border and shadow is a `--dm-strain-*` custom property with NO literal
 * fallback, so on a bare theme the band is laid out but unpainted, and the
 * consuming (Hyvä-style) theme owns the entire look.
 *
 * Per-badge accent tokens fall through to the module-wide badge tokens, e.g.
 *   --dm-strain-badge-indica-bg  ->  --dm-strain-badge-bg
 * so a theme can tint Indica / Sativa / Hybrid individually or all at once. The
 * value slug (indica, sativa, hybrid, ruderalis, photoperiod, autoflowering,
 * regular, feminized, short, medium, tall, …) is emitted as a
 * `dm-strain__badge--<slug>` class alongside the field class
 * `dm-strain__badge--<type|flowering|sex>`.
 */

.dm-strain {
    display: flex;
    flex-direction: column;
    gap: var(--dm-strain-gap);
    margin: var(--dm-strain-margin);
    font-family: var(--dm-strain-font);
    color: var(--dm-strain-text);
}

/* ═══════════════════════════════════════════════════════════════
   BADGE ROW — type / flowering / sex pills.
   ═════════════════════════════════════════════════════════════ */

.dm-strain__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-strain__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--dm-strain-badge-radius);
    border: var(--dm-strain-badge-border);
    background: var(--dm-strain-badge-bg);
    color: var(--dm-strain-badge-text, var(--dm-strain-text));
    font-size: var(--dm-strain-badge-font-size);
    font-weight: var(--dm-strain-badge-font-weight);
    line-height: 1.3;
}

.dm-strain__badge-label {
    opacity: var(--dm-strain-badge-label-opacity);
    text-transform: var(--dm-strain-badge-label-transform);
    letter-spacing: var(--dm-strain-badge-label-spacing);
}

.dm-strain__badge-value {
    font-weight: var(--dm-strain-badge-value-weight, var(--dm-strain-badge-font-weight));
}

/* ── Per-field accents (fall through to the module-wide badge tokens) ──────── */

.dm-strain__badge--type {
    background: var(--dm-strain-badge-type-bg, var(--dm-strain-badge-bg));
    color: var(--dm-strain-badge-type-text, var(--dm-strain-badge-text, var(--dm-strain-text)));
}

.dm-strain__badge--flowering {
    background: var(--dm-strain-badge-flowering-bg, var(--dm-strain-badge-bg));
    color: var(--dm-strain-badge-flowering-text, var(--dm-strain-badge-text, var(--dm-strain-text)));
}

.dm-strain__badge--sex {
    background: var(--dm-strain-badge-sex-bg, var(--dm-strain-badge-bg));
    color: var(--dm-strain-badge-sex-text, var(--dm-strain-badge-text, var(--dm-strain-text)));
}

/* ── Per-value accents (fall through to the module-wide badge background) ──── */

.dm-strain__badge--indica {
    background: var(--dm-strain-badge-indica-bg, var(--dm-strain-badge-bg));
}

.dm-strain__badge--sativa {
    background: var(--dm-strain-badge-sativa-bg, var(--dm-strain-badge-bg));
}

.dm-strain__badge--hybrid {
    background: var(--dm-strain-badge-hybrid-bg, var(--dm-strain-badge-bg));
}

.dm-strain__badge--ruderalis {
    background: var(--dm-strain-badge-ruderalis-bg, var(--dm-strain-badge-bg));
}

.dm-strain__badge--autoflowering {
    background: var(--dm-strain-badge-autoflowering-bg, var(--dm-strain-badge-bg));
}

.dm-strain__badge--feminized {
    background: var(--dm-strain-badge-feminized-bg, var(--dm-strain-badge-bg));
}

/* ═══════════════════════════════════════════════════════════════
   SPEC CHIPS — THC / CBD / flowering time / yields / height grid.
   ═════════════════════════════════════════════════════════════ */

.dm-strain__chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin: 0;
}

.dm-strain__chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: var(--dm-strain-chip-radius);
    border: var(--dm-strain-chip-border);
    background: var(--dm-strain-chip-bg);
}

.dm-strain__chip-label {
    font-size: var(--dm-strain-chip-label-size);
    font-weight: var(--dm-strain-chip-label-weight);
    text-transform: var(--dm-strain-chip-label-transform);
    letter-spacing: var(--dm-strain-chip-label-spacing);
    color: var(--dm-strain-chip-label-color, var(--dm-strain-text-muted));
}

.dm-strain__chip-value {
    font-size: var(--dm-strain-chip-value-size);
    font-weight: var(--dm-strain-chip-value-weight);
    color: var(--dm-strain-chip-value-color, var(--dm-strain-text));
}

.dm-strain__chip-unit {
    margin-left: 2px;
    font-size: var(--dm-strain-chip-unit-size);
    font-weight: var(--dm-strain-chip-unit-weight);
    color: var(--dm-strain-chip-unit-color, var(--dm-strain-text-muted));
}

/* ═══════════════════════════════════════════════════════════════
   FORMS LINE — the compact "Angebotsformen" row (Samen / Sämling /
   Steckling / Mutterpflanze / Bulk verfügbar). Each value is emitted
   as a `dm-strain__form--<slug>` pill (saemling, bulk-verfuegbar, …)
   so a theme can accent single forms; per-item tokens fall through
   to the forms-wide item tokens, which fall through to the chip
   tokens — a theme that only skins the chips gets a coherent line
   for free.
   ═════════════════════════════════════════════════════════════ */

.dm-strain__forms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dm-strain__forms-label {
    font-size: var(--dm-strain-forms-label-size, var(--dm-strain-chip-label-size));
    font-weight: var(--dm-strain-forms-label-weight, var(--dm-strain-chip-label-weight));
    text-transform: var(--dm-strain-forms-label-transform, var(--dm-strain-chip-label-transform));
    letter-spacing: var(--dm-strain-forms-label-spacing, var(--dm-strain-chip-label-spacing));
    color: var(--dm-strain-forms-label-color, var(--dm-strain-chip-label-color, var(--dm-strain-text-muted)));
}

.dm-strain__forms-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-strain__form {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--dm-strain-forms-item-radius, var(--dm-strain-chip-radius));
    border: var(--dm-strain-forms-item-border, var(--dm-strain-chip-border));
    background: var(--dm-strain-forms-item-bg, var(--dm-strain-chip-bg));
    color: var(--dm-strain-forms-item-text, var(--dm-strain-text));
    font-size: var(--dm-strain-forms-item-size, var(--dm-strain-chip-value-size));
    font-weight: var(--dm-strain-forms-item-weight, var(--dm-strain-chip-label-weight));
    line-height: 1.3;
}

/* ── Per-value accents (fall through to the forms-wide item tokens) ────────── */

.dm-strain__form--samen {
    background: var(--dm-strain-forms-samen-bg, var(--dm-strain-forms-item-bg, var(--dm-strain-chip-bg)));
}

.dm-strain__form--saemling {
    background: var(--dm-strain-forms-saemling-bg, var(--dm-strain-forms-item-bg, var(--dm-strain-chip-bg)));
}

.dm-strain__form--steckling {
    background: var(--dm-strain-forms-steckling-bg, var(--dm-strain-forms-item-bg, var(--dm-strain-chip-bg)));
}

.dm-strain__form--mutterpflanze {
    background: var(--dm-strain-forms-mutterpflanze-bg, var(--dm-strain-forms-item-bg, var(--dm-strain-chip-bg)));
}

.dm-strain__form--bulk-verfuegbar {
    background: var(--dm-strain-forms-bulk-verfuegbar-bg, var(--dm-strain-forms-item-bg, var(--dm-strain-chip-bg)));
}

/* ═══════════════════════════════════════════════════════════════
   CARD VARIANT — compact badge row for a PLP / grid item.
   ═════════════════════════════════════════════════════════════ */

.dm-strain__badges--card {
    gap: 4px;
}

.dm-strain__badges--card .dm-strain__badge {
    padding: 2px 8px;
    font-size: var(--dm-strain-badge-card-font-size, var(--dm-strain-badge-font-size));
}

.dm-strain__forms-list--card {
    gap: 4px;
    margin-top: 4px;
}

.dm-strain__forms-list--card .dm-strain__form {
    padding: 1px 8px;
    font-size: var(--dm-strain-forms-card-size, var(--dm-strain-forms-item-size, var(--dm-strain-chip-value-size)));
}