/*
|--------------------------------------------------------------------------
| Home page — credentials band (RVIA + Mercedes-Benz eXpertUpfitter)
|--------------------------------------------------------------------------
| Two accreditation cards between the "Why Choosing the Right Van Builder"
| block and the EX3 video section. Replaces the legacy .rvia-eu / .rvia / .eu
| rules that used to live in m072224.css — those were home-page-only, so they
| were removed rather than left as cruft. (Do not confuse them with
| .rvia-eu-img / .rvia-img / .rvia-process / .eu-process, which are the
| standalone rvia.php and expert-upfitter.php pages and are still in use.)
|
| Container metrics come from footer.css, not from the .ex3-w system the
| video sections use. That is deliberate and it means this band is WIDER than
| the video blocks that bracket it — it shares its column with the "why
| choose" block above and the contact band below, which is the run of
| footer-width sections that closes the page.
|
| Glass recipe is restated from home-contact.css (.hc-card) rather than
| depending on it, for the same reason that file restates it from
| contact-page.css — a band should not break because a page dropped an
| unrelated stylesheet.
|
| The sitewide `* {}` reset in m072224.css forces a colour (var(--c3)) onto
| every element, and h3 additionally carries a global uppercase + size, so
| every text rule below restates its own size / weight / colour / tracking.
*/

/* No background — the band sits straight on the page, like .hc below it.
   Side padding + inner cap mirror footer.css exactly (footer.footer padding +
   .footer-max), including the three steps at the bottom of this file, so this
   band, the "why choose" block above it and the contact band below all share
   the footer's column. */
/* 1.75rem block padding — the shared vertical rhythm for this run of sections;
   the video blocks (.inline-video .ex3-w) and .vcb carry the same, so every
   gap between them measures the same 56px. */
.creds {
    padding: 1.75rem 6rem;
}

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

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

/* Whole card is the link, not just the logo as before: a 2-line paragraph
   next to a mark is a poor click target, and making the card the anchor is
   also what lets the chevron slide on card hover, since cta.css keys that
   animation off `a:hover`. */
/* Mark in its own column beside the copy, not stacked above it. At footer
   width a stacked card left the paragraph ending well short of the right
   edge with dead space beside it; running them as a row puts the copy across
   the full remaining width.

   The mark column is sized by WIDTH, not height. Height would give the two
   logos equal optical weight but unequal column widths, which would start
   the two cards' text at different x — the row layout makes shared column
   width the thing worth holding. The two marks have different aspect ratios
   (~1.7 vs ~2.35), so they end up slightly different heights; that reads far
   better than misaligned text. */
.creds-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(1.25rem, 2.4vw, 2rem);
    padding: clamp(1.75rem, 3vw, 2.5rem);

    /* Held back on purpose. These are supporting credentials, not a headline
       feature, and the earlier weight — a brighter tint over a 40px drop
       shadow — made them the loudest thing on this run of the page. The tint
       is roughly halved, the border softened, and the drop shadow dropped
       entirely; the inset top highlight alone is enough to read as a raised
       surface against the page. */
    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;

    color: inherit;
    text-decoration: none;

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

.creds-card:hover,
.creds-card:focus-visible {
    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%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.creds-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.28);
    outline-offset: 3px;
}

/* Logo plate. The two marks are different shapes and weights, so they are
   seated in a fixed-height lane and sized by height — left to their own
   intrinsic sizes they read as two different scales side by side. */
.creds-card__mark {
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(5rem, 8vw, 6.75rem);
    min-height: 3.25rem;
}

.creds-card__mark img {
    width: 100%;
    height: auto;
    object-fit: contain;

    /* Both marks ship as flat white artwork; this keeps them from reading
       brighter than the heading beneath. */
    opacity: 0.8;
}

/* Deliberately NOT the global uppercase h3 (m072224.css): the newer home
   layer moved away from it (.hc__title in home-contact.css sets
   text-transform: none), and uppercasing here would also flatten the
   Mercedes-Benz "eXpertUpfitter" brand casing into EXPERTUPFITTER. Recipe
   below mirrors .hc__title, scaled down for a card. */
.creds-card__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-transform: none;
    text-wrap: balance;
}

/* Text column fills the card. The cap is only a runaway guard for the 1600px
   layout — at ordinary widths the column is narrower than this, so the copy
   runs to the card's inner edge rather than stopping short of it. */
/* Flex column, not a fixed 3-row grid: each card carries more than one
   paragraph now, and a row template would have to be edited every time the
   copy grows. `margin-top: auto` on the link below does the bottom-pinning
   the 1fr row used to. */
.creds-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.creds-card__copy {
    display: block;
    margin: 0;
    max-width: 60ch;
    color: #c4c6cc;
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

/* Reads as a link without being one — the card is the anchor, so a nested
   <a> here would be invalid. */
/* Held just under white at rest so hover has somewhere to go. The accent is
   deliberately a brightness step rather than a hue: the red tint this used to
   borrow from .hc-row:hover put a second red on a card that already sits a
   few hundred pixels from the red CTAs, and it fought them. */
/* Carries .tv-cta.tv-cta--ghost (cta.css) for its skin, so only layout belongs
   here — cta.css loads last and owns the pill's size, type and colour.

   It is a <span>, not an <a>: the whole card is already the link, and nesting
   an anchor inside an anchor is invalid. That also means cta.css's
   `a.tv-cta--ghost:hover` guards never match it, which is why the card-hover
   state is restated below.

   margin-top: auto pins it to the bottom of the card, so the two cards' links
   line up even though their copy runs to different lengths. */
.creds-card__more {
    align-self: start;
    margin-top: auto;
}

/* form-overlay.css pins .cta-icon-right to #fff, which would leave the chevron
   bright while the label sits at 0.72. (0,2,0) beats that regardless of load
   order, so the two brighten together. */
.creds-card__more .cta-icon-right {
    color: inherit;
}

/* Hovering anywhere on the card should light the pill, but the pointer is
   usually nowhere near it — so mirror the ghost hover from the card. Values
   are cta.css's own tokens rather than copies, so the two cannot drift.
   (0,2,0) clears the bare .tv-cta--ghost rule. */
.creds-card:hover .creds-card__more,
.creds-card:focus-visible .creds-card__more {
    border-color: var(--tv-cta-ghost-border-hover);
    background: var(--tv-cta-ghost-bg-hover);
    box-shadow: var(--tv-cta-ghost-shadow-hover);
    color: #ffffff;
}

.creds-card:hover .creds-card__more::before,
.creds-card:focus-visible .creds-card__more::before {
    opacity: 0.9;
}

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

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

    .creds__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .creds-card__copy {
        font-size: 1rem;
    }
}

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

    .creds-card__mark {
        height: 3.5rem;
    }
}