/* ===========================================================================
   BLOCURI COMUNE — cele care apar pe mai multe șabloane
   ===========================================================================

   DE CE EXISTĂ FIȘIERUL. Cele trei blocuri de mai jos erau scrise fiecare în
   fișierul unei singure pagini: categoriile în pagina-eveniment.css, întrebările
   frecvente și blocul de link-uri în top-evenimente.css. Fiecare purta un
   comentariu care spunea, în cuvintele lui, „astea sunt aceleași reguli ca
   dincolo, repetate conștient".

   Două copii se mai duc. A treia — `/{oras}/{tip}/`, care le cere pe toate trei
   — nu: sunt ~470 de pagini, iar de acolo încolo orice retuș ar fi trebuit făcut
   în trei locuri, cu speranța că nimeni nu uită unul.

   Deci s-au MUTAT aici, nu copiate: în fișierele de proveniență nu mai există.
   Numele claselor rămân cu prefixele lor (`on-top-faq`, `on-top-linkuri`) —
   redenumirea ar fi însemnat să umblu și în șabloanele care le tipăresc, adică
   altă schimbare, în alt commit.

   SE ÎNCARCĂ pe paginile care chiar au blocurile — vezi gardul din
   functions.php. Prioritate 102, ca fișierele din care au venit.
   =========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   CATEGORII POPULARE ÎN ORAȘ — plăcile de sub „Evenimente similare"
   ───────────────────────────────────────────────────────────────────────────
   HTML-ul vine din onevent_categorii_eveniment_html(). Același desen ca pe
   home: cutie albă cu chenar, cerc cu iconiță, numele dedesubt. Plus numărul
   de evenimente, ca la pastilele de pe hub.

   DE CE NU RIDIC REGULILE DIN home.css ÎNTR-UN LOC COMUN, cum ar fi normal.
   `.on-cat` înseamnă deja DOUĂ lucruri diferite în proiect: pe home e cardul de
   mai sus, pe hub (oras-hub.css:245) e o intrare de listă cu linie sub ea —
   două desene care întâmplător poartă același nume de clasă. Merge doar fiindcă
   fișierele se încarcă pe pagini diferite.

   Într-un fișier comun, la prioritate 101, s-ar bate între ele. De aceea aici e
   o a treia definiție, ancorată în `.on-ev-categorii`, care nu poate ajunge
   nicăieri altundeva. Nu e curat, dar e mai curat decât să dau lui `.on-cat` un
   al treilea înțeles global.

   DE DESFĂCUT ODATĂ: cele trei se unesc când cineva redenumește varianta de pe
   hub în ceva ce spune ce e (`.on-hub-cat`, de pildă) și mută cardul în
   onevent.css, cu verificarea de cascadă din CLAUDE.md. Atunci blocul ăsta
   dispare.
*/
.on-ev-categorii {
	margin: 40px auto 8px;
}

/* Aerul de sub titlu stă pe grilă, nu pe titlu: `de-verificat.css` are
   `h1,...,h6 { margin-bottom: 0em !important }`, care bate orice margine pusă
   pe un titlu. Aceeași capcană e documentată în home.css. */
.on-ev-categorii .on-cat-grila {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
	max-width: 1140px;
	margin-top: 22px;
	margin-bottom: 26px;
}

.on-ev-categorii .on-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 116px;
	padding: 18px 12px;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	background: #fff;
	color: #23262b;
	text-align: center;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.on-ev-categorii .on-cat:hover,
.on-ev-categorii .on-cat:focus-visible {
	border-color: #d2492e;
	background: #fdeee9;
	color: #23262b;
	text-decoration: none;
	transform: translateY(-2px);
}

.on-ev-categorii .on-cat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f3f3f4;
	color: #d2492e;
}

