/* Slopes & Lifts widget — kabdalis2 design system.
   Compose-only: .sl frame + .b-statusrow rows + .b-pill counts.
   No primitive redeclarations. JS-locked selectors:
   .kabdalis-slopes-lifts-widget, .stat-item.stat-lifts (show/hide hook),
   .slopes-lifts-widget-container, .slopes-lifts-widget-title,
   .slopes-lifts-closure-notice, .slopes-lifts-slope-breakdown,
   #slopes_lifts_*, [data-pist-map-trigger]. */

.sl{
    padding: var(--card-pad);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sl--bare{ padding: 0; background: none; border: 0; box-shadow: none; }

.sl__head{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-start;
    justify-content: space-between;
}
.sl__title,
.slopes-lifts-widget-title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.3rem;
    line-height: 1.1;
    margin: 2px 0 0;
    color: var(--ink);
}
.sl__live{ align-self: center; }

/* Closure notice — view.js toggles textContent; hidden when empty */
.slopes-lifts-closure-notice:empty{ display: none; }
.slopes-lifts-closure-notice{
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warn) 9%, var(--surface));
    border-left: 3px solid var(--warn);
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.5;
}

/* Status rows — .b-statusrow primitive provides layout, padding, border-top.
   Only minimal label/count overrides here. */
.sl__row .sl__name{ color: var(--ink); font-weight: 500; }
.sl__row .stat-separator{ opacity: .7; margin: 0 1px; }

/* Slope breakdown — view.js renders .b-statusrow rows here.
   Override .b-statusrow defaults: no dividers between color rows, tighter
   padding, plain-text counts (no pill). */
.slopes-lifts-slope-breakdown:empty{ display: none; }
.slopes-lifts-slope-breakdown{
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.slopes-lifts-slope-breakdown .b-statusrow{
    border-top: 0;
    padding: 3px 0;
}
.slopes-lifts-slope-breakdown .sl__name{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.slopes-lifts-slope-breakdown .sl__count{
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* Piste-classification swatches — colors from tokens.css (FIS standard) */
.sl__swatch{
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}
.sl__swatch[data-color="green"]{ background: var(--piste-green); }
.sl__swatch[data-color="blue"]{ background: var(--piste-blue); }
.sl__swatch[data-color="red"]{ background: var(--piste-red); }
.sl__swatch[data-color="black"]{ background: var(--piste-black); }
.sl__swatch[data-color="offpiste"]{ background: var(--piste-offpiste); }

/* Pist-map trigger — view.js adds .btn.btn--outline at runtime */
.pist-map-button{ align-self: flex-start; }

/* CTA row — "Köp säsongskort" (primary) + Pistkarta (outline) side by side.
   view.js wraps both buttons in .sl__cta at runtime. */
.sl__cta{ align-self: stretch; display: flex; flex-wrap: wrap; gap: 10px; }
.sl__cta .btn{ flex: 1 1 auto; justify-content: center; }
.sl__cta .pist-map-button{ align-self: auto; }

/* Senast uppdaterad-footer */
.sl__updated{
    font-family: var(--font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.sl__updated:empty{ display: none; }

@media (max-width: 560px){
    .sl{ padding: 14px; }
}