/**
 * Linkliste & Toplist – Frontend Styles
 *
 * Design-Philosophie:
 *  - Keine festen Farben oder Schriftarten. Alle Farb-/Typografie-Variablen
 *    erben vom Theme oder können per CSS Custom Properties überschrieben werden.
 *  - Überschreibe eigene Farben via :root oder .llt-linkliste { --llt-... }
 */

/* ══════════════════════════════════════════════════════════════════════════════
   CSS Custom Properties (überschreibbar im Theme)
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Karte */
    --llt-card-radius:      8px;
    --llt-card-shadow:      0 2px 8px rgba(0,0,0,.08);
    --llt-card-shadow-hover:0 6px 20px rgba(0,0,0,.14);
    --llt-card-gap:         1.5rem;
    --llt-card-img-ratio:   56.25%; /* 16:9 */

    /* Sterne */
    --llt-star-size:        1.4rem;
    --llt-star-color:       #f5a623;
    --llt-star-empty:       #ddd;

    /* Toplist */
    --llt-rank-size:        2.5rem;
    --llt-toplist-row-gap:  1.25rem;

    /* Transitions */
    --llt-transition:       0.2s ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Filter Bar
   ══════════════════════════════════════════════════════════════════════════════ */
.llt-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.llt-filter-btn {
    cursor: pointer;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .35em .9em;
    font-size: .875em;
    background: transparent;
    opacity: .6;
    transition: opacity var(--llt-transition), background var(--llt-transition);
    line-height: 1.4;
}

.llt-filter-btn:hover,
.llt-filter-btn.llt-filter-active {
    opacity: 1;
}

.llt-filter-btn.llt-filter-active {
    background: currentColor;
}

/* When active, invert the text so it's readable on the filled background */
.llt-filter-btn.llt-filter-active span,
.llt-filter-btn.llt-filter-active {
    color: inherit;
    mix-blend-mode: difference; /* Works on most themes */
}

/* ══════════════════════════════════════════════════════════════════════════════
   Link Grid
   ══════════════════════════════════════════════════════════════════════════════ */
.llt-grid {
    display: grid;
    gap: var(--llt-card-gap);
}

