/*
 * Rozloženie widgetov v článku. Vnútro karty je v Shadow DOM widgetu — tu sa štýluje len blok
 * `.pc-products` (Render::group obalí widgety idúce za sebou) a hostiteľský element <pc-product>.
 * Redakčný blok: nadpis + tenké linky hore a dole, bez boxu (karty majú vlastný podklad).
 * Karty sú v `.pc-products__items` (nadpis mimo neho) — téma z neho môže spraviť posúvateľný rad
 * a nadpis sa pritom neposúva s kartami.
 * Na mobile pod sebou, od 782 px (breakpoint WP blokov) max 30 % šírky a vedľa seba.
 */
.pc-products {
    --pc-gap: 1.25rem;
    --pc-rule: color-mix(in srgb, currentColor 14%, transparent);

    box-sizing: border-box;
    margin-block: 2rem;
    padding-block: var(--pc-gap);
    border-block: 1px solid var(--pc-rule);
}

.pc-products__label {
    margin: 0 0 var(--pc-gap);
    /* Karty sú v bloku na stred (aj dve v šírke alignwide) → nadpis tiež, inak visí vľavo mimo kariet. */
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.7;
}

.pc-products__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pc-gap);
}

.pc-products__items > pc-product.pc-product {
    display: block;
    flex: 0 0 100%;
    min-width: 0;
}

/* Widget (od 1.2.0) nastaví state="loading|ready|empty"; prázdny slot nezaberá miesto v rade (#25). */
.pc-products__items > pc-product.pc-product[state="empty"] {
    display: none;
}

/* Blok, v ktorom nezostal žiadny neprázdny widget, zmizne celý (aj s nadpisom). */
.pc-products:not(:has(pc-product:not([state="empty"]))) {
    display: none;
}

@media (min-width: 782px) {
    .pc-products__items > pc-product.pc-product {
        flex-basis: 30%;
    }

    /* Samostatný widget: blok len na šírku karty, na stred. Percentá by sa rátali z celej šírky
       kontajnera témy, nie zo stĺpca textu → pevná šírka. */
    .pc-products:has(pc-product:only-of-type) {
        width: min(100%, 16rem);
        margin-inline: auto !important;
    }

    .pc-products__items > pc-product.pc-product:only-of-type {
        flex-basis: 100%;
    }
}