/* ===== HERO SZEKCIÓ ===== */
.hero-section {
    background-image: url('../../images/hero_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* A hero "felcsúszik" a lebegő fejléc mögé, hogy a háttérkép a képernyő legtetejéig érjen.
       70px = a fejléc magassága (58px) + a távolsága a tetejétől (12px). A negatív margin
       ennyivel feljebb húzza, a padding-top pedig ugyanennyivel megnő, így a hero tartalma
       ugyanott marad, ahol eddig volt. A fejléc z-index-e (1000) miatt az marad felül. */
    margin-top: -70px;
    padding: calc(64px + 70px) 0 64px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: visible;
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 160px;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 5;
}

.hero-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 260px;
    background: linear-gradient(to bottom,
        rgba(250, 246, 240, 0) 0%,
        rgba(250, 246, 240, 0.1) 35%,
        rgba(250, 246, 240, 0.3) 55%,
        rgba(250, 246, 240, 0.6) 75%,
        rgba(250, 246, 240, 0.85) 90%,
        #FAF6F0 100%);
    pointer-events: none;
    z-index: 5;
}

.hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 6;
}

.hero-text {
    position: static;
    flex: 3;
    max-width: none;
    padding-left: 1rem;
}

.hero-title {
    font-size: 2.5rem;
    color: var(--color-dark-brown);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-highlight {
    color: var(--color-hero-highlight);
}

/* Ez a sortörés csak mobilon aktív, hogy a cím pontosan 3 sorra törjön */
.mobile-break {
    display: none;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 30px;
}

.hero-assistant-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--color-assistant);
    font-weight: 700;
    background: rgba(74, 124, 47, 0.2);
    padding: 0.15em 0.6em;
    border-radius: 999px;
}

.hero-subtitle-icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--color-cta-hover);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-dark-brown);
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    border: 2px solid var(--color-dark-brown);
    transition: all 0.3s;
}

.btn-secondary:hover {
    background-color: var(--color-dark-brown);
    color: var(--color-white);
}

.hero-image {
    flex: 2.5;
    background: transparent;
    height: auto;
    overflow: visible;
    margin-left: auto;
}

.hero-image img {
    width: 100%;
    position: relative;
    top: -25px;
    z-index: 10;
    filter: drop-shadow(0 30px 60px var(--color-shadow-dark));
    margin-top: 0px;
    margin-bottom: -180px;
}

/* ===== SZEKCIÓK ===== */
.latest-section,
.recipes-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px 20px 60px 20px;
    position: relative;
}

/* Saját / Kedvenc receptek oldalon a szekció egy .card-stack-ben van (cím + vissza link
   felette), ott a térközöket a card-stack adja - a főoldali padding felesleges, és
   el is tolná a keresőt/kártyákat a címhez képest */
.card-stack .recipes-section {
    width: 100%;
    padding: 0;
}

/* a kereső főoldali 3rem felső margója itt túl nagy rés lenne a cím alatt */
.card-stack .recipes-section .search-bar {
    margin-top: 0;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    text-align: center;
    color: var(--color-heading);
    border-bottom: 3px solid var(--color-border-dark);
    display: inline-block;
    padding-bottom: 8px;
}

/* ===== MODERN KERESŐ SÁV - doboz (a benne lévő mezők/gombok osztályai az app.css-ben vannak,
   mert a fejléc görgetős keresője is ugyanazokat használja) ===== */
.search-bar {
    max-width: 720px;
    margin: 3rem 0 2rem;
    padding: 1rem;
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.12);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* A kártyák feletti kereső (recipes-section) vékonyabb, mint a fejléc/hero-beli változat,
   és olyan széles, mint a receptkártyák sora (a 720px-es korlátot feloldjuk, így a szekció
   teljes szélességét kitölti - ugyanazt, amit a .recipe-gallery is) */
.recipes-section .search-bar {
    max-width: none;
    padding: 0.5rem;
}

/* Csak maga a kereső mező (szövegdoboz) legyen kiemelve narancs kerettel,
   nem az egész sáv (szűrők/rendezés/keresés gomb marad az eredeti, visszafogott stílusban) */
/* A keret szándékosan egy árnyalattal világosabb a Keresés gomb narancsánál (#e67e22):
   a vékony vonal fehér alapon sötétebbnek hat, mint ugyanaz a szín a nagy, kitöltött
   gombon - így a kettő szemre egyforma */
/* Az app.css-ben a sor align-items: center - úgy minden elem a saját tartalma szerinti
   magasságot kapja, és a keresőmező (keret + más sormagasság) eltért a gomboktól.
   A stretch a sor legmagasabb eleméhez nyújtja mindet, így biztosan egyformák */
