/* ============================================================
   PLUSFAB -- "BRIGHT STEEL" GALLERY (2026-10-07)
   ------------------------------------------------------------
   A presentation layer over moretech-gallery.css. Loaded after it;
   every rule carries the body.tpl-plusfab_industrial prefix, so it
   outranks the older, unprefixed layers in that file (the base and
   the dark "Showroom" layer of 2026-10-01).

   partials/gallery.php is NOT changed: same markup, same content
   contract (eyebrow / heading / lead / items[] with src, alt, type,
   video_url, video_file, video_source, fit), same presets, same
   shared lightbox hooks (img[data-glb], a[data-glb-video] inside
   [data-gallery-lightbox]). Nothing here covers a tile with a layer
   that takes clicks: every pseudo-element is pointer-events:none.

   What changes: the section is white instead of dark graphite; the
   header uses the same label + heading as the other sections; the
   photographs are larger; the per-tile index chips, the copper
   rules and the brushed backgrounds are gone. What a tile keeps: one
   cut corner, a yellow frame on hover/focus, its caption, and -- on
   a video -- one yellow play plate.

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

body.tpl-plusfab_industrial .mt-gallery {
    --pf-ink:    var(--mt-brand-primary, #15171A);
    --pf-yellow: var(--mt-accent, #FFCC00);
    padding: 56px 0;
    background-color: #FFFFFF;
    background-image: none;
    color: var(--pf-ink);
}


/* ============================================================
   §1  HEADER -- same label + heading as the other sections
============================================================ */
body.tpl-plusfab_industrial .mt-gallery__header {
    max-width: 760px;
    margin: 0 0 32px;
    padding-bottom: 0;
    border-bottom: 0;
    text-align: left;
}
body.tpl-plusfab_industrial .mt-gallery__header::after { content: none; }

body.tpl-plusfab_industrial .mt-gallery__eyebrow {
    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;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .mt-gallery__eyebrow::before {
    width: 12px;
    height: 12px;
    background: var(--pf-yellow);
    box-shadow: 4px 4px 0 var(--pf-ink);
}

body.tpl-plusfab_industrial .mt-gallery__heading {
    margin: 0 0 var(--mt-space-3, 12px);
    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);
    overflow-wrap: anywhere;
}
/* A <span> in the heading gets the yellow marker (as in the Hero), in
   place of accent-coloured text, which has no readable value on white. */
