/* ============================================
   LAYOUT — HEADER, NAVIGARE, FOOTER, COOKIES
   ============================================

   Se încarcă DUPĂ style.css.
   Folosește tokenii (--color-*, --space-*, etc.) definiți în style.css.

   Scris mobile-first:
   - regulile de bază sunt pentru telefon
   - @media (min-width: 768px)  → tabletă
   - @media (min-width: 1024px) → desktop

   Toate efectele de hover sunt închise în @media (hover: hover),
   ca să nu rămână "lipite" după atingere pe ecran tactil.
   ============================================ */


/* ============================================
   0. TOKENI SUPLIMENTARI
   ============================================ */
:root {
    /* Fontul folosit pentru logo și titluri de brand.
       Lipsea din style.css și era referit ca var(--font-display). */
    --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Zona minimă de atins cu degetul, recomandată de Apple și Google */
    --tap-target: 44px;

    /* Înălțimea header-ului, pe fiecare breakpoint.
       O ținem ca variabilă ca s-o poată folosi și alte componente
       (de ex. o bară de progres lipită sub header). */
    --header-height: 60px;
}


/* ============================================
   1. SKIP LINK (accesibilitate)
   ============================================ */
/* Ascuns până când e focalizat cu Tab. Permite sărirea peste meniu. */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-2);
    z-index: 9999;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-2);
}


/* ============================================
   2. HEADER
   ============================================ */
.site-header {
    position: sticky;   /* O SINGURĂ declarație position — nu adăuga alta mai jos */
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--header-height);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}


/* ---------- Logo ---------- */
.site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;          /* nu se comprimă când meniul e lung */
    text-decoration: none;
    color: var(--color-primary);
}

.site-logo img {
    height: 44px;            /* mic pe telefon — header-ul e sticky, nu are voie să mănânce ecranul */
    width: auto;
    object-fit: contain;
}

.site-logo__text {
    display: none;           /* pe telefon rămâne doar sigla */
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    line-height: 1.15;
}


/* ---------- Buton hamburger ---------- */
.nav-toggle {
    display: flex;           /* vizibil implicit (mobile-first), ascuns pe desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;                /* FIX: era 0, ceea ce lipea barele într-un dreptunghi plin */

    width: var(--tap-target);
    height: var(--tap-target);
    margin-right: calc(var(--space-2) * -1);  /* aliniază optic la marginea containerului */

    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--color-gray-700);
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast),
                opacity var(--transition-fast);
}

/* Când meniul e deschis, hamburgerul devine X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}


/* ---------- Navigare (panou pe mobil) ---------- */
.main-nav {
    /* Ascuns pe telefon. Se afișează prin clasa .is-open, pusă de main.js.
       Aspectul se decide EXCLUSIV aici, niciodată din JavaScript. */
    display: none;

    position: absolute;
    top: 100%;               /* imediat sub header; funcționează pentru că
                                .site-header e position: sticky */
    left: 0;
    right: 0;

    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);

    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-gray-200);

    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;        /* dacă meniul e lung, se derulează în loc să iasă din ecran */
}

.main-nav.is-open {
    display: flex;
}


/* ---------- Link-uri de meniu ---------- */
.nav-link {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);   /* zonă de atins confortabilă */
    padding: var(--space-2) var(--space-3);

    color: var(--color-gray-700);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);

    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

/* Pagina curentă */
.nav-link.is-active {
    color: var(--color-primary);
    background: var(--color-gray-100);
}

/* Hover doar pe dispozitive cu mouse.
   FIX: varianta veche punea text verde închis pe fundal verde mediu
   (--color-primary pe --color-primary-light) și devenea ilizibil. */
@media (hover: hover) {
    .nav-link:hover {
        color: var(--color-primary);
        background: var(--color-gray-100);
    }
}

.nav-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Butoanele din meniu (Ieșire / Activează codul) */
.nav-cta {
    justify-content: center;
    text-align: center;
    min-height: var(--tap-target);
}


/* ---------- Badge XP ---------- */
.xp-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-4);

    background: linear-gradient(135deg, #6b21a8, #9333ea);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--text-sm);
    text-decoration: none;

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

.xp-badge__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.xp-badge__value {
    font-weight: 800;
    white-space: nowrap;
}

@media (hover: hover) {
    .xp-badge:hover {
        transform: scale(1.04);
        box-shadow: 0 4px 15px rgba(107, 33, 168, 0.4);
    }
}


/* ---------- Fundal în spatele meniului deschis ---------- */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: rgba(0, 0, 0, 0.35);
}

