/* ===== Green Valley — stiluri comune ===== */

:root {
  --background: #fbfbf7;
  --foreground: #1c2b20;
  --brand-50: #f0f7ee;
  --brand-100: #dcecd7;
  --brand-200: #b9d9b0;
  --brand-300: #8fc180;
  --brand-400: #64a453;
  --brand-500: #3f7f35;
  --brand-600: #2f6528;
  --brand-700: #275221;
  --brand-800: #1f3f1a;
  --brand-900: #16311a;
  --white: #ffffff;
  --neon-green: #39ff6a;
  --max-width: 1152px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--brand-900);
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

/* ===== Header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 251, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--brand-100);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.15s;
}

.brand:hover {
  opacity: 0.75;
}

.brand:hover .brand__name {
  color: var(--brand-700);
}

.brand img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px rgba(22, 49, 26, 0.1);
}

/* nume stivuit ("Green" deasupra, "Valley" dedesubt) — inaltimea cutiei
   e fixata exact la diametrul cercului logo-ului (2.5rem, ca la .brand
   img), iar justify-content:space-between lipeste primul rand de
   marginea de sus si al doilea de marginea de jos, ca varful "Green" sa
   coincida cu varful cercului si baza "Valley" cu baza cercului — nu
   doar centrate aproximativ */
.brand__name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 2.5rem;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--brand-900);
  letter-spacing: -0.01em;
}

.brand__name-line {
  font-size: 0.8rem;
  line-height: 1;
}

.main-nav {
  display: none;
  align-items: center;
  gap: 0.05rem;
}

.main-nav a {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(28, 43, 32, 0.7);
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--brand-100);
  border-radius: 0.5rem;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.main-nav a[aria-current="page"] {
  color: var(--white);
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.main-nav a[aria-current="page"]:hover {
  color: var(--white);
  border-color: var(--brand-700);
  box-shadow: none;
}

.main-nav a:hover {
  color: var(--brand-700);
  border-color: var(--neon-green);
  box-shadow: 0 0 0 1px var(--neon-green), 0 0 10px rgba(57, 255, 106, 0.45);
}

.btn {
  display: inline-block;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, background-color 0.15s;
}

.btn-primary {
  background: var(--brand-600);
  color: var(--white);
  padding: 0.65rem 1.35rem;
}

.btn-primary:hover {
  background: var(--brand-700);
}

.btn-light {
  background: var(--white);
  color: var(--brand-900);
  padding: 0.75rem 1.5rem;
}

.btn-light:hover {
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22);
}

.header-cta {
  position: relative;
  display: none;
  margin-left: 0.6rem;
  flex-shrink: 0;
  padding: 0.6rem 1.1rem;
}

/* "sarpe" luminos (segment + punct in cap) care serpuieste exact pe
   perimetrul (conturul) unui buton, inclusiv pe capetele rotunjite — un
   contur SVG (nu o forma CSS rigida) e singurul mod ca segmentul sa se
   curbeze corect in jurul coltului, nu doar sa se roteasca peste el —
   inspirat de accentul verde de pe multiversx.com. Reutilizabil pe orice
   buton: se pune clasa .trace-host pe element (pentru position:relative)
   plus svg-ul .btn-trace inauntru. */
.trace-host {
  position: relative;
}

.btn-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.btn-trace rect {
  fill: none;
  stroke: var(--neon-green);
}

.btn-trace-shape {
  stroke-width: 2.5px;
  stroke-dasharray: 14 86;
  filter: drop-shadow(0 0 3px var(--neon-green));
  animation: ctaDash 4s linear infinite;
}

.btn-trace-dot {
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-dasharray: 0.5 99.5;
  filter: drop-shadow(0 0 4px var(--neon-green));
  animation: ctaDash 4s linear infinite;
  animation-delay: -0.56s;
}

