/* ==========================================================================
   ÎN APROPIERE — LIQUID GLASS
   --------------------------------------------------------------------------
   Strat de material peste chrome-ul site-ului (header, footer, carduri,
   tag-uri, butoane, paginare) — NU peste paleta sau grila editorială din
   body.css, care rămân neschimbate. Token-urile --glass-* sunt definite în
   body.css, lângă restul design tokens.

   Reguli:
   - Proza articolelor (.proza) nu primește sticlă - contrastul pe text lung
     contează mai mult decât efectul.
   - Sheen-ul (luciul) e pus ca fundal (background), nu ::before: fundalurile
     se pictează mereu în spatele conținutului unui element, indiferent de
     z-index, deci nu poate acoperi din greșeală titluri/text.
   - .btn-colaborator e singurul element „semnătură” (sticlă ocru, mai
     vizibilă) - tot restul chrome-ului rămâne discret.
   - prefers-reduced-motion oprește hover-lift-ul.
   - @supports acoperă browserele fără backdrop-filter cu un fundal opac, ca
     să nu pară o variantă stricată.
   ========================================================================== */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

  /* ------------------------------------------------------------------------
     HEADER + FOOTER
     ------------------------------------------------------------------------ */
  .site-header {
    background: var(--glass-surface-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom-color: var(--glass-edge-soft);
    box-shadow: var(--glass-shadow);
  }

  .site-footer {
    border-top-color: var(--glass-edge-soft);
    background: var(--glass-surface-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }

  /* ------------------------------------------------------------------------
     CARDURI — .card acoperă și .city-card / .category-card, care se
     folosesc mereu combinate cu el (class="card elev-sm city-card").
     .elev-sm există deja în markup ca hook de elevație, nefolosit până acum.
     ------------------------------------------------------------------------ */
  .card {
    border-color: var(--glass-edge-soft);
    border-radius: var(--glass-radius-lg);
    background: var(--glass-sheen), var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: var(--glass-shadow);
  }

  .elev-sm {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .elev-sm:hover {
      transform: translateY(-2px);
      box-shadow: var(--glass-shadow-lg);
    }
  }

  /* ------------------------------------------------------------------------
     TAG-URI / CHIP-URI — .tag-outline acoperă și .category-chip, combinat
     mereu cu el (class="tag tag-outline category-chip").
     ------------------------------------------------------------------------ */
  .tag-accent,
  .tag-outline {
    border-radius: var(--glass-radius-pill);
    backdrop-filter: blur(12px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  }

  .tag-accent {
    border-color: var(--glass-edge-soft);
    background: var(--glass-surface);
  }

  .tag-outline {
    background: color-mix(in srgb, var(--color-accent-2-100) 55%, transparent);
  }

  /* ------------------------------------------------------------------------
     BUTOANE — doar variantele cu suprafață proprie (primary/secondary).
     .btn-ghost rămâne text simplu, fără fundal - sticla n-ar avea ce reflecta.
     ------------------------------------------------------------------------ */
  .btn-primary,
  .btn-secondary {
    border-radius: var(--glass-radius-pill);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: var(--glass-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .btn-primary {
    background: var(--glass-sheen), color-mix(in srgb, var(--color-accent) 86%, transparent);
  }

  .btn-secondary {
    background: var(--glass-sheen), var(--glass-surface);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover,
    .btn-secondary:hover {
      transform: translateY(-1px);
      box-shadow: var(--glass-shadow-lg);
    }
  }

  /* ------------------------------------------------------------------------
     BUTON SEMNĂTURĂ — „Colaborează” (header + footer). Singurul element cu
     sticlă ocru: mai vizibil intenționat decât restul chrome-ului, discret.
     ------------------------------------------------------------------------ */
  .btn-colaborator {
    border: 1px solid var(--glass-accent2-edge);
    border-radius: var(--glass-radius-pill);
    background: var(--glass-sheen), var(--glass-accent2-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    color: var(--color-accent-2-800);
    box-shadow: var(--glass-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .btn-colaborator:hover {
      transform: translateY(-1px);
      box-shadow: var(--glass-shadow-lg);
      color: var(--color-accent-2-900);
    }
  }

  /* ------------------------------------------------------------------------
     PAGINARE
     ------------------------------------------------------------------------ */
  .page-numbers {
    border-radius: var(--glass-radius-pill);
    background: var(--glass-surface);
    backdrop-filter: blur(14px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(14px) saturate(var(--glass-saturate));
  }

  .page-numbers.current {
    background: color-mix(in srgb, var(--color-accent) 88%, transparent);
    box-shadow: var(--glass-shadow);
  }
}

/* --------------------------------------------------------------------------
   FĂRĂ backdrop-filter: fundal opac în loc de sticlă (Firefox vechi, unele
   browsere pe Android low-end) - rămâne aproape de sistemul vechi, nu pare
   stricat.
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .site-footer,
  .card { background: var(--color-bg); }

  .btn-primary { background: var(--color-accent); }
  .btn-secondary { background: var(--color-bg); }
  .btn-colaborator {
    background: var(--color-accent-2-100);
    border-color: var(--color-accent-2-400);
    color: var(--color-accent-2-800);
  }
}

/* --------------------------------------------------------------------------
   BUTON „COLABOREAZĂ” — poziționare (independentă de sticlă, ca să rămână
   coerentă și în fallback-ul de mai sus).
   -------------------------------------------------------------------------- */
.header-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
}

.header-login {
  padding: 8px var(--space-3);
  font-size: 12px;
}

.header-cta {
  padding: 8px var(--space-4);
  font-size: 12px;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.footer-login {
  padding: 8px var(--space-3);
  font-size: 13px;
}

.footer-cta {
  padding: 8px var(--space-4);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   MOBILE — 0–599px: dacă brand + navigație + acțiuni nu încap pe un rând,
   grupul de butoane cade pe rândul următor în loc să taie/să iasă din ecran.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .site-header-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .header-actions {
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .elev-sm,
  .btn-primary,
  .btn-secondary,
  .btn-colaborator {
    transition: none;
  }

  .elev-sm:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-colaborator:hover {
    transform: none;
  }
}