/**
 * Software Download Hub — front-end styles.
 * Palette & shapes follow the reference site: deep blue primary, orange
 * accent, generously rounded white cards with soft shadows, pill-shaped
 * category selectors. Every color/radius/column value below has a
 * `var(--sdh-*, fallback)` so a single widget instance can override it
 * inline (see DisplaySettings::cssVariables()) without touching this file.
 */

.sdh-directory {
    --sdh-primary: #1a56db;
    --sdh-accent: #f97316;
    --sdh-radius: 16px;
    --sdh-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
    --sdh-bg: #f4f7fc;
    --sdh-text: #0f172a;
    --sdh-muted: #64748b;
    --sdh-border: #e6eaf2;
    --sdh-cols-desktop: 4;
    --sdh-cols-tablet: 3;
    --sdh-cols-mobile: 2;

    box-sizing: border-box;
    color: var(--sdh-text);
    font-family: inherit;
    max-width: 100%;
    padding-block: 8px clamp(24px, 4vw, 48px);
    padding-inline: clamp(16px, 4vw, 40px);
}

.sdh-directory *,
.sdh-directory *::before,
.sdh-directory *::after {
    box-sizing: inherit;
}

.sdh-directory--empty {
    padding: 32px;
    text-align: center;
    color: var(--sdh-muted);
    background: var(--sdh-bg);
    border-radius: var(--sdh-radius);
}

.sdh-directory__title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 24px;
    text-align: center;
    color: var(--sdh-text);
}

/* ---------------------------------------------------------------- */
/* Category pill selector                                            */
/* ---------------------------------------------------------------- */

.sdh-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.sdh-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--sdh-border);
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--sdh-text);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    line-height: 1;
}

.sdh-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--sdh-shadow);
    border-color: transparent;
}

.sdh-pill.is-active {
    background: var(--sdh-primary);
    border-color: var(--sdh-primary);
    color: #fff;
}

.sdh-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 18px;
}

.sdh-pill.is-active .sdh-pill__icon.sdh-icon--preset {
    color: #fff;
}

.sdh-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--sdh-bg);
    color: var(--sdh-muted);
    font-size: .75rem;
    font-weight: 700;
}

.sdh-pill.is-active .sdh-pill__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---------------------------------------------------------------- */
/* Panels                                                             */
/* ---------------------------------------------------------------- */

.sdh-panel {
    animation: sdh-fade-in .25s ease;
}

.sdh-panel[hidden] {
    display: none;
}

@keyframes sdh-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sdh-panel__desc {
    text-align: center;
    color: var(--sdh-muted);
    margin: 0 0 24px;
    font-size: .95rem;
}

.sdh-panel__empty {
    text-align: center;
    color: var(--sdh-muted);
    padding: 32px;
    background: var(--sdh-bg);
    border-radius: var(--sdh-radius);
}

/* ---------------------------------------------------------------- */
/* Software grid + cards                                             */
/* ---------------------------------------------------------------- */

/**
 * --sdh-cols-* are set per-panel (see directory-app.php) to
 * min(configured columns, actual item count) — so a category with fewer
 * items than the configured column count never leaves an empty dangling
 * grid track, it simply lays out in that many equal, full-width columns.
 * `.sdh-card`'s max-width + `justify-items: center` below then handle the
 * remaining edge case (very few items in a very wide container) so a lone
 * card doesn't stretch edge-to-edge.
 */
.sdh-software-grid {
    display: grid;
    gap: 24px;
    justify-items: center;
    grid-template-columns: repeat(var(--sdh-cols-mobile), minmax(0, 1fr));
}

@media (min-width: 640px) {
    .sdh-software-grid {
        grid-template-columns: repeat(var(--sdh-cols-tablet), minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sdh-software-grid {
        grid-template-columns: repeat(var(--sdh-cols-desktop), minmax(0, 1fr));
    }
}

.sdh-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--sdh-border);
    border-radius: var(--sdh-radius);
    box-shadow: var(--sdh-shadow);
    padding: 28px 20px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sdh-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, .28);
}

.sdh-card__icon {
    margin-bottom: 14px;
}

.sdh-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--sdh-text);
}

.sdh-card__desc {
    font-size: .85rem;
    color: var(--sdh-muted);
    margin: 0 0 12px;
    line-height: 1.6;
}

.sdh-card__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.sdh-tag {
    background: var(--sdh-bg);
    color: var(--sdh-primary);
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.sdh-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: .78rem;
    color: var(--sdh-muted);
}

.sdh-card__meta li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sdh-card__meta .sdh-utility-icon {
    width: 15px;
    height: 15px;
}

.sdh-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    width: 100%;
}

/* ---------------------------------------------------------------- */
/* Icons                                                              */
/* ---------------------------------------------------------------- */

.sdh-icon--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    color: #fff;
    font-weight: 800;
    font-size: 1.4rem;
}

.sdh-icon--image img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 16px;
}

.sdh-icon--svg svg {
    width: 56px;
    height: 56px;
}

.sdh-icon--preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--sdh-primary);
}

.sdh-icon--preset svg,
.sdh-utility-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sdh-pill__icon.sdh-icon--preset {
    width: 20px;
    height: 20px;
    color: var(--sdh-primary);
}

.sdh-utility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: currentColor;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */

.sdh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    cursor: pointer;
}

.sdh-btn:hover {
    transform: translateY(-2px);
    opacity: .95;
}

.sdh-btn .sdh-utility-icon {
    width: 16px;
    height: 16px;
}

.sdh-btn--primary {
    background: var(--sdh-accent);
    color: #fff;
    box-shadow: 0 8px 18px -8px var(--sdh-accent);
}

.sdh-btn--ghost {
    background: transparent;
    color: var(--sdh-primary);
    border-color: var(--sdh-border);
}

.sdh-btn--ghost:hover {
    border-color: var(--sdh-primary);
}