/* ============================================================
   MORETECH -- PROJECTS PREVIEW
   First-party markup + CSS (see partials/projects_preview.php's own
   header for the full rationale). Every recurring visual value is a real
   --mt-* token.

   Design Language v2 (MoreTech craftsmanship pass): a LEFT editorial
   header, then a FEATURED-first grid -- the first project is a wide
   panel (media beside body), the rest a media-card grid with a scrim +
   category badge and an image zoom on hover. 'list' becomes a real
   reading index with a large title and a hairline rule per row -- the
   deliberate no-image reading mode. Class hooks (.mt-projects,
   .mt-projects__header/__eyebrow/__title/__subtitle/__grid/__card/
   __thumb/__badge/__body/__tag/__card-title/__card-summary/__link/__cta/
   __cta-btn, and the --list modifier) are UNCHANGED. The real
   :only-child grid-track bug fix is preserved.
   ============================================================ */

.mt-projects {
    padding: var(--mt-section-py) 0;
    background: var(--mt-page-bg);
    font-family: var(--mt-font-sans);
}

.mt-projects__header {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    gap: var(--mt-space-4) var(--mt-space-12);
    margin: 0 0 var(--mt-space-12);
}

.mt-projects__eyebrow {
    grid-column: 1 / -1;
    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(--mt-accent);
    margin-bottom: var(--mt-space-4);
}

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

.mt-projects__title {
    font-size: var(--mt-text-3xl);
    font-weight: var(--mt-weight-black);
    color: var(--mt-text-strong);
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    max-width: var(--mt-measure-head);
    margin: 0;
}

.mt-projects__subtitle {
    font-size: var(--mt-text-md);
    color: var(--mt-text-body);
    line-height: var(--mt-leading-relaxed);
    max-width: var(--mt-measure);
    margin: 0;
    padding-bottom: var(--mt-space-1);
}

.mt-projects__card-title {
    font-size: var(--mt-text-lg);
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-strong);
    line-height: var(--mt-leading-snug);
    margin: 0 0 var(--mt-space-2);
}

.mt-projects__card-summary {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-body);
    line-height: var(--mt-leading-normal);
    margin: 0 0 var(--mt-space-4);
    max-width: var(--mt-measure-tight);
}

.mt-projects__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    color: var(--mt-brand-primary);
    text-decoration: none;
    transition: gap var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects__link:hover {
    gap: var(--mt-space-3);
    text-decoration: underline;
}

/* Bottom-anchors the link within the now-flex .mt-projects__body (above)
   for every SECONDARY card -- scoped away from :first-child, whose own
   centered/justify-content:center featured treatment (below) must stay
   untouched. */
.mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__link {
    margin-top: auto;
}

/* Projects Preview design pass (2026-09-30): a bare left-aligned button
   sitting directly under the grid with only top margin read as an
   unrelated element bolted on below the section (real defect, confirmed
   by screenshot), not its natural conclusion. A hairline top rule (the
   same restrained divider language already used elsewhere -- e.g. the
   Hero split composition's own supporting-items row) plus centering
   ties it to the grid above as one closing statement instead of a
   trailing, disconnected control. */
.mt-projects__cta {
    margin-top: var(--mt-space-12);
    padding-top: var(--mt-space-8);
    border-top: 1px solid var(--mt-border-light);
    text-align: center;
}

.mt-projects__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: var(--mt-space-4) var(--mt-space-8);
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    font-weight: var(--mt-weight-semibold);
    text-decoration: none;
    box-shadow: var(--mt-elevation-raised);
    transition: background-color var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects__cta-btn:hover {
    background: var(--mt-brand-primary-hover);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Composition: grid -- REAL DESIGN REDESIGN (2026-09-30).
   ------------------------------------------------------------
   Replaces the previous "photo beside a white text box" card entirely.
   Every card is now ONE image-first panel: the real project screenshot
   fills the whole card via CSS Grid stacking (.mt-projects__thumb and
   .mt-projects__body occupy the SAME grid-area, so the body paints over
   the image regardless of DOM order -- no markup change, the existing
   thumb/body/badge/tag/link structure is reused exactly as-is), with a
   dark scrim for legibility and the text floating directly on the
   photo. The featured project gets an asymmetric floating information
   panel (bottom-right, not full width) for a deliberate case-study
   read; secondary projects get a full-width bottom caption band -- one
   coherent "editorial portfolio" language, not several competing
   effects. Scoped away from .mt-projects--list (its own plain reading-
   index stays untouched) and .mt-projects--spotlight (the Studio
   Composition Kit's own flex-based layout, a separate, independent
   system this redesign does not touch).
   ------------------------------------------------------------ */

.mt-projects__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--mt-space-8);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card {
    position: relative;
    display: block;
    overflow: hidden;
    border: none;
    border-radius: var(--mt-radius-xl);
    background: var(--ally-navy-900);
    box-shadow: 0 20px 48px -20px rgba(11, 18, 32, 0.34);
    transition: box-shadow var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 64px -20px rgba(11, 18, 32, 0.42);
}

