/* ============================================================
   PLUSFAB -- "BRIGHT STEEL" CTA (2026-10-07, redesign phase 4)
   ------------------------------------------------------------
   Styles partials/_cta_bright.php (the `banner` CTA). The markup
   uses its own .pf-cta__* classes, so none of the older .mt-cta
   rules reach it.

   A logo-yellow band, black type, a black cut-corner button. With
   a photograph: a diagonal-cut panel on the right (above the copy
   on phones). Without one: a large outlined "+" in the same place.
   (The hazard-stripe rails along its edges were removed on
   2026-10-07; the yellow and the diagonal cut carry the section.)

   Written phone-first.
============================================================ */

body.tpl-plusfab_industrial .pf-cta {
    --pf-ink:    var(--mt-brand-primary, #15171A);
    --pf-yellow: var(--mt-accent, #FFCC00);
    position: relative;
    overflow: hidden;
    background: var(--pf-yellow);
    color: var(--pf-ink);
}


/* ============================================================
   §1  PHOTOGRAPH -- phones: a strip above the copy
============================================================ */
body.tpl-plusfab_industrial .pf-cta__media {
    position: relative;
    z-index: 1;
    height: clamp(180px, 46vw, 300px);
    overflow: hidden;
    /* A slanted lower edge, so the photograph meets the yellow on a cut. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}
body.tpl-plusfab_industrial .pf-cta__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   §2  COPY
============================================================ */
body.tpl-plusfab_industrial .pf-cta__container {
    position: relative;
    z-index: 2;
}
body.tpl-plusfab_industrial .pf-cta__inner {
    padding: 36px 0 48px;
}
body.tpl-plusfab_industrial .pf-cta--no-image .pf-cta__inner {
    padding-top: 48px;
}

body.tpl-plusfab_industrial .pf-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--mt-space-4, 16px);
    background: var(--pf-ink);
    font-size: 1.1rem;
    color: var(--pf-yellow);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
/* One marker above the title, not two (polish 2026-10-07): when the CTA has
   an eyebrow, its square marker is the label device and the icon tile is not
   shown. A CTA with an icon but no eyebrow still shows the tile. */
body.tpl-plusfab_industrial .pf-cta__icon:has(+ .pf-cta__eyebrow) {
    display: none;
}
body.tpl-plusfab_industrial .pf-cta__eyebrow {
    display: 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);
}
/* On yellow the marker is black with a white offset. */
body.tpl-plusfab_industrial .pf-cta__eyebrow::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: var(--pf-ink);
    box-shadow: 4px 4px 0 #FFFFFF;
}
body.tpl-plusfab_industrial .pf-cta__title {
    margin: 0 0 var(--mt-space-4, 16px);
    font-family: var(--mt-font-heading);
    font-size: clamp(1.85rem, 1.1rem + 2.8vw, 3.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--pf-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
body.tpl-plusfab_industrial .pf-cta__subtitle {
    margin: 0;
    max-width: 56ch;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(21, 23, 26, 0.86);
}
body.tpl-plusfab_industrial .pf-cta__note {
    margin: var(--mt-space-5, 20px) 0 0;
    font-family: var(--mt-font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(21, 23, 26, 0.72);
}


/* ============================================================
   §3  BUTTONS -- stacked and full width on phones
============================================================ */
body.tpl-plusfab_industrial .pf-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--mt-space-8, 32px);
}
body.tpl-plusfab_industrial .pf-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 28px;
    border: 2px solid 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;
    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-cta__btn i {
    transition: transform 0.2s var(--mt-ease-default), color 0.2s var(--mt-ease-default);
}
/* Primary: black with one cut corner; white on hover. */
body.tpl-plusfab_industrial .pf-cta__btn--primary {
    background: var(--pf-ink);
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
body.tpl-plusfab_industrial .pf-cta__btn--primary i { color: var(--pf-yellow); }
body.tpl-plusfab_industrial .pf-cta__btn--primary:hover,
body.tpl-plusfab_industrial .pf-cta__btn--primary:focus-visible {
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--pf-ink);
    outline: none;
}
body.tpl-plusfab_industrial .pf-cta__btn--primary:hover i,
body.tpl-plusfab_industrial .pf-cta__btn--primary:focus-visible i {
    color: var(--pf-ink);
    transform: translateX(5px);
}
/* Secondary: black outline; fills black on hover. */
body.tpl-plusfab_industrial .pf-cta__btn--secondary {
    background: transparent;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .pf-cta__btn--secondary:hover,
body.tpl-plusfab_industrial .pf-cta__btn--secondary:focus-visible {
    background: var(--pf-ink);
    color: var(--pf-yellow);
}
body.tpl-plusfab_industrial .pf-cta__btn--secondary:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}


/* ============================================================
   §4  ALIGNMENT (CTA text_align) -- applies when there is no
   photograph; beside a photograph the copy is always left-aligned.
============================================================ */
body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-center .pf-cta__inner { text-align: center; }
body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-center .pf-cta__eyebrow { justify-content: center; }
body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-center .pf-cta__subtitle { margin-left: auto; margin-right: auto; }
body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-right .pf-cta__inner { text-align: right; }
body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-right .pf-cta__eyebrow { justify-content: flex-end; }
body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-right .pf-cta__subtitle { margin-left: auto; }


/* ============================================================
   §5  LARGER SCREENS
============================================================ */
@media (min-width: 576px) {
    body.tpl-plusfab_industrial .pf-cta__actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
    }
    body.tpl-plusfab_industrial .pf-cta__btn { display: inline-flex; }
    body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-center .pf-cta__actions { justify-content: center; }
    body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-right .pf-cta__actions { justify-content: flex-end; }
}

@media (min-width: 992px) {
    body.tpl-plusfab_industrial .pf-cta__inner,
    body.tpl-plusfab_industrial .pf-cta--no-image .pf-cta__inner {
        padding: 88px 0;
    }

    /* Photograph: a diagonal-cut panel on the right side. It is inset from
       the top and bottom edges (2026-10-07), so the yellow frames it as one
       panel of the CTA. Flush to the top edge it ran straight on from a
       photograph ending the section above (a service band with its image on
       the right), and the two read as one tall picture. */
    body.tpl-plusfab_industrial .pf-cta__media {
        position: absolute;
        top: 40px;
        right: 0;
        bottom: 40px;
        width: 44%;
        height: auto;
        clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%);
    }
    body.tpl-plusfab_industrial .pf-cta--has-image .pf-cta__inner {
        width: 54%;
    }

    /* No photograph: a large outlined "+" on the right. */
    body.tpl-plusfab_industrial .pf-cta--no-image .pf-cta__container::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 0;
        z-index: -1;
        transform: translateY(-52%);
        font-family: var(--mt-font-heading);
        font-size: 26rem;
        font-weight: 800;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 3px rgba(21, 23, 26, 0.16);
        pointer-events: none;
    }
    /* A centred CTA keeps the "+" out of the way of the text. */
    body.tpl-plusfab_industrial .pf-cta--no-image.pf-cta--align-center .pf-cta__container::after {
        right: -4%;
        font-size: 22rem;
    }
}

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