/*
 * Knowledge Hub Card
 * Part: template-parts/kh-card.php
 * Auto-enqueued by functions.php after css/theme.css.
 *
 * The tile used in every resource listing (Knowledge Hub page, topic and
 * housing provider archives, related resources). .kh-grid is the
 * responsive grid the tiles sit in. Topic pills reuse .event-tag from
 * event-card.css.
 */

.kh-grid {
    display: grid;
    /* 22rem minimum caps the full-width container at three columns, matching the events grid. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-md);
}

.kh-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    border-radius: .875rem;
    box-shadow: 0 0 20px 0 rgba(5, 26, 15, 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Secondary green rule along the top: the tile's only decoration. */
.kh-card::before {
    content: "";
    display: block;
    height: var(--space-2xs);
    background-color: var(--color-secondary);
    transition: background-color 0.3s ease-in-out;
}

.kh-card:hover {
    box-shadow: 0 0 28px 0 rgba(5, 26, 15, 0.1);
}

.kh-card:hover::before {
    background-color: var(--color-primary);
}

.kh-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.kh-card__topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.kh-card__topic {
    text-decoration: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.kh-card__topic:hover {
    color: var(--color-contrast);
    background-color: var(--color-secondary);
}

.kh-card__title {
    margin: 0;
    font-size: var(--text-2);
}

.kh-card__title-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.kh-card__title-link:hover {
    color: var(--color-secondary);
}

/* Whole tile is clickable via the title; keep the other links usable above it. */
.kh-card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.kh-card__topic,
.kh-card__link {
    position: relative;
    z-index: 1;
}

.kh-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.kh-card__meta:empty {
    display: none;
}

.kh-card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
}

.kh-card__meta-item + .kh-card__meta-item {
    padding-left: var(--space-sm);
    border-left: 2px solid var(--color-contrast);
}

.kh-card__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
}

.kh-card__meta-text {
    display: flex;
    /* "Shared by" reads as a caption above the provider name. */
    flex-direction: column-reverse;
    min-width: 0;
}

.kh-card__meta-title {
    font-size: var(--text-0);
    color: var(--color-text);
}

.kh-card__meta-detail {
    font-size: var(--text--1);
    font-weight: var(--font-light);
}

.kh-card__summary {
    margin: 0;
    font-weight: var(--font-light);
    overflow-wrap: anywhere;
}

/* Attachment box: a tinted panel flagging that the resource has a file to download. */
.kh-card__attachment {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-contrast);
    border-radius: .5rem;
}

.kh-card__attachment-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.kh-card__attachment-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kh-card__attachment-title {
    font-size: var(--text--1);
    font-weight: var(--font-heavy);
    color: var(--color-primary);
}

.kh-card__attachment-detail {
    font-size: var(--text--1);
    font-weight: var(--font-light);
}

.kh-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 2px solid var(--color-contrast);
}

.kh-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.kh-card__link:hover {
    color: var(--color-primary);
}

.kh-card__date {
    font-size: var(--text--1);
    font-weight: var(--font-light);
}

@media (prefers-reduced-motion: reduce) {

    .kh-card,
    .kh-card::before {
        transition: none;
    }

}