.activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
    align-items: start;
}

.activity-card, .activity-card-preview .card-body {
    display: flex;
    flex-direction: column;
}

.activity-card {
    overflow: hidden;
}

.card-body {
    padding: var(--spacing-lg) var(--spacing-xs) var(--spacing-md);
}

.card-body > h3 {
    margin-bottom: var(--spacing-md);
    overflow-wrap: anywhere;
}

.card-image {
    order: -1;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--soft);
    border-radius: var(--radius-xs);
}

.card-image-fallback {
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--soft);
    font: italic var(--font-3xl)/var(--leading-heading) var(--display);
    color: var(--accent);
}

.activity-grid .activity-card {
    height: 100%;
}

.activity-grid .card-body {
    flex: 1;
}

.card-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: var(--font-sm);
    margin-bottom: var(--spacing-md);
}

.image-credit {
    margin-top: var(--spacing-md);
}

.activity-card-preview {
    padding: var(--spacing-sm);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--motion-slow) var(--ease), background-color var(--motion-slow) var(--ease), box-shadow var(--motion-slow) var(--ease), translate var(--motion-slow) var(--ease);
}

.activity-card-preview .card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
}

.activity-card-preview .card-body {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
}

.activity-card-preview .image-credit {
    margin: 0 0 var(--spacing-md);
}

.activity-card-preview .card-schedule {
    position: absolute;
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    max-width: calc(100% - var(--spacing-md) * 2);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-pill);
    background: var(--overlay);
    color: var(--accent);
    font-size: var(--font-2xs);
    backdrop-filter: blur(var(--spacing-sm));
}

.activity-card-preview .card-link {
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: var(--border-width) solid var(--line);
    font-size: var(--font-xs);
    text-decoration: none;
}

.activity-card-preview .link-icon {
    background: var(--selected);
}

.activity-card-preview:focus-within {
    border-color: var(--sage);
}

@media (hover: hover) and (pointer: fine) {
    .activity-card-preview:hover {
        border-color: var(--line);
        background: var(--paper);
        box-shadow: var(--shadow-md);
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .activity-card-preview:hover {
        translate: 0 calc(-1 * var(--spacing-xs));
    }
}

@media (max-width: 1024px) {
    .activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .activity-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .card-body {
        padding: var(--spacing-md) var(--spacing-xs);
    }
}