body.tpl-plusfab_industrial .mt-gallery__heading span {
    padding: 0 0.08em;
    color: inherit;
    background-image: linear-gradient(var(--pf-yellow), var(--pf-yellow));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.42em;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
body.tpl-plusfab_industrial .mt-gallery__lead {
    max-width: 56ch;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--mt-neutral-600, #555C63);
}


/* ============================================================
   §2  TILES -- shared by both presets
============================================================ */
body.tpl-plusfab_industrial .mt-gallery__item {
    border: 0;
    border-radius: 0;
    background-color: var(--mt-neutral-100, #EEF0F2);
    background-image: none;
    color: var(--pf-ink);
    /* One cut corner. The yellow hover/focus frame is an inset outline,
       so the cut clips it along the same edge. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    outline: 3px solid transparent;
    outline-offset: -3px;
}
body.tpl-plusfab_industrial a.mt-gallery__item,
body.tpl-plusfab_industrial a.mt-gallery__item:hover,
body.tpl-plusfab_industrial a.mt-gallery__item:focus { color: var(--pf-ink); }
body.tpl-plusfab_industrial .mt-gallery__item:hover,
body.tpl-plusfab_industrial .mt-gallery__item:focus-visible,
body.tpl-plusfab_industrial .mt-gallery__item:focus-within {
    outline-color: var(--pf-yellow);
}

/* No per-tile index chip. */
body.tpl-plusfab_industrial .mt-gallery__item::before { content: none; }

body.tpl-plusfab_industrial .mt-gallery__placeholder { color: var(--mt-neutral-500, #6B737A); }

/* Video: ONE marker -- a yellow play plate in the centre. The small
   "Video" badge stays in the markup for assistive technology only. */
body.tpl-plusfab_industrial .mt-gallery__video-badge {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
body.tpl-plusfab_industrial .mt-gallery__item--video::after {
    width: 56px;
    height: 56px;
    border: 0;
    background: var(--pf-yellow);
    font-size: 1.05rem;
    color: var(--pf-ink);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    transition: background-color var(--mt-duration-normal) var(--mt-ease-default),
                color var(--mt-duration-normal) var(--mt-ease-default);
}
body.tpl-plusfab_industrial .mt-gallery__item--video:hover::after,
body.tpl-plusfab_industrial .mt-gallery__item--video:focus-visible::after {
    background: var(--pf-ink);
    color: var(--pf-yellow);
}


/* ============================================================
   §3  PRESET: PHOTO -- larger photographs, featured lead
   Phones: one column. 480px+: two. 992px+: three, with the first
   photograph spanning two columns and two rows.
============================================================ */
body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__item {
    aspect-ratio: 4 / 3;
}
body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__item--featured {
    grid-column: auto;
    grid-row: auto;
}

/* Caption: white on a dark scrim at the foot of the photograph (shown
   on hover; always shown on touch screens -- existing behaviour). */
body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__caption {
    padding: var(--mt-space-10, 40px) 32px var(--mt-space-4, 16px) var(--mt-space-4, 16px);
    background: linear-gradient(to top, rgba(13, 15, 17, 0.88), rgba(13, 15, 17, 0));
    font-size: 0.9rem;
    font-weight: 700;
    color: #FFFFFF;
}
body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__caption::before { content: none; }
body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__item--featured .mt-gallery__caption {
    font-size: 1.05rem;
}


/* ============================================================
   §4  PRESET: SHOWCASE / SIGNATURE -- large photograph + caption bar
============================================================ */
body.tpl-plusfab_industrial .mt-gallery--showcase .mt-gallery__grid { gap: 20px; }
body.tpl-plusfab_industrial .mt-gallery--showcase .mt-gallery__item {
    border: 0;
    background-color: var(--mt-surface-sunken, #F6F7F8);
}
body.tpl-plusfab_industrial .mt-gallery--showcase .mt-gallery__item img,
body.tpl-plusfab_industrial .mt-gallery--showcase .mt-gallery__placeholder {
    background-color: var(--mt-neutral-100, #EEF0F2);
}
body.tpl-plusfab_industrial .mt-gallery--showcase .mt-gallery__caption {
    padding: 14px 32px 16px 18px;
    border-top: 0;
    background: var(--mt-surface-sunken, #F6F7F8);
    box-shadow: inset 4px 0 0 var(--pf-yellow);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--pf-ink);
}
body.tpl-plusfab_industrial .mt-gallery--showcase .mt-gallery__caption::before { content: none; }


/* ============================================================
   §5  SHARED LIGHTBOX -- contrast on the yellow hover state
   (moretech-gallery.css §6 themes the viewer for this template; its
   hover turned the button yellow under a white glyph.)
============================================================ */
body.tpl-plusfab_industrial .glb-btn:hover,
body.tpl-plusfab_industrial .glb-btn:focus-visible {
    background: var(--mt-accent, #FFCC00);
    border-color: var(--mt-accent, #FFCC00);
    color: #15171A;
}
body.tpl-plusfab_industrial .glb-counter { border-left-color: var(--mt-accent, #FFCC00); }


/* ============================================================
   §6  LARGER SCREENS
============================================================ */
@media (min-width: 480px) {
    body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Two columns: the lead photograph takes the full row. */
    body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__item--featured {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 768px) {
    body.tpl-plusfab_industrial .mt-gallery { padding: 80px 0; }
    body.tpl-plusfab_industrial .mt-gallery__header { margin-bottom: 44px; }
    body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__grid { gap: 16px; }
    body.tpl-plusfab_industrial .mt-gallery--showcase .mt-gallery__grid { gap: 28px 24px; }
}

@media (min-width: 992px) {
    body.tpl-plusfab_industrial .mt-gallery { padding: 104px 0; }
    body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
    /* Three columns: the lead photograph spans 2 x 2 and fills that area. */
    body.tpl-plusfab_industrial .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__item--featured {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tpl-plusfab_industrial .mt-gallery__item,
    body.tpl-plusfab_industrial .mt-gallery__item img,
    body.tpl-plusfab_industrial .mt-gallery__item--video::after { transition: none; }
    body.tpl-plusfab_industrial .mt-gallery__item:hover img { transform: none; }
}