/* =========================================================
   Rezeptübersicht – Filter, Rezeptliste, Pagination
   Enthält:
     - Filterformular (inkl. TomSelect-Anpassungen)
     - Grid-basierte Rezeptlisten (2 Varianten)
     - Pagination-Komponente
     - Responsive Breakpoints + Mobile-Optimierung
   ========================================================= */

/* =========================================================
   Filterformular
   ========================================================= */

.filter-form {
    /* Card-artiger Container für Filterbox */
    background: rgba(255, 255, 255, .96);
    padding: 18px 22px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    /* Flex-Layout für mehrere Filterfelder nebeneinander */
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;

    /* Felder unten ausrichten, damit Button optisch sauber sitzt */
    align-items: flex-end;

    max-width: 880px;
    margin: 0 auto 32px;
    border: 1px solid rgba(0, 0, 0, .03);
}

/* Label-Styling innerhalb des Filterformulars */
.filter-form label {
    font-weight: 500;
    color: var(--text-muted);
}

/* Gruppierung pro Filterfeld (Select/Input + Label) */
.filter-form .form-group {
    flex: 1 1 220px;          /* responsive: wächst, schrumpft, Basisbreite */
    min-width: 0;             /* verhindert Überläufe bei langen Inhalten */
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .9rem;
}

/* Suchfeld bekommt mehr Platz als normale Filter */
.search-group {
    flex: 2 1 300px;
}

/* Wrapper für Suchinput (für Icons/Buttons erweiterbar) */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* =========================================================
   Inputs/Selects – gemeinsame Basis
   ========================================================= */

.filter-form select,
.search-input-wrapper input {
    width: 100%;
    border-radius: 999px; /* pill-style */
    border: 1px solid var(--border-soft);
    background: #f9f7f4;
    font-size: .95rem;
    outline: none;
    transition:
            border-color var(--transition-fast),
            box-shadow var(--transition-fast),
            background-color var(--transition-fast);
}

/* Selects: kompakter Innenabstand + native Pfeile deaktivieren */
.filter-form select {
    padding: 9px 14px;
    appearance: none;
}

/* Suchinput: rechts Platz (z.B. Icon/Reset möglich) */
.search-input-wrapper input {
    padding: 10px 44px 10px 16px;
}

/* Fokuszustand für alle Filter-Controls */
.filter-form select:focus,
.search-input-wrapper input:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, .18);
}

/* =========================================================
   TomSelect (Kategorie-Multiselect)
   Überschreibt Standard-Styles des Plugins für konsistentes Design.
   ========================================================= */

.filter-form .ts-wrapper {
    width: 100%;
}

.filter-form .ts-control {
    border-radius: 999px !important;
    border: 1px solid var(--border-soft) !important;
    background: #f9f7f4 !important;
    min-height: 38px;
    padding-block: 4px;
    box-shadow: none !important;
}

/* Fokuszustand für TomSelect (Plugin setzt eigene Klassen) */
.filter-form .ts-control:focus,
.filter-form .ts-control.ts-focus {
    border-color: var(--accent) !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, .18) !important;
}

/* =========================================================
   Filter-Button (Call-to-Action)
   ========================================================= */

.filter-button {
    flex: 0 0 150px;       /* feste Basisbreite, damit Button konsistent bleibt */
    margin-left: auto;     /* schiebt Button ans Ende der Zeile */

    padding: 10px 18px;
    border: 0;
    border-radius: 999px;

    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;

    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;

    box-shadow: 0 6px 12px rgba(255, 107, 53, .35);
    transition:
            transform var(--transition-fast),
            box-shadow var(--transition-fast),
            background var(--transition-fast);
}

.filter-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(255, 107, 53, .45);
    background: linear-gradient(135deg, var(--accent-dark), #d94b1b);
}

/* =========================================================
   Rezeptlisten (Grid-Layout)
   ========================================================= */

.recipe-list,
.recipe-list--row5 {
    list-style: none;
    padding: 0;
    margin: 0;

    /* Grid-basierte Darstellung für gleichmäßige Karten */
    display: grid;
    gap: 25px;
    align-items: stretch;
}

/* Standardübersicht: 3 Spalten */
.recipe-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Kompakte Reihe (z.B. Startseite): 5 Spalten */
.recipe-list--row5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

/* Einzelnes Listenelement soll volle Kartenhöhe erlauben */
.recipe-item {
    margin: 0;
    height: 100%;
}

/* Rezeptkarte: klickbarer Container */
.recipe-card {
    display: block;
    background: #fff;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;

    box-shadow: var(--shadow-soft);
    font-size: .9rem;
    border: 1px solid rgba(0, 0, 0, .02);

    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Hover: Karte hebt sich an */
.recipe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .08);
    background: #fffaf6;
}

/* Titelbereich */
.recipe-title {
    margin: 0;
    font-weight: 600;
    font-size: .95rem;
}

/* Einheitliche Höhe für Titel in Karten (Layout-Stabilität) */
.recipe-card .recipe-title {
    min-height: 72px;
    display: flex;
    align-items: flex-start;
}

