/* ============================================================
   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;
    }
}