/* =================================================================== CARDS section css =================================================================== */
/* Generic card grid for inner pages, icon in a top-right notch (product rows, principles, roles,
   contact details). 3 columns by default; .cards--2 / .cards--4 change it. */
.cards {
    /* room the copy leaves for the corner badge: badge + notch padding */
    --notch-space: 80px;

    & .cards__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--g30);
    }

    &.cards--2 .cards__grid { grid-template-columns: repeat(2, 1fr); }
    &.cards--4 .cards__grid { grid-template-columns: repeat(4, 1fr); }

    & .cards__card {
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--sp15);
        padding: var(--sp40) var(--sp35) var(--sp35);
        background: var(--white);
        border-radius: var(--r-lg);
        transition: var(--transition);

        &:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
        &:hover .notch-badge { background: var(--primary); color: var(--white); }
    }

    & .cards__notch .notch-badge { width: 60px; height: 60px; color: var(--primary); }

    /* keep copy clear of the top-right notch */
    & .cards__card > p { padding-right: var(--notch-space); }

    & .cards__title {
        padding-right: var(--notch-space);
        font-size: var(--f25);
    }

    & .cards__tags-label {
        display: block;
        margin-top: var(--sp5);
        font-size: var(--f12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--primary);
    }

    & .cards__tags {
        display: flex; flex-wrap: wrap;
        gap: var(--sp5);
    }

    & .cards__foot { margin-top: auto; padding-top: var(--sp10); }

    & .cards__value {
        font-family: var(--font-mona);
        font-size: var(--f18);
        font-weight: 500;
        color: var(--ink);
        word-break: break-word;

        &:is(a):hover { color: var(--primary); }
    }

    & .cards__note {
        max-width: 760px;
        margin: var(--sp35) auto 0;
        text-align: center;
    }
}

/* =================================================================== CARDS responsive =================================================================== */
@media (max-width: 1199.98px) {
    .cards {
        &.cards--4 .cards__grid { grid-template-columns: repeat(2, 1fr); }
    }
}

@media (max-width: 991.98px) {
    .cards {
        & .cards__grid { grid-template-columns: repeat(2, 1fr); }
    }
}

@media (max-width: 575.98px) {
    .cards {
        & .cards__grid { grid-template-columns: 1fr; }
        &.cards--2 .cards__grid,
        &.cards--4 .cards__grid { grid-template-columns: 1fr; }
        --notch-space: 64px;

        & .cards__card { padding: var(--sp35) var(--sp25) var(--sp30); }
        & .cards__notch .notch-badge { width: 48px; height: 48px; }
    }
}