/* ==========================================================================
   Product Option Archive — [brokk_product_options]
   ACSS tokens: --primary, --neutral, --neutral-light, --text-dark,
                --text-dark-muted, --space-*, --text-s, --text-xs, --grid-gap
   ========================================================================== */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.brokk-po-archive {
    color: var(--text-dark, #000);
}

/* ── Filter ──────────────────────────────────────────────────────────────
   Den gemensamma filterpanelen (components/filter-ui, --selector) sköter
   utseendet. Här bara avståndet till korten. ───────────────────────────── */
.brokk-po-archive .brk-po-filter {
    margin-bottom: var(--space-l);
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.brokk-po-archive__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--grid-gap, 2rem);
    list-style:            none;
    padding:               0;
    margin:                0;
}

.brokk-po-archive__item {
    list-style: none;
}

.brokk-po-archive__item.is-hidden {
    display: none;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.brokk-po-archive__card {
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-xs); /* rubrik → text som tillbehörs- och nyhetskorten (2026-11-03) */
    padding:         var(--space-s, 1rem);
    border:          1px solid var(--neutral-light, #d9d9d9);
    border-radius:   var(--radius); /* som sajtens övriga kort (.card, brk-ic__card) */
    color:           inherit;
    text-decoration: none;
    transition:      border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease, color 250ms ease;
    height:          100%;
    background:      var(--white, #fff);
}

.brokk-po-archive__card:hover {
    border-color: rgba(0, 0, 0, 0.15);
    transform:    translateY(-2px);
}

.brokk-po-archive__thumb {
    width:         100%;
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    background:    transparent;
    margin-block-end: calc(var(--space-s) - var(--space-xs)); /* bild → rubrik oförändrat (--space-s) */
}

.brokk-po-archive__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.brokk-po-archive__title {
    font-family: var(--font-condensed);
    font-weight:    700;
    font-size:      var(--h4, 1.25rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height:    1.2;
    transition:     color 250ms ease;
}

.brokk-po-archive__card:hover .brokk-po-archive__title {
    color: var(--primary, #ffcd00);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.brokk-po-archive__empty {
    padding:    var(--space-l, 2rem);
    text-align: center;
    color:      var(--text-dark-muted, rgba(0,0,0,0.8));
    font-style: italic;
}

/* ── Industry badges (on product-option single via shortcode) ────────────── */
.brokk-po-industries {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-m, 1.25rem);
    margin:    var(--space-s, 0.75rem) 0;
}

.brokk-po-industry-badge {
    display:         inline-block;
    padding:         0.3em 0.75em;
    background:      var(--primary, #ffcd00);
    color:           var(--text-dark-muted, rgba(0,0,0,0.8));
    font-family: var(--font-condensed);
    font-size:       var(--text-xs, 0.8rem);
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .brokk-po-archive__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 750px) {
    .brokk-po-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-m, 1.25rem);
    }
}

@media (max-width: 480px) {
    .brokk-po-archive__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Utdraget på kortet (Anders 2026-10-06) ─────────────────────────────── */
.brokk-po-archive__excerpt {
    font-size:   var(--text-s);
    font-weight: 400; /* kortet är en länk: ärver annars länkens fetstil */
    line-height: 1.5;
    color:       var(--text-dark-muted);
}

/* ── Filter-only-läget: filtret styr loopkort utanför komponenten ───────── */
.brokk-po-archive--filter-only {
    width: 100%; /* Bricks shortcode-element är flex: utan bredd krymper panelen till innehållet */
}

/* Avståndet till loopkorten kommer från sektionens gap */
.brokk-po-archive--filter-only .brk-po-filter {
    margin-bottom: 0;
}

/* Upprepad klass väger över kortklasserna (.card m.fl. sätter display). */
.brokk-po-filterable.brokk-po-filterable.is-hidden {
    display: none;
}