@keyframes ctaDash {
  to {
    stroke-dashoffset: -100;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-trace-shape,
  .btn-trace-dot {
    animation: none;
  }
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  color: var(--brand-800);
  cursor: pointer;
}

.menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-close {
  display: none;
}

.menu-toggle.is-open .icon-open {
  display: none;
}

.menu-toggle.is-open .icon-close {
  display: block;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--brand-100);
  padding: 0.5rem 1.25rem 1.5rem;
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav a {
  display: block;
  padding: 0.65rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  color: rgba(28, 43, 32, 0.8);
}

.mobile-nav a:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.mobile-nav .btn-primary {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
}

@media (min-width: 980px) {
  .main-nav {
    display: flex;
  }
  .header-cta {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* ===== Hero (homepage) ===== */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--brand-900);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transform-origin: center;
  animation: heroZoom 10s ease-out forwards;
}

@keyframes heroZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    animation: none;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22, 49, 26, 0.95),
    rgba(22, 49, 26, 0.3) 55%,
    rgba(22, 49, 26, 0.1)
  );
}

.hero__content {
  position: relative;
  width: 100%;
  padding: 10rem 0 4rem;
  text-align: center;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-200);
}

.hero h1 {
  color: var(--brand-100);
  font-size: 2.5rem;
  max-width: 40rem;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.hero p {
  color: rgba(220, 236, 215, 0.85);
  max-width: 34rem;
  margin-top: 1.25rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 3.75rem;
  }
}

/* ===== Page hero (subpagini) ===== */

.page-hero {
  background: var(--brand-50);
  border-bottom: 1px solid var(--brand-100);
  padding: 4rem 0 5rem;
}

.page-hero h1 {
  font-size: 2.5rem;
  max-width: 40rem;
  margin-top: 0.75rem;
}

.page-hero p {
  max-width: 34rem;
  margin-top: 1rem;
  color: rgba(28, 43, 32, 0.75);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .page-hero h1 {
    font-size: 3rem;
  }
}

/* varianta cu tot textul centrat (eyebrow, h1, paragrafe) + spatiere
   mai compacta, folosita momentan doar pe cartier.html — clasa
   modificator .page-hero--center-title, ca sa nu afecteze celelalte
   subpagini care refolosesc .page-hero cu textul aliniat la stanga */