.on-ev-categorii .on-cat:hover .on-cat__icon { background: #fff; }

.on-ev-categorii .on-cat__icon i { font-size: 24px; line-height: 1; }

.on-ev-categorii .on-cat__nume {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* Numărul de evenimente. Mărunt și gri, sub nume: e o precizare, nu o etichetă
   — dacă ar fi la fel de vizibil ca numele, cifra ar concura cu categoria. */
.on-ev-categorii .on-cat__cate {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #8a9099;
}

.on-ev-categorii .on-cat:hover .on-cat__cate { color: #d2492e; }

/* „Arată tot" e ultimul și singurul plin: e o acțiune, nu o categorie. */
.on-ev-categorii .on-cat--tot {
	border-color: #d2492e;
	background: #d2492e;
	color: #fff;
}

.on-ev-categorii .on-cat--tot .on-cat__icon { background: #fff; color: #d2492e; }

.on-ev-categorii .on-cat--tot:hover,
.on-ev-categorii .on-cat--tot:focus-visible {
	background: #b73d24;
	border-color: #b73d24;
	color: #fff;
}

.on-ev-categorii .on-cat--tot:hover .on-cat__icon { background: #fff; color: #b73d24; }

@media (max-width: 549px) {
	.on-ev-categorii .on-cat-grila { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.on-ev-categorii .on-cat        { min-height: 104px; padding: 14px 10px; }
	.on-ev-categorii .on-cat__icon  { width: 38px; height: 38px; }
	.on-ev-categorii .on-cat__icon i{ font-size: 21px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   ÎNTREBĂRI FRECVENTE
   ───────────────────────────────────────────────────────────────────────────
   ACESTEA SUNT ACELEAȘI REGULI CA `.on-home-faq` DIN home.css, repetate
   conștient. Nu e neglijență, și merită o propoziție de explicație ca să nu fie
   „curățate" într-o zi în ceva care se strică.

   home.css se încarcă numai pe home.php, deci regulile de acolo nu ajung aici.
   De mutat în onevent.css n-am mutat: onevent.css e la prioritate 101, home.css
   la 102, iar o regulă coborâtă de la 102 la 101 poate pierde la specificitate
   egală în fața a orice se tipărește între ele — inclusiv `custom.css` din
   mu-plugin, care e tot la 101. Ar fi o schimbare pe home, adică pe
   paisprezece pagini, făcută ca efect secundar al unei pagini noi.

   Când cineva verifică cascada pe home după procedura din CLAUDE.md, cele două
   blocuri se unesc într-unul singur în onevent.css și markup-ul e deja
   pregătit: șablonul tipărește ambele clase, `on-home-faq` și `on-top-faq`.

   Fără accordion și fără JS: șase perechi întrebare-răspuns n-au nevoie să fie
   ascunse, iar un motor de răspunsuri citește text simplu, nu conținut din
   spatele unui click. Ăsta e chiar rostul blocului.
*/
.on-top-faq {
	margin: 40px auto;
}

.on-top-faq h2 {
	color: rgb(85, 85, 85);
	font-size: 22px;
	margin-bottom: 16px;
}

.on-top-faq .on-home-faq__item {
	padding: 14px 0;
	border-top: 1px solid #e4e4e4;
}

.on-top-faq .on-home-faq__item h3 {
	font-size: 16px;
	font-weight: 700;
	color: #222;
	margin: 0 0 6px;
}

.on-top-faq .on-home-faq__item p {
	color: #555;
	margin: 0;
	line-height: 1.5;
}

.on-top-faq .on-home-faq__item a {
	color: #f2694f;
}

/* ───────────────────────────────────────────────────────────────────────────
   BLOCUL DE LINK-URI DE LA COADĂ
   ───────────────────────────────────────────────────────────────────────────
   Trei grupuri: adresele orașului, categoriile și zilele (doar la orașele cu
   hub), apoi celelalte orașe.

   DE CE NU E CEL DIN home.php. Acolo blocul e un `do_shortcode()` cu
   `[row]`/`[col]` din Flatsome, scris pe cele cinci perechi de categorii — deci
   e închis în `if ($are_hub)` și cele opt orașe mici nu-l văd deloc. Aici
   grupurile se compun din PHP, iar cele care n-au unde duce pur și simplu nu se
   tipăresc; orașele mici rămân cu rândul de bază și cu celelalte orașe, adică
   tot cu un drum mai departe.

   `auto-fill` cu minim 260px: pe desktop ies trei coloane, pe tabletă două, pe
   telefon una — fără niciun media query care să repete aceleași cifre.
*/
.on-top-linkuri {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px 40px;
	margin: 44px auto;
	padding-top: 28px;
	border-top: 1px solid #e4e4e4;
}

.on-top-linkuri__titlu {
	color: #111827;
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

/* Spațiul de sub titlu, iarăși pe elementul de dedesubt — vezi nota de la
   `.on-top-erou__lead`. */
.on-top-linkuri__lista {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.on-top-linkuri__lista li {
	margin: 0 0 8px;
}

.on-top-linkuri__lista a {
	color: #4b5563;
	font-size: 15px;
	line-height: 1.45;
	text-decoration: none;
	/* Ținta de atins cu degetul, nu doar textul: un rând de 15px are ~19px
	   înălțime, sub minimul de 24px pe care îl cer regulile de accesibilitate
	   pentru un link într-o listă. Padding-ul vertical o duce la 27px fără să
	   miște rândurile între ele (`margin` compensează). */
	display: inline-block;
	padding: 4px 0;
}

.on-top-linkuri__lista a:hover,
.on-top-linkuri__lista a:focus-visible {
	color: #f2694f;
	text-decoration: underline;
}