.recipes-section .search-bar .search-row {
    align-items: stretch;
}

.recipes-section .search-bar .search-input-group {
    border: 2px solid #ec9243;
    border-radius: 4px;
    /* csak oldalt van margó: a függőleges margó a stretch mellett alacsonyabbá
       tenné a mezőt a gomboknál */
    margin: 0 0.25rem;
    /* nem tölti ki a teljes sort (app.css-ben flex: 1), csak ~480px széles,
       de keskeny képernyőn tud ennél kisebb is lenni (a flex-shrink 1) */
    flex: 0 1 480px;
}

/* A mező nagyítója akkora legyen, mint a gombok ikonja (app.css-ben 1.1em, a gomboké 1em) */
.recipes-section .search-bar .search-input-icon {
    width: 1em;
    height: 1em;
}

/* A margin-left: auto flexboxban "elnyeli" az összes szabad helyet a gomb bal oldalán,
   így a Szűrők (és utána a Rendezés) a sor jobb szélére tolódik */
.recipes-section .search-bar .btn-filters {
    margin-left: auto;
}

/* Nagyobb rés a keresőmező és a Keresés gomb között: a mező 0.25rem-es margójához
   ez még 0.25rem-et ad, így összesen 0.5rem */
.recipes-section .search-bar .btn-search {
    margin-left: 0.25rem;
}

/* A Szűrők és Rendezés között 0.5rem rés van (ugyanannyi, mint a mező és a Keresés gomb
   között). Az elválasztó vonal itt nem kell, mert a két gomb saját szürke háttere már elválasztja őket */
.recipes-section .search-bar .search-divider {
    display: none;
}

.recipes-section .search-bar .btn-sort {
    margin-left: 0.5rem;
}

.recipes-section .search-bar .search-input-group {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* A gombok belső szegélye (padding) mind a négy irányban azonos. A line-height is kell
   hozzá: az örökölt 1.6-os sormagasság a szöveg fölé/alá még kb. 5-5px üres helyet tenne,
   így fent/lent szemre nagyobb lenne a szegély, mint oldalt. Az 1.25 (= 20px) a legkisebb
   érték, amibe a Szűrők gomb számláló buborékja (1.25rem) még belefér - kisebbnél a gomb
   megnőne, amikor a buborék megjelenik */
.recipes-section .search-bar .btn-search,
.recipes-section .search-bar .btn-filters,
.recipes-section .search-bar .btn-sort {
    padding: 0.75rem;
    line-height: 1.25;
}

/* a gombok kerekítése egyezzen a keresőmezőével (4px) - az app.css közös
   gombstílusa border-radius: 0-t ad nekik */
.recipes-section .search-bar .btn-search,
.recipes-section .search-bar .btn-filters,
.recipes-section .search-bar .btn-sort {
    border-radius: 4px;
}

.recipes-section .search-bar .btn-search,
.mobile-search-sticky .search-bar .btn-search {
    background: var(--color-primary);
}

/* Ugyanaz az árnyék, mint a receptkártyák gombjain (app.css, .card-actions): így "megnyomható"
   gombnak hatnak, hoverre picit erősebb. A transition-be a box-shadow is bekerül, hogy az
   árnyék is fokozatosan váltson, ne csak a háttérszín. */
.recipes-section .search-bar .btn-search,
.recipes-section .search-bar .btn-filters,
.recipes-section .search-bar .btn-sort {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.recipes-section .search-bar .btn-search:hover,
.recipes-section .search-bar .btn-filters:hover,
.recipes-section .search-bar .btn-sort:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.recipes-section .search-bar .btn-search:hover,
.mobile-search-sticky .search-bar .btn-search:hover {
    background: var(--color-primary-hover);
}

/* Amikor a fejléc görgetős keresője aktív, a főoldal saját keresősávja (desktopon a kártyák
   feletti, mobilon a hero-beli) elhalványul - különben az áttetsző fejlécen át is látszana.
   A helye megmarad (visibility, nem display), hogy a tartalom ne csússzon feljebb */
header.scrolled ~ main .recipes-section .search-bar,
header.scrolled ~ main .mobile-search-sticky .search-bar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ===== SZŰRŐ CSOPORTOK (Szűrők modal - a modal-keret alapstílusa app.css-ben van,
   mert a Profil oldal is használja a fiók törlése megerősítéséhez) ===== */
.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group h4 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary-soft);
    padding-bottom: 0.5rem;
}