.nav-backdrop[hidden] {
    display: none;
}


/* ============================================
   3. HEADER — TABLETĂ (≥768px)
   ============================================ */
@media (min-width: 768px) {

    :root {
        --header-height: 72px;
    }

    .site-logo img {
        height: 56px;
    }

    .site-logo__text {
        display: block;      /* apare textul de brand lângă siglă */
    }
}


/* ============================================
   4. HEADER — DESKTOP (≥1024px)
   ============================================ */
@media (min-width: 1024px) {

    :root {
        --header-height: 80px;
    }

    .site-logo img {
        height: 64px;
    }

    .site-logo__text {
        font-size: var(--text-xl);
    }

    /* Hamburgerul dispare */
    .nav-toggle {
        display: none;
    }

    /* Meniul redevine o bară orizontală, mereu vizibilă */
    .main-nav {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);

        padding: 0;
        background: none;
        box-shadow: none;
        border-top: none;
        max-height: none;
        overflow: visible;
    }

    .nav-cta {
        margin-left: var(--space-2);
    }

    /* Fundalul întunecat nu are sens pe desktop */
    .nav-backdrop {
        display: none !important;
    }
}


/* ============================================
   5. FOOTER
   ============================================ */
.site-footer {
    background: var(--color-gray-800);
    color: var(--color-gray-300);
    padding: var(--space-10) 0 var(--space-6);
    margin-top: auto;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;      /* o coloană pe telefon */
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.site-footer__brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.site-footer__description {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin: 0;
}

.site-footer__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-white);
    margin: 0 0 var(--space-3);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.site-footer__link {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);   /* pe telefon link-urile trebuie să fie ușor de atins */
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .site-footer__link:hover {
        color: var(--color-white);
    }
}

.site-footer__link:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.site-footer__bottom {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-700);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.site-footer__bottom p {
    margin: 0;
}


/* ---------- Footer — tabletă (≥768px) ---------- */
@media (min-width: 768px) {

    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Coloana de brand ocupă toată lățimea, deasupra celorlalte */
    .site-footer__brand-col {
        grid-column: 1 / -1;
    }

    /* Pe tabletă și mai sus nu mai avem nevoie de zone mari de atins */
    .site-footer__link {
        min-height: 0;
        padding: var(--space-1) 0;
    }
}


/* ---------- Footer — desktop (≥1024px) ---------- */
@media (min-width: 1024px) {

    .site-footer {
        padding: var(--space-12) 0 var(--space-6);
    }

    .site-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .site-footer__brand-col {
        grid-column: auto;   /* revine la o singură coloană, cea lată */
    }
}


/* ============================================
   6. BANNER COOKIES
   ============================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-modal);

    background: var(--color-gray-900);
    color: var(--color-white);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);

    /* padding-bottom ține cont de bara de gesturi de pe iPhone */
    padding: var(--space-4) 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.cookie-banner__inner {
    display: flex;
    flex-direction: column;      /* pe telefon: text sus, butoane jos */
    gap: var(--space-3);
}

.cookie-banner__text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.cookie-banner__link {
    color: var(--color-secondary);
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: var(--space-2);
}

/* Cele două butoane împart lățimea egal pe telefon */
.cookie-banner__actions .btn {
    flex: 1;
    min-height: var(--tap-target);
}

.cookie-banner__decline {
    border-color: var(--color-gray-500);
    color: var(--color-gray-300);
}

@media (min-width: 768px) {

    .cookie-banner__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
    }

    .cookie-banner__actions .btn {
        flex: 0 0 auto;
    }
}


/* ============================================
   7. PREFERINȚĂ: MIȘCARE REDUSĂ
   ============================================ */
/* Respectă setarea de sistem a utilizatorului pentru animații */
@media (prefers-reduced-motion: reduce) {

    .nav-toggle__bar,
    .nav-link,
    .xp-badge,
    .site-footer__link,
    .skip-link {
        transition: none;
    }
}

