/* ============================================================
   MATIVERA — MOBILE UNIVERSAL
   Plasă de siguranță responsivă pentru TOATE paginile.
   Se încarcă după responsive.css și layout-fix.css în header.php.
   Folosește breakpoint-uri pentru toate dimensiunile de mobil:
     - ≤480px  : telefoane mici (iPhone SE, mini-Android)
     - ≤600px  : telefoane standard
     - ≤768px  : phablet / tablet portrait mic
     - ≤900px  : tablet portrait
     - ≤1024px : tablet landscape
   ============================================================ */

/* ============================================================
   BAZĂ — Reguli care se aplică oricând
   ============================================================ */

*, *::before, *::after { box-sizing: border-box;}

html, body {
  max-width: 100vw;
  overflow-x: hidden;}

/* Media responsivă peste tot */
img, video, iframe, picture, source, svg {
  max-width: 100%;
  height: auto;}

/* Wrap pentru cuvinte foarte lungi (URL, email, etc.) */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label, button, .btn {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;}

/* Tabele scroll horizontal pe mobil */
@media (max-width: 768px) {
  table:not(.cal-grid):not(.no-mobile-scroll) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;}
}

/* ============================================================
   GUTERS — padding lateral consistent
   ============================================================ */
@media (max-width: 768px) {
  :root { --gutter: 14px;}

  main, main.container, .container, .page,
  .section, .content, .wrapper {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;}
}

@media (max-width: 480px) {
  :root { --gutter: 12px;}
}

@media (max-width: 360px) {
  :root { --gutter: 10px;}
}

/* ============================================================
   HEADINGS — scalare fluidă pe mobil
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.2;}
  h2 { font-size: clamp(1.35rem, 5vw, 2rem); line-height: 1.25;}
  h3 { font-size: clamp(1.15rem, 4.5vw, 1.6rem); line-height: 1.3;}
  h4 { font-size: clamp(1rem, 4vw, 1.3rem); line-height: 1.35;}
  p, li { font-size: clamp(0.9rem, 3.5vw, 1rem); line-height: 1.55;}
}

@media (max-width: 360px) {
  h1 { font-size: 1.45rem;}
  h2 { font-size: 1.2rem;}
  h3 { font-size: 1.05rem;}
}

/* ============================================================
   GRIDS — colaps inteligent pentru grid-uri cu multe coloane
   Doar dacă pagina nu definește deja propriul breakpoint mai mic.
   ============================================================ */
@media (max-width: 900px) {
  .grid.three:not([data-no-collapse]),
  .grid.four:not([data-no-collapse]),
  .stats-grid:not([data-no-collapse]),
  .features-grid:not([data-no-collapse]),
  .card-grid:not([data-no-collapse]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 600px) {
  .grid.two:not([data-no-collapse]),
  .grid.three:not([data-no-collapse]),
  .grid.four:not([data-no-collapse]),
  .stats-grid:not([data-no-collapse]),
  .features-grid:not([data-no-collapse]) {
    grid-template-columns: 1fr;
    gap: 14px;}
}

/* ============================================================
   FORMULARE — full-width, font 16px (no iOS zoom), spacing
   ============================================================ */
@media (max-width: 768px) {
  input, textarea, select, .input {
    font-size: 16px !important;
    width: 100%;
    max-width: 100%;}

  input[type="checkbox"], input[type="radio"] {
    width: auto;
    min-width: 18px;
    min-height: 18px;}

  .form-grid,
  .auth-grid,
  .booking-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;}

  .form-row, .row.actions, .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;}

  .form-row > *, .actions > * {
    width: 100%;}
}

/* ============================================================
   BUTOANE — touch target ≥44px, full-width pe mic
   ============================================================ */
@media (max-width: 600px) {
  .btn,
  button.btn,
  a.btn {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 0.95rem;
    line-height: 1.2;}

  .btn.xl {
    font-size: 1rem;
    padding: 14px 20px;}

  /* Stack adjacent buttons */
  .row.end .btn + .btn,
  .actions .btn + .btn {
    margin-top: 8px;}
}

/* ============================================================
   CARDURI — padding redus pe ecrane mici
   ============================================================ */
@media (max-width: 600px) {
  .card,
  .glass.card,
  .feature-card,
  .stat-card,
  .modal-card {
    padding: 18px 16px;
    border-radius: 18px;}
}

@media (max-width: 380px) {
  .card,
  .glass.card,
  .feature-card,
  .stat-card,
  .modal-card {
    padding: 14px 12px;
    border-radius: 14px;}
}