/* Featured first project spans both columns and stands taller -- the
   primary case-study highlight. Every non-first card shares one fixed
   height regardless of project count (never a card-count-dependent
   switch -- same invariant the previous pass already established). */
.mt-projects__grid > .mt-projects__card:first-child {
    grid-column: 1 / -1;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child {
    height: clamp(420px, 56vw, 600px);
}

/* Height is intrinsic (image + content), not a fixed budget -- a fixed
   height forced the panel's own padding/gaps to compete with its text
   for room and lost (confirmed by screenshot: padding collapsed, the
   CTA sat flush against the edges). The grid's own stretch alignment
   still keeps both secondary cards the same height as each other. */

/* The image (or the no-photo placeholder) fills the entire card -- plain
   absolute positioning (no CSS Grid) is what lets the body float on top
   of it next, independently, regardless of its own content height. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform var(--mt-duration-slow) var(--mt-ease-default);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card:hover .mt-projects__thumb img {
    transform: scale(1.04);
}

/* A deliberate, textured panel when a project has no real photo yet --
   never a flat gradient box. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb {
    background:
        radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1.4px) 0 0 / 18px 18px,
        radial-gradient(ellipse 70% 60% at 85% 15%, rgba(96, 152, 224, 0.28) 0%, rgba(96, 152, 224, 0) 60%),
        linear-gradient(135deg, var(--ally-navy-700) 0%, #2C4270 100%);
}

/* Full-card scrim -- strong enough for white text anywhere on the
   image, deliberately heavier toward the bottom where the caption/
   panel sits. One consistent tint, not a per-photo guess. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,18,32,0.05) 0%, rgba(11,18,32,0.25) 45%, rgba(11,18,32,0.88) 100%);
    pointer-events: none;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__badge {
    position: absolute;
    top: var(--mt-space-4);
    left: var(--mt-space-4);
    z-index: 3;
    padding: var(--mt-space-1) var(--mt-space-3);
    border-radius: var(--mt-radius-full);
    background: rgba(255, 255, 255, 0.94);
    color: var(--ally-navy-700);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* The body floats ON the image, pinned to the bottom edge -- text lives
   directly on the photo instead of a separate white box beside/under
   it. Absolute positioning (not grid align-self) -- align-self:end
   inside an auto-sized grid row rendered the panel's content clipped/
   cut off in real testing (confirmed by screenshot: title showed, the
   summary and link below it did not); absolute against the card's own
   position:relative is the same reliable technique the featured
   panel's own override already uses successfully. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    color: var(--ally-white);
    padding: var(--mt-space-6);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-title {
    color: var(--ally-white);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__card-summary {
    color: rgba(255, 255, 255, 0.78);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__link {
    color: var(--ally-white);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__link:hover {
    color: var(--ally-blue-300);
}

/* -- Featured card: an asymmetric FLOATING panel, bottom-right, not
   full width -- the "primary case-study" read the previous pass never
   had. A solid (not glass/blurred) navy panel keeps the language
   restrained rather than layering on another effect. -- */
/* Debugging note (2026-09-30): the grid align-self/justify-self +
   margin combination this rule first tried rendered invisible -- likely
   clipped by the card's own overflow:hidden once margin was added to a
   grid-aligned item. Switched to plain, predictable absolute
   positioning instead, which is the standard technique for a panel
   floating over an image and does not interact with the card's grid
   placement at all. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body {
    position: absolute;
    right: var(--mt-space-8);
    bottom: var(--mt-space-8);
    left: auto;
    top: auto;
    width: min(420px, calc(100% - var(--mt-space-12) - var(--mt-space-12)));
    padding: var(--mt-space-6);
    background: rgba(9, 15, 28, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--mt-radius-lg);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
}

/* The featured card already carries its category via the floating pill
   badge on the image plus its own "FEATURED PROJECT" kicker below --
   the in-panel .mt-projects__tag (added for secondary cards) would
   duplicate that same category text a second time inside this panel. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__tag {
    display: none;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body::before {
    content: "FEATURED PROJECT";
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    color: var(--ally-blue-300);
    margin-bottom: var(--mt-space-4);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title {
    font-size: var(--mt-text-2xl);
    margin-bottom: var(--mt-space-3);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-summary {
    font-size: var(--mt-text-md);
    margin-bottom: var(--mt-space-5);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__link {
    margin-top: 0;
    padding: var(--mt-space-3) var(--mt-space-6);
    border-radius: var(--mt-radius-full);
    background: var(--ally-white);
    color: var(--ally-navy-700);
    width: fit-content;
    box-shadow: var(--mt-elevation-raised);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__link:hover {
    background: var(--ally-grey-200);
    color: var(--ally-navy-700);
}

/* -- Secondary cards: a real two-part surface -- an IMAGE region on top
   and a SOLID navy information panel below it, not text floating over
   the photo's own gradient. The panel is a genuine opaque surface
   (--ally-navy-800, the same token the footer already uses for its own
   "raised panel" chips) so it reads as a distinct container, clearly
   subordinate to the featured treatment but built from the same
   navy/white/blue language. -- */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) {
    display: flex;
    flex-direction: column;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__thumb {
    position: relative;
    flex: 0 0 230px;
    height: 230px;
}

/* No text sits on the photo anymore -- the heavy legibility scrim the
   shared base rule applies is no longer needed here, so the image stays
   clean and true-color, exactly as the mockup's plain "PROJECT IMAGE"
   box shows. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__thumb::after {
    content: none;
}

/* The pill badge floating on the image is replaced by the category
   TAG living inside the panel itself (see .mt-projects__tag below) --
   one category label per card, shown in the panel, not on the photo. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__badge {
    display: none;
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__body {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    flex: 1 1 auto;
    width: 100%;
    background: var(--ally-navy-800);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__tag {
    color: var(--ally-blue-300);
    margin-bottom: var(--mt-space-3);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__card-title {
    margin-bottom: var(--mt-space-3);
}

.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__card-summary {
    font-size: var(--mt-text-sm);
    margin-bottom: var(--mt-space-4);
}

/* A fixed margin, not margin-top:auto -- auto only creates space when
   the flex container has leftover room to distribute, and this panel's
   height is now intrinsic to its own content, so auto collapsed to
   zero and the button sat flush against the text above it (confirmed
   by screenshot). A real margin always holds its gap. */
.mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:not(:first-child) .mt-projects__link {
    margin-top: var(--mt-space-2);
}

/* A lone card in the auto-fit grid stretches full width; cap the track
   to a single, centred column instead (unchanged behaviour, preserved
   from the previous pass). */
.mt-projects__grid:has(.mt-projects__card:only-child) {
    grid-template-columns: min(560px, 100%);
    justify-content: center;
}

/* ------------------------------------------------------------
   Composition: list -- an editorial reading index. No thumbnail
   column (the deliberate no-image mode). v2: a large title, a small
   accent category tag, a hairline rule per row, and a row-wide hover
   shift so the whole entry reads as a link.
   ------------------------------------------------------------ */

.mt-projects--list .mt-projects__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--mt-border-light);
}