.page-hero--center-title {
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.page-hero--center-title h1,
.page-hero--center-title p {
  margin-left: auto;
  margin-right: auto;
}

.page-hero--center-title p {
  margin-top: 0.35rem;
}

/* cele doua casete de text alaturate din cartier.html — text imparit in
   doua grupuri, fiecare intr-o caseta cu bordura subtire, centrat */
.page-hero__text-columns {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .page-hero__text-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.page-hero__text-box {
  border: 1px solid var(--brand-200);
  border-radius: 1rem;
  padding: 1.5rem;
  /* padding-top redus (24px -> 18.4px) ca sa compenseze leading-ul
     asimetric al line-height-ului: cu padding egal, spatiul vizual
     dintre bordura de sus si primul rind de text iesea cu ~5.6px mai
     mare decit cel dintre ultimul rind si bordura de jos */
  padding-top: 18.4px;
}

/* varianta cu o singura caseta (un singur paragraf de incadrat, nu doua
   alaturate ca in cartier.html) — latime limitata + centrata, ca sa nu
   se intinda pe toata latimea containerului pentru un text scurt */
.page-hero__text-box--solo {
  max-width: 34rem;
  margin: 1.5rem auto 0;
}

.page-hero__text-box--solo p + p {
  margin-top: 0.75rem;
}

/* varianta pe un singur rind (facilitati.html) — caseta se ingusteaza
   exact pe latimea textului, in loc sa pastreze latimea fixa de mai sus */
.page-hero__text-box--nowrap {
  max-width: none;
  width: fit-content;
  margin: 1.5rem auto 0;
}

.page-hero__text-box--nowrap p {
  white-space: nowrap;
}

/* varianta pe maxim 2 rinduri, pentru un text mai lung decit o singura
   propozitie scurta (facilitati.html) — latime calculata astfel incit
   textul sa incapa exact pe 2 rinduri, cit mai echilibrate ca lungime */
.page-hero__text-box--2line {
  max-width: 57.5rem;
  margin: 1.5rem auto 0;
}

.page-hero__text-box p {
  max-width: none;
  font-size: 1.125rem;
  text-align: justify;
  /* evita sa ramana un singur cuvint pe ultimul rind al unui paragraf
     (justify singur nu intinde ultimul rind) — suportata in browserele
     moderne, ignorata sigur in cele vechi */
  text-wrap: pretty;
}

/* ===== Secțiuni generale ===== */

.section {
  padding: 4rem 0;
}

/* padding redus cu un sfert (4rem -> 3rem), folosit momentan doar pe a
   doua sectiune din cartier.html — clasa modificator .section--tight,
   ca sa nu afecteze celelalte sectiuni care refolosesc .section */
.section--tight {
  padding: 3rem 0;
}

.section-alt {
  background: var(--brand-50);
}

.section-dark {
  background: var(--brand-900);
  color: var(--white);
}

.section-dark h2 {
  color: var(--white);
}

.section-title {
  font-size: 1.875rem;
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .section-title {
    font-size: 2.25rem;
  }
}

.prose p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(28, 43, 32, 0.8);
  max-width: 42rem;
  text-align: justify;
}

.prose p + p {
  margin-top: 1.1rem;
}

.prose a {
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-color: var(--brand-300);
  text-underline-offset: 3px;
}

.note-box {
  margin-top: 2.5rem;
  background: var(--brand-50);
  border-radius: 1rem;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: rgba(28, 43, 32, 0.75);
}

.note-box a {
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-color: var(--brand-300);
}

.placeholder {
  color: rgba(28, 43, 32, 0.4);
}

/* ===== Grile de imagini ===== */

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.image-grid .span-2 {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.image-grid .square {
  aspect-ratio: 1 / 1;
}

/* Galerie generică cu fotografii stivuite pe o singură coloană (folosită
   oriunde e nevoie de aliniere exactă cu o coloană de text lungă — homepage
   și a doua secțiune din cartier.html momentan). Clasă separată de
   .image-grid, care rămâne disponibilă acolo unde se dorește tot modelul
   clasic 1 foto mare + 2 mici. height:100% + grid-auto-rows:1fr împart pe
   rânduri egale înălțimea întinsă a coloanei (vezi .two-col--stretch mai
   jos) — capătul de sus al primei foto și cel de jos al ultimei cad exact
   pe marginile
   coloanei de text, indiferent câte fotografii sau cât text sunt. */
.nature-gallery {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0.75rem;
  height: 100%;
}

.nature-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

/* varianta "cite doua" — fotografii mai mici, cite 2 pe rand, in loc de
   o singura coloana stivuita. Aceeasi garantie de inaltime exacta (mecanism
   mostenit de la .nature-gallery: height:100% + grid-auto-rows:1fr), doar
   ca acum se imparte pe randuri de 2 coloane, nu pe un singur rand per
   fotografie — folosita momentan doar in cartier.html */
.nature-gallery--pairs {
  grid-template-columns: 1fr 1fr;
}

/* aceeasi bordura (culoare + grosime) ca la casetele de text din
   sectiunea "Despre Green Valley" de mai sus (.page-hero__text-box) */
.nature-gallery--pairs img {
  border: 1px solid var(--brand-200);
}

.two-col {
  display: grid;
  gap: 3rem;
}

/* Varianta homepage a .two-col: coloanele se întind la aceeași înălțime
   (nu se centrează una față de alta), ca galeria să se poată întinde
   exact pe înălțimea textului. Clasă separată ca să nu afecteze
   cartier.html, care păstrează centrarea implicită. */
@media (min-width: 980px) {
  .two-col.two-col--stretch {
    align-items: stretch;
  }
}

.two-col > * {
  /* fara asta, un copil cu continut ce nu se poate rupe (ex. white-space:
     nowrap pe un titlu lung) isi poate forta coloana grid sa creasca peste
     jumatate, ingustind drastic coloana cealalta (ex. grila de imagini) */
  min-width: 0;
  /* permite copiilor sa foloseasca unitati cqw, ca sa se poata scala relativ
     la latimea reala a coloanei lor, nu la latimea intregului viewport */
  container-type: inline-size;
}

@media (min-width: 980px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* ===== Carduri ===== */

.card-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .card-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .card-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .card-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  display: block;
  background: var(--white);
  border: 1px solid var(--brand-100);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.15s;
}

.card:hover {
  border-color: var(--brand-300);
}

.card h2,
.card h3 {
  font-size: 1.125rem;
}

.card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(28, 43, 32, 0.7);
  line-height: 1.6;
}

.card .more {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-700);
}