/* ============================================================
   HERO / SECȚIUNI — padding vertical mai mic
   ============================================================ */
@media (max-width: 768px) {
  .hero,
  .stats-section,
  .psychologists-section,
  .features-section,
  .about-section {
    padding: 50px 16px !important;}

  .hero { min-height: auto;}

  .section-title { margin-bottom: 14px !important;}
  .section-subtitle { font-size: 1rem !important; line-height: 1.55 !important;}
}

@media (max-width: 480px) {
  .hero,
  .stats-section,
  .psychologists-section,
  .features-section,
  .about-section {
    padding: 36px 12px !important;}
}

/* ============================================================
   STAT NUMBERS / IMPACT TEXT — mai mici pe mic
   ============================================================ */
@media (max-width: 600px) {
  .stat-number { font-size: 2.4rem !important;}
  .stat-label  { font-size: 0.9rem !important;}
}

@media (max-width: 380px) {
  .stat-number { font-size: 2rem !important;}
}

/* ============================================================
   MODALE — full-width pe mobil cu scroll intern
   ============================================================ */
@media (max-width: 600px) {
  .modal-card {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;}

  .auth-head h2 { font-size: 1.4rem !important;}
}

/* ============================================================
   AVATARE / IMAGINI ROTUNDE — clamp size
   ============================================================ */
@media (max-width: 480px) {
  .avatar-large,
  .profile-avatar {
    width: 80px !important;
    height: 80px !important;}
}

/* ============================================================
   NAVBAR-SAFE SPACING — main.container.page din header.php
   (nu atinge .main-container din teste-iq care are propria barră)
   ============================================================ */
@media (max-width: 768px) {
  main.container.page {
    padding-top: 60px !important;}
}

@media (max-width: 480px) {
  main.container.page {
    padding-top: 56px !important;}
}

/* ============================================================
   CALENDAR / SLOT GRID — 3 sloturi pe rând pe mic
   ============================================================ */
@media (max-width: 480px) {
  .slot-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;}
  .cal-day { font-size: 0.85rem;}
}

/* ============================================================
   PROFILE LAYOUT — single column pe portret tablet
   ============================================================ */
@media (max-width: 768px) {
  .profile-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;}
}

/* ============================================================
   FOOTER — text mai mic, centrat
   ============================================================ */
@media (max-width: 480px) {
  footer .container {
    text-align: center;
    font-size: 0.85rem;}
}

/* ============================================================
   COOKIE BANNER — deja are propriul responsive în footer.php,
   dar adăugăm o protecție pentru telefoane foarte mici
   ============================================================ */
@media (max-width: 380px) {
  .cookie-banner {
    padding: 16px !important;
    border-radius: 16px !important;}
  .cookie-banner__title { font-size: 1rem !important;}
  .cookie-banner__text { font-size: 0.82rem !important;}
}

/* ============================================================
   PROGRAMARILE-MELE — calendar 7 col, în mobil scroll-x
   ============================================================ */
@media (max-width: 600px) {
  .calendar-grid,
  .week-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;}
}

/* ============================================================
   DASHBOARD STATS — multi-col → 2 col pe mobil
   ============================================================ */
@media (max-width: 600px) {
  .apt-stats,
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;}
}

@media (max-width: 380px) {
  .apt-stats,
  .dashboard-stats {
    grid-template-columns: 1fr !important;}
}

/* ============================================================
   ELEMENTE CARE TIND SĂ DEPĂȘEASCĂ VIEWPORT-UL
   Pre/code, blocuri lungi, link-uri
   ============================================================ */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;}

@media (max-width: 600px) {
  pre, code {
    font-size: 0.85rem;}
}

/* ============================================================
   HORIZONTAL FLEX ROWS — wrap automat pe mobil
   ============================================================ */
@media (max-width: 600px) {
  .row:not(.no-wrap-mobile),
  .nav-inner > .menu /* deja gestionat de header.php cu burger */ {
    flex-wrap: wrap;}
}

/* ============================================================
   HIDE / SHOW UTILS pentru pagini care vor să le folosească
   ============================================================ */
@media (max-width: 768px) {
  .hide-mobile { display: none !important;}
}

@media (min-width: 769px) {
  .show-mobile-only { display: none !important;}
}

/* ============================================================
   ULTRA-SMALL (≤320px) — last resort
   ============================================================ */
@media (max-width: 320px) {
  :root { --gutter: 8px;}

  h1 { font-size: 1.3rem;}
  h2 { font-size: 1.1rem;}

  .btn { font-size: 0.85rem; padding: 10px 14px;}

  .feature-card,
  .stat-card { padding: 12px 10px;}
}