/* ============================================================
   ELICEU — MOBILE & TABLET RESPONSIVE FIXES
   Fișier NOU. Se încarcă ULTIMUL pe fiecare pagină,
   după style.css ȘI după css-ul specific paginii
   (liceu.css / liceu_page.css / compare.css / login.css).
   Nu modifică nimic din regulile desktop existente —
   toate regulile de mai jos sunt în interiorul @media
   (max-width:...), deci desktop (>1024px) rămâne neatins.
   Breakpoints folosite: ≤768px (tabletă), ≤480px (telefon).
   ============================================================ */

/* ---------------------------------------------------------
   0. SIGURANȚĂ GENERALĂ — elimină scroll orizontal accidental
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }
}

/* ---------------------------------------------------------
   1. HEADER / NAVIGARE
   Meniul orizontal "nav" se ascunde pe tabletă/telefon;
   se folosește hamburgerul (.menu) + sidebar-ul lateral
   (.sidebar / .overlay) deja construite în CSS-ul tău,
   dar niciodată activate pentru că nav-ul rămânea vizibil
   (asta produce textul tăiat/suprapus din header pe mobil).

   ⚠️ Presupune că <nav> este copil al <header>. Dacă butonul
   hamburger nu deschide deja sidebar-ul la click, mai e nevoie
   de câteva linii JS — spune-mi și le adaug.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  header nav { display: none; }
  header { padding: 0 20px; }
  header .logo-area { gap: 10px; }
}

@media (max-width: 480px) {
  header { padding: 0 16px; height: 60px; }
  header .logo { font-size: 24px; }
  header .menu { font-size: 26px; }
  .page-wrapper { padding-top: 60px; }
  .sidebar { width: 85vw; max-width: 300px; padding: 90px 26px; }
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .breadcrumb { padding: 12px 20px; font-size: 12px; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .breadcrumb { padding: 10px 16px; }
}

/* ---------------------------------------------------------
   3. BANNERE (shop-banner / compare-banner)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .shop-banner, .compare-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 16px;
  }
  .shop-banner h1, .compare-banner h1 { font-size: 20px; }
  .shop-banner p, .compare-banner p { font-size: 13px; }
  .banner-badge { font-size: 12px; padding: 6px 14px; }
  .back-link { padding: 8px 14px; font-size: 12px; }
}

/* ---------------------------------------------------------
   4. TABELE — protecție scroll orizontal
   .admitere-table și .compare-table au deja wrapper cu
   overflow-x:auto. .specs-table (pagina liceu detaliu) NU
   are, îl adăugăm aici ca să nu iasă din ecran.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .specs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .specs-table tbody, .specs-table tr { display: table; width: 100%; table-layout: fixed; }
}
@media (max-width: 480px) {
  .specs-table td:first-child { width: 130px; font-size: 13px; }
  .specs-table td { padding: 10px 12px; font-size: 13px; }
}

/* ---------------------------------------------------------
   5. BUTOANE / ZONE DE ATINGERE (min. ~44px pe telefon)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .btn-primary { height: 50px; font-size: 14px; }
  .btn-secondary-row { flex-direction: column; }
  .btn-secondary { width: 100%; height: 46px; }
  .view-btn, .page-btn { min-width: 40px; height: 40px; }
  .add-btn { height: 40px; }
  .fav-btn { width: 38px; height: 38px; }
  .check-box { width: 20px; height: 20px; }
  .filter-option { padding: 6px 0; }
  .mobile-filter-btn, .search-btn { min-height: 44px; }
}

/* ---------------------------------------------------------
   6. PAGINA DETALIU LICEU (product-top / quick-stats)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .quick-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-box { padding: 12px; }
  .stat-value { font-size: 18px; }
  .school-name { font-size: 20px; }
  .thumb-row { flex-wrap: wrap; }
  .thumb { width: 70px; height: 54px; }
}

/* ---------------------------------------------------------
   7. GRID PRODUSE — rafinare suplimentară pe tabletă (768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .products-grid-lista { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   8. FOOTER — mic ajustaj de spațiere pe telefon
   --------------------------------------------------------- */
@media (max-width: 480px) {
  footer { padding: 32px 16px 40px; }
  .footer-grid { gap: 20px; }
}

/* ---------------------------------------------------------
   9b. HOMEPAGE (index.php / body.page-home)
   .profile-left și .stats aveau lățimi fixe (560px/470px)
   care nu se reduceau niciodată -> scroll orizontal.
   .profile-tags rămânea pe 2 coloane -> carduri tăiate.
   .profile-left h2 (48px) nu se reducea -> titlu tăiat,
   exact "Ce profil ți se potrivește?" din screenshot.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  body.page-home .profile-section {
    padding: 70px 24px 60px;
    gap: 40px;
  }
  body.page-home .profile-left,
  body.page-home .stats {
    width: 100%;
  }
  body.page-home .profile-left h2 { font-size: 32px; }
  body.page-home .profile-left p { font-size: 16px; margin-bottom: 24px; }
  body.page-home .profile-tags { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.page-home .stat-card:nth-child(2),
  body.page-home .stat-card:nth-child(3) { margin-left: 0; }
  body.page-home .events { padding: 60px 20px; }
  body.page-home .events h2 { font-size: 22px; margin-bottom: 40px; }
}
@media (max-width: 480px) {
  body.page-home .hero h1 { font-size: 24px; }
  body.page-home .hero p { font-size: 15px; margin-bottom: 28px; }
  body.page-home .cta { width: 100%; max-width: 280px; height: 54px; font-size: 20px; }
  body.page-home .profile-left h2 { font-size: 26px; }
  body.page-home .profile-tags { grid-template-columns: 1fr; }
  body.page-home .profile-tag span { font-size: 19px; }
  body.page-home .profile-btn { width: 100%; padding: 16px; font-size: 17px; }
  body.page-home .stat-card { padding: 20px; min-height: auto; }
  body.page-home .stat-number { font-size: 28px; }
  body.page-home .stat-text { font-size: 14px; }
}

/* ---------------------------------------------------------
   9. LOGIN / REGISTER — bug real: la ≤540px .form-box devine
   100% lățime dar .login-container/.register-container rămân
   fixe la 500px → scroll orizontal + câmpuri tăiate.
   --------------------------------------------------------- */
@media (max-width: 600px) {
  .form-box { width: 100%; height: auto; min-height: 480px; overflow: visible; }
  .login-container, .register-container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .register-container { right: -100%; }
}
@media (max-width: 480px) {
  header.nav, .nav { padding: 0 16px; height: 60px; }
  .nav-logo p { font-size: 18px; }
  .input-field { height: 46px; }
}