.filter-hint {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* Az opciók "kapszulák" egymás mellett, sorba törve - rövidebb modal, kevesebb görgetés */
.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* position: relative - a benne lévő, abszolút pozicionált (rejtett) checkbox ehhez
   igazodik, nem valamelyik távoli szülőhöz (különben fókuszáláskor ugrálhat a modal) */
.filter-chip {
    position: relative;
    cursor: pointer;
}

/* A valódi checkbox láthatatlan, de a helyén marad: így billentyűzettel (Tab + Szóköz)
   továbbra is kezelhető, és a képernyőolvasó is checkboxként olvassa fel.
   (display: none-nal ezek elvesznének.) */
.filter-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.filter-chip span {
    /* inline-flex: az ikon és a szöveg egy sorban, függőlegesen középre igazítva */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-text);
    font-size: 0.95rem;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.filter-chip:hover span {
    border-color: var(--color-primary);
}

/* "+" = szomszéd-kombinátor: a bepipált input UTÁN KÖZVETLENÜL következő span-t
   színezi ki. Ezért kell az inputnak a span előtt lennie a HTML-ben. */
.filter-chip input:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Bepipált (narancs hátterű) kapszulán a narancs ikon nem látszana, ezért fehérre színezzük:
   brightness(0) előbb feketévé teszi, az invert(1) pedig megfordítja fehérre.
   (Az <img>-ként betöltött SVG-re a CSS color nem hat, ezért kell a filter.) */
.filter-chip input:checked + span .category-icon {
    filter: brightness(0) invert(1);
}

/* Kiegészítő megjegyzés a kapszulán belül, pl. "(alapértelmezett)" - kisebb és halványabb,
   hogy ne vonja el a figyelmet a fő szövegről. Kijelölt (narancs) kapszulán is olvasható marad,
   mert a színt a szülő span-től örökli, csak áttetszőbb. */
.chip-note {
    font-size: 0.8em;
    opacity: 0.75;
}

/* Billentyűzetes fókusz jelzése (egérkattintásra nem jelenik meg) */
.filter-chip input:focus-visible + span {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== AKTÍV SZŰRŐK (a kereső alatt, a kártyák felett) ===== */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* :empty = nincs benne semmi (nincs aktív szűrő) - ilyenkor ne foglaljon helyet az alsó margó */
.active-filters:not(:empty) {
    margin-bottom: 1.5rem;
}

.active-filter {
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.active-filter:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.active-filters-clear {
    background: none;
    border: none;
    padding: 0.3rem 0.25rem;
    color: var(--color-text-light);
    font: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.active-filters-clear:hover {
    color: var(--color-text);
}

/* ===== GOMBOK A MODALBAN / a modal alatti "Összes recept" link ===== */
.btn-apply {
    padding: 0.6rem 1.25rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}

.btn-apply:hover {
    background-color: var(--color-primary-hover);
}

.btn-reset {
    text-decoration: none;
    color: var(--color-text-light);
    padding: 8px 12px;
}

.btn-reset:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.modal-footer .btn-reset {
    padding: 0.6rem 1.25rem;
    background-color: var(--color-bg-hover);
    color: var(--color-text);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

.modal-footer .btn-reset:hover {
    background-color: var(--color-border);
}

/* ===== LOADING SPINNER ===== */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== LOAD MORE GOMB ===== */
.btn-load-more {
    display: block;
    margin: 2rem auto;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-search-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.btn-load-more:hover {
    background: var(--color-search-bg);
    transform: translateY(-2px);
}

.btn-load-more:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* ===== MOBIL-SPECIFIKUS - DESKTOPON REJTVE ===== */
@media (min-width: 769px) {
    .mobile-search-sticky {
        display: none;
    }
}

/* ===== MOBIL NÉZET - főoldal ===== */
@media (max-width: 768px) {
    .hero-image {
        display: none !important;
    }

    /* Kereső a hero-ban, közvetlenül a cím alatt, a szövegoszlop szélességéhez igazítva.
       Kisebb a felső margó, mert mobilon nincs alcím a cím és a kereső között */
    .mobile-search-sticky {
        display: block;
        width: 100%;
        margin-top: 1rem;
    }

    /* Nincs külső fehér doboz: a mező és a gombok közvetlenül a hero háttéren ülnek
       (különben "doboz a dobozban" hatású lenne a fehér mező a fehér keretben) */
    .mobile-search-sticky .search-bar {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Mobil kereső: [ mező | narancs keresés gomb ] [szűrők] [rendezés]
       A mező és a keresés gomb egy egységnek látszik: a mezőnek csak a bal sarkai,
       a gombnak csak a jobb sarkai kerekek, és nincs köztük rés. A sorrendet az
       "order" adja (a HTML-ben a keresés gomb a sor végén van).
       A sor alapból (app.css) fehér hátterű és overflow: hidden - itt átlátszó, és a
       kilógás engedett, hogy az elemek árnyéka ne vágódjon le */
    .mobile-search-sticky .search-row {
        gap: 0.4rem;
        background: none;
        border-radius: 0;
        overflow: visible;
    }

    /* Három egyforma fehér, lekerekített, árnyékos elem (mező, szűrők, rendezés),
       a narancs Keresés gomb a kiemelés. 8px sarok, mint a fejléc keresőjében */
    .mobile-search-sticky .search-input-group {
        flex: 1;
        min-width: 0;
        height: 40px;
        padding: 0 0.8rem;
        background: var(--color-white);
        border-radius: 8px 0 0 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .mobile-search-sticky .search-input {
        font-size: 1rem;
    }

    .mobile-search-sticky .btn-search,
    .mobile-search-sticky .btn-filters,
    .mobile-search-sticky .btn-sort {
        flex: 0 0 auto;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 0;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .mobile-search-sticky .btn-filters,
    .mobile-search-sticky .btn-sort {
        background: var(--color-white);
    }

    .mobile-search-sticky .btn-search {
        order: 1;
        margin-left: -0.4rem; /* a sor gap-jét visszavesszük: a gomb a mezőhöz tapad */
        border-radius: 0 8px 8px 0;
    }

    .mobile-search-sticky .btn-filters {
        order: 2;
    }

    .mobile-search-sticky .btn-sort {
        order: 3;
    }

    .mobile-search-sticky .btn-search svg,
    .mobile-search-sticky .btn-filters svg,
    .mobile-search-sticky .btn-sort svg {
        margin-right: 0;
        width: 1.1rem;
        height: 1.1rem;
    }

    /* Hero szekció - mobilon a 100vw helyett a szülő (main) paddingjéből "kitörős"
       negatív margós megoldás, mert a 100vw mobil nézetben/emulációban szélesebb
       tud lenni a ténylegesen látható képernyőnél, és ez okozta a kilógást */
    .hero-section {
        width: auto;
        margin-left: -1rem;
        margin-right: -1rem;
        /* Mobilon a fejléc 53px magas + 8px távolság a tetejétől = 61px (l. fent, desktopon 70px) */
        margin-top: -61px;
        /* A hero a képernyő kb. 2/3-át foglalja el, és a cím + kereső függőlegesen a közepén
           van (justify-content: center egy oszlop irányú flexben = függőleges közép).
           A vh a régi böngészőknek kell, a svh a mobil címsorral együtt számolt "kis" képernyő-
           magasság - ha a böngésző ismeri, felülírja az előzőt.
           A felső padding a fejléc helye (61px), az alsó (60px) pedig a halványító átmenet
           (::after) egy részének helye. Az alsó padding csökkentése lejjebb tolja a tartalmat:
           minden 2px-nyi csökkentés 1px-szel lejjebb viszi (a különbség fele-fele oszlik el). */
        min-height: 65vh;
        min-height: 65svh;
        padding: 61px 1rem 60px;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        justify-content: center;
        background-size: 100% 100%;
        background-position: center center;
    }
    .hero-section::before {
        height: 90px;
    }

    .hero-section::after {
        height: 160px;
        background: linear-gradient(to bottom,
            rgba(250, 246, 240, 0) 0%,
            rgba(250, 246, 240, 0.1) 35%,
            rgba(250, 246, 240, 0.3) 55%,
            rgba(250, 246, 240, 0.6) 75%,
            rgba(250, 246, 240, 0.85) 90%,
            #FAF6F0 100%);
    }

    .hero-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        /* 20px = a .recipes-section oldalsó paddingje, így a hero szövege és keresője
           pontosan egy vonalba kerül az alatta lévő receptkártyák széleivel */
        padding: 0 20px;
        justify-content: flex-start;
        order: 1;
    }

    .hero-text {
        flex: 0 0 auto;
        text-align: left;
        padding-left: 0; /* a desktopos bal padding mobilon aszimmetrikussá tette a keresőt */
    }

    .hero-title {
        font-size: 1.8rem;
    }

    /* A "Próbáld ki..." szlogen mobilon nem jelenik meg - keskeny képernyőn sok sort
       foglalna, és a cím + kereső így tisztábban kiemelkedik */
    .hero-subtitle {
        display: none;
    }

    .mobile-break {
        display: inline;
    }

    /* Alsó kereső sáv elrejtése mobilon (a hero-ban lévő sticky verzió jelenik meg helyette) */
    .recipes-section .search-bar {
        display: none;
    }

    /* A kártyák közvetlenül a hero alatt kezdődnek. A hero alját nem kurtítjuk, hogy a
       színátmenetes "elhalványulás" (.hero-section::after) teljes hosszában megmaradjon */
    .recipes-section {
        padding-top: 0;
    }
}