/* ═════════════════════════════════════════════════════════════════
   Category cards — three cards per content panel showing
   Structure, Transition, and Motion categories.
   ═════════════════════════════════════════════════════════════════ */

:root {
    --category-card-gap: 2vw;        /* space between cards */
    --card-text-size: clamp(9px, 1.02vw, 17px);  /* shared card body text */
}

/* ── Card row ─────────────────────────────────────────── */
.category-cards {
    display: flex;
    flex: 1;
    gap: var(--category-card-gap);
    min-height: 0;
}

/* ── Individual card ──────────────────────────────────── */
.category-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(107, 63, 105, 0.04);
    border: 1px solid rgba(107, 63, 105, 0.12);
    border-radius: 4px;
    padding: 1.2vw;
    box-sizing: border-box;
    pointer-events: auto;
}

.category-card__heading {
    font-family: var(--font-nav);
    font-size: clamp(11px, 1.25vw, 20px);
    font-weight: 700;
    color: var(--purple-dark);
    margin: 0 0 0.6vw;
    flex-shrink: 0;
}

.category-card__text {
    font-size: var(--card-text-size);
    line-height: 1.5;
    color: var(--purple-dark);
    margin: 0 0 0.8vw;
    /* Fill the space between heading and image so the images
       align across cards regardless of blurb length. */
    flex-grow: 1;
    text-align: justify;
}

.category-card__image {
    aspect-ratio: 1;
    width: 100%;
    flex-shrink: 1;   /* give up height when the card runs short,
                         instead of spilling out the bottom */
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(107, 63, 105, 0.04);
    border: 1px dashed var(--purple-light);
    border-radius: 3px;
    overflow: hidden;
}

.category-card__image img,
.category-card__image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}