/**
 * Underkategori-navigation på forældre-arkivet (BCAT_Display_Terms).
 * Én række, vandret rul (swipe på touch, pile på desktop). Fire styles.
 * Arver temaets farver/typografi — vi sætter kun struktur, ikke brand-farver.
 */

.bcat-subcats {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1.25em 0;
}

.bcat-sc-track {
    /* flex:1 + min-width:0: sporet fylder hele rækken (ellers krymper det til indholdet og
       justify-content har intet at centrere i), og må gerne blive smallere end indholdet */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    /* Scrollbaren skjules — rækken har pile på desktop og swipe på touch */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px;
}
.bcat-sc-track::-webkit-scrollbar { display: none; }

.bcat-sc-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1.25;
}
/* Billed-stilene (cirkler/kort/miniature) skal IKKE farves som links — navnet under en
   cirkel er en billedtekst, ikke et link-udseende. Chips derimod arver linkfarven. */
.bcat-subcats.is-circles .bcat-sc-item,
.bcat-subcats.is-cards .bcat-sc-item,
.bcat-subcats.is-minichips .bcat-sc-item { color: inherit; }

.bcat-sc-visual {
    /* border-box: ikon-varianten har padding, og uden dette bliver ikon-cirklerne
       større end foto-cirklerne på temaer uden global box-sizing-reset */
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    font-weight: 600;
}

.bcat-sc-visual.is-icon { padding: 22%; }
.bcat-sc-visual .bcat-icon { display: block; }

/* Billedkort: ikonet skal ikke fylde hele fladen som et foto ville */
.bcat-subcats.is-cards .bcat-sc-visual.is-icon { padding: 0; }
.bcat-subcats.is-cards .bcat-sc-visual.is-icon .bcat-icon {
    width: 42px;
    height: 42px;
    margin: 8px auto 0;
    opacity: 0.75;
}

.bcat-sc-label { white-space: nowrap; }

/* Antal opskrifter: chips får " · 15" dæmpet i linjen; billed-stilene en lille underlinje */
.bcat-sc-count { opacity: 0.6; font-weight: 400; }
.bcat-subcats.is-circles .bcat-sc-count,
.bcat-subcats.is-cards .bcat-sc-count {
    display: block;
    font-size: 0.82em;
    margin-top: 0.15em;
    white-space: nowrap;
}
.bcat-subcats.is-cards .bcat-sc-count { opacity: 0.85; }

/* Lange navne ("Bælgfrugter & planteprotein", 27 tegn): chips-varianterne vokser med
   indholdet og må gerne være lange i en rullende række — men kort og cirkler har fast
   bredde og skal ombryde i stedet for at klippe. Kort: maks 2 linjer med ellipse
   (gradienten dækker stadig teksten). Cirkler: frit ombryd (3 linjer er ok under en
   cirkel). Bindestreg ved orddeling hvor temaet har lang="da". */
