.tna-amooz-catalog {
    --amooz-accent: var(--brand-accent, #38bdf8);
    --amooz-accent-rgb: var(--brand-accent-rgb, 56, 189, 248);
}

.tna-amooz-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.tna-course-grid {
    align-items: stretch;
}

.tna-course-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.tna-course-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    background: rgba(var(--amooz-accent-rgb), .08);
}

.tna-course-card__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: clamp(1rem, 2vw, 1.3rem);
}

.tna-course-card__body h3,
.tna-course-card__body p {
    margin: 0;
    overflow-wrap: anywhere;
}

.tna-course-card__body p {
    line-height: 1.8;
}

.tna-course-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.tna-course-card__action {
    width: 100%;
    justify-content: center;
    margin-block-start: auto;
}

.tna-course-filters {
    display: grid;
    gap: 1rem;
    margin-block-end: clamp(1.2rem, 3vw, 2rem);
}

.tna-course-filters__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tna-course-filters__head > div {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.tna-course-filters__head strong {
    color: var(--tnx-text);
    font-size: 1rem;
}

.tna-course-filters__head small {
    color: var(--tnx-muted);
    line-height: 1.7;
}

.tna-course-filters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.tna-course-filters__grid label {
    display: grid;
    min-width: 0;
    gap: .4rem;
}

.tna-course-filters__grid label > span {
    color: var(--tnx-muted);
    font-size: .78rem;
    font-weight: 850;
}

.tna-course-filters__grid :where(input, select) {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--tnx-line);
    border-radius: 14px;
    padding-inline: .85rem;
    color: var(--tnx-text);
    background: color-mix(in srgb, var(--tnx-surface-strong) 92%, transparent);
}

.tna-course-filters__active {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding-block-start: .15rem;
}

.tna-course-filters__active span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    border: 1px solid rgba(var(--amooz-accent-rgb), .24);
    border-radius: 999px;
    padding: .38rem .7rem;
    color: var(--tnx-text);
    background: rgba(var(--amooz-accent-rgb), .08);
    font-size: .74rem;
    font-weight: 780;
    overflow-wrap: anywhere;
}

.tna-course-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.tna-course-category + .tna-course-category {
    margin-block-start: clamp(1.5rem, 4vw, 2.8rem);
}

.tna-course-category > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: .9rem;
}

.tna-course-category > header > div {
    min-width: 0;
}

.tna-course-category > header h3,
.tna-course-category > header p {
    margin: 0;
}

.tna-course-category > header p {
    margin-block-start: .35rem;
    line-height: 1.75;
}

.tna-catalog-empty {
    display: grid;
    justify-items: start;
    gap: .8rem;
    max-width: 820px;
    margin-inline: auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-style: dashed;
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--amooz-accent-rgb), .16), transparent 34%),
        var(--tnx-card);
}

.tna-catalog-empty__mark {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border: 1px solid rgba(var(--amooz-accent-rgb), .34);
    border-radius: 1rem;
    color: var(--amooz-accent);
    background: rgba(var(--amooz-accent-rgb), .1);
    font-size: 1.45rem;
    font-weight: 900;
}

.tna-catalog-empty h3,
.tna-catalog-empty p {
    margin: 0;
}

.tna-catalog-empty p {
    max-width: 68ch;
    line-height: 1.9;
}

html[data-tna-theme="light"] .tna-course-filters__grid :where(input, select) {
    background: rgba(255, 255, 255, .9);
}

@media (max-width: 980px) {
    .tna-course-filters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .tna-amooz-actions,
    .tna-course-filters__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tna-amooz-actions .tna-btn,
    .tna-course-filters__actions .tna-btn {
        width: 100%;
        justify-content: center;
    }

    .tna-course-filters__head,
    .tna-course-category > header {
        align-items: stretch;
        flex-direction: column;
    }

    .tna-course-filters__head > .tna-badge,
    .tna-course-category > header > .tna-badge {
        width: fit-content;
    }

    .tna-course-filters__grid {
        grid-template-columns: 1fr;
    }

    .tna-course-card__body {
        padding: 1rem;
    }

    .tna-catalog-empty {
        justify-items: stretch;
    }

    .tna-catalog-empty__mark {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tna-course-card,
    .tna-course-filters__active span {
        transition: none;
    }
}