/* ============================================
   5. BUTONUL CU OCHI (arată/ascunde parola)
   ============================================

   Structura e creată automat de main.js:

     <div class="password-field">
         <input type="password" class="form-input">
         <button class="password-toggle">...</button>
     </div>
   ============================================ */

.password-field {
    position: relative;
    display: block;
}

/* Lăsăm loc pe dreapta ca textul parolei să nu treacă pe sub buton */
.password-field .form-input {
    padding-right: calc(var(--tap-target) + var(--space-2));
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    /* Zonă de atins completă, deși pictograma e mică */
    width: var(--tap-target);
    height: var(--tap-target);

    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;

    color: var(--color-gray-500);
    -webkit-tap-highlight-color: transparent;

    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}

.password-toggle svg {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;   /* clicul ajunge la buton, nu la desen */
}

/* Pictograma „ochi tăiat" e ascunsă cât timp parola e mascată */
.password-toggle .icon-eye-off {
    display: none;
}

/* Când parola e vizibilă, schimbăm pictograma */
.password-toggle[aria-pressed="true"] {
    color: var(--color-primary);
}

.password-toggle[aria-pressed="true"] .icon-eye {
    display: none;
}

.password-toggle[aria-pressed="true"] .icon-eye-off {
    display: block;
}

@media (hover: hover) {
    .password-toggle:hover {
        color: var(--color-gray-700);
        background: var(--color-gray-100);
    }
}

.password-toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   PUTEREA PAROLEI
   ============================================
   De adăugat la FINALUL fișierului assets/css/layout.css,
   ca să funcționeze pe toate paginile cu parole.
   ============================================ */

.pw-strength {
    margin-top: var(--space-2);
}

/* Șina pe care crește bara */
.pw-strength__bar {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

/* Bara propriu-zisă. Lățimea o pune JS-ul. */
.pw-strength__bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--radius-full);
    background: var(--color-gray-400);
    transition: width var(--transition-fast),
                background-color var(--transition-fast);
}

.pw-strength__text {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-gray-500);
}


/* ---------- Culorile, în funcție de scor ---------- */
.pw-strength.is-weak .pw-strength__bar span   { background: var(--color-error); }
.pw-strength.is-fair .pw-strength__bar span   { background: var(--color-warning); }
.pw-strength.is-good .pw-strength__bar span   { background: var(--color-primary-light); }
.pw-strength.is-strong .pw-strength__bar span { background: var(--color-success); }

.pw-strength.is-weak .pw-strength__text   { color: var(--color-error); }
.pw-strength.is-fair .pw-strength__text   { color: #92400e; }
.pw-strength.is-good .pw-strength__text,
.pw-strength.is-strong .pw-strength__text { color: var(--color-success); }


/* ============================================
   POTRIVIREA PAROLELOR
   ============================================ */
.pw-match {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    min-height: 1.2em;   /* rezervă spațiul, ca formularul să nu sară */
}

.pw-match.is-ok {
    color: var(--color-success);
    font-weight: 600;
}

.pw-match.is-error {
    color: var(--color-gray-500);
}


/* ============================================
   MIȘCARE REDUSĂ
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .pw-strength__bar span {
        transition: none;
    }
}

/* ============================================
   POZA MĂRITĂ (LIGHTBOX)
   ============================================
   De adăugat la FINALUL fișierului assets/css/layout.css
   ============================================ */

/* Pozele care se pot deschide arată că se poate da clic pe ele */
.is-zoomable {
    cursor: zoom-in;
}

.is-zoomable:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}


/* ============================================
   FEREASTRA
   ============================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.92);

    /* Ține cont de crestătura și bara de gesturi de pe telefoane */
    padding: calc(var(--space-4) + env(safe-area-inset-top, 0px))
             var(--space-4)
             calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.lightbox[hidden] {
    display: none;
}

/* Blochează derularea paginii din spate */
body.lightbox-is-open {
    overflow: hidden;
}


/* ============================================
   POZA
   ============================================ */
.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


/* ============================================
   BUTONUL DE ÎNCHIDERE
   ============================================ */
.lightbox__close {
    position: absolute;
    top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    right: var(--space-2);

    display: flex;
    align-items: center;
    justify-content: center;

    /* Zonă de atins confortabilă pe telefon */
    width: var(--tap-target);
    height: var(--tap-target);

    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: var(--radius-full);

    color: var(--color-white);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition: background-color var(--transition-fast);
}

