/* Stilul propriu al sitului firmei, aradi.ro.
   Se incarca DUPA baza.css si tema.css si le rescrie unde trebuie.

   DE CE ARATA ALTFEL DECAT SITURILE DE PRIMARIE
   Acolo publicul are peste 65 de ani si cauta o informatie despre un serviciu:
   text mare, banda pe tot ecranul, ritm asezat, nimic care sa distraga.
   Aici publicul e un manager de proiect care evalueaza un furnizor in doua minute:
   are nevoie sa vada repede ce facem, ce acreditari avem si cu ce dovada.
   Deci: erou impartit in doua, benzi inchise care taie pagina, fotografii in
   carduri, tipografie mai stransa. Pragurile de accesibilitate raman aceleasi,
   fiindca alea nu sunt o chestiune de gust. */

.stil-firma { --font-titlu: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif; }
.stil-firma h1, .stil-firma h2 { letter-spacing: -.025em; }
.stil-firma h3 { letter-spacing: -.01em; }

.eticheta {
  margin: 0 0 var(--sp-3);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- navigatie */
.navigatie__interior { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.navigatie__marca { font-weight: 700; letter-spacing: -.01em; }
.navigatie__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0 0 0 auto;
  padding: 0;
}
.navigatie__lista a { padding: .5rem .7rem; font-size: 1rem; }

/* ---------------------------------------------------------------- erou cu fundal */
/* ATENTIE la caile din url(). Se scriu relativ la ACEST fisier, care sta in
   static/, nu relativ la pagina. O adresa trecuta printr-o variabila pusa in
   `style=` pe element se rezolva tot fata de fisierul CSS si iese
   `static/static/...`. S-a intamplat o data pe 16.09.2026, la siturile de
   primarie. De aceea aici sunt clase, nu variabile. */
.erou {
  background: linear-gradient(140deg, var(--c-hero-1) 0%, var(--c-hero-2) 100%);
  color: #fff;
  padding: clamp(3rem, 2rem + 4.5vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
.erou--foto {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .58) 58%, rgba(0, 0, 0, .34) 100%),
    linear-gradient(140deg,
      color-mix(in srgb, var(--c-hero-1) 80%, transparent) 0%,
      color-mix(in srgb, var(--c-hero-2) 62%, transparent) 100%),
    url("foto/erou.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center 35%;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .erou--foto {
    background-image: linear-gradient(140deg, var(--c-hero-1) 0%, var(--c-hero-2) 100%);
  }
}
.erou__interior { position: relative; z-index: 1; max-width: 44rem; }
.erou h1 {
  color: #fff;
  margin: 0 0 var(--sp-4);
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  text-wrap: balance;
}
.erou .eticheta { color: rgba(255, 255, 255, .82); }
.erou__introducere {
  margin: 0 0 var(--sp-5);
  font-size: var(--t-mare);
  line-height: 1.6;
  color: rgba(255, 255, 255, .94);
}
.erou__actiuni { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.erou .buton { background: #fff; color: var(--c-hero-1); border: 2px solid #fff; }
.erou .buton:hover { background: rgba(255, 255, 255, .88); }
.buton--fantoma { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); }
.buton--fantoma:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------------------------------------------------------------- banda de cifre */
.cifre { background: var(--c-fundal-slab); border-bottom: 1px solid var(--c-linie); }
.cifre__interior {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
}
.cifra { display: flex; flex-direction: column; gap: .2rem; }
.cifra__valoare {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700; line-height: 1; color: var(--c-accent);
}
.cifra__eticheta { font-size: 1rem; color: var(--c-text-slab); }

/* ---------------------------------------------------------------- titluri de sectiune */
.sectiune-titlu { max-width: 42rem; margin: var(--sp-8) 0 var(--sp-6); }
.sectiune-titlu h2 { margin: 0 0 var(--sp-3); }
.sectiune-titlu p { margin: 0; font-size: var(--t-mare); color: var(--c-text-slab); line-height: 1.6; }
.sectiune-titlu--pe-inchis h2 { color: #fff; }
.sectiune-titlu--pe-inchis p { color: rgba(255, 255, 255, .82); }

/* ---------------------------------------------------------------- carduri cu fundal */
/* Fotografia sta SUB text, nu langa el. Voalul e gros fiindca textul e alb si
   trebuie sa ramana lizibil peste orice zona a pozei, nu doar peste cele inchise. */
.carduri-foto {
  list-style: none; padding: 0; margin: 0 0 var(--sp-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--sp-5);
}
.card-foto {
  position: relative;
  display: flex;
  min-height: 19rem;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
  background-color: var(--c-hero-1);
  background-size: cover;
  background-position: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-foto::before {
  content: "";
  position: absolute; inset: 0;
  /* Valorile sunt calibrate, nu alese din ochi: la .62 sus, cel mai deschis punct
     de sub titlu dadea 6,08:1 cu alb, adica AA dar nu AAA. La .80 trece AAA pe
     toate cinci cardurile. Masurat cu decupaj spre interior, ca sa nu intre in
     masuratoare fundalul paginii din coltul rotunjit. */
  background: linear-gradient(180deg, rgba(8, 18, 20, .80) 0%, rgba(8, 18, 20, .90) 62%, rgba(8, 18, 20, .95) 100%);
}
.card-foto__corp { position: relative; z-index: 1; padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card-foto__corp h3 { color: #fff; margin: 0 0 var(--sp-3); }
.card-foto__corp p { margin: 0 0 var(--sp-3); color: rgba(255, 255, 255, .92); }
.card-foto__corp a { color: #fff; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.card-foto__corp > p:last-child { margin-top: auto; margin-bottom: 0; }
.card-foto__nota {
  font-size: .875rem;
  color: rgba(255, 255, 255, .76) !important;
  border-top: 1px solid rgba(255, 255, 255, .28);
  padding-top: var(--sp-3);
}
.card-foto--consiliere  { background-image: url("foto/consiliere.jpg"); }
.card-foto--formare     { background-image: url("foto/formare.jpg"); }
.card-foto--consultanta { background-image: url("foto/consultanta.jpg"); }
.card-foto--publicitate { background-image: url("foto/publicitate.jpg"); }
.card-foto--web         { background-image: url("foto/web.jpg"); }
.card-foto--chestionare { background-image: url("foto/chestionare.jpg"); }
@media (hover: hover) {
  .card-foto:hover { transform: translateY(-4px); box-shadow: var(--umbra-2); }
}
@media (prefers-reduced-motion: reduce) {
  .card-foto { transition: none; }
  .card-foto:hover { transform: none; }
}

/* ---------------------------------------------------------------- banda inchisa */
.banda-inchisa {
  background: linear-gradient(140deg, var(--c-hero-1) 0%, var(--c-hero-2) 100%);
  color: #fff;
  padding-bottom: var(--sp-8);
}
.banda-inchisa .sectiune-titlu { margin-top: 0; padding-top: var(--sp-8); }
.principii {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-6);
}
.principii h3 { color: #fff; margin: 0 0 var(--sp-3); font-size: var(--t-h3); }
.principii p { margin: 0; color: rgba(255, 255, 255, .88); line-height: 1.65; }
.principii li { border-top: 3px solid rgba(255, 255, 255, .45); padding-top: var(--sp-4); }

/* ---------------------------------------------------------------- chemare finala */
.chemare-finala { background: var(--c-fundal-slab); border-top: 1px solid var(--c-linie); }
.chemare-finala__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-7) 0;
}
.chemare-finala h2 { margin: 0 0 var(--sp-3); }
.chemare-finala p { margin: 0; max-width: 38rem; }

/* ---------------------------------------------------------------- pagini interioare */
.antet-pagina {
  background: linear-gradient(140deg, var(--c-hero-1) 0%, var(--c-hero-2) 100%);
  color: #fff;
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.5rem) 0;
  position: relative;
  overflow: hidden;
}
/* Fotografia paginii sta ca fundal, foarte stinsa: da un ton, nu poarta informatie.
   Textul e alb pe degradeul temei, deci contrastul NU depinde de fotografie. */
.antet-pagina--cu-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto-pagina);
  background-size: cover;
  background-position: center;
  opacity: .3;
  pointer-events: none;
}
.antet-pagina > .container { position: relative; z-index: 1; }
.antet-pagina h1 { color: #fff; margin: 0; text-wrap: balance; }
.antet-pagina__subtitlu {
  margin: var(--sp-3) 0 0;
  font-size: var(--t-mare);
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
  max-width: 44rem;
}

.container--text { max-width: 48rem; padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
.container--text h2 { margin-top: var(--sp-7); }
.container--text h3 { margin-top: var(--sp-5); }
.container--text table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; }
.container--text th, .container--text td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-linie);
  vertical-align: top;
}
.container--text thead th { border-bottom: 2px solid var(--c-accent); }

/* ---------------------------------------------------------------- subsol */
.subsol__interior {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-6);
  align-items: start;
}
.subsol__interior p { margin: 0 0 .35rem; }
.subsol__nume { font-weight: 700; }
.subsol__mic { font-size: .875rem; color: var(--c-text-slab); }
.subsol__credite { grid-column: 1 / -1; border-top: 1px solid var(--c-linie); padding-top: var(--sp-4); }

@media (max-width: 40rem) {
  .erou__actiuni .buton { width: 100%; text-align: center; }
  .navigatie__lista { margin-left: 0; }
  .card-foto { min-height: 17rem; }
}