/* ==========================================================================
   RESPONSIVE.CSS — abordare mobile-first, breakpoints:
   <576px telefoane · 576–768px telefoane mari · 768–992px tablete
   992–1200px laptop · >1200px desktop mare
   (stilurile de bază din celelalte fișiere sunt gândite pentru mobil;
    aici suprascriem progresiv pentru ecrane mai mari, plus câteva
    ajustări specifice mobilului unde e nevoie)
   ========================================================================== */

/* ---- Bază mobilă (sub 576px), suprascrieri pentru desktop-first components ---- */
.hero .container {
  grid-template-columns: 1fr;
}

.hero h1 { font-size: var(--text-xl); }

.subsol .container {
  grid-template-columns: 1fr;
}

.grid-2,
.grid-3,
.grid-4 {
  grid-template-columns: 1fr;
}

.grila-articole {
  grid-template-columns: 1fr;
}

.galerie-foto {
  grid-template-columns: repeat(2, 1fr);
}

.nav-principal {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(84vw, 340px);
  background: var(--culoare-hartie);
  padding: var(--spatiu-7) var(--spatiu-4);
  transform: translateX(100%);
  transition: transform var(--tranzitie-medie);
  overflow-y: auto;
  border-left: 1px solid var(--culoare-linie);
}

.nav-principal[data-deschis="true"] {
  transform: translateX(0);
}

.nav-principal > ul {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spatiu-4);
}

.buton-meniu {
  display: flex;
}

.bara-utilitara__contact {
  display: none;
}

/* ---- ≥576px : telefoane mari ---- */
@media (min-width: 576px) {
  .galerie-foto {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- ≥768px : tablete ---- */
@media (min-width: 768px) {
  h1 { font-size: var(--text-2xl); }
  .hero h1 { font-size: var(--text-2xl); }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grila-articole {
    grid-template-columns: repeat(2, 1fr);
  }

  .subsol .container {
    grid-template-columns: 1fr 1fr;
  }

  .bara-utilitara__contact {
    display: flex;
  }
}

/* ---- ≥992px : laptop / se activează meniul orizontal ---- */
@media (min-width: 992px) {
  .buton-meniu { display: none; }

  .nav-principal {
    position: static;
    width: auto;
    transform: none;
    background: transparent;
    padding: 0;
    border-left: none;
    overflow: visible;
  }

  .nav-principal > ul {
    flex-direction: row;
    align-items: center;
  }

  .hero .container {
    grid-template-columns: 1.2fr 1fr;
  }

  .hero h1 { font-size: var(--text-3xl); }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  .grila-articole {
    grid-template-columns: repeat(3, 1fr);
  }

  .subsol .container {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  /* ---- Submeniuri ca panouri dropdown pe desktop ---- */
  .submeniu {
    position: absolute;
    top: calc(100% + var(--spatiu-2));
    left: 0;
    min-width: 280px;
    background: var(--culoare-alb);
    border: 1px solid var(--culoare-linie);
    border-radius: var(--raza-colt-mare);
    box-shadow: var(--umbra-ridicata);
    padding: var(--spatiu-2);
    z-index: 50;
  }

  .submeniu li a {
    padding: var(--spatiu-2) var(--spatiu-3);
    border-radius: var(--raza-colt);
  }

  .submeniu li a:hover,
  .submeniu li a[aria-current="page"] {
    background: var(--culoare-hartie-inchis);
  }

  .sediu {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* ---- ≥1200px : desktop mare ---- */
@media (min-width: 1200px) {
  .container {
    padding-inline: var(--spatiu-5);
  }
}

/* ---- Formulare: două coloane pe ecrane mai late ---- */
@media (min-width: 768px) {
  .camp-dubla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spatiu-4);
  }
}

/* ---- Print ---- */
@media print {
  .antet, .subsol, .bara-utilitara, .buton-meniu, .hero__actiuni {
    display: none;
  }
}