/* ============================================================
   PLUSFAB -- "BRIGHT STEEL" SERVICES (2026-10-07, redesign phase 4)
   ------------------------------------------------------------
   Styles partials/_services_bright.php (the `grid` Services
   Preview). The markup uses its own .pf-services__* classes, so
   none of the older .mt-services rules reach it.

   A numbered service index on light steel: one wide row per
   service between black rules. Each row carries a number (black
   outline, yellow offset), a yellow icon tile, the title, the
   description, the bullets as "+" chips and an arrow. On pointer
   devices a yellow fill sweeps across the row on hover.

   Written phone-first: a row is a stack on phones, a two-column
   block on tablets and a single line of four columns on desktop.
============================================================ */

body.tpl-plusfab_industrial .pf-services {
    --pf-ink:    var(--mt-brand-primary, #15171A);
    --pf-yellow: var(--mt-accent, #FFCC00);
    padding: 56px 0;
    background: var(--mt-surface-sunken, #F6F7F8);
    color: var(--mt-neutral-700, #3E444A);
}


/* ============================================================
   §1  HEADER
============================================================ */
body.tpl-plusfab_industrial .pf-services__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
body.tpl-plusfab_industrial .pf-services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--mt-space-4, 16px);
    font-family: var(--mt-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .pf-services__eyebrow::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: var(--pf-yellow);
    box-shadow: 4px 4px 0 var(--pf-ink);
}
body.tpl-plusfab_industrial .pf-services__title {
    margin: 0;
    font-family: var(--mt-font-heading);
    font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.03em;
    color: var(--pf-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
body.tpl-plusfab_industrial .pf-services__subtitle {
    margin: 0;
    max-width: 56ch;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--mt-neutral-600, #555C63);
}


/* ============================================================
   §2  ROWS -- phones: a stack
============================================================ */
body.tpl-plusfab_industrial .pf-services__list {
    border-bottom: 2px solid var(--pf-ink);
}
body.tpl-plusfab_industrial .pf-services__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 26px 0 28px;
    border-top: 2px solid var(--pf-ink);
    /* The hover sweep: a yellow layer that grows from the left edge. */
    background-image: linear-gradient(var(--pf-yellow), var(--pf-yellow));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 0% 100%;
    transition: background-size 0.4s var(--mt-ease-default),
                padding 0.4s var(--mt-ease-default);
}

/* Number: black outline with a yellow offset behind it. */
body.tpl-plusfab_industrial .pf-services__num {
    font-family: var(--mt-font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 0.9;
    /* Kept lighter than the service title beside it (polish 2026-10-07):
       a thinner outline and a shorter yellow offset. */
    color: transparent;
    -webkit-text-stroke: 1.25px var(--pf-ink);
    text-shadow: 2px 2px 0 var(--pf-yellow);
    transition: text-shadow 0.3s var(--mt-ease-default);
}

body.tpl-plusfab_industrial .pf-services__main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}
body.tpl-plusfab_industrial .pf-services__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--pf-yellow);
    font-size: 1.1rem;
    color: var(--pf-ink);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    transition: background-color 0.3s var(--mt-ease-default), color 0.3s var(--mt-ease-default);
}
body.tpl-plusfab_industrial .pf-services__text { min-width: 0; }
body.tpl-plusfab_industrial .pf-services__name {
    margin: 0 0 6px;
    font-family: var(--mt-font-heading);
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--pf-ink);
    overflow-wrap: anywhere;
}
body.tpl-plusfab_industrial .pf-services__desc {
    margin: 0;
    max-width: 52ch;
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--mt-neutral-600, #555C63);
    transition: color 0.3s var(--mt-ease-default);
}

/* Bullets as "+" chips. */
body.tpl-plusfab_industrial .pf-services__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.tpl-plusfab_industrial .pf-services__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    border: 1px solid var(--mt-neutral-300, #C5CBD0);
    background: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pf-ink);
    transition: border-color 0.3s var(--mt-ease-default);
}
body.tpl-plusfab_industrial .pf-services__chips li::before {
    content: "+";
    flex-shrink: 0;
    font-family: var(--mt-font-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pf-ink);
}

/* Arrow link. Its ::after covers the whole row, so the row is one target. */
body.tpl-plusfab_industrial .pf-services__go {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .pf-services__go::after {
    content: "";
    position: absolute;
    inset: 0;
}
body.tpl-plusfab_industrial .pf-services__go i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--pf-ink);
    color: var(--pf-yellow);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    transition: transform 0.3s var(--mt-ease-default);
}
body.tpl-plusfab_industrial .pf-services__go:focus-visible {
    outline: none;
}
body.tpl-plusfab_industrial .pf-services__go:focus-visible::after {
    outline: 3px solid var(--pf-ink);
    outline-offset: -3px;
}