.card-alt {
  background: var(--brand-50);
}

.card-alt p {
  text-align: justify;
}

/* ===== Anunțuri ===== */

.announcement {
  scroll-margin-top: 6rem;
  background: var(--white);
  border: 1px solid var(--brand-100);
  border-radius: 1rem;
  padding: 1.75rem;
}

.announcement + .announcement {
  margin-top: 2rem;
}

.announcement .date {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-500);
}

.announcement h2 {
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

.announcement .body {
  margin-top: 1rem;
  white-space: pre-line;
  line-height: 1.7;
  color: rgba(28, 43, 32, 0.8);
}

/* ===== Galerie + lightbox ===== */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--brand-100);
  border: none;
  padding: 0;
  cursor: pointer;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}

.gallery-item .play-badge svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: white;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 1rem;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__media {
  max-height: 85vh;
  max-width: 60rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__media img,
.lightbox__media video {
  max-height: 85vh;
  max-width: 100%;
  border-radius: 0.5rem;
  object-fit: contain;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__close svg,
.lightbox__prev svg,
.lightbox__next svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox__close {
  top: 1rem;
  right: 1rem;
}

.lightbox__prev {
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

/* ===== FAQ acordeon ===== */

.faq {
  border: 1px solid var(--brand-100);
  border-radius: 1rem;
  background: var(--white);
  overflow: hidden;
}

.faq-item {
  border-top: 1px solid var(--brand-100);
}

.faq-item:first-child {
  border-top: none;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brand-900);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-family: var(--font-sans);
}

.faq-question .plus {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand-600);
  transition: transform 0.2s;
}

.faq-item.is-open .plus {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(28, 43, 32, 0.7);
}

.faq-item.is-open .faq-answer {
  display: block;
}

/* ===== Contact ===== */

.contact-card p:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-500);
}

.contact-card p:last-child {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-900);
}

/* ===== Footer ===== */

.site-footer {
  background: var(--brand-900);
  color: var(--brand-50);
  border-top: 1px solid var(--brand-100);
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  /* padding-top/bottom, NU shorthand "padding: 3rem 0" — shorthand-ul
     zerouri padding-ul lateral pe care .container il pune deja (0
     1.25rem/1.5rem), lipind coloana din stanga de marginea reala a
     paginii in loc sa respecte același inset ca restul site-ului */
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-col {
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.footer-brand img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.footer-brand span {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
}

.footer-col p {
  margin-top: 0.75rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.05rem;
  color: rgba(240, 247, 238, 0.8);
  line-height: 2.15;
  max-width: 20rem;
}

.footer-col h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
}

.footer-col ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.footer-col ul li + li {
  margin-top: 0.5rem;
}

.footer-col ul a,
.footer-col > a {
  font-size: 0.9rem;
  color: rgba(240, 247, 238, 0.8);
}

.footer-col ul a:hover {
  color: white;
}

.footer-fb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-fb svg {
  width: 1rem;
  height: 1rem;
}

.footer-portal-link {
  margin-top: 1rem;
  display: inline-block;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0;
  font-size: 0.75rem;
  color: rgba(240, 247, 238, 0.6);
  text-align: center;
}

/* Legaturi utile — grila de 9 linkuri externe (institutii/servicii din
   Brasov), comuna tuturor paginilor. 3 coloane fixe (3x3), simetrica,
   indiferent de latimea ferestrei — cerinta explicita de aranjare
   armonioasa, nu auto-fit cu impachetare inegala. */
.footer-links {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 3rem;
  padding-top: 2.5rem;
  text-align: center;
}

.footer-links h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  margin: 1.75rem auto 0;
  max-width: 44rem;
}

@media (min-width: 640px) {
  .footer-links-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.footer-links-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.footer-links-grid img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  background: white;
  border-radius: 50%;
  padding: 0.45rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.footer-links-grid span {
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(240, 247, 238, 0.8);
}

.footer-links-grid a:hover span {
  color: white;
}