/* =============================================================================
   Module: link-cards  (modules/link-cards.php)
   -----------------------------------------------------------------------------
   Where to go next, as a row of cards. A white lozenge with a hairline that
   fills from the left on hover - the same gesture as .button--quiet, the
   Diagnostik tiles and .link-underline, because a thing filling from the left
   means the same everywhere on this site.

   The fill is an ELEMENT and not a pseudo-element for the same reason it is in
   those two: the words and the arrow have to sit over it, and a pseudo-element
   on the card would be behind its own text or in front of all of it.
   ============================================================================= */

.link-cards__head {
    margin-block-end: var(--space-2xl);
}

.link-cards__list {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.link-cards__card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    height: 100%;
    overflow: hidden;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
    color: var(--color-primary);
    text-decoration: none;
    transition: box-shadow var(--transition-base);
}

/* On the grey band the card's white is what separates it from the page, so the
   hairline would only be tracing an edge that is already there. */
.section--alt .link-cards__card {
    box-shadow: none;
}

.link-cards__fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.link-cards__card:hover .link-cards__fill,
.link-cards__card:focus-visible .link-cards__fill {
    transform: scaleX(1);
}

/* Over the fill. */
.link-cards__body,
.link-cards__arrow {
    position: relative;
    z-index: 1;
}

.link-cards__body {
    flex: 1 1 auto;
}

.link-cards__title {
    display: block;
    color: var(--color-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

.link-cards__text {
    display: block;
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* The muted grey is a black at 64% and turns to mud over the accent. On the
   filled card both lines take the primary blue, which carries on it. */
.link-cards__card:hover .link-cards__text,
.link-cards__card:focus-visible .link-cards__text {
    color: var(--color-primary);
}

.link-cards__arrow {
    flex: none;

    /* On the cap height of the title rather than on the top of its box. */
    margin-block-start: 0.5em;
    transition: transform var(--transition-base);
}

.link-cards__card:hover .link-cards__arrow,
.link-cards__card:focus-visible .link-cards__arrow {
    transform: translateX(0.25rem);
}