/*
|--------------------------------------------------------------------------
| Home page — showcase cards (Design Your Van / Models / Service & Upgrades)
|--------------------------------------------------------------------------
| The three-up nav block directly under the hero. Replaces the legacy
| .showcase-wrapper / .showcase / .showcase-img / .showcase-text rules in
| m072224.css, which index.php was the only user of.
|
| What the legacy version did that the rest of the page no longer does:
|   - capped at `max-width: 1400rem` (22,400px — i.e. no cap at all) with a
|     flat 2rem gutter, so it ran edge to edge while every other band on the
|     page sat in the footer's 1600px column;
|   - drew no card at all — image, then loose text on the page background;
|   - set each image at its natural height, so three photos of different
|     aspect ratios left the three text blocks starting at different heights;
|   - used the global uppercase h3.
|
| Now: footer column and the same 1.75rem vertical rhythm as .vcb / .creds,
| the restrained glass card from home-credentials.css, a fixed 16/10 media
| ratio so the three cards align, and the sentence-case title recipe.
|
| The sitewide `* {}` reset in m072224.css forces a colour onto every element
| and h3 carries a global uppercase + size, so every text rule below restates
| its own size / weight / colour / tracking.
*/

.s-showcase {
    padding: 1.75rem 6rem;
}

.showcase-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;

    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* Same restrained glass as .creds-card — one card system on this page.
   overflow: hidden is load-bearing: the media bleeds to the card's top edge
   and would square off the rounded corners without it. */
.showcase-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 1rem;
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.038) 0%,
            rgba(255, 255, 255, 0.016) 46%,
            rgba(255, 255, 255, 0.008) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;

    transition:
        transform 200ms ease,
        border-color 200ms ease,
        background 200ms ease;
}

.showcase-card:hover,
.showcase-card:focus-within {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.024) 46%,
            rgba(255, 255, 255, 0.012) 100%);
}

.showcase-card__media {
    display: block;
    overflow: hidden;
}

/* Fixed ratio + cover, rather than each photo's natural height: the three
   source images are not the same shape, and at natural height the three
   titles started on three different lines. */
.showcase-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;

    opacity: 0.85;
    transition:
        opacity 250ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-card:hover .showcase-card__media img,
.showcase-card:focus-within .showcase-card__media img {
    opacity: 1;
    transform: scale(1.03);
}

.showcase-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    min-width: 0;
}

/* Sentence case, matching .creds-card__title / .vcb__title — not the global
   uppercase h3 the legacy block used. */
.showcase-card__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: none;
    text-wrap: balance;
}

.showcase-card__copy {
    margin: 0;
    color: #c4c6cc;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

/* Pins the CTA to the bottom so the three line up despite different copy
   lengths. Needs (0,2,0): cta.css gives .tv-cta-row `margin-top: 1.25rem`
   and loads last, so a single-class rule here would lose the tie. */
.showcase-card__body .tv-cta-row {
    margin-top: auto;
    padding-top: 0.25rem;
}

/* ── Side padding tracks footer.css step for step ── */
@media only screen and (min-width: 1600px) {
    .s-showcase {
        padding-right: 9rem;
        padding-left: 9rem;
    }
}

@media only screen and (max-width: 1200px) {
    .s-showcase {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    /* Two up rather than straight to one: at this width a single column makes
       each card's photo enormous. */
    .showcase-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media only screen and (max-width: 760px) {
    .showcase-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 700px) {
    .s-showcase {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .showcase-card,
    .showcase-card__media img {
        transition: none;
    }

    .showcase-card:hover,
    .showcase-card:focus-within {
        transform: none;
    }

    .showcase-card:hover .showcase-card__media img,
    .showcase-card:focus-within .showcase-card__media img {
        transform: none;
    }
}