.bcat-subcats.is-cards .bcat-sc-label {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: break-word;
}
.bcat-subcats.is-circles .bcat-sc-label {
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Pile: kun relevante på pegeredskaber — skjules på touch, hvor man swiper */
.bcat-sc-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.bcat-sc-arrow:hover { opacity: 1; }
@media (hover: none) {
    .bcat-sc-arrow { display: none; }
}

/* A. Tekst-chips — ÉN rulbar række, men justeret af REN CSS (ingen JS → ingen CLS):
   sporet er inline-flex, så det følger forælderens text-align som inline-indhold
   (centreret desktop / venstre mobil via temaets egne breakpoints). Passer alt, står
   det centreret; overflower det, er det max-width:100% og ruller — indholdet starter
   da automatisk fra venstre. Pilene ligger absolut i kanterne, så de ikke skubber
   noget når JS viser dem. Farven arves fra temaets LINK-regel (ingen color på <a>). */
.bcat-subcats.is-chips {
    display: block;
    position: relative;
    text-align: inherit;
    overflow: hidden;   /* intet må titte frem uden for rækken */
    box-sizing: border-box;
}
.bcat-subcats.is-chips .bcat-sc-track {
    display: inline-flex;
    vertical-align: top;
    max-width: 100%;
    width: auto;
    gap: 8px;
    padding: 2px 2px 6px;
}
/* Pil-stil "minimal chevron": ingen cirkel — bare en tynd pil i linkfarven, og rækken
   fader ind under den (::before/::after). Fade + rende tændes KUN når JS har sat
   has-prev/has-next, så en kort række ser ud som en helt almindelig linje. Fade-farven
   kan overstyres med --bcat-sc-bg hvis temaets baggrund ikke er hvid. */
.bcat-subcats.is-chips .bcat-sc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -2px;
    width: 28px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    opacity: 0.85;
    font-size: 26px;
    font-weight: 300;
    z-index: 2;
}
.bcat-subcats.is-chips .bcat-sc-arrow.is-prev { left: 0; }
.bcat-subcats.is-chips .bcat-sc-arrow.is-next { right: 0; }
.bcat-subcats.is-chips.has-prev { padding-left: 30px; }
.bcat-subcats.is-chips.has-next { padding-right: 30px; }
.bcat-subcats.is-chips.has-prev::before,
.bcat-subcats.is-chips.has-next::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70px;
    z-index: 1;
    pointer-events: none;
}
.bcat-subcats.is-chips.has-prev::before {
    left: 0;
    background: linear-gradient(to right, var(--bcat-sc-bg, #fff) 35%, transparent);
}
.bcat-subcats.is-chips.has-next::after {
    right: 0;
    background: linear-gradient(to left, var(--bcat-sc-bg, #fff) 35%, transparent);
}
/* Touch: ingen pile, men faderne er stadig et godt "her er mere"-signal */
@media (hover: none) {
    .bcat-subcats.is-chips.has-prev { padding-left: 0; }
    .bcat-subcats.is-chips.has-next { padding-right: 0; }
    .bcat-subcats.is-chips.has-prev::before,
    .bcat-subcats.is-chips.has-next::after { width: 36px; }
}

/* Udfyldte chips: linkfarven som baggrund, hvid tekst — tydeligere "det her kan man trykke på".
   currentColor = temaets a-farve, så den følger sitet uden indstillinger. */
.bcat-subcats.is-fill.is-chips .bcat-sc-item,
.bcat-subcats.is-fill.is-minichips .bcat-sc-item {
    background: currentColor;
    border-color: transparent;
    opacity: 1;
}
.bcat-subcats.is-fill.is-chips .bcat-sc-label,
.bcat-subcats.is-fill.is-minichips .bcat-sc-label { color: #fff; }
.bcat-subcats.is-fill.is-chips .bcat-sc-count,
.bcat-subcats.is-fill.is-minichips .bcat-sc-count { color: #fff; opacity: .75; }
.bcat-subcats.is-fill.is-chips .bcat-sc-item:hover,
.bcat-subcats.is-fill.is-minichips .bcat-sc-item:hover { filter: brightness(.92); }
.bcat-subcats.is-chips .bcat-sc-item {
    padding: 0.35em 0.95em;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.8rem;
    opacity: 0.9;
    white-space: nowrap;
}
.bcat-subcats.is-chips .bcat-sc-item:hover { opacity: 1; }

/* B. Cirkelbilleder */
.bcat-subcats.is-circles .bcat-sc-track { gap: 18px; }
.bcat-subcats.is-circles .bcat-sc-item {
    flex-direction: column;
    gap: 6px;
    width: 84px;
    text-align: center;
}
.bcat-subcats.is-circles .bcat-sc-visual {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 22px;
}
.bcat-subcats.is-circles .bcat-sc-label {
    white-space: normal;
    font-size: 0.78em;
    opacity: 0.85;
}

/* C. Billedkort */
.bcat-subcats.is-cards .bcat-sc-item {
    position: relative;
    width: 150px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    align-items: flex-end;
    padding: 8px 10px;
}
.bcat-subcats.is-cards .bcat-sc-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: 28px;
}

/* Overlay under teksten — kun i den nederste tredjedel, hvor teksten står. Uden
   overlay drukner hvid skrift i lyse madfotos (fx en lys salat), men et kraftigt
   overlay dæmper hele billedet unødigt: dette holder maden lys og teksten læsbar.
   Kun på RIGTIGE billeder — farve- og ikon-kort har deres eget kontrastforhold. */
.bcat-subcats.is-cards .bcat-sc-visual:not(.is-color):not(.is-icon)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 75%);
}

.bcat-subcats.is-cards .bcat-sc-label {
    position: relative;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Farve-/ikon-kort: teksten står på en lys flade, så den skal IKKE være hvid */
.bcat-subcats.is-cards .bcat-sc-visual.is-color ~ .bcat-sc-label,
.bcat-subcats.is-cards .bcat-sc-visual.is-icon ~ .bcat-sc-label {
    color: inherit;
    text-shadow: none;
}

/* D. Chips med miniature */
.bcat-subcats.is-minichips .bcat-sc-item {
    padding: 4px 14px 4px 4px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.85em;
    opacity: 0.9;
}
.bcat-subcats.is-minichips .bcat-sc-visual {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
}

@media (max-width: 600px) {
    .bcat-subcats.is-circles .bcat-sc-item { width: 74px; }
    .bcat-subcats.is-circles .bcat-sc-visual { width: 56px; height: 56px; }
    .bcat-subcats.is-cards .bcat-sc-item { width: 132px; height: 76px; }
}