/* ============================================================
   MORETECH -- GALLERY (Ally-native round, 2026-09-22)
   First-party markup + CSS (see partials/gallery.php's own header for the
   full rationale). Every recurring visual value is a real --mt-*/--ally-*
   token -- no new color system.

   Design language: deliberately NOT another white-card grid (About/
   Services/Why Choose Us/Testimonials already own that language).
   Gallery is photography-first -- quiet, borderless, edge-to-edge image
   tiles with a restrained rounded corner; no card surface, no shadow at
   rest. Two genuinely different purposes, not a cosmetic reskin of one
   layout:
     'photo'    -- dense, scannable photo wall. A featured first tile
                 (2x2, reusing the real idea engineering-one's own
                 gallery.php already proved in this exact module,
                 re-tokened here rather than invented fresh) anchors the
                 grid; a soft navy caption scrim reveals each item's own
                 `alt` text on hover only -- restrained, not persistent.
     'showcase' -- fewer, larger, editorial tiles with a PERSISTENT
                 caption underneath each image (readability > overlay),
                 matching the Director's own "readability > decoration"
                 framing for this preset.
   'signature' maps onto 'showcase' at the renderer level (unchanged,
   shared contract) -- there is no third CSS treatment here.

   Class hooks: .mt-gallery, .mt-gallery__header/__eyebrow/__heading/
   __lead/__grid/__item/__item--video/__item--featured/__placeholder/
   __placeholder--video/__video-badge/__caption, and the --showcase
   modifier.
   ============================================================ */

.mt-gallery {
    padding: var(--mt-section-py) 0;
    background: var(--mt-page-bg);
    font-family: var(--mt-font-sans);
    /* Ally identity / Studio fix: explicit base color so .mt-gallery__heading
       can read currentColor and a Studio self.color edit actually reaches
       it -- same fix already applied to every earlier module's own title. */
    color: var(--mt-text-strong);
}

.mt-gallery__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--mt-space-10);
}

/* Fixed Ally accent, not currentColor -- matching every other Ally
   eyebrow (Hero/About/Services/Process Flow/Why Choose Us/Testimonials):
   a consistent brand-signature color, not running text. */
.mt-gallery__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--ally-blue-500);
    margin-bottom: var(--mt-space-4);
}

.mt-gallery__eyebrow::before {
    content: "";
    width: var(--mt-kicker-rule);
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

.mt-gallery__heading {
    font-size: var(--mt-text-3xl);
    font-weight: var(--mt-weight-black);
    color: currentColor;
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    margin: 0 0 var(--mt-space-3);
}

.mt-gallery__lead {
    font-size: var(--mt-text-md);
    color: currentColor;
    opacity: 0.78;
    line-height: var(--mt-leading-relaxed);
    margin: 0;
}

/* ------------------------------------------------------------
   Grid + tiles -- shared shape, composition-specific sizing below.
   ------------------------------------------------------------ */

.mt-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mt-space-3);
}
@media (min-width: 768px) {
    .mt-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .mt-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mt-gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--mt-radius-md);
    background: var(--mt-surface-subtle);
    border: 1px solid var(--mt-border-light);
}

.mt-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--mt-duration-slow, 0.5s) var(--mt-ease-default);
}

.mt-gallery__item:hover img {
    transform: scale(1.045);
}

/* Display Mode: Contain -- whole image visible, neutral letterbox.
   Default (cover) unchanged. Same contract as the universal renderer. */
.mt-gallery__item[data-fit="contain"] img {
    object-fit: contain;
}

/* Featured lead tile -- 'photo' only, first item only, only when there
   is more than one item. A real anchor for the dense grid, not a
   generic uniform wall. */
.mt-gallery__item--featured {
    grid-column: span 2;
    grid-row: span 2;
}

.mt-gallery__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: var(--mt-space-2);
    color: var(--mt-text-subtle);
}
.mt-gallery__placeholder i { font-size: 1.8rem; }
.mt-gallery__placeholder span { font-size: var(--mt-text-xs); text-align: center; padding: 0 var(--mt-space-3); }

/* Fixed Ally navy accent -- the same signature color used for every
   other module's small accent node (badges, icon chips), not currentColor. */
.mt-gallery__video-badge {
    position: absolute;
    top: var(--mt-space-2);
    left: var(--mt-space-2);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-semibold);
    color: var(--mt-text-inverse);
    background: var(--mt-brand-primary);
    padding: 3px 10px;
    border-radius: var(--mt-radius-full);
}