/* Rezeptbild in Karten */
.recipe-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin: 10px 0 8px;
}

/* Metadatenbereich unter dem Bild */
.recipe-meta {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.recipe-meta p {
    margin: 4px 0;
    font-size: .9rem;
}

/* z.B. Kurzbeschreibung optisch absetzen */
.recipe-meta p:nth-child(2) {
    color: var(--text-muted);
}

/* Kompakte Beschreibung: max. 3 Zeilen, danach ellipsis/clip */
.recipe-description {
    margin: 4px 0;
    font-size: .9rem;
    line-height: 1.3;

    min-height: 3.9em; /* stabilisiert Kartenhöhe */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kompakte Meta-Zeile (Preis · Zeit · Schwierigkeit) */
.recipe-meta-details {
    margin-top: auto;
    margin-bottom: 0;
    font-size: .9rem;
    color: var(--text-muted);
}

/* Popularitätsanzeige (nur im Full-Variant sichtbar) */
.recipe-popularity {
    margin-top: 8px;
    font-size: .8rem;
    opacity: .8;
    color: var(--text-muted);
}

/* =========================================================
   Pagination
   ========================================================= */

.pagination {
    margin: 34px auto 10px;
    max-width: 880px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    padding: 14px 16px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(0, 0, 0, .04);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
}

/* Textblock „Seite x von y“ */
.page-info {
    font-size: .92rem;
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 107, 53, .06);
    border: 1px solid rgba(255, 107, 53, .12);
}

/* Container für Seitenzahlen */
.page-numbers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Basislink für Pagination-Buttons */
.page-link {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: .92rem;

    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);

    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .04);

    transition:
            transform var(--transition-fast),
            box-shadow var(--transition-fast),
            border-color var(--transition-fast),
            background-color var(--transition-fast),
            color var(--transition-fast);
}

/* Hover für Pagination-Links */
.page-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 107, 53, .35);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .06);
    background: #fffaf6;
}

/* Tastaturfokus: klare Sichtbarkeit */
.page-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, .22), 0 10px 18px rgba(0, 0, 0, .06);
    border-color: var(--accent);
}

/* Seitenzahlen: feste Mindestbreite für gleichmäßige Buttons */
.page-number {
    min-width: 44px;
    text-align: center;
    padding: 9px 0;
}

/* Aktive Seite */
.page-link.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    box-shadow: 0 10px 18px rgba(255, 107, 53, .28);
}

/* Deaktivierte Links (z.B. prev/next am Rand) */
.page-link.is-disabled {
    opacity: .55;
    pointer-events: none;
    background: #f6f4f1;
    box-shadow: none;
}

/* =========================================================
   Responsive Breakpoints
   ========================================================= */

/* 5er-Grid reduziert sich auf 3 Spalten */
@media (max-width: 1200px) {
    .recipe-list--row5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Standardliste reduziert sich auf 2 Spalten */
@media (max-width: 960px) {
    .recipe-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: Filterbox untereinander, Button vollbreit */
@media (max-width: 720px) {
    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-button {
        width: 100%;
        margin-left: 0;
    }

    /* Suche ohne komplexes Wrapper-Layout */
    .search-input-wrapper {
        flex-direction: column;
        gap: 8px;
    }

    .search-input-wrapper input {
        padding-right: 16px;
    }
}

/* Kleinste Geräte: Listen 1-spaltig, Pagination kompakter */
@media (max-width: 640px) {
    .recipe-list,
    .recipe-list--row5 {
        grid-template-columns: 1fr;
    }

    .pagination {
        border-radius: 18px;
        padding: 12px;
    }

    .page-info {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   Mobile-Optimierung Filterbox (feineres Tuning)
   Doppelt zu 720px oben: bewusstes Überschreiben für bessere Touch-UX.
   ========================================================= */
@media (max-width: 720px) {
    .filter-form {
        padding: 14px;
        gap: 10px;
        align-items: stretch;
    }

    .filter-form .form-group {
        flex: 1 1 auto;
    }

    /* Alle Controls auf volle Breite */
    .filter-form select,
    .search-input-wrapper input,
    .filter-form .ts-wrapper,
    .filter-form .ts-control {
        width: 100%;
    }

    /* TomSelect größer für Touch-Bedienung */
    .filter-form .ts-control {
        min-height: 44px;
        padding-block: 8px;
    }

    /* Suche: Wrapper wieder horizontal */
    .search-input-wrapper {
        flex-direction: row;
        gap: 0;
    }

    /* CTA-Button: vollbreit und tappbar */
    .filter-button {
        width: 100%;
        flex: 0 0 auto;
        margin-left: 0;
        margin-top: 6px;
        padding: 12px 18px;
        min-height: 44px;
    }
}

/* Sterne-Icons (aus recipe_card_fragment) sauber ausrichten */
.rating-stars {
    display: inline-flex;
    gap: 2px;
    vertical-align: middle;
}