/* Bloc "Hero cu categorii" - lista verticala de categorii + banner cu imagine si 2 butoane,
   vezi public/module/hero_categorii/hero_categorii.php. */

.pub-hero-cat {
    display: flex;
    gap: 24px;
    align-items: stretch;
    position: relative;
}

@media (max-width: 800px) {
    .pub-hero-cat {
        flex-direction: column;
    }
}

.pub-hero-cat-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    width: 260px;
    flex-shrink: 0;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    background: var(--pub-bg);
    /* Inaltime fixa, egala cu min-height-ul lui .pub-hero-cat-banner mai jos - lista ramane
       blocata la dimensiunea banner-ului/imaginii si se deruleaza intern daca sunt multe
       categorii, in loc sa impinga tot blocul mai jos (align-items:stretch NU e suficient aici,
       ar face invers - ar intinde banner-ul la inaltimea listei daca lista are mai mult continut). */
    height: 320px;
    overflow-y: auto;
}

/* Liniuta cu fade spre dreapta intre categorii, ca in nadragaventura.ro (acelasi tipar ca
   .pub-header-nav a::after din header.css), in loc de o linie plina uniforma. Pusa pe randul
   clicabil (a/summary), NU pe <li> - <li> trebuie sa ramana position:static, altfel devine
   containing block-ul lui .pub-hero-cat-sublist (position:absolute) in loc de .pub-hero-cat,
   si panoul de subcategorii se pozitioneaza gresit (fata de un rand de ~40px, nu fata de tot
   blocul) - exact bug-ul aparut cand era pus pe <li>. */
.pub-hero-cat-list li:not(:last-child) > a::after,
.pub-hero-cat-list li:not(:last-child) details > summary::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, var(--pub-text-muted), transparent);
}

.pub-hero-cat-list a,
.pub-hero-cat-list summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    color: var(--pub-text);
    font-size: 14px;
    cursor: pointer;
}

.pub-hero-cat-list a:hover,
.pub-hero-cat-list summary:hover {
    background: var(--pub-surface);
    text-decoration: none;
}

.pub-hero-cat-list summary {
    list-style: none;
}

.pub-hero-cat-list summary::-webkit-details-marker {
    display: none;
}

.pub-hero-cat-list-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--pub-text-muted);
}

.pub-hero-cat-list-icon img,
.pub-hero-cat-list-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pub-hero-cat-list-name {
    flex: 1;
}

.pub-hero-cat-list-arrow {
    color: var(--pub-text-muted);
    transition: transform 0.15s ease;
}

.pub-hero-cat-details[open] .pub-hero-cat-list-arrow {
    transform: rotate(90deg);
}

.pub-hero-cat-sublist {
    display: none;
    flex-direction: column;
    padding: 4px 8px 8px 42px;
    background: var(--pub-surface);
}

.pub-hero-cat-details[open] .pub-hero-cat-sublist {
    display: flex;
}

/* Pe desktop, subcategoriile se deschid ca un panou plutitor peste banner (si peste orice bloc
   vine dupa pe pagina - z-index suficient de mare), nu in fluxul paginii - la fel ca meniul
   eMag: lista de categorii ramane pe loc, la dimensiunea ei, iar continutul se deschide alaturi,
   nu impinge nimic in jos. Se deschide atat la hover cat si la click ([open] nativ de la
   <details>, pastrat pt touch/tastatura). Pe mobil (sub 801px) ramane comportamentul implicit,
   in flux, unde nu e loc pt un panou lateral. */
@media (min-width: 801px) {
    .pub-hero-cat-details:hover .pub-hero-cat-sublist,
    .pub-hero-cat-details[open] .pub-hero-cat-sublist {
        /* "columns" (nu flex) - se imparte singur pe mai multe coloane cand sunt multe
           subcategorii, fara sa iasa din latimea panoului (spre deosebire de flex-wrap). */
        display: block;
        columns: 170px;
        column-gap: 24px;
        position: absolute;
        top: 0;
        left: 286px;
        right: 0;
        height: 100%;
        overflow-y: auto;
        z-index: 60;
        border: 1px solid var(--pub-border);
        border-radius: var(--pub-radius);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
        padding: 16px 20px;
        /* Alb translucent + blur, ca la .pub-header-nav (drawer-ul mobil) din header.css. */
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .pub-hero-cat-sublink {
        break-inside: avoid;
    }
}

.pub-hero-cat-sublink {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: 13px;
    color: var(--pub-text-muted);
}

.pub-hero-cat-sublink:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, var(--pub-text-muted), transparent);
}

.pub-hero-cat-sublink:hover {
    color: var(--pub-accent);
    text-decoration: none;
}

.pub-hero-cat-sublink--all {
    font-weight: 600;
    color: var(--pub-text);
}

.pub-hero-cat-banner {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 32px 40px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    overflow: hidden;
    min-height: 320px;
}

.pub-hero-cat-text {
    position: relative;
    z-index: 1;
    max-width: 55%;
}

.pub-hero-cat-title {
    display: flex;
    flex-direction: column;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--pub-text);
}

.pub-hero-cat-text-body {
    color: var(--pub-text-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.pub-hero-cat-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pub-hero-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pub-hero-cat-btn:hover {
    opacity: 0.9;
    color: #fff;
    text-decoration: none;
}

.pub-hero-cat-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    z-index: 0;
}

.pub-hero-cat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pub-hero-cat-image-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Cand sunt mai multe imagini, hero_cat_image_markup() randeaza un mini .pub-carousel in loc de
   un <img> simplu - trebuie sa umple exact acelasi spatiu (.pub-hero-cat-image), nu inaltimea
   fixa (420px) si fundalul din regula generica .pub-carousel (banner-carousel.css). */
.pub-hero-cat-carousel {
    position: absolute;
    inset: 0;
    height: 100%;
    background: transparent;
}

.pub-hero-cat-image--full {
    inset: 0;
    width: auto;
}

.pub-hero-cat-image--full img {
    object-position: center;
}

@media (max-width: 800px) {
    .pub-hero-cat-list {
        width: 100%;
        height: auto;
        overflow-y: visible;
    }

    .pub-hero-cat-banner {
        flex-direction: column;
        text-align: center;
        padding: 200px 24px 24px;
        min-height: 0;
    }

    .pub-hero-cat-text {
        max-width: 100%;
    }

    .pub-hero-cat-buttons {
        justify-content: center;
    }

    .pub-hero-cat-image {
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: 180px;
    }
}