.llt-grid-cols-1 { grid-template-columns: 1fr; }
.llt-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.llt-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.llt-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.llt-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.llt-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px) {
    .llt-grid-cols-3,
    .llt-grid-cols-4,
    .llt-grid-cols-5,
    .llt-grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .llt-grid {
        grid-template-columns: 1fr !important;
    }
    .llt-filter-bar { gap: .4rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Card
   ══════════════════════════════════════════════════════════════════════════════ */
.llt-card {
    border-radius: var(--llt-card-radius);
    box-shadow: var(--llt-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--llt-transition), transform var(--llt-transition);
}

.llt-card:hover {
    box-shadow: var(--llt-card-shadow-hover);
    transform: translateY(-2px);
}

.llt-card-image {
    position: relative;
    padding-bottom: var(--llt-card-img-ratio);
    overflow: hidden;
}

.llt-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.llt-card:hover .llt-card-image img {
    transform: scale(1.04);
}

.llt-card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.llt-card-category {
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .6;
}

.llt-card-title {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.3;
}

.llt-card-title a {
    text-decoration: none;
}

.llt-card-title a:hover {
    text-decoration: underline;
}

.llt-card-desc {
    font-size: .9em;
    margin: 0;
    opacity: .8;
    flex: 1;
}

.llt-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: .5rem;
    font-size: .85em;
}

.llt-card-cta {
    font-weight: 600;
    text-decoration: none;
}

.llt-card-cta:hover {
    text-decoration: underline;
}

.llt-card-clicks {
    opacity: .55;
    font-size: .8em;
}

/* Hidden card (filter) */
.llt-card--hidden {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Toplist
   ══════════════════════════════════════════════════════════════════════════════ */
.llt-toplist-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.llt-toplist-label {
    font-size: .875em;
    opacity: .7;
}

.llt-sort-btn {
    cursor: pointer;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .3em .85em;
    font-size: .85em;
    background: transparent;
    opacity: .55;
    transition: opacity var(--llt-transition);
}

.llt-sort-btn:hover,
.llt-sort-btn.llt-sort-active {
    opacity: 1;
}

/* Row */
.llt-toplist-row {
    display: grid;
    grid-template-columns: var(--llt-rank-size) 120px 1fr 180px 200px;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border-radius: var(--llt-card-radius);
    box-shadow: var(--llt-card-shadow);
    margin-bottom: var(--llt-toplist-row-gap);
    transition: box-shadow var(--llt-transition);
}

.llt-toplist-row:hover {
    box-shadow: var(--llt-card-shadow-hover);
}

@media (max-width: 1024px) {
    .llt-toplist-row {
        grid-template-columns: var(--llt-rank-size) 100px 1fr;
        grid-template-rows: auto auto;
    }
    .llt-radar-wrap,
    .llt-rating-form {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .llt-toplist-row {
        grid-template-columns: var(--llt-rank-size) 1fr;
    }
    .llt-toplist-thumb {
        display: none;
    }
}

/* Rank badge */
.llt-rank {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: .15rem;
}

.llt-rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--llt-rank-size);
    height: var(--llt-rank-size);
    border-radius: 50%;
    font-weight: 700;
    font-size: .9em;
    border: 2px solid currentColor;
    opacity: .7;
}

.llt-toplist-row:nth-child(1) .llt-rank-number { opacity: 1; border-color: #f5a623; color: #f5a623; }
.llt-toplist-row:nth-child(2) .llt-rank-number { opacity: 1; border-color: #aaa;     color: #aaa; }
.llt-toplist-row:nth-child(3) .llt-rank-number { opacity: 1; border-color: #c07a3a; color: #c07a3a; }

/* Thumbnail */
.llt-toplist-thumb {
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.llt-toplist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info */
.llt-toplist-title {
    margin: 0 0 .25rem;
    font-size: 1.05em;
}

.llt-toplist-title a {
    text-decoration: none;
}

.llt-toplist-title a:hover {
    text-decoration: underline;
}

.llt-toplist-desc {
    font-size: .875em;
    margin: 0 0 .5rem;
    opacity: .8;
}

.llt-toplist-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .85em;
    opacity: .75;
}

/* Radar wrap */
.llt-radar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.llt-radar-wrap canvas {
    max-width: 160px;
}

.llt-no-ratings {
    font-size: .8em;
    opacity: .5;
    margin: .5rem 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Star Rating Input
   ══════════════════════════════════════════════════════════════════════════════ */
.llt-rating-form {
    font-size: .875em;
}

.llt-rate-label {
    margin: 0 0 .5rem;
    font-weight: 600;
}

.llt-stars-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.llt-attr-label {
    min-width: 80px;
    font-size: .85em;
}

/* Classic CSS-only reverse star trick */
.llt-star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
}

.llt-star-input input[type="radio"] {
    display: none;
}

.llt-star-input label {
    cursor: pointer;
    font-size: var(--llt-star-size);
    color: var(--llt-star-empty);
    transition: color .1s;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Fill stars on hover / checked */
.llt-star-input label:hover,
.llt-star-input label:hover ~ label,
.llt-star-input input[type="radio"]:checked ~ label {
    color: var(--llt-star-color);
}

.llt-submit-rating {
    margin-top: .6rem;
    cursor: pointer;
    padding: .45em 1em;
    border-radius: 4px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: .875em;
    transition: opacity var(--llt-transition);
}

.llt-submit-rating:hover {
    opacity: .7;
}

.llt-rating-message {
    margin-top: .4rem;
    font-size: .85em;
    min-height: 1.2em;
}

.llt-rating-message.llt-success { color: green; }
.llt-rating-message.llt-error   { color: #c0392b; }

.llt-rated-notice {
    font-size: .85em;
    opacity: .6;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Misc
   ══════════════════════════════════════════════════════════════════════════════ */
.llt-empty {
    opacity: .6;
    font-style: italic;
}

.llt-no-results {
    text-align: center;
    padding: 2rem;
    opacity: .6;
}