/* ===========================================================================
   PAGINILE „TOP EVENIMENTE" ALE ORAȘELOR — top-evenimente.php
   ===========================================================================
   Se încarcă la prioritate 102, doar pe șablonul ăsta. Vezi hook-ul din
   functions.php, lângă cel de oras-hub.

   FIȘIERUL E MIC, ȘI ASTA E INTENȚIA. Cardurile de eveniment, capul de
   secțiune și grila lor vin din `.on-car` (onevent.css), inclusiv
   modificatorul `.on-car--grila`. Aici sunt doar cele trei lucruri care există
   numai pe pagina asta: eroul, blocul de link-uri de la coadă și spațierea
   dintre ele.

   Dacă te apuci să scrii aici reguli pentru carduri, oprește-te: înseamnă că
   modificarea aparține componentei, nu paginii.
   ======================================================================== */


/* ───────────────────────────────────────────────────────────────────────────
   EROUL
   ───────────────────────────────────────────────────────────────────────────
   Titlu, o frază scurtă, un paragraf. Fără poză de fundal și fără bandă
   colorată: nici varianta din UX Builder n-avea una, iar un banner nou ar
   împinge grila — care e tot conținutul paginii — sub linia de plutire.

   Ce se schimbă față de varianta veche e doar așezarea: acolo titlul era
   centrat într-un `[text_box]` cu spațiere din atribute `style=""`, cu al
   doilea și al treilea `<h1>` la câteva sute de pixeli mai jos. Aici e un bloc
   aliniat la stânga, ca titlurile de pe /orase/{oras}/ și /{oras}/{categorie}/,
   deci omul care trece dintr-o pagină în alta vede același desen.
*/
.on-top-erou {
	padding: 28px 0 4px;
}

.on-top-erou__titlu {
	color: #111827;
	font-size: 34px;
	line-height: 1.15;
	margin: 0;
}

/* Spațiul de sub titlu stă pe FRAZA DE DEDESUBT, nu pe titlu.

   `de-verificat.css` are `h1,h2,h3,h4,h5,h6 { margin-bottom: 0em !important }`
   — o regulă veche care bate orice `margin-bottom` pus pe un titlu, oricât de
   specific ar fi selectorul. Aceeași capcană e documentată în home.css, la
   „Categorii populare". */
.on-top-erou__lead {
	color: #f2694f;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	margin: 12px 0 0;
}

.on-top-erou__intro {
	color: #4b5563;
	font-size: 16px;
	line-height: 1.6;
	margin: 10px 0 0;
	/* Un paragraf de 40 de cuvinte pe toată lățimea unui ecran de 1600px iese
	   pe un singur rând lung, greu de urmărit cu ochiul. Limita e în `ch`, deci
	   ține de mărimea literei, nu de o presupunere despre fereastră. */
	max-width: 82ch;
}

@media (max-width: 767px) {
	.on-top-erou {
		padding: 18px 0 2px;
	}

	.on-top-erou__titlu {
		font-size: 26px;
	}

	.on-top-erou__lead {
		font-size: 16px;
	}

	.on-top-erou__intro {
		font-size: 15px;
	}
}


/* ───────────────────────────────────────────────────────────────────────────
   GRILA
   ───────────────────────────────────────────────────────────────────────────
   Doar spațiul din jurul ei. Cardurile și așezarea lor sunt în onevent.css.
*/
.on-top-grila {
	margin: 8px auto 0;
}

/* A doua grilă — „Evenimente care încep în {oraș}" — apare doar la orașele cu
   sub trei evenimente recomandate. Are nevoie de aer deasupra, altfel titlul ei
   se citește ca al doilea rând al secțiunii de sus, adică exact confuzia pe care
   secțiunea separată o evită.

   CLASA O PUNE PHP-UL, ȘI NUMAI CÂND CHIAR E A DOUA. La orașele fără niciun
   eveniment bifat secțiunea asta e singura de pe pagină și primește clasa de
   bază, fără margine în plus.

   Prima variantă lăsa CSS-ul să decidă, cu `:first-of-type`. Nu ține: selectorul
   întreabă dacă e primul `div` dintre frați, nu dacă e prima grilă — iar între
   ele stau învelișurile Flatsome și banda de reclamă. Cine știe răspunsul e
   șablonul, care tocmai a hotărât dacă tipărește grila de sus. */
.on-top-grila--urmatoare {
	margin-top: 36px;
}


/* ───────────────────────────────────────────────────────────────────────────
   BENZILE DE RECLAMĂ
   ───────────────────────────────────────────────────────────────────────────
   `onevent_banner_home_html()` întoarce un `<section class="container
   on-reclama-banda">`. Containerul Flatsome are 1270px cu 15px de padding, deci
   conținutul lui ține 1240px — dar cardurile de deasupra stau în `.on-car`, care
   se oprește la 1140. Măsurat pe /orase/brasov/ la 1440px: reclama 93→1333,
   cardurile 143→1283. Adică 50px în afară, de fiecare parte. De acolo impresia
   că nu e centrată.

   Aceleași măsuri ca la reclama dintre secțiunile hub-ului, și pentru aceleași
   două motive scrise acolo: 758px o duce spre formatele de tip leaderboard
   (728x90), în loc de dreptunghiul de peste 300px înălțime pe care AdSense îl
   servește când are 1140px la dispoziție; iar `margin:auto` o pune pe același
   centru cu rândul de carduri. Verificat în browser: 334→1092, centru 713,
   exact centrul cardurilor.

   SELECTOR SIMPLU, FĂRĂ FRAȚI. Fișierul se încarcă doar pe șablonul ăsta, deci
   `.on-reclama-banda` înseamnă aici „toate cele trei benzi ale paginii" și nu
   poate ajunge în altă parte. O primă variantă folosea selectori de frate
   (`.on-top-grila + .on-reclama-banda`), ca să nimerească exact locurile — dar
   ăia se rup tăcut la prima secțiune adăugată între ele, iar aici n-au ce
   apăra.

   REGULA NU URCĂ ÎN onevent.css. Aceeași nepotrivire e și pe home, și pe hub, la
   benzile care nu stau între secțiuni; dar aia e o schimbare pe paisprezece
   pagini, care se face separat, cu măsurătoarea ei. */
.on-reclama-banda {
	box-sizing: border-box;
	max-width: 758px;
	padding: 0 15px;
}

/* Pe telefon `.on-car` coboară la 5px de padding, deci 15px aici ar trage
   reclama mai înăuntru decât titlul de deasupra. Aceeași notă ca în
   onevent.css, la reclama dintre secțiuni. */
@media (max-width: 486px) {
	.on-reclama-banda {
		padding: 0 5px;
	}
}