/*
 * Midair Platform portal — the component link grid.
 *
 * Only what the index page needs on top of the shared theme; every colour,
 * radius and shadow below is a variable declared by
 * interpretica-overrides.css, so the cards follow the theme (including its
 * dark scheme) without restating the palette.
 */

.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}

.doc-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius-lg);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--ip-shadow-sm);
    text-decoration: none;
    transition: border-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease;
}

.doc-card:hover,
.doc-card:focus-visible {
    border-color: var(--ip-corporate);
    box-shadow: var(--ip-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.doc-card__name {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ip-corporate);
}

.doc-card__text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ip-gray-600);
}

/* Pushed to the bottom edge so the cards line up regardless of text length. */
.doc-card__more {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ip-corporate-lighter);
}

.doc-card__more::after {
    content: " \2192";
}

@media (prefers-color-scheme: dark) {
    /*
     * The theme bleaches the wordmark with `filter: brightness(0) invert(1)`
     * because it only assumes a black PNG. We ship a real white one, so swap
     * the image in and drop the filter. Guarded by @supports: where image
     * replacement via `content` is unavailable the theme's filter stays.
     */
    @supports (content: url("logo16white.png")) {
        .branding-link img,
        .site-sidebar img.logo,
        img.logo {
            content: url("logo16white.png");
            filter: none;
        }
    }

    .doc-card {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
    }

    .doc-card:hover,
    .doc-card:focus-visible {
        border-color: var(--ip-corp-d-light-gray);
    }

    .doc-card__name {
        color: var(--ip-corp-d-gray);
    }

    .doc-card__text {
        color: var(--ip-gray-300);
    }

    .doc-card__more {
        color: var(--ip-corp-d-light-gray);
    }
}