/* responsive.css — clase de device (mobile-first).
   Breakpoint-uri obligatorii: ≤600, 601–1024, 1025–1920, ≥1921. */

/* ---- Telefon (≤ 600px): o coloană, meniu „sertar” ---- */
@media (max-width: 600px) {
  .layout { grid-template-columns: 1fr; padding: var(--sp-3); }
  .nav {
    position: fixed; top: var(--nav-h); right: 0; bottom: 0;
    width: min(80vw, 280px);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    background: color-mix(in srgb, var(--bg-2) 96%, transparent);
    backdrop-filter: blur(14px);
    border-left: var(--border-soft);
    z-index: 60;
  }
  .nav.is-open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  /* Antetul trebuie să încapă în 360–375px fără să împingă pagina în lateral. */
  .site-header { gap: var(--sp-1); padding-left: calc(var(--sp-2) + var(--safe-x)); padding-right: var(--sp-2); min-width: 0; }
  .site-header > * { min-width: 0; }
  .brand { gap: var(--sp-1); }
  .brand-name { font-size: var(--fs-sm); letter-spacing: 0; }
  .header-tools { gap: var(--sp-1); flex-shrink: 0; }
  .lang-switch { padding: 0 var(--sp-3) var(--sp-3); }
  .accent-switch { gap: 4px; }
  .nav-list { flex-direction: column; padding: var(--sp-3); }
  .nav-list a { display: block; padding: var(--sp-2); min-height: 44px; }
  /* Animații cu densitate redusă pe telefon */
  .particle-count { --density: 0.5; }
}

/* ---- Tabletă (601–1024px): 2 coloane, nav compact sus ---- */
@media (min-width: 601px) and (max-width: 1024px) {
  .nav-toggle { display: none; }
  .nav { position: static; transform: none; width: auto; border: none; background: transparent; }
  /* Tabletă: logo + unelte pe primul rând, meniul + comutatorul de limbă pe al doilea (altfel meniul iese din antet). */
  .site-header { height: auto; min-height: var(--nav-h); flex-wrap: wrap; padding-top: var(--sp-1); padding-bottom: var(--sp-1); row-gap: 0; }
  .nav { order: 3; flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .lang-switch { margin-top: 0; flex-shrink: 0; }
  .nav-list { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1); }
  .layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  /* suport pentru rotire ecranului */
  @media (orientation: landscape) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
  }
}

/* ---- Laptop/desktop (1025–1920px): sidebar lipit, hero lat, panouri alăturate ---- */
@media (min-width: 1025px) and (max-width: 1920px) {
  .nav-toggle { display: none; }
  .nav { position: static; width: auto; display: flex; align-items: center; gap: var(--sp-2); }
  .lang-switch { margin-top: 0; }
  .nav-list { flex-direction: row; gap: var(--sp-2); }
  .nav-list a { padding: var(--sp-1) var(--sp-2); }
  .layout { grid-template-columns: 1fr; align-items: start; }
  .layout:has(> aside) { grid-template-columns: 260px 1fr; }
  .aside { display: block; position: sticky; top: calc(var(--nav-h) + var(--sp-3)); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Ecran lat (≥ 1921px): lățime max. conținut, fundal umple spațiul ---- */
@media (min-width: 1921px) {
  .layout { grid-template-columns: 1fr; max-width: var(--maxw-wide); }
  .layout:has(> aside) { grid-template-columns: 300px 1fr; }
  .aside { display: block; position: sticky; top: calc(var(--nav-h) + var(--sp-3)); }
  .main { max-width: var(--maxw); }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Interacțiuni: device-uri cu hover real vs. touch */
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); }
}
@media (pointer: coarse) {
  .btn, .nav-list a, .accent-btn { min-height: 44px; min-width: 44px; }
}