.mt-projects--list .mt-projects__card {
    flex-direction: column;
    border: none;
    border-bottom: 1px solid var(--mt-border-light);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.mt-projects--list .mt-projects__card:hover {
    box-shadow: none;
    transform: none;
}

.mt-projects--list .mt-projects__body {
    padding: var(--mt-space-8) 0;
    transition: padding-left var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects--list .mt-projects__card:hover .mt-projects__body {
    padding-left: var(--mt-space-4);
}

.mt-projects--list .mt-projects__card-title {
    font-size: var(--mt-text-2xl);
}

.mt-projects--list .mt-projects__card-summary {
    max-width: var(--mt-measure);
}

.mt-projects__tag {
    display: inline-block;
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--mt-accent);
    margin-bottom: var(--mt-space-2);
}

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

@media (max-width: 1024px) {
    .mt-projects__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--mt-space-4);
        margin-bottom: var(--mt-space-10);
    }
    .mt-projects__title {
        max-width: 26ch;
    }
    .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title {
        font-size: var(--mt-text-xl);
    }
    .mt-projects--list .mt-projects__card-title {
        font-size: var(--mt-text-xl);
    }
}

@media (max-width: 767px) {
    .mt-projects {
        padding: var(--mt-section-py-sm) 0;
    }
    .mt-projects__title {
        font-size: var(--mt-text-2xl);
    }
    .mt-projects__grid {
        grid-template-columns: 1fr;
        gap: var(--mt-space-5);
    }
    /* Featured card's floating bottom-right panel doesn't fit a narrow
       viewport -- it collapses to the same full-width bottom band the
       secondary cards already use, keeping the one overlay language
       instead of introducing a second, stacked-white-box pattern. */
    .mt-projects:not(.mt-projects--list):not(.mt-projects--spotlight) .mt-projects__grid > .mt-projects__card:first-child .mt-projects__body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        padding: var(--mt-space-6);
    }
    .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-title {
        font-size: var(--mt-text-lg);
    }
    .mt-projects__grid > .mt-projects__card:first-child .mt-projects__card-summary {
        font-size: var(--mt-text-sm);
    }
    .mt-projects--list .mt-projects__card-title {
        font-size: var(--mt-text-lg);
    }
    .mt-projects--list .mt-projects__body {
        padding: var(--mt-space-6) 0;
    }
    .mt-projects__cta {
        margin-top: var(--mt-space-8);
    }
    .mt-projects__cta-btn {
        width: 100%;
        justify-content: center;
    }
}