/* ───────────────────────────────────────────────────────────────────────────
   HOME: eroul orașului (/ și /orase/{oras}/home/)
   ───────────────────────────────────────────────────────────────────────────
   Se încarcă la prioritate 102 din functions.php, doar pe șablonul „home".

   Banner-ul se întindea pe toată fereastra și era înalt cât 40% din ea: 1585 ×
   634px pe un ecran de 1600, adică tot primul ecran înainte să înceapă
   evenimentele. Acum stă în `.container` — 1270px, aceeași lățime ca titlul de
   pe /{oras}/{categorie}/ — și ține doar titlul (fără paragraful „Ghid local
   de evenimente…", care era identic ca sens cu paragraful de mai jos).

   Odată scos paragraful, înălțimea a coborât la 130px și poza a ieșit o fâșie
   de 9,5:1 — fotografiile de oraș sunt 3:2, deci se tăia aproape tot. Acum
   1240 × 223px, adică 5,6:1: destul cât să se vadă clădirea, fără să mănânce
   primul ecran ca înainte.

   Înălțimea NU se pune de aici. Flatsome o scrie ca `padding-top` procentual pe
   `#banner-N`, dintr-un `<style>` tipărit în `<body>`, deci după `<head>`: o
   regulă de aici ar pierde și la specificitate, și la ordine. Valorile sunt
   atributele `height*` de pe shortcode, în home.php. Aici stau doar marginile,
   colțurile și podeaua de mai jos.
*/

.on-home-hero {
	margin-top: 20px;
	margin-bottom: 24px;
}

.on-home-hero .banner {
	border-radius: 16px;
	overflow: hidden;
}

/* Podeaua de înălțime.

   `overflow: hidden` de mai sus e ce face colțurile rotunde, dar tot el taie
   titlul dacă nu încape. Procentul se măsoară în lățimea containerului, deci
   pe ecrane înguste se strânge sub text; valorile de aici sunt cutia de titlu
   măsurată în fiecare prag, plus aer:

     320px → titlu 73px     768px → titlu 53px     1600px → titlu 62px
*/
.on-home-hero .banner {
	min-height: 120px;
}

@media (min-width: 550px) {
	.on-home-hero .banner {
		min-height: 110px;
	}
}

@media (min-width: 850px) {
	.on-home-hero .banner {
		min-height: 130px;
	}
}

/* ───────────────────────────────────────────────────────────────────────────
   Lista de evenimente: aceleași carduri ca pe /toate-categoriile/
   ───────────────────────────────────────────────────────────────────────────
   Capul (`.on-cap` + `.on-taburi`) și cardurile (`.on-feed …`) vin din
   `toate-tipurile.css`, încărcat și pe home din functions.php. Nu se copiază
   nimic aici — ar fi două surse pentru același desen.

   Un singur lucru diferă, și e structural: pe listare, `add_single_eventon`
   într-un foreach dă N widget-uri EventON frați, deci copiii direcți ai lui
   `.on-feed` SUNT cardurile și grila stă pe `.on-feed`. Home cheamă
   `add_eventon_el` o dată, deci are UN widget cu N evenimente înăuntru — pe
   `.on-feed` grila ar avea o singură celulă. Aici coboară un nivel, pe lista
   care chiar conține cardurile.

   Selectorul e `.on-feed.on-home-feed` (0,2,0), nu `.on-home-feed` (0,1,0):
   `home.css` se tipărește ÎNAINTE de `toate-tipurile.css` (blocul lui e
   înregistrat mai sus în functions.php), deci la specificitate egală ar
   pierde. Cu clasa dublată câștigă indiferent de ordine.

   Valorile grilei sunt cele din toate-tipurile.css — dacă se schimbă acolo,
   se schimbă și aici. */

.on-feed.on-home-feed {
	display: block;
}

.on-feed.on-home-feed .eventon_events_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 26px 20px;
	align-items: start;
}

/* Implicit tot ce nu e card ocupă rândul întreg, apoi scoatem excepția —
   aceeași ordine ca în listari.css, ca un „arată mai multe" sau un titlu de
   lună adăugat de EventON să nu rupă grila, ci cel mult să ocupe un rând.
   `min-width: 0` e plasa contra „grid blowout": o adresă lungă poate împinge
   coloana peste partea ei. */
.on-feed.on-home-feed .eventon_events_list > * {
	grid-column: 1 / -1;
}

.on-feed.on-home-feed .eventon_events_list > .eventon_list_event {
	grid-column: auto;
	min-width: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Întrebări frecvente, aproape de footer.
   ───────────────────────────────────────────────────────────────────────────
   HTML simplu (nu UX Builder), lângă `get_footer()` în home.php — vezi
   comentariul de-acolo pentru de ce. Textul e identic cu schema FAQPage din
   `<head>`; markup-ul de-aici e doar prezentarea lui.

   Fără accordion/JS: patru perechi întrebare-răspuns nu au nevoie să fie
   ascunse ca să nu încarce pagina — și un motor de răspunsuri citește text
   simplu, nu conținut din spatele unui click.
*/
.on-home-faq {
	margin: 40px auto;
}

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

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

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

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