/* ============================================================
   LAW - Responsive FLUID (orice rezolutie: iPhone, Android, tableta, PC)
   Bazat pe practici 2026: clamp(), grid auto-fit, min-width:0
   Se incarca ULTIMUL. Mobile-first, fara salturi la breakpoint-uri.
   ============================================================ */

/* ---------- 0. PREVENIRE GLOBALA scroll orizontal (cauza #1 de probleme) ---------- */
html, body{
  max-width:100% !important;
  overflow-x:hidden !important;
}
/* Fix CLASIC: flex/grid items au min-width:auto implicit, ceea ce face textul sa iasa.
   min-width:0 permite textului sa se rupa corect (rezolva "20 produse" care iese). */
*, *::before, *::after{
  min-width:0;
}
/* Imagini/media - niciodata nu depasesc containerul */
img, video, svg, iframe, canvas{
  max-width:100% !important;
  height:auto;
}
/* Text lung (email, url) se rupe in loc sa lateasca pagina */
p, a, span, strong, td, h1, h2, h3, h4, li, label{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

/* ---------- 1. TIPOGRAFIE FLUIDA (clamp) - se scaleaza lin, fara salturi ---------- */
/* Titluri mari - cresc/scad continuu cu ecranul, cu limite */
.hero-copy h1, .hero h1{
  font-size:clamp(2rem, 7vw, 4.5rem) !important;
  line-height:1.04 !important;
}
.law-page-hero h1{
  font-size:clamp(1.9rem, 6vw, 4rem) !important;
  line-height:1.05 !important;
}
h1{ font-size:clamp(1.8rem, 5.5vw, 3.5rem); line-height:1.1; }
h2{ font-size:clamp(1.4rem, 4vw, 2.4rem); line-height:1.15; }
h3{ font-size:clamp(1.1rem, 2.5vw, 1.5rem); }
/* Body ramane fix (readability) - 16px minim ca sa nu declanseze zoom pe iOS */
body{ font-size:16px; }

/* ---------- 2. CONTAINERE FLUIDE ---------- */
.container{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:clamp(12px, 4vw, 32px); /* padding lateral care creste cu ecranul */
}

/* ---------- 3. GRID-URI AUTO-FIT (fara breakpoint-uri, se adapteaza singure) ---------- */
/* Produsele: coloane care se ajusteaza automat intre 1 si 4 dupa spatiu */
.products-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
  gap:clamp(12px, 2vw, 20px) !important;
}
/* Branduri */
.brands{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important;
  gap:12px !important;
}
/* Grid-uri de info/specificatii */
.hero-facts, .feature-meta, .showcase-meta, .spec-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
  gap:12px !important;
}

/* ---------- 4. FLEX care se sparge natural ---------- */
/* Randuri de butoane/actiuni - se aseaza pe coloana cand nu incap */
.hero-actions, .showcase-actions, .contact-actions, .law-404-actions,
.results-top, .sidebar-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
/* Elementele flex nu se micsoreaza sub continut */
.results-top > *{ min-width:0; }

/* Pastila "X produse" - text centrat, nu iese NICIODATA (fix definitiv) */
.count-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:max-content !important;
  white-space:nowrap !important;
  line-height:1 !important;
  padding:10px 16px !important;
  flex-shrink:0 !important;
}

/* ============================================================
   BREAKPOINT-URI DOAR pentru schimbari MAJORE de layout
   (grid-urile de sus se adapteaza deja singure)
   ============================================================ */

/* --- TABLETA si sub (max 900px): layout pe o coloana --- */
@media (max-width: 900px){
  /* Hero-uri pe 2 coloane -> stivuite */
  .hero-grid, .hero-shop, .hero-showcase, .showcase-top,
  .shop-layout, .info-grid, .companie-grid, .split-grid{
    grid-template-columns:1fr !important;
    display:grid !important;
  }
  /* Meniul desktop ascuns (ramane hamburger) */
  nav{ display:none !important; }
}

/* --- TELEFON (max 640px): compactare --- */
@media (max-width: 640px){
  /* Top strip pe o linie centrata */
  .top-strip-inner{
    grid-template-columns:1fr !important;
    text-align:center !important;
    gap:4px !important;
    padding-block:8px !important;
  }
  .top-strip-center, .top-strip-right{ text-align:center !important; }

  /* Carduri - padding redus (cu clamp ca sa fie fluid) */
  .glass, .glass-soft, .account-card, .info-card, .product-card, .law-section{
    padding:clamp(14px, 4vw, 20px) !important;
  }

  /* Sectiuni - spatiere redusa */
  .section{ padding-block:clamp(24px, 6vw, 40px) !important; }
  .hero{ padding:clamp(20px, 5vw, 32px) !important; }

  /* Butoanele mari pe toata latimea, unul sub altul */
  .hero-actions .btn, .hero-actions .ghost-btn,
  .showcase-actions .btn, .showcase-actions .ghost-btn{
    width:100% !important;
    justify-content:center !important;
  }

  /* Footere pe o coloana */
  .site-footer-grid, .law-footer__grid, .cc-final-footer__grid, .footer-grid{
    grid-template-columns:1fr !important;
    text-align:left !important;
  }
  .site-footer-bottom, .law-footer__bottom, .cc-final-footer__bottom{
    flex-direction:column !important;
    gap:8px !important;
    text-align:center !important;
  }

  /* Tabele - scroll orizontal in loc sa sparga pagina */
  .table-wrapper{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  table{ min-width:520px; }

  /* Formulare pe o coloana */
  .law-form .row, .form-row, .field-row{ grid-template-columns:1fr !important; }
  input, select, textarea{ width:100% !important; max-width:100% !important; }

  /* Butoane touch-friendly (min 44px inaltime - standard Apple/Google) */
  .btn, .cart-btn, .ghost-btn, button, .icon-btn{ min-height:44px; }
}

/* --- TELEFON MIC (max 380px): Android budget, iPhone SE --- */
@media (max-width: 380px){
  .brand-copy strong{ font-size:15px !important; }
  .cart-btn, .btn{ padding:11px 15px !important; font-size:14px !important; }
  .glass, .glass-soft, .account-card{ border-radius:18px !important; }
}

/* --- Ecrane FOARTE mari (min 1600px): limitez latimea ca sa nu se intinda --- */
@media (min-width: 1600px){
  .container{ max-width:1440px; }
}

/* ---------- 5. Orientare landscape pe telefon (inaltime mica) ---------- */
@media (max-height: 500px) and (orientation: landscape){
  .hero{ padding:20px !important; }
  .hero-copy h1, .hero h1{ font-size:clamp(1.6rem, 5vh, 2.5rem) !important; }
}