/**
 * The specialismen hub.
 *
 * Auto-loaded by inc/enqueue.php because the filename matches the template
 * slug. Everything here builds on the components the dienstpagina already
 * uses — the hero, the stat row, the icon tiles — so the two pages read as one
 * family. Only the card itself is new: the tiles on the homepage carry a name
 * and a count, and a hub page has room to also show what a discipline costs
 * and how long it takes.
 */

.specialismHero {
    padding-block-start: var(--space7);
}

.specialismHeroCopy {
    max-inline-size: 44rem;
}

.specialismHeroLead {
    margin-block-start: var(--space4);
}

.specialismHeroActions {
    margin-block-start: var(--space6);
}

/* --- The cards ------------------------------------------------------------- */

.specialismGrid {
    display: grid;
    gap: var(--space4);
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.specialismCard {
    display: flex;
    flex-direction: column;
    gap: var(--space4);
    padding: var(--space5);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusLg);
    background-color: var(--colorSurface);
    color: inherit;
    text-decoration: none;
    transition:
        border-color var(--durationBase) var(--easeOut),
        transform var(--durationBase) var(--easeOut);
}

.specialismCard:hover {
    border-color: var(--colorBrandBorder);
    transform: translateY(-2px);
}

.specialismCardHead {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space4);
    align-items: center;
}

.specialismCardTitle {
    display: flex;
    flex-direction: column;
    gap: var(--space1);
    min-inline-size: 0;
}

.specialismCardCount {
    font-size: var(--textXs);
    color: var(--colorInkSubtle);
}

.specialismCardKicker {
    color: var(--colorInkMuted);
}

/*
 * The facts sit on their own rule so a card without any of them — a specialism
 * whose price band nobody has filled in — simply ends after the kicker instead
 * of showing an empty strip.
 */
.specialismCardFacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space2) var(--space5);
    padding-block-start: var(--space4);
    border-block-start: 1px solid var(--colorBorder);
}

.specialismCardFact {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.specialismCardFactLabel {
    font-size: var(--textXs);
    color: var(--colorInkSubtle);
}

.specialismCardFactValue {
    font-size: var(--textSm);
    font-weight: var(--weightMedium);
    font-variant-numeric: tabular-nums;
}

/* Pushed to the bottom so every card in a row ends on the same line. */
.specialismCardMore {
    display: inline-flex;
    align-items: center;
    gap: var(--space2);
    margin-block-start: auto;
    font-size: var(--textSm);
    font-weight: var(--weightMedium);
    color: var(--colorBrand);
}

.specialismCard:hover .specialismCardMore .icon {
    transform: translateX(3px);
}

.specialismCardMore .icon {
    transition: transform var(--durationFast) var(--easeOut);
}