/* Hover sweep (pointer devices only, so a tap on a phone does not stick). */
@media (hover: hover) {
    body.tpl-plusfab_industrial .pf-services__row:hover {
        background-size: 100% 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    body.tpl-plusfab_industrial .pf-services__row:hover .pf-services__num { text-shadow: 2px 2px 0 #FFFFFF; }
    body.tpl-plusfab_industrial .pf-services__row:hover .pf-services__icon {
        background: var(--pf-ink);
        color: var(--pf-yellow);
    }
    body.tpl-plusfab_industrial .pf-services__row:hover .pf-services__desc { color: var(--pf-ink); }
    body.tpl-plusfab_industrial .pf-services__row:hover .pf-services__chips li { border-color: var(--pf-ink); }
    body.tpl-plusfab_industrial .pf-services__row:hover .pf-services__go i { transform: translateX(6px); }
}


/* ============================================================
   §3  SECTION BUTTON
============================================================ */
body.tpl-plusfab_industrial .pf-services__cta { margin-top: 32px; }
body.tpl-plusfab_industrial .pf-services__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 28px;
    border: 2px solid var(--pf-ink);
    background: var(--pf-ink);
    font-family: var(--mt-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    transition: background-color 0.2s var(--mt-ease-default),
                border-color 0.2s var(--mt-ease-default),
                color 0.2s var(--mt-ease-default);
}
body.tpl-plusfab_industrial .pf-services__cta-btn i {
    color: var(--pf-yellow);
    transition: transform 0.2s var(--mt-ease-default), color 0.2s var(--mt-ease-default);
}
body.tpl-plusfab_industrial .pf-services__cta-btn:hover,
body.tpl-plusfab_industrial .pf-services__cta-btn:focus-visible {
    border-color: var(--pf-yellow);
    background: var(--pf-yellow);
    color: var(--pf-ink);
    outline: none;
}
body.tpl-plusfab_industrial .pf-services__cta-btn:hover i,
body.tpl-plusfab_industrial .pf-services__cta-btn:focus-visible i {
    color: var(--pf-ink);
    transform: translateX(5px);
}


/* ============================================================
   §4  LARGER SCREENS
============================================================ */
@media (min-width: 576px) {
    body.tpl-plusfab_industrial .pf-services__cta-btn { display: inline-flex; }
}

/* Tablet: number beside the text; chips and arrow on a second line. */
@media (min-width: 768px) {
    body.tpl-plusfab_industrial .pf-services { padding: 80px 0; }
    body.tpl-plusfab_industrial .pf-services__header { margin-bottom: 44px; }
    body.tpl-plusfab_industrial .pf-services__row {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 18px 24px;
        align-items: start;
        padding: 30px 0 32px;
    }
    body.tpl-plusfab_industrial .pf-services__num { font-size: 2.6rem; grid-row: 1 / span 2; }
    body.tpl-plusfab_industrial .pf-services__main { grid-column: 2; }
    body.tpl-plusfab_industrial .pf-services__chips { grid-column: 2; grid-row: 2; }
    body.tpl-plusfab_industrial .pf-services__go {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
    }
    /* The arrow alone; the label stays for screen readers. */
    body.tpl-plusfab_industrial .pf-services__go-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    body.tpl-plusfab_industrial .pf-services__go i { width: 52px; height: 52px; }
}

/* Desktop: one line -- number | title + text | chips | arrow. */
@media (min-width: 1100px) {
    body.tpl-plusfab_industrial .pf-services { padding: 104px 0; }
    body.tpl-plusfab_industrial .pf-services__header {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 48px;
        align-items: end;
        margin-bottom: 56px;
    }
    body.tpl-plusfab_industrial .pf-services__row {
        grid-template-columns: 88px minmax(0, 1.25fr) minmax(0, 1fr) auto;
        gap: 32px;
        align-items: center;
        padding: 34px 0;
    }
    body.tpl-plusfab_industrial .pf-services__num { font-size: 3rem; grid-row: auto; }
    body.tpl-plusfab_industrial .pf-services__main { grid-column: auto; }
    body.tpl-plusfab_industrial .pf-services__chips { grid-column: auto; grid-row: auto; }
    body.tpl-plusfab_industrial .pf-services__go { grid-column: 4; grid-row: auto; }
    body.tpl-plusfab_industrial .pf-services__cta { margin-top: 44px; }
}

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