/* ============================================================
   MORETECH -- PROJECTS PREVIEW
   First-party markup + CSS (see partials/projects_preview.php's own
   header for the full rationale) -- not derived from the shared
   platform's own 03-sections-home.css (.prj-*/.projects-preview). Every
   recurring visual value is a real --mt-* token.
   ============================================================ */

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

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

.mt-projects__eyebrow {
    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-3);
}

.mt-projects__title {
    font-size: var(--mt-text-2xl);
    font-weight: var(--mt-weight-black);
    color: var(--mt-text-strong);
    margin: 0 0 var(--mt-space-3);
}

.mt-projects__subtitle {
    font-size: var(--mt-text-md);
    color: var(--mt-text-muted);
    margin: 0;
}

.mt-projects__card-title {
    font-size: var(--mt-text-md);
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-strong);
    margin: 0 0 var(--mt-space-2);
}

.mt-projects__card-summary {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-muted);
    line-height: var(--mt-leading-normal);
    margin: 0 0 var(--mt-space-3);
}

.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;
}

.mt-projects__link:hover {
    text-decoration: underline;
}

.mt-projects__cta {
    text-align: center;
    margin-top: var(--mt-space-10);
}

.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;
    transition: background var(--mt-duration-normal) var(--mt-ease-default);
}

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

/* ------------------------------------------------------------
   Composition: grid -- bordered, elevated card grid. A real
   featured_image thumbnail renders when a real install's DB
   actually has one (Studio's own local preview never supplies
   one -- manual-only, deliberately never authored here).
   ------------------------------------------------------------ */

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

.mt-projects__card {
    overflow: hidden;
    border: 1px solid var(--mt-border-light);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-surface-card);
    box-shadow: var(--mt-shadow-xs);
    transition: box-shadow var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-projects__card:hover {
    box-shadow: var(--mt-shadow-md);
    transform: translateY(-2px);
}

/* Real bug-fix precedent applied proactively (about_preview's own
   :only-child fix, testimonials' own): a lone card in this auto-fit grid
   would otherwise stretch across the full content width -- capped and
   centered up front here rather than discovered as a defect later. 2+
   cards are completely unaffected (:has()/:only-child never matches).
   Fixed at the GRID level via `:has()`, not the item level -- see
   moretech-testimonials.css's own identical fix for the full real
   evidence: neither `max-width` + `justify-self:center` nor `max-width` +
   `margin:0 auto` on the ITEM reliably reaches the cap (both switch grid
   item sizing to fit-content, which for short copy rendered a ~232px
   card, not the intended ~420px). Redefining the TRACK to a single,
   fixed-by-min() column forces it to exactly min(420px, 100%) regardless
   of content length; the item then stretches (its own default) to fill
   that already-correctly-sized track. */
.mt-projects__grid:has(.mt-projects__card:only-child) {
    grid-template-columns: min(420px, 100%);
    justify-content: center;
}

.mt-projects__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--mt-surface-sunken);
}

.mt-projects__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mt-projects__badge {
    position: absolute;
    top: var(--mt-space-3);
    right: var(--mt-space-3);
    padding: var(--mt-space-1) var(--mt-space-3);
    border-radius: var(--mt-radius-full);
    background: rgba(11, 18, 32, 0.72);
    color: #ffffff;
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-semibold);
}

.mt-projects__body {
    padding: var(--mt-space-6);
}

/* ------------------------------------------------------------
   Composition: list -- a compact, editorial reading list. No
   thumbnail column at all (see partials/projects_preview.php's
   own header for why this is a genuinely useful mode, not a
   reskin) -- category becomes a small inline tag above the title
   instead of a badge over an image that may not exist.
   ------------------------------------------------------------ */

.mt-projects--list .mt-projects__grid {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-5);
    max-width: 820px;
    margin: 0 auto;
}

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

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

.mt-projects--list .mt-projects__card:last-child {
    border-bottom: none;
}

.mt-projects--list .mt-projects__body {
    padding: var(--mt-space-5) 0;
}

.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);
}