@media (hover: hover) {
    .lightbox__close:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

.lightbox__close:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}


/* ============================================
   SĂGEȚILE DE NAVIGARE
   ============================================ */
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--tap-target);
    height: var(--tap-target);

    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: var(--radius-full);

    color: var(--color-white);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition: background-color var(--transition-fast);
}

.lightbox__nav--prev { left: var(--space-2); }
.lightbox__nav--next { right: var(--space-2); }

.lightbox__nav[hidden] {
    display: none;
}

@media (hover: hover) {
    .lightbox__nav:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

.lightbox__nav:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

/* Pe ecrane mari, săgețile stau mai departe de poză */
@media (min-width: 768px) {
    .lightbox__nav--prev { left: var(--space-6); }
    .lightbox__nav--next { right: var(--space-6); }
}


/* ============================================
   CONTORUL (1 / 5)
   ============================================ */
.lightbox__counter {
    position: absolute;
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);

    margin: 0;
    padding: var(--space-1) var(--space-3);

    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-full);

    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    font-weight: 600;
}

.lightbox__counter:empty {
    display: none;
}


/* ============================================
   MIȘCARE REDUSĂ
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .lightbox__close,
    .lightbox__nav {
        transition: none;
    }
}

/* ============================================
   DURATA SESIUNII ȘI DISPOZITIVE
   ============================================
   De adăugat la FINALUL fișierului
   assets/css/pages/setari.css

   Dacă fișierul acela nu există, adaugă-le la finalul lui
   assets/css/layout.css — funcționează la fel.

   Scris mobile-first.
   ============================================ */


/* ============================================
   1. OPȚIUNILE DE DURATĂ
   ============================================ */
.session-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.session-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "radio label"
        ".     hint";
    gap: var(--space-1) var(--space-3);
    align-items: center;

    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-target);

    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;

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

.session-option input[type="radio"] {
    grid-area: radio;
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
    margin: 0;
}

.session-option__label {
    grid-area: label;
    font-weight: 700;
    color: var(--color-gray-800);
}

.session-option__hint {
    grid-area: hint;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-gray-500);
}

/* Opțiunea aleasă în acest moment */
.session-option.is-selected {
    border-color: var(--color-primary);
    background: var(--color-gray-50);
}

@media (hover: hover) {
    .session-option:hover {
        border-color: var(--color-primary-light);
    }
}

.session-option:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}


/* ============================================
   2. AVERTISMENT PENTRU „NELIMITAT"
   ============================================ */
.session-warning {
    background: #fffbeb;
    border-left: 4px solid var(--color-warning);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.session-warning p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: #92400e;
}

.session-warning strong {
    color: #78350f;
}


/* ============================================
   3. LISTA DE DISPOZITIVE
   ============================================ */
.settings-subtitle {
    margin: var(--space-8) 0 var(--space-3);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-gray-700);
}

.device-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;

    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.device-item {
    display: flex;
    flex-direction: column;      /* pe telefon: informația sus, butonul jos */
    gap: var(--space-3);

    padding: var(--space-4);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
}

.device-item:last-child {
    border-bottom: none;
}

/* Dispozitivul de pe care ești acum */
.device-item.is-current {
    background: var(--color-gray-50);
}

.device-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;   /* permite trunchierea textului lung */
}

.device-item__name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-gray-800);
}

.device-item__badge {
    padding: 2px 8px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: lowercase;
}

.device-item__meta {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-gray-500);
}

.device-item__action {
    margin: 0;
}

.device-item__action .btn {
    min-height: var(--tap-target);
    width: 100%;   /* pe telefon, buton lat, ușor de atins */
}


/* ---------- De la tabletă în sus: pe un rând ---------- */
@media (min-width: 600px) {

    .device-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .device-item__action .btn {
        width: auto;
        min-height: 0;
    }
}


/* ============================================
   4. MIȘCARE REDUSĂ
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .session-option {
        transition: none;
    }
}

/* ---------- Butoanele din hero ---------- */
.hero-actions {
    display: flex;
    flex-direction: column;   /* pe telefon: unul sub altul */
    gap: var(--space-3);
    align-items: stretch;
}

@media (min-width: 600px) {
    .hero-actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}