/* ---------------------------------------------------------------------------
   lions.ro — identitate vizuala
   Culorile si degradeul de header sunt preluate exact din implementarea
   lionsclubs.org (Member Resource Center), nu aproximate:
     header  linear-gradient(to right, #0D2240 0%, #00338D 33%, #7A2582 100%)
     footer  #0D2240
   #00338D este albastrul oficial Lions (PMS 288), #F9C910 auriul oficial.
   --------------------------------------------------------------------------- */

:root {
  --lions-blue:   #00338D;
  --lions-navy:   #0D2240;
  --lions-purple: #7A2582;
  --lions-gold:   #F9C910;
  --lions-gold-d: #D9A800;

  --ink:      #1A1D23;
  --muted:    #5A6371;
  --faint:    #8A929E;
  --rule:     #E2E5EA;
  --surface:  #FFFFFF;
  --ground:   #F6F6F6;
  /* Fundalul campurilor de formular. Alb pe alb se distinge doar prin chenar, iar
     pe un ecran slab sau la lumina puternica formularul pare gol. */
  --field:      #F7F8FA;
  --field-rule: #CDD4DE;

  --header-gradient: linear-gradient(to right, #0D2240 0%, #00338D 33%, #7A2582 100%);
  --max: 76rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Archivo, "Public Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.6rem;
}

a { color: var(--lions-blue); }
:focus-visible { outline: 3px solid var(--lions-gold); outline-offset: 2px; }

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

/* --- bara utilitara ------------------------------------------------------ */

.utility {
  background: var(--lions-navy);
  color: #C6CEDA;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.utility .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 2.4rem; flex-wrap: wrap;
}
.utility a { color: #C6CEDA; text-decoration: none; }
.utility a:hover { color: #FFF; text-decoration: underline; }
.utility nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* --- header -------------------------------------------------------------- */

.site-header { background: var(--header-gradient); color: #FFF; }

.site-header .wrap {
  display: flex; align-items: center; gap: 1.25rem;
  padding-top: 0.9rem; padding-bottom: 0.9rem; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: #FFF; }
.brand img { width: 62px; height: 62px; display: block; }
.brand .name { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.22rem; line-height: 1.1; }
.brand .sub { font-size: 0.76rem; color: #C9D3E4; letter-spacing: 0.06em; text-transform: uppercase; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.site-nav a {
  color: #FFF; text-decoration: none; font-weight: 600; font-size: 0.93rem;
  padding: 0.35rem 0; border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--lions-gold); }

.btn {
  display: inline-block; font-weight: 700; text-decoration: none;
  padding: 0.72rem 1.4rem; border: 0; cursor: pointer;
  font-size: 0.95rem; line-height: 1.2; transition: transform .15s ease, background .15s ease;
}
.btn-gold { background: var(--lions-gold); color: #14161A; }
.btn-gold:hover { background: var(--lions-gold-d); transform: translateY(-1px); }
.btn-outline { background: transparent; color: #FFF; box-shadow: inset 0 0 0 2px rgba(255,255,255,.65); }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-blue { background: var(--lions-blue); color: #FFF; }
.btn-blue:hover { background: #002A75; transform: translateY(-1px); }

/* --- hero ---------------------------------------------------------------- */

.hero {
  background: var(--header-gradient);
  color: #FFF;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  position: relative; overflow: hidden;
}
/* Blazon discret in fundal, decupat de marginea sectiunii: emblema oficiala
   Lions Clubs International, nu cea de district. */
.hero::after {
  content: ""; position: absolute; right: -6rem; top: 50%; transform: translateY(-50%);
  width: 34rem; height: 34rem; opacity: .07;
  background: url('/img/lci-emblem.png') center/contain no-repeat;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero .kicker {
  font-size: 0.82rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--lions-gold); font-weight: 700; margin: 0 0 1rem;
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin-bottom: 1rem; }
.hero p.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 44ch; color: #E3E9F3; margin: 0 0 2rem; }
.hero .actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* --- banda de cifre ------------------------------------------------------ */

.stats { background: var(--ground); border-bottom: 1px solid var(--rule); }
.stats .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem; padding-top: 2.2rem; padding-bottom: 2.2rem;
}
.stat .n {
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; color: var(--lions-blue);
  display: block; font-variant-numeric: tabular-nums;
}
.stat .l { font-size: 0.86rem; color: var(--muted); display: block; margin-top: 0.35rem; }

/* --- sectiuni ------------------------------------------------------------ */

section.band { padding: clamp(3rem, 6vw, 4.5rem) 0; }
section.band.alt { background: var(--ground); }

.section-head { max-width: 60ch; margin-bottom: 2.2rem; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
/* Sublinierea aurie de sub titluri este semnatura vizuala a site-ului international. */
.section-head h2::after {
  content: ""; display: block; width: 3.6rem; height: 4px;
  background: var(--lions-gold); margin-top: 0.75rem;
}
.section-head p { color: var(--muted); margin: 0.9rem 0 0; }

.grid { display: grid; gap: 1.4rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  padding: 1.6rem; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: 0 10px 28px rgba(13,34,64,.10); transform: translateY(-2px); }
/* Capul de card. Patrat, ca sa arate la fel indiferent de forma originalului,
   si cu colturile rotunjite. Marginea negativa de sus il trage catre chenar,
   lasand doar cat sa se vada ca sta intr-o rama. */
.card-img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  /* Atributele width/height din HTML rezerva locul cat se incarca imaginea,
     dar height=600 ar bate proportia de mai sus daca nu-l punem pe auto. */
  height: auto;
  border-radius: 12px; margin: -0.5rem 0 1.15rem;
  background: var(--ground);
}
.card h3 { font-size: 1.12rem; }
.card p { color: var(--muted); font-size: 0.94rem; margin: 0 0 1rem; }
.card .more {
  margin-top: auto; font-weight: 700; font-size: 0.9rem;
  color: var(--lions-blue); text-decoration: none;
}
.card .more::after { content: " →"; }
.card .more:hover { text-decoration: underline; }

.news-item { border-bottom: 1px solid var(--rule); padding: 1.2rem 0; }
.news-item:first-child { border-top: 1px solid var(--rule); }
.news-item a { color: var(--ink); text-decoration: none; font-weight: 600; }
.news-item a:hover { color: var(--lions-blue); text-decoration: underline; }
.news-item .meta {
  font-size: 0.78rem; color: var(--faint); text-transform: uppercase;
  letter-spacing: 0.08em; display: block; margin-bottom: 0.25rem;
}

/* --- chemare la actiune -------------------------------------------------- */

.cta { background: var(--lions-gold); color: #14161A; padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 0; }
.cta p { margin: 0.4rem 0 0; max-width: 52ch; }

/* --- subsol -------------------------------------------------------------- */

.site-footer { background: var(--lions-navy); color: #B9C3D4; padding: 3rem 0 2rem; font-size: 0.92rem; }
.site-footer .cols {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.13);
}
.site-footer h4 {
  color: #FFF; font-size: 0.82rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 0.9rem;
}
.site-footer a { color: #B9C3D4; text-decoration: none; }
.site-footer a:hover { color: #FFF; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer .motto {
  font-family: Archivo, sans-serif; font-weight: 700; color: var(--lions-gold);
  font-size: 1.15rem; margin-bottom: 0.5rem;
}
.site-footer .legal {
  padding-top: 1.5rem; display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: #8996AB;
}

@media (max-width: 52rem) {
  .site-nav { width: 100%; margin-left: 0; gap: 1rem; }
  .hero::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Pagini interioare
   --------------------------------------------------------------------------- */

.wrap-narrow { max-width: 52rem; }

.page-head {
  background: var(--header-gradient);
  color: #FFF;
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(1.8rem, 4vw, 2.6rem);
}
.page-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-bottom: 0.4rem; }
.page-head .lead { color: #DDE4F0; max-width: 56ch; margin: 0.7rem 0 0; }

.breadcrumb {
  font-size: 0.8rem; letter-spacing: 0.03em; margin-bottom: 0.9rem;
  color: #B9C7DE;
}
.breadcrumb a { color: #DCE5F2; text-decoration: none; }
.breadcrumb a:hover { color: #FFF; text-decoration: underline; }
.breadcrumb span { margin: 0 0.35rem; }

.empty { color: var(--muted); font-style: italic; }

/* --- continut din CMS ---------------------------------------------------- */

.prose { font-size: 1.02rem; line-height: 1.75; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: 2rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.22rem; }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--lions-blue); }
.prose blockquote {
  margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 4px solid var(--lions-gold); color: var(--muted);
}
/* Continutul mostenit are latimi si inaltimi fixe scrise in atribute HTML.
   Le neutralizam, altfel imaginile ies din pagina pe telefon. */
.prose img {
  max-width: 100% !important; height: auto !important;
  display: block; margin: 1.2rem 0;
}
.prose iframe, .prose video { max-width: 100%; }
/* Tabelele din email-uri au adesea width=600 fix: le lasam sa deruleze in interior
   in loc sa impinga toata pagina pe orizontala. */
.prose table { max-width: 100% !important; border-collapse: collapse; }
.prose > table, .prose .table-scroll { display: block; overflow-x: auto; }
.prose td, .prose th { padding: 0.4rem 0.6rem; }

/* Buletinele sunt HTML de email: fundaluri si culori proprii, pe care le lasam,
   dar le incadram ca sa nu iasa din coloana de text. */
.newsletter-body {
  border: 1px solid var(--rule);
  padding: 1.2rem;
  background: #FFF;
  overflow-x: auto;
}
.newsletter-body * { max-width: 100% !important; }
.newsletter-body font, .newsletter-body span { font-size: inherit !important; }

/* --- galerie ------------------------------------------------------------- */

.gallery {
  margin-top: 2.5rem;
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; height: 11rem; object-fit: cover; display: block;
  border: 1px solid var(--rule); transition: transform .18s ease, box-shadow .18s ease;
}
.gallery a:hover img { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,34,64,.16); }

/* --- paginare ------------------------------------------------------------ */

.pagination-wrap { margin-top: 2.5rem; }
.pagination-wrap nav { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.pagination-wrap svg { width: 1.1rem; height: 1.1rem; }
.pagination-wrap a, .pagination-wrap span {
  padding: 0.45rem 0.8rem; border: 1px solid var(--rule);
  text-decoration: none; color: var(--ink); font-size: 0.9rem;
}
.pagination-wrap a:hover { border-color: var(--lions-blue); color: var(--lions-blue); }
.pagination-wrap [aria-current="page"] span {
  background: var(--lions-blue); color: #FFF; border-color: var(--lions-blue);
}

/* --- organigrama --------------------------------------------------------- */

.org-person h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-family: "Public Sans", system-ui, sans-serif; font-weight: 700; }
.org-person .org-name { color: var(--ink); font-size: 1.1rem; font-weight: 600; margin: 0; }
.org-person .org-vacant { color: var(--faint); font-style: italic; margin: 0; }

.org-group {
  font-size: 1.05rem; margin: 2rem 0 0.7rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--lions-gold);
  display: inline-block;
}
.org-group:first-of-type { margin-top: 0; }

.org-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.org-list li {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline;
  justify-content: space-between;
  padding: 0.6rem 0; border-bottom: 1px solid var(--rule);
}
.org-list .org-role { color: var(--muted); font-size: 0.95rem; }
.org-list .org-holder { font-weight: 600; }

.org-region { margin-bottom: 2.6rem; }
.org-region > header { border-bottom: 3px solid var(--lions-blue); padding-bottom: 0.6rem; margin-bottom: 1.2rem; }
.org-region h3 { font-size: 1.35rem; margin: 0; }
.org-meta { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 0; }

.org-zones { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.org-zone { background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.1rem; }
.org-zone h4 { font-size: 0.95rem; margin: 0; }
.org-zone ul { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.org-zone li {
  display: flex; justify-content: space-between; gap: 0.6rem;
  font-size: 0.92rem; padding: 0.28rem 0;
}
.org-zone li + li { border-top: 1px solid var(--rule); }
.org-count { color: var(--faint); font-variant-numeric: tabular-nums; }
.org-term { color: var(--faint); font-size: .82rem; margin: .35rem 0 0; }

/* --- conturi si zona membrilor ------------------------------------------ */

.util-form { display: inline; }
.util-form button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-decoration: none;
}
.util-form button:hover { color: #FFF; }

/* Latimea se limiteaza pe continut, nu pe .wrap: daca ingustam containerul, formularul
   se centreaza si nu mai sta pe aceeasi verticala cu titlul din antet. */
.auth-box > * { max-width: 30rem; }
.auth-box label { display: block; margin: 1rem 0 .3rem; font-weight: 600; font-size: .93rem; }
.auth-box label.inline { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.auth-box input[type=text], .auth-box input[type=email], .auth-box input[type=password] {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--rule);
  font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink);
}
.auth-box input:focus { border-color: var(--lions-blue); outline: 2px solid var(--lions-gold); outline-offset: 1px; }
.auth-box small { display: block; color: var(--muted); font-size: .82rem; margin-top: .25rem; }
.auth-box .btn { margin-top: 1.3rem; }
.auth-alt { margin-top: 1.6rem; color: var(--muted); font-size: .92rem; }

.note { padding: .8rem 1rem; margin-bottom: 1.2rem; font-size: .93rem; border-left: 4px solid; }
.note ul { margin: 0; padding-left: 1.1rem; }
.note-ok  { background: #EEF6EE; border-color: #2E7D32; color: #1B5E20; }
.note-err { background: #FDEEEE; border-color: #C62828; color: #8E1A1A; }

.dir-filters { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.4rem; }
.dir-filters input[type=search], .dir-filters select {
  padding: .55rem .7rem; border: 1px solid var(--rule); font: inherit; font-size: .93rem;
  background: var(--surface); color: var(--ink);
}
.dir-filters input[type=search] { min-width: 14rem; flex: 1 1 14rem; }
.dir-filters .dir-leo {
  display: flex; align-items: center; gap: .45rem;
  font-size: .9rem; color: var(--muted); white-space: nowrap;
}
.dir-filters .dir-leo input { accent-color: var(--blue, #00338D); }

/* Bifa de pe organigrama nu sta intr-un rand de filtre, deci isi poarta singura spatiul. */
.org-leo-toggle { margin-top: .9rem; }
.org-leo-toggle label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; color: var(--muted); cursor: pointer;
}
.org-leo-toggle input { accent-color: var(--blue, #00338D); }

.dir-count { color: var(--muted); font-size: .9rem; margin: 0 0 .8rem; }

.dir-list { border-top: 1px solid var(--rule); }
.dir-row {
  display: grid; grid-template-columns: 2fr 2fr 1fr; gap: .6rem 1rem; align-items: baseline;
  padding: .75rem .4rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.dir-row:hover { background: var(--ground); }
.dir-name { font-weight: 600; }
.dir-club, .dir-zone { color: var(--muted); font-size: .9rem; }
@media (max-width: 40rem) {
  .dir-row { grid-template-columns: 1fr; gap: .15rem; }
}

.member-card { display: grid; grid-template-columns: 10rem 1fr; gap: .55rem 1rem; margin: 0 0 2rem; }
.member-card dt { color: var(--muted); font-size: .9rem; }
.member-card dd { margin: 0; }
.member-card dd small { display: block; color: var(--faint); font-size: .82rem; }
.member-card dd em { color: var(--faint); font-style: normal; font-size: .85rem; }
@media (max-width: 34rem) { .member-card { grid-template-columns: 1fr; gap: .1rem 0; } }

.member-sub { font-size: 1.15rem; margin-top: 2rem; }
.gdpr-note {
  margin-top: 2.5rem; padding: .9rem 1rem; background: var(--ground);
  color: var(--muted); font-size: .85rem; border-left: 3px solid var(--lions-gold);
}

/* --- sigla guvernatorului in antet -------------------------------------- */

/* Siglele de guvernator au marca deasupra si numele dedesubt, in format portret.
   Micsorata intreaga, marca ajunge la ~30px si numele ramane oricum de necitit. De
   aceea se decupeaza patratul de sus, unde e marca: `cover` + `object-position: top`.
   Merge la fel pentru sigla de anul viitor, fara alt fisier si fara alt cod, cat timp
   pastreaza aceeasi asezare. Numele intreg e in alt si in title. */
/* Sigla din 2026-2027 e practic patrata si contine doar marca, fara numele
   guvernatorului dedesubt, deci nu mai are nevoie de decupare. Fundal transparent, la
   cererea utilizatorului — de urmarit cat de bine se vede albastrul siglei pe albastrul
   antetului; daca se pierde, se revine la discul alb. */
.brand-gov {
  height: 66px; width: auto; display: block;
}
@media (max-width: 40rem) { .brand-gov { height: 54px; } }
.member-card dd a + small { margin-left: .4rem; }
.member-card dd small { display: inline; }

/* --- emblema districtului in subsol ------------------------------------- */

.foot-emblem { width: 76px; height: 76px; display: block; margin: 0 0 1.1rem; }
@media (max-width: 40rem) { .foot-emblem { width: 64px; height: 64px; } }

/* Sigla intreaga de guvernator, cu nume si mandat. Numele e scris in albastru inchis,
   aceeasi familie de culoare ca subsolul, deci pe fundal direct ar fi invizibil:
   sta pe un panou alb. */
/* Tot fara panou alb, ca sa se vada cum arata pe bleumarinul subsolului. */
.foot-gov {
  width: 130px; height: auto; display: block; margin: 0 0 1.2rem;
}
@media (max-width: 40rem) { .foot-gov { width: 108px; } }

/* --- identificatori si istoric pe fisa de membru ------------------------- */

.m-club { display: block; margin-bottom: .5rem; }
.m-club:last-child { margin-bottom: 0; }
.m-id { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.m-undated { color: var(--faint); font-style: italic; }
.org-list .org-role small { display: block; color: var(--faint); font-size: .82rem; }
.org-list .org-holder small { color: var(--faint); font-weight: 400; }

/* --- galeria guvernatorilor de district ---------------------------------- */
/* Selectoarele poarta .prose fiindca blocurile astea stau in corpul paginii de
   continut, unde `.prose img` impune deja margini si inaltime automata. */

.prose .gov-lead {
  display: grid; grid-template-columns: 15rem 1fr; gap: 1.8rem; align-items: center;
  background: var(--ground); border: 1px solid var(--rule);
  border-top: 4px solid var(--lions-gold);
  padding: 1.6rem; margin: 1.5rem 0 2.8rem;
}
.prose .gov-lead img { margin: 0; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.prose .gov-lead .n { font-family: Archivo, sans-serif; font-size: 1.35rem; font-weight: 700; }
.prose .gov-lead .y { color: var(--lions-blue); font-weight: 700; margin: 0.2rem 0 0.9rem; }
.prose .gov-lead .o { color: var(--muted); font-size: 0.94rem; line-height: 1.7; margin: 0; }

.prose .gov-grid {
  display: grid; gap: 1.6rem 1.2rem; margin: 1.5rem 0 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.prose .gov { text-align: center; }
.prose .gov img {
  margin: 0 0 0.7rem; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  border: 1px solid var(--rule);
}
.prose .gov .n { font-weight: 700; line-height: 1.35; }
.prose .gov .y { color: var(--lions-blue); font-weight: 600; font-size: 0.88rem; }
.prose .gov .o { color: var(--muted); font-size: 0.82rem; line-height: 1.55; margin-top: 0.3rem; }

@media (max-width: 640px) {
  .prose .gov-lead { grid-template-columns: 1fr; text-align: center; }
}

/* --- lista de documente descarcabile ------------------------------------- */
/* Un rand are doua actiuni: titlul deschide documentul, butonul din dreapta il
   salveaza. Randurile din paginile mai vechi au doar prima legatura. */

.prose ul.doclist { list-style: none; padding: 0; margin: 0 0 2rem; }
.prose ul.doclist li {
  margin: 0; display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.prose ul.doclist li:first-child { border-top: 1px solid var(--rule); }
.prose ul.doclist a.doc {
  flex: 1; min-width: 0;
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  padding: 0.95rem 0.4rem; text-decoration: none; color: var(--ink); font-weight: 600;
}
.prose ul.doclist a.doc:hover { background: var(--ground); color: var(--lions-blue); }
.prose ul.doclist .meta {
  color: var(--faint); font-size: 0.8rem; font-weight: 400; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.prose ul.doclist a.dl {
  flex: none; padding: 0.4rem 0.75rem; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; color: var(--lions-blue);
  border: 1px solid var(--rule); border-radius: 2px; white-space: nowrap;
}
.prose ul.doclist a.dl:hover { background: var(--lions-blue); color: #FFF; border-color: var(--lions-blue); }

@media (max-width: 560px) {
  .prose ul.doclist a.doc { flex-direction: column; gap: 0.25rem; }
  .prose ul.doclist .meta { align-self: flex-start; }
}

/* --- vizualizatorul de documente ----------------------------------------- */

body.pdfv-open { overflow: hidden; }

.pdfv {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13, 34, 64, 0.72);
  display: none; flex-direction: column;
  padding: clamp(0.5rem, 3vw, 2rem);
}
.pdfv.is-open { display: flex; }

.pdfv-bar {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--lions-navy); color: #FFF;
  padding: 0.6rem 0.7rem 0.6rem 1rem;
}
.pdfv-title {
  flex: 1; min-width: 0; font-weight: 600; font-size: 0.94rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdfv-act {
  flex: none; color: #FFF; text-decoration: none;
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  padding: 0.4rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 2px;
}
.pdfv-act:hover { background: var(--lions-gold); color: #14161A; border-color: var(--lions-gold); }
.pdfv-close {
  flex: none; background: none; border: 0; color: #FFF;
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.4rem;
}
.pdfv-close:hover { color: var(--lions-gold); }

.pdfv-body { flex: 1; min-height: 0; background: #FFF; }
.pdfv-body iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- formulare publice ---------------------------------------------------- */

.formular { margin-top: 2.2rem; }

.form-camp { margin-bottom: 1.15rem; }
.form-camp > label {
  display: block; font-weight: 600; font-size: 0.92rem;
  margin-bottom: 0.35rem; color: var(--ink);
}
.form-camp .oblig { color: #C62828; font-weight: 700; }

.form-camp input[type="text"], .form-camp input[type="email"],
.form-camp input[type="tel"], .form-camp input[type="number"],
.form-camp select, .form-camp textarea {
  width: 100%; padding: 0.65rem 0.75rem;
  border: 1px solid var(--field-rule); border-radius: 6px;
  font: inherit; font-size: 0.98rem; color: var(--ink);
  background: var(--field);
  transition: background-color .15s ease, border-color .15s ease;
}
.form-camp textarea { resize: vertical; min-height: 5rem; }
/* Campul in care se scrie devine alb: asa se vede dintr-o privire unde esti. */
.form-camp input:focus, .form-camp select:focus, .form-camp textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--lions-blue);
  box-shadow: 0 0 0 3px rgba(0, 51, 141, .12);
}
.form-camp input::placeholder, .form-camp textarea::placeholder { color: var(--faint); }

/* Lamurire sub un camp, pentru cazurile in care eticheta singura nu e de ajuns. */
.form-nota {
  margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--muted);
}

/* Doua campuri pe rand pe ecran larg, unul sub altul pe telefon. */
.form-rand { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-rand { grid-template-columns: 1fr; } }

/* Capcana pentru roboti: scoasa din desen fara `display:none`, pe care unii roboti il
   citesc si il ocolesc. */
.form-capcana {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.captcha-rand { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.captcha-rand img {
  border: 1px solid var(--field-rule); border-radius: 6px; display: block; background: var(--ground);
}
.captcha-egal { font-weight: 700; font-size: 1.15rem; color: var(--muted); }
.captcha-rand input { width: 5.5rem !important; text-align: center; font-size: 1.05rem; }
.captcha-alta {
  background: var(--field); border: 1px solid var(--field-rule); border-radius: 6px;
  padding: 0.5rem 0.8rem; font: inherit; font-size: 0.84rem; font-weight: 600;
  color: var(--lions-blue); cursor: pointer;
}
.captcha-alta:hover { background: var(--ground); }

.form-acord {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin: 1.6rem 0; padding: 1rem 1.1rem;
  background: var(--ground); border-radius: 8px;
}
.form-acord input { margin-top: 0.25rem; flex: none; width: 1.05rem; height: 1.05rem; }
.form-acord label { font-size: 0.88rem; line-height: 1.6; color: var(--muted); }

.form-trimite { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

.form-eroare {
  margin: 1.8rem 0 0; padding: 1rem 1.2rem;
  background: #FDECEA; border-left: 4px solid #C62828; border-radius: 6px;
  color: #7F231C; font-size: 0.92rem;
}
.form-eroare p { margin: 0 0 0.5rem; font-weight: 600; }
.form-eroare ul { margin: 0; padding-left: 1.2rem; }
.form-eroare li { margin-bottom: 0.2rem; }

.form-reusita {
  padding: 2rem; text-align: center;
  background: var(--ground); border-top: 4px solid var(--lions-gold); border-radius: 8px;
}
.form-reusita h2 { margin: 0 0 0.6rem; }
.form-reusita p { color: var(--muted); margin: 0 0 1.4rem; }


/* Evenimente: data si locul, pe cartonas si in capul paginii.
   Data e o pastila, nu un rand de text: pe o lista de cartonase e primul lucru cautat, iar
   ochiul trebuie sa o gaseasca fara sa citeasca. Cele viitoare sunt aurii, cele trecute
   raman cenusii — diferenta se vede si fara sa citesti titlul rubricii. */
.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
}
.event-date {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 0.35rem;
  background: var(--ground);
  border: 1px solid var(--rule);
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.event-date.is-next {
  background: var(--lions-gold);
  border-color: var(--lions-gold-d);
  color: var(--lions-navy);
}
.event-loc { color: var(--muted); }
.event-loc::before { content: "· "; color: var(--faint); }

/* In capul paginii de eveniment, pe fundal colorat, pastila cenusie ar disparea. */
.event-meta-lg { margin-top: 1rem; font-size: 0.98rem; }
.event-meta-lg .event-date { background: #FFFFFF; border-color: rgba(255,255,255,.45); color: var(--lions-navy); }
.event-meta-lg .event-date.is-next { background: var(--lions-gold); border-color: var(--lions-gold-d); }
.event-meta-lg .event-loc { color: inherit; opacity: .85; }


/* Miniatura unei stiri, in lista de noutati si pe prima pagina.
   Randul devine flexibil doar cand chiar exista imagine (`.has-thumb`); altfel ramane exact
   cum era, fara o caseta goala in stanga titlului. */
.news-item.has-thumb {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.news-item .news-text { min-width: 0; }

/* Vreo cincime din stiri n-au imagine potrivita. Fara nimic in plus, titlurile lor ar porni
   din marginea stanga, iar cele cu poza cu 9rem mai la dreapta — o margine zimtata, care nu
   arata ca o alegere, ci ca o greseala. Randurile fara poza se retrag deci cu exact latimea
   pe care ar fi ocupat-o poza, si toate titlurile cad pe aceeasi linie.
   Se lasa gol, nu se pune o silueta de umplutura: un chenar gol repetat pe 49 de randuri
   atrage privirea mai tare decat lipsa lui. */
.news-item { padding-left: 9rem; }        /* 8rem poza + 1rem spatiu */
.news-item.has-thumb { padding-left: 0; }

.news-thumb {
  flex: 0 0 auto;
  display: block;
  width: 8rem;
  border-radius: 0.6rem;
  overflow: hidden;              /* colturile taie si imaginea, nu doar cutia */
  background: var(--ground);
  line-height: 0;                /* fara spatiul de sub imagine, care ar rupe rotunjirea */
}
.news-thumb img {
  width: 100%;
  /* `height` explicit in CSS: atributul height="240" din marcaj ar bate altfel regula.
     Vezi [[feedback_css_aspect_ratio_vs_atribut_height]]. */
  height: 6rem;
  /* Rapoartele imaginilor din buletine merg de la 0,75 la 4,03. `cover` le aseaza pe toate in
     acelasi dreptunghi, ca randurile listei sa nu sara in sus si-n jos. */
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.news-item.has-thumb:hover .news-thumb img { transform: scale(1.04); }

/* Pe telefon randul ramane pe orizontala, cu poza mai mica: pusa deasupra titlului, lista ar
   deveni un sir de cartonase inalte, greu de parcurs. */
@media (max-width: 30rem) {
  .news-thumb { width: 5.5rem; }
  .news-thumb img { height: 4.2rem; }

  /* Pe telefon nu se mai retrag: acolo latimea e tot ce ai, si sase caractere pe rand in
     plus fac mai mult bine decat o margine perfect dreapta. */
  .news-item { padding-left: 0; }
}

/* --- zona membrilor: cele patru drumuri ----------------------------------- */

.hub-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

.hub-card {
  display: flex; align-items: center; gap: 1.3rem;
  padding: 2rem 1.7rem;
  text-decoration: none; color: #FFF;
  /* Albastru pentru anuar, violet pentru arhiva, visiniu pentru noutati: culorile
     Lions, ca sa se deosebeasca dintr-o privire fara sa iasa din paleta. */
  background: linear-gradient(115deg, #0D2240 0%, #00338D 100%);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(13, 34, 64, 0.18), 0 14px 30px -20px rgba(13, 34, 64, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hub-card--alt { background: linear-gradient(115deg, #2A0F3A 0%, #7A2582 100%); }
.hub-card--news { background: linear-gradient(115deg, #3A0A16 0%, #A6192E 100%); }
/* Verde pentru evenimente si inscrieri: a patra destinatie a zonei membrilor,
   deosebita dintr-o privire de anuar, arhiva si noutati. */
.hub-card--events { background: linear-gradient(115deg, #0B3320 0%, #1E7A3C 100%); }

/* Cartonasul districtului, la baza zonei membrilor. Acelasi marcaj ca in panou
   (`<x-card-district>`), cu stilurile scrise in atribut — aici se aseaza doar distanta fata
   de nota de deasupra. */
.hub-district { margin-top: 1.75rem; }
.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(13, 34, 64, 0.2), 0 20px 38px -20px rgba(13, 34, 64, 0.8);
}

.hub-ico { flex: none; width: 3.5rem; height: 3.5rem; color: var(--lions-gold); }
.hub-ico svg { width: 100%; height: 100%; display: block; }

.hub-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.hub-t {
  font-family: Archivo, "Public Sans", system-ui, sans-serif;
  font-size: 1.65rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
.hub-d { font-size: 0.94rem; line-height: 1.5; color: #D8E0EE; }
.hub-m {
  font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--lions-gold);
}

.hub-go { flex: none; font-size: 1.5rem; color: var(--lions-gold); transition: transform 0.18s ease; }
.hub-card:hover .hub-go { transform: translateX(4px); }

.hub-note { margin: 1.6rem 0 0; color: var(--muted); font-size: 0.88rem; }

/* Al treilea drum a facut grila sa treaca de la doua coloane la trei, iar la trei
   cardul are 376px din care textul primea doar 203: restul il mancau emblema, sageata
   si spatiile dintre ele. Titlul se rupea in doua randuri si descrierea in patru.

   Regula e simpla: cat timp cardul imparte randul cu altul, se aseaza pe verticala si
   textul primeste toata latimea; sageata trece in coltul din dreapta sus, unde nu mai
   intra in randul textului. Pragul de 46.25rem e chiar latimea de la care `auto-fit`
   incepe sa puna doua coloane (2 x 21rem + 1.25rem spatiu + 3rem marginile lui .wrap).
   Sub el ramane o singura coloana, cardul e lat cat pagina, si acolo randul orizontal
   de pana acum are tot spatiul de care are nevoie. */
@media (min-width: 46.25rem) {
  .hub-card {
    position: relative;
    flex-direction: column; align-items: flex-start;
    gap: 1.1rem; padding: 1.9rem 1.7rem 2rem;
  }
  .hub-body { width: 100%; }
  .hub-go { position: absolute; top: 1.7rem; right: 1.7rem; }
}

/* --- arhiva: dosarele ----------------------------------------------------- */

.arh-search { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.7rem; }
.arh-search input {
  flex: 1; min-width: 14rem; padding: 0.7rem 0.9rem; font: inherit;
  background: var(--field); border: 1px solid var(--field-rule); border-radius: 2px;
}

.arh-grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.arh-card {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.2rem; text-decoration: none;
  background: var(--ground);
  border: 1px solid var(--rule); border-left: 3px solid var(--lions-gold); border-radius: 3px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.arh-card:hover {
  background: #FFF; border-left-color: var(--lions-blue);
  box-shadow: 0 10px 22px -16px rgba(13, 34, 64, 0.75);
}
.arh-card-t {
  font-family: Archivo, "Public Sans", system-ui, sans-serif;
  font-size: 1.12rem; font-weight: 700; color: var(--ink);
}
.arh-card-m {
  font-size: 0.78rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.arh-total { margin: 1.5rem 0 0; color: var(--faint); font-size: 0.85rem; }

.arh-group { margin: 2.4rem 0 0; }
.arh-group h2 {
  font-size: 1.2rem; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.arh-group h2 a { color: var(--ink); text-decoration: none; }
.arh-group h2 a:hover { color: var(--lions-blue); text-decoration: underline; }
.arh-date {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em;
  color: #FFF; background: var(--lions-blue);
  padding: 0.2rem 0.5rem; border-radius: 2px; white-space: nowrap;
}
.arh-more { margin: 0.7rem 0 0; font-size: 0.85rem; }

/* --- arhiva: randul de document ------------------------------------------- */

.arh-list { list-style: none; padding: 0; margin: 0.7rem 0 0; }
.arh-list > li { border-bottom: 1px solid var(--rule); }
.arh-list > li:first-child { border-top: 1px solid var(--rule); }

.arh-row { display: flex; align-items: center; gap: 0.6rem; }
.arh-row a.doc {
  flex: 1; min-width: 0;
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  padding: 0.9rem 0.4rem; text-decoration: none; color: var(--ink); font-weight: 600;
}
.arh-row a.doc:hover { background: var(--ground); color: var(--lions-blue); }
.arh-row .doc-t { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.arh-row .doc-t small { font-weight: 400; font-size: 0.78rem; color: var(--faint); }
.arh-row .meta {
  color: var(--faint); font-size: 0.78rem; font-weight: 400; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.arh-row a.dl {
  flex: none; padding: 0.4rem 0.75rem; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; color: var(--lions-blue);
  border: 1px solid var(--rule); border-radius: 2px; white-space: nowrap;
}
.arh-row a.dl:hover { background: var(--lions-blue); color: #FFF; border-color: var(--lions-blue); }

.arh-pages { padding: 0 0.4rem 0.8rem; }
.arh-pages summary { cursor: pointer; font-size: 0.8rem; color: var(--muted); }
.arh-pages ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.6rem 0 0; margin: 0;
}
.arh-pages a {
  display: inline-block; min-width: 2.1rem; text-align: center;
  padding: 0.25rem 0.45rem; font-size: 0.8rem; text-decoration: none;
  color: var(--lions-blue); border: 1px solid var(--rule); border-radius: 2px;
}
.arh-pages a:hover { background: var(--lions-blue); color: #FFF; }

/* Pagina scanata se arata in acelasi strat ca documentele, doar ca desenata direct.
   `!important` fiindca regula de mai sus da `display: block` cadrului, iar `display`
   bate atributul `hidden`. */
.pdfv-body img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; display: block; }
.pdfv-body [hidden] { display: none !important; }
.pdfv-body:has(> img:not([hidden])) { background: #14161A; display: flex; align-items: center; }

@media (max-width: 560px) {
  .arh-row a.doc { flex-direction: column; gap: 0.25rem; }
  .arh-row .meta { align-self: flex-start; }
  .hub-card { flex-wrap: wrap; }
  .hub-go { display: none; }
}


/* ---------------------------------------------------------------------------
   Cartonasul de calendar de pe prima pagina.

   Sta in foaia comuna, si nu in `calendar.css`, fiindca se vede la fiecare vizita
   pe prima pagina — o a doua cerere de foaie pentru douazeci de randuri ar fi
   costat mai mult decat randurile.
   --------------------------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.band-calendar { padding: clamp(2.2rem, 4vw, 3.2rem) 0; background: var(--ground); }

.cal-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(13,34,64,.04), 0 10px 30px rgba(13,34,64,.06);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.cal-card:hover {
  box-shadow: 0 14px 38px rgba(13,34,64,.12);
  transform: translateY(-2px);
  border-color: #CFD6E0;
}
.cal-card:focus-visible { outline: 3px solid var(--lions-gold); outline-offset: 3px; }

@media (min-width: 52rem) {
  /* Doua coloane abia de la 832px: pe tableta in picioare, lista de sub text
     se citeste mai bine decat doua coloane inguste. */
  .cal-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.4rem; align-items: center; }
}

.cal-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; margin-bottom: 0.9rem;
  border-radius: 11px;
  background: #EAF0FA;
  color: var(--lions-blue);
}
.cal-card-stanga h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: 0.5rem; }
.cal-card-stanga p  { color: var(--muted); margin: 0 0 1.2rem; max-width: 42ch; }

/* `span`, nu `a`: tot cartonasul e deja o legatura, iar o legatura in alta
   legatura e HTML nevalid si se comporta imprevizibil la apasare. */
.cal-card-buton { pointer-events: none; }

.cal-card-dreapta { min-width: 0; }
.cal-card-eticheta {
  margin: 0 0 0.7rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.cal-card-gol { margin: 0; color: var(--muted); font-size: 0.95rem; }

.cal-card-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.cal-card-lista li {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: var(--ground);
}
.cal-card-lista .cal-data { flex: 0 0 2.7rem; text-align: center; line-height: 1.05; }
.cal-card-lista .cal-data-zi { display: block; font-family: Archivo, sans-serif; font-size: 1.28rem; font-weight: 700; }
.cal-card-lista .cal-data-luna { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }

.cal-card-text  { min-width: 0; }
.cal-card-titlu {
  display: block; font-weight: 700; font-size: 0.96rem; line-height: 1.35;
  /* Doua randuri si gata: un titlu lung nu are voie sa impinga cartonasul. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-card-cat {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem;
  font-size: 0.76rem; font-weight: 700; color: var(--c, var(--lions-blue));
}

@media (prefers-reduced-motion: reduce) {
  .cal-card { transition: none; }
  .cal-card:hover { transform: none; }
}