/* Caption -- reuses the real `alt` field, never a new one. 'photo':
   a soft navy scrim overlay, hover-only reveal (quiet at rest, the
   photography stays the focus). 'showcase' overrides this further down
   into a persistent, in-flow caption instead. */
.mt-gallery__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--mt-space-4) var(--mt-space-3) var(--mt-space-2);
    background: linear-gradient(to top, rgba(20, 33, 61, 0.85), transparent);
    color: var(--mt-text-inverse);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-medium);
    line-height: var(--mt-leading-snug);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
    pointer-events: none;
}
.mt-gallery__item:hover .mt-gallery__caption,
.mt-gallery__item:focus-visible .mt-gallery__caption {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------
   Composition: showcase -- fewer, larger, editorial tiles. Readability
   over decoration: a taller frame, no featured-tile device (every tile
   already reads as a considered choice), and the caption becomes a
   real, persistent, in-flow line under the image rather than an overlay
   that would compete with a larger photo.
   ------------------------------------------------------------ */

.mt-gallery--showcase .mt-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mt-space-6);
}
@media (min-width: 768px) {
    .mt-gallery--showcase .mt-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mt-gallery--showcase .mt-gallery__item {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    background: transparent;
    border: none;
    border-radius: 0;
}

.mt-gallery--showcase .mt-gallery__item img,
.mt-gallery--showcase .mt-gallery__placeholder {
    aspect-ratio: 3 / 2;
    border-radius: var(--mt-radius-lg);
}
.mt-gallery--showcase .mt-gallery__placeholder {
    background: var(--mt-surface-subtle);
    border: 1px solid var(--mt-border-light);
}

.mt-gallery--showcase .mt-gallery__caption {
    position: static;
    background: none;
    color: currentColor;
    opacity: 0.78;
    transform: none;
    padding: var(--mt-space-3) 0 0;
    pointer-events: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    .mt-gallery {
        padding: var(--mt-section-py-sm) 0;
    }
    .mt-gallery__heading {
        font-size: var(--mt-text-2xl);
    }
    .mt-gallery__header {
        margin-bottom: var(--mt-space-8);
    }
    /* Featured tile stacks like every other item on mobile -- same
       reset convention every earlier module's own featured/first-child
       device already uses. */
    .mt-gallery__item--featured {
        grid-column: span 1;
        grid-row: span 1;
    }
}


/* ============================================================
   PLUSFAB GALLERY -- "SHOWROOM" (2026-10-01, design only).
   Appended presentation layer over the unchanged partial: images,
   uploaded / YouTube / Vimeo video, cover|contain fit, presets
   (photo | showcase | signature -> showcase) and the shared lightbox
   contract (img[data-glb] / a[data-glb-video] inside
   [data-gallery-lightbox]) all keep working. CLICK SAFETY: every
   decorative layer added here is pointer-events:none; the hover frame
   is an outline (never intercepts clicks).
   1. Dark graphite showroom section (brushed grain) so project
      photography carries the page; PlusFab header (steel label +
      copper rule, white Archivo heading, copper <span> highlight,
      steel rule with copper segment).
   2. Every tile is a mounted plate: steel edge, portfolio index chip
      (01, 02 ... CSS counter) with a copper edge, copper hover frame,
      dark brushed backing so Fit(Contain) screenshots read as mounted.
   3. Video tiles: large central play plate (copper on hover) + a square
      "Video" plate with a copper glyph.
   4. photo preset: dense wall, 2x2 featured lead, Archivo captions with
      a copper rule slide up on hover (always visible on touch).
   5. showcase/signature: large presentation plates -- 16:10 image + a
      persistent caption bar; with an ODD item count the first becomes a
      full-width 21:9 lead plate (no orphan).
   6. Shared lightbox themed to match (template-scoped).
============================================================ */

/* 1. Section + header */
.mt-gallery {
    position: relative;
    padding: var(--mt-space-20) 0;
    background-color: var(--ally-navy-900);
    background-image: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.016) 0 1px,
        rgba(255, 255, 255, 0) 1px 4px);
    color: #FFFFFF;
}
.mt-gallery__header {
    position: relative;
    text-align: left;
    max-width: none;
    margin: 0 0 var(--mt-space-12);
    padding-bottom: var(--mt-space-8);
    border-bottom: 1px solid rgba(197, 203, 208, 0.16);
}
.mt-gallery__header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 2px;
    background: var(--mt-accent);
}
.mt-gallery__eyebrow {
    font-size: 0.75rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.16em;
    color: #B9BFC5;
}
.mt-gallery__eyebrow::before { background: var(--mt-accent); }
.mt-gallery__heading {
    font-family: var(--mt-font-heading);
    font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
    font-weight: var(--mt-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: var(--mt-space-4);
    text-wrap: balance;
}
.mt-gallery__heading span { color: var(--mt-accent); }
.mt-gallery__lead {
    max-width: 62ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #B9BFC5;
    opacity: 1;
}

/* 2. Mounted plates (shared by both presets) */
.mt-gallery__grid { counter-reset: pf-gal; }
.mt-gallery__item {
    counter-increment: pf-gal;
    border-radius: 2px;
    border: 1px solid rgba(197, 203, 208, 0.16);
    background-color: #1A1D21;
    background-image: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.02) 0 1px,
        rgba(255, 255, 255, 0) 1px 4px);
    color: #FFFFFF;
    text-decoration: none;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color var(--mt-duration-normal) var(--mt-ease-default),
                border-color var(--mt-duration-normal) var(--mt-ease-default);
}
a.mt-gallery__item,
a.mt-gallery__item:hover,
a.mt-gallery__item:focus { color: #FFFFFF; text-decoration: none; }
.mt-gallery__item:hover,
.mt-gallery__item:focus-visible {
    outline-color: var(--mt-accent);
    border-color: transparent;
}
.mt-gallery__item img { transition: transform 0.6s var(--mt-ease-default); }
.mt-gallery__item:hover img { transform: scale(1.04); }
.mt-gallery__item[data-fit="contain"]:hover img { transform: scale(1.015); }

/* Portfolio index chip */
.mt-gallery__item::before {
    content: counter(pf-gal, decimal-leading-zero);
    position: absolute;
    top: var(--mt-space-3);
    right: var(--mt-space-3);
    z-index: 3;
    padding: 4px 8px;
    border-left: 2px solid var(--mt-accent);
    background: rgba(19, 22, 25, 0.78);
    font-family: var(--mt-font-heading);
    font-size: 0.68rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: 0.12em;
    line-height: 1.2;
    color: #FFFFFF;
    pointer-events: none;
}

/* Placeholder (no image) */
.mt-gallery__placeholder { color: #8A939B; }
.mt-gallery__placeholder span { font-family: var(--mt-font-heading); letter-spacing: 0.04em; }
.mt-gallery__placeholder--video i { visibility: hidden; }   /* the central play plate replaces it */

/* 3. Video: square "Video" plate + central play plate */
.mt-gallery__video-badge {
    top: var(--mt-space-3);
    left: var(--mt-space-3);
    z-index: 3;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 0;
    background: rgba(19, 22, 25, 0.82);
    border: 1px solid rgba(197, 203, 208, 0.28);
    font-family: var(--mt-font-heading);
    font-size: 0.66rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFFFFF;
    pointer-events: none;
}
.mt-gallery__video-badge i { color: var(--mt-accent); font-size: 0.6rem; }
.mt-gallery__item--video::after {
    content: "\f04b";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(19, 22, 25, 0.72);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2rem;
    color: #FFFFFF;
    pointer-events: none;
    transition: background-color var(--mt-duration-normal) var(--mt-ease-default),
                border-color var(--mt-duration-normal) var(--mt-ease-default);
}
.mt-gallery__item--video:hover::after,
.mt-gallery__item--video:focus-visible::after {
    background: var(--mt-accent);
    border-color: var(--mt-accent);
}

/* 4. photo preset: hover captions with a copper rule */
.mt-gallery:not(.mt-gallery--showcase) .mt-gallery__grid { gap: var(--mt-space-3); }
.mt-gallery:not(.mt-gallery--showcase) .mt-gallery__caption {
    display: flex;
    align-items: center;
    gap: var(--mt-space-2);
    z-index: 2;
    padding: var(--mt-space-10) var(--mt-space-4) var(--mt-space-4);
    background: linear-gradient(to top, rgba(13, 15, 17, 0.92), rgba(13, 15, 17, 0));
    font-family: var(--mt-font-heading);
    font-size: 0.86rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.01em;
}
.mt-gallery:not(.mt-gallery--showcase) .mt-gallery__caption::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 2px;
    background: var(--mt-accent);
}
.mt-gallery:not(.mt-gallery--showcase) .mt-gallery__item--featured .mt-gallery__caption { font-size: 1.05rem; }
@media (hover: none) {
    .mt-gallery:not(.mt-gallery--showcase) .mt-gallery__caption { opacity: 1; transform: none; }
}

/* 5. showcase / signature: presentation plates */
.mt-gallery--showcase .mt-gallery__grid { gap: var(--mt-space-8) var(--mt-space-6); }
.mt-gallery--showcase .mt-gallery__item {
    container-type: inline-size;
    border: 1px solid rgba(197, 203, 208, 0.16);
    background-color: #1A1D21;
    overflow: hidden;
}
.mt-gallery--showcase .mt-gallery__item img,
.mt-gallery--showcase .mt-gallery__placeholder {
    aspect-ratio: 16 / 10;
    border-radius: 0;
    background-color: #131619;
}
.mt-gallery--showcase .mt-gallery__placeholder { border: 0; }
.mt-gallery--showcase .mt-gallery__caption {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mt-space-3);
    padding: var(--mt-space-4) var(--mt-space-5);
    border-top: 1px solid rgba(197, 203, 208, 0.14);
    background: #1A1D21;
    font-family: var(--mt-font-heading);
    font-size: 0.98rem;
    font-weight: var(--mt-weight-semibold);
    line-height: 1.35;
    color: #FFFFFF;
    opacity: 1;
    pointer-events: none;
}
.mt-gallery--showcase .mt-gallery__caption::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 2px;
    background: var(--mt-accent);
}
/* Play plate centred on the IMAGE area (not the image + caption box) */
.mt-gallery--showcase .mt-gallery__item--video::after { top: calc(100cqw * 10 / 16 / 2); }

/* Odd item count -> the first item becomes a full-width 21:9 lead plate */
@media (min-width: 768px) {
    .mt-gallery--showcase .mt-gallery__item:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
    .mt-gallery--showcase .mt-gallery__item:first-child:nth-last-child(odd) img,
    .mt-gallery--showcase .mt-gallery__item:first-child:nth-last-child(odd) .mt-gallery__placeholder { aspect-ratio: 21 / 9; }
    .mt-gallery--showcase .mt-gallery__item--video:first-child:nth-last-child(odd)::after { top: calc(100cqw * 9 / 21 / 2); }
    .mt-gallery--showcase .mt-gallery__item:first-child:nth-last-child(odd) .mt-gallery__caption { font-size: 1.1rem; }
}

/* 6. Shared lightbox, themed for this template only */
body.tpl-plusfab_industrial .glb-overlay { background: rgba(10, 12, 14, 0.95); }
body.tpl-plusfab_industrial .glb-stage { border-radius: 2px; }
body.tpl-plusfab_industrial .glb-btn {
    border-radius: 2px;
    background: rgba(19, 22, 25, 0.8);
    border-color: rgba(197, 203, 208, 0.3);
}
body.tpl-plusfab_industrial .glb-btn:hover { background: var(--mt-accent); border-color: var(--mt-accent); }
body.tpl-plusfab_industrial .glb-btn:focus-visible { outline-color: var(--mt-accent); }
body.tpl-plusfab_industrial .glb-counter {
    padding: 4px 9px;
    border-left: 2px solid var(--mt-accent);
    background: rgba(19, 22, 25, 0.8);
    font-family: var(--mt-font-heading);
    letter-spacing: 0.12em;
    color: #FFFFFF;
}
body.tpl-plusfab_industrial .glb-caption {
    font-family: var(--mt-font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* Responsive */
@media (max-width: 767px) {
    .mt-gallery { padding: var(--mt-space-12) 0; }
    .mt-gallery__header { margin-bottom: var(--mt-space-8); padding-bottom: var(--mt-space-6); }
    .mt-gallery--showcase .mt-gallery__grid { gap: var(--mt-space-5); }
    .mt-gallery__item--video::after { width: 52px; height: 52px; font-size: 1rem; }
    .mt-gallery__item::before { top: var(--mt-space-2); right: var(--mt-space-2); }
    .mt-gallery__video-badge { top: var(--mt-space-2); left: var(--mt-space-2); }
}