/* ============================================================
   PLUSFAB -- "BRIGHT STEEL" SERVICE DOMAINS (2026-10-06, phase 3)
   ------------------------------------------------------------
   A template-scoped presentation layer over the universal
   feature_alternating module (web/partials/feature_alternating.php
   + /web/assets/css/feature-alternating.css). The renderer, the
   shared stylesheet and the content contract are untouched. The
   shared stylesheet is linked from the page body, after this file,
   so every rule here carries the body.tpl-plusfab_industrial prefix
   and wins on specificity.

   One row = one business domain: a large framed photograph with
   two cut corners and a yellow slab behind it, an outlined index
   number, a heavy title, the sub-services as "+" chips, and a
   cut-corner button.

   Phone: one column, photograph first, then the text.
   Tablet (768px+): full-width rows; `reverse` swaps the sides.
   Desktop (992px+): the first row leads at full width and the rows
   after it sit in pairs (see §5).
============================================================ */

body.tpl-plusfab_industrial .feature-alternating-section {
    --pf-ink:    var(--mt-brand-primary, #15171A);
    --pf-yellow: var(--mt-accent, #FFCC00);
    --pf-cut:    32px;
    --pf-offset: 12px;
    /* Cut top-left + bottom-right; mirrored on reversed rows (§4). */
    --pf-shape:  polygon(var(--pf-cut) 0, 100% 0, 100% calc(100% - var(--pf-cut)),
                         calc(100% - var(--pf-cut)) 100%, 0 100%, 0 var(--pf-cut));
    --pf-shape-mirror: polygon(0 0, calc(100% - var(--pf-cut)) 0, 100% var(--pf-cut),
                         100% 100%, var(--pf-cut) 100%, 0 calc(100% - var(--pf-cut)));
    background: #FFFFFF;
    color: var(--mt-neutral-700, #3E444A);
    overflow: hidden;   /* the slab never causes sideways scroll */
}


/* ============================================================
   §1  SECTION HEADER
============================================================ */
body.tpl-plusfab_industrial .feature-alternating-section .fea-header {
    max-width: 760px;
    margin: 0 0 var(--mt-space-10, 40px);
    text-align: left;
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--mt-space-4, 16px);
    padding: 0;
    border-radius: 0;
    background: none;
    font-family: var(--mt-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-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 .feature-alternating-section .fea-heading {
    margin: 0 0 var(--mt-space-3, 12px);
    font-family: var(--mt-font-heading);
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--pf-ink);
    text-wrap: balance;
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-subheading {
    max-width: 56ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--mt-neutral-600, #555C63);
}


/* ============================================================
   §2  ROWS -- phone first: photograph, then text
============================================================ */
body.tpl-plusfab_industrial .feature-alternating-section .fea-list {
    counter-reset: pf-domain;
    gap: 56px;
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-row {
    counter-increment: pf-domain;
    gap: 28px;
    align-items: center;
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-visual { order: -1; }


/* ============================================================
   §3  TEXT COLUMN
============================================================ */
body.tpl-plusfab_industrial .feature-alternating-section .fea-text {
    position: relative;
    min-width: 0;
}
/* Outlined index number: 01, 02, 03 ... */
body.tpl-plusfab_industrial .feature-alternating-section .fea-text::before {
    content: counter(pf-domain, decimal-leading-zero);
    display: block;
    margin-bottom: 6px;
    font-family: var(--mt-font-heading);
    font-size: clamp(2.6rem, 1.9rem + 2.6vw, 4.2rem);
    font-weight: 800;
    line-height: 0.9;
    /* Black outline with a short yellow offset behind it. Kept lighter
       than the title under it (polish 2026-10-07). */
    color: transparent;
    -webkit-text-stroke: 1.5px var(--pf-ink);
    text-shadow: 3px 3px 0 var(--pf-yellow);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--mt-space-3, 12px);
    border-radius: 0;
    background: var(--pf-yellow);
    color: var(--pf-ink);
    font-size: 1.05rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-title {
    margin: 0 0 var(--mt-space-3, 12px);
    font-family: var(--mt-font-heading);
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--pf-ink);
    overflow-wrap: anywhere;
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-lead {
    margin: 0 0 var(--mt-space-3, 12px);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-desc {
    margin: 0 0 var(--mt-space-5, 20px);
    max-width: 54ch;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--mt-neutral-600, #555C63);
}

/* Points become "+" chips that wrap. */
body.tpl-plusfab_industrial .feature-alternating-section .fea-points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--mt-space-6, 24px);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-points li {
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--mt-neutral-200, #E1E4E7);
    background: var(--mt-surface-sunken, #F6F7F8);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-points i { display: none; }
body.tpl-plusfab_industrial .feature-alternating-section .fea-points li::before {
    content: "+";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--pf-yellow);
    font-family: var(--mt-font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pf-ink);
}

/* Button: black with one cut corner, yellow on hover (as in the Hero). */
body.tpl-plusfab_industrial .feature-alternating-section .fea-cta { margin-top: 0; }
body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 26px;
    border: 2px solid var(--pf-ink);
    border-radius: 0;
    background: var(--pf-ink);
    box-shadow: none;
    font-family: var(--mt-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    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 .feature-alternating-section .fea-cta .btn-primary::after {
    content: "\2192";   /* right arrow */
    color: var(--pf-yellow);
    transition: transform 0.2s var(--mt-ease-default), color 0.2s var(--mt-ease-default);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary:hover,
body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary:focus-visible,
body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary:active {
    border-color: var(--pf-yellow);
    background: var(--pf-yellow);
    color: var(--pf-ink);
    outline: none;
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary:hover::after,
body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary:focus-visible::after {
    color: var(--pf-ink);
    transform: translateX(5px);
}


/* ============================================================
   §4  VISUAL COLUMN -- cut-corner frame + yellow slab
============================================================ */
body.tpl-plusfab_industrial .feature-alternating-section .fea-visual {
    position: relative;
    min-width: 0;
    padding: 0 var(--pf-offset) var(--pf-offset) 0;
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-visual::before {
    content: "";
    position: absolute;
    inset: var(--pf-offset) 0 0 var(--pf-offset);
    background: var(--pf-yellow);
    clip-path: var(--pf-shape);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-visual-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--mt-neutral-100, #EEF0F2);
    clip-path: var(--pf-shape);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-visual-frame img {
    transition: transform 0.9s var(--mt-ease-default);
}
@media (hover: hover) {
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:hover .fea-visual-frame img {
        transform: scale(1.06);
    }
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-visual-iconcard {
    background: var(--mt-surface-sunken, #F6F7F8);
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-visual-placeholder {
    background: linear-gradient(135deg, #F6F7F8 0%, #C5CBD0 100%);
}

/* Reversed rows mirror the frame and the slab. */
body.tpl-plusfab_industrial .feature-alternating-section .fea-row.is-reverse .fea-visual {
    padding: 0 0 var(--pf-offset) var(--pf-offset);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-row.is-reverse .fea-visual::before {
    inset: var(--pf-offset) var(--pf-offset) 0 0;
    clip-path: var(--pf-shape-mirror);
}
body.tpl-plusfab_industrial .feature-alternating-section .fea-row.is-reverse .fea-visual-frame {
    clip-path: var(--pf-shape-mirror);
}


/* ============================================================
   §5  LARGER SCREENS
============================================================ */
@media (min-width: 576px) {
    body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary {
        display: inline-flex;
    }
}

/* Two columns from tablet up (the shared stylesheet's own breakpoint). */
@media (min-width: 768px) {
    body.tpl-plusfab_industrial .feature-alternating-section {
        --pf-cut: 44px;
        --pf-offset: 16px;
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-header {
        margin-bottom: var(--mt-space-16, 64px);
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-list { gap: 88px; }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
        gap: clamp(32px, 5vw, 72px);
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row.is-reverse {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    }
    /* Back to the module's own left/right placement. Both columns are
       pinned to the first grid row: on a reversed row the text sits in
       column 2 and comes first in the markup, so without this the
       photograph would be auto-placed on a second row. */
    body.tpl-plusfab_industrial .feature-alternating-section .fea-visual { order: 0; }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-text,
    body.tpl-plusfab_industrial .feature-alternating-section .fea-visual { grid-row: 1; }
}

/* ------------------------------------------------------------
   Desktop hierarchy (2026-10-07): ONE LEAD + A PAIR.
   The first row is the lead domain and keeps the full width. The
   rows after it sit two to a line as equal blocks (photograph on
   top, text under it), so the second and third domains read as a
   connected pair while each keeps its own title and photograph.
   If the last row would sit alone in a line (an even number of
   rows in total), it takes the full width like the lead.
   Below 992px every row is the ordinary full-width row above;
   below 768px every row is a single column.
------------------------------------------------------------ */
@media (min-width: 992px) {
    body.tpl-plusfab_industrial .feature-alternating-section .fea-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 72px clamp(32px, 4vw, 64px);
        align-items: start;
    }
    /* Full-width rows: the lead, and a last row left on its own. */
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:first-child,
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }
    /* The lead reads larger than the rows under it. */
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:first-child .fea-title {
        font-size: clamp(2.2rem, 1.4rem + 1.9vw, 3.1rem);
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:first-child .fea-visual-frame {
        aspect-ratio: 16 / 11;
    }

    /* Paired rows: one column inside -- photograph, then text. The
       module's `reverse` switch has no side to swap here, so it only
       mirrors the frame's cut corners. */
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:not(:first-child):not(:last-child:nth-child(even)),
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row.is-reverse:not(:first-child):not(:last-child:nth-child(even)) {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        align-items: start;
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:not(:first-child):not(:last-child:nth-child(even)) .fea-text,
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:not(:first-child):not(:last-child:nth-child(even)) .fea-visual {
        grid-column: 1;
        grid-row: auto;
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:not(:first-child):not(:last-child:nth-child(even)) .fea-visual {
        order: -1;
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:not(:first-child):not(:last-child:nth-child(even)) .fea-visual-frame {
        aspect-ratio: 16 / 10;
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:not(:first-child):not(:last-child:nth-child(even)) .fea-title {
        font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-row:not(:first-child):not(:last-child:nth-child(even)) .fea-text::before {
        font-size: 2.6rem;
    }
}

@media (min-width: 1200px) {
    body.tpl-plusfab_industrial .feature-alternating-section {
        --pf-cut: 56px;
        --pf-offset: 18px;
    }
    body.tpl-plusfab_industrial .feature-alternating-section .fea-list { gap: 88px clamp(40px, 4vw, 72px); }
}

@media (prefers-reduced-motion: reduce) {
    body.tpl-plusfab_industrial .feature-alternating-section .fea-visual-frame img,
    body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary,
    body.tpl-plusfab_industrial .feature-alternating-section .fea-cta .btn-primary::after {
        transition: none;
    }
}