/* ============================================================
   PLUSFAB -- "BRIGHT STEEL" FIGURES BAND (2026-10-06, phase 3)
   ------------------------------------------------------------
   Styles partials/_trust_bright.php (the `divided` Trust Bar).
   The markup uses its own .pf-band__* classes, so none of the
   older .mt-trust-bar rules reach it.

   Each item is a white plate on light steel: one cut corner, a
   yellow left edge, a large outlined index number. On hover the
   plate inverts to black with a yellow value.

   Written phone-first: one column, then two, then one row.
============================================================ */

body.tpl-plusfab_industrial .pf-band {
    --pf-ink:    var(--mt-brand-primary, #15171A);
    --pf-yellow: var(--mt-accent, #FFCC00);
    padding: 36px 0;
    background: var(--mt-surface-sunken, #F6F7F8);
}

body.tpl-plusfab_industrial .pf-band__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.tpl-plusfab_industrial .pf-band__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 22px 76px 22px 26px;   /* right side keeps clear of the index */
    background: #FFFFFF;
    box-shadow: inset 6px 0 0 var(--pf-yellow);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    transition: background-color 0.25s var(--mt-ease-default);
}

body.tpl-plusfab_industrial .pf-band__index {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: var(--mt-font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--mt-neutral-300, #C5CBD0);
    transition: -webkit-text-stroke-color 0.25s var(--mt-ease-default);
}

body.tpl-plusfab_industrial .pf-band__icon {
    margin-bottom: 6px;
    font-size: 1.2rem;
    color: var(--pf-ink);
    transition: color 0.25s var(--mt-ease-default);
}

body.tpl-plusfab_industrial .pf-band__value {
    font-family: var(--mt-font-heading);
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pf-ink);
    overflow-wrap: anywhere;
    transition: color 0.25s var(--mt-ease-default);
}

body.tpl-plusfab_industrial .pf-band__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mt-neutral-600, #555C63);
    transition: color 0.25s var(--mt-ease-default);
}

body.tpl-plusfab_industrial .pf-band__desc {
    margin-top: 6px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--mt-neutral-600, #555C63);
    transition: color 0.25s var(--mt-ease-default);
}

/* Hover (pointer devices only, so a tap on a phone does not stick). */
@media (hover: hover) {
    body.tpl-plusfab_industrial .pf-band__item:hover { background: var(--pf-ink); }
    body.tpl-plusfab_industrial .pf-band__item:hover .pf-band__value,
    body.tpl-plusfab_industrial .pf-band__item:hover .pf-band__icon { color: var(--pf-yellow); }
    body.tpl-plusfab_industrial .pf-band__item:hover .pf-band__label { color: #FFFFFF; }
    body.tpl-plusfab_industrial .pf-band__item:hover .pf-band__desc { color: var(--mt-neutral-300, #C5CBD0); }
    body.tpl-plusfab_industrial .pf-band__item:hover .pf-band__index { -webkit-text-stroke-color: var(--pf-yellow); }
}

/* Tablet: two plates per row. */
@media (min-width: 576px) {
    body.tpl-plusfab_industrial .pf-band { padding: 44px 0; }
    body.tpl-plusfab_industrial .pf-band__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    body.tpl-plusfab_industrial .pf-band--count-1 .pf-band__list { grid-template-columns: 1fr; }
    /* Three plates: the third spans the row instead of leaving a hole. */
    body.tpl-plusfab_industrial .pf-band--count-3 .pf-band__item:last-child { grid-column: 1 / -1; }
}

/* Desktop: one row. */
@media (min-width: 992px) {
    body.tpl-plusfab_industrial .pf-band { padding: 56px 0; }
    body.tpl-plusfab_industrial .pf-band__list { gap: 20px; }
    body.tpl-plusfab_industrial .pf-band--count-3 .pf-band__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.tpl-plusfab_industrial .pf-band--count-4 .pf-band__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.tpl-plusfab_industrial .pf-band--count-3 .pf-band__item:last-child { grid-column: auto; }
    body.tpl-plusfab_industrial .pf-band__item { padding: 28px 84px 28px 30px; }
    body.tpl-plusfab_industrial .pf-band__index { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.tpl-plusfab_industrial .pf-band__item,
    body.tpl-plusfab_industrial .pf-band__item * { transition: none; }
}