/* =========================================================
   Product page — Product features
   [brokk_product_features], rendered by components/product-features/.

   Namespace: .brk-ft*. Nothing here is shared with another
   surface, so every rule is scoped to that prefix.

   No font-family: the tags are sentence-case body copy and
   inherit Geist from the root. DESIGN.md allows a deliberate
   condensed face on badges and small-caps labels, but these
   are neither — they are full feature names ("Divided hose
   connection – outriggers"), and condensing them would cost
   legibility for no gain.
   ========================================================= */

.brk-ft {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 1.6rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Flat with a hairline border, per DESIGN.md > Components > Cards. The radius
   is --radius-xs (2.2px), the same step the buttons use: DESIGN.md warns that
   8-16px rounded rectangles read as consumer SaaS rather than industrial.

   Not interactive, so no hover, no pointer, no focus ring — see the linking
   note in product-features.php. Should these become links later, they need a
   hover state and a focus-visible outline added here. */
.brk-ft__tag {
    /* inline-flex, not inline-block: centres a name that wraps to two lines
       inside the tag, which "Divided hose connection – outriggers" does at
       the narrower column widths. */
    display: inline-flex;
    align-items: center;
    padding: 0.6rem var(--space-xs, 1.6rem);
    border: 1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--radius-xs, 2.2222222222px);
    color: var(--text-dark, #000);
    font-size: var(--text-s, 1.5rem);
    line-height: 1.4;
}

/* The PDF product sheet builds its own document from ACF and never sees this
   markup (inc/product-sheet.php), but the html2pdf clone in
   components/pdf-export/ does clone the page. Keep the tags from splitting
   across a page break there. */
@media print {
    .brk-ft__tag {
        break-inside: avoid;
    }
}