/**
 * Istorii la revenire — grilă de carduri.
 *
 * Cardurile vin din Canva: imagine cu textul desenat în ea. Deci grila e
 * construită în jurul imaginii, iar CSS-ul de aici NU încearcă să impună o
 * înălțime fixă: cardurile Canva pot veni în proporții diferite, iar o tăiere
 * la o înălțime aleasă de noi le-ar decapita textul. Coloanele au lățime egală,
 * înălțimea o dă imaginea.
 */

.ir-archive {
	padding: 48px 0 72px;
	background-color: #f2f5f7;
}

.ir-archive__container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 15px;
}

.ir-archive__head {
	margin-bottom: 28px;
	text-align: center;
}

/* `main h1` e forțat la 2.25rem cu !important în style.min.css. */
.ir-archive__title {
	margin: 0 0 10px;
	font-size: 34px !important;
	font-weight: 700;
	line-height: 1.2;
	color: #07214d;
}

.ir-archive__lead {
	max-width: 640px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.6;
	color: #4a5568;
}

.ir-archive__count {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5182f6;
}

.ir-archive__empty {
	padding: 40px 0;
	text-align: center;
	font-size: 16px;
	color: #4a5568;
}

/* `auto-fill` cu minim 260px: la 100 de istorii, ecranul se umple cât permite
   lățimea, ceea ce e chiar efectul cerut — vizitatorul trebuie să vadă
   cantitativ câți oameni s-au întors. */
.ir-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	align-items: start;
}

.ir-card {
	background-color: #fff;
	border: 1px solid #ededed;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ir-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(7, 33, 77, 0.12);
}

.ir-card__img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Locul cardului lipsă păstrează o proporție, ca grila să nu sară când o
   istorie e adăugată fără imagine. */
.ir-card__img--empty {
	aspect-ratio: 4 / 5;
	background-color: #ededed;
}

.ir-card__body {
	padding: 14px 16px 18px;
}

.ir-card__title {
	margin: 0;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.35;
	color: #07214d;
}

.ir-card__meta {
	margin: 6px 0 0;
	font-size: 13px;
	color: #4a5568;
}

@media (max-width: 600px) {
	.ir-archive {
		padding: 32px 0 48px;
	}

	.ir-archive__title {
		font-size: 26px !important;
	}

	.ir-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 12px;
	}
}

/* ==============================================
   TEASER SUS PE PAGINA GHIDULUI — 3 carduri + link
   ============================================== */
.ist-teaser {
	padding: 56px 0;
}

/* Lipit direct sub hero-ul albastru al ghidului, cei 56px de padding se adunau
   peste `margin-bottom: 56px` al hero-ului: 112px de gol între bandă și titlu. */
.primii-pasi__hero + .ist-teaser {
	padding-top: 0;
}

.ist-teaser__container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 15px;
}

.ist-teaser__head {
	margin-bottom: 24px;
}

.ist-teaser__title {
	margin: 0 0 6px;
	font-size: 28px !important;
	font-weight: 700;
	color: #07214d;
}

.ist-teaser__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #4a5568;
}

/* Coloane care se aranjează singure: teaserul arăta două istorii pe prima
   pagină, iar de pe 14.08.2026 arată patru sus pe pagina ghidului. Cu un număr
   fix de coloane, oricare dintre cele două așezări ieșea strâmbă.
   Cardul-link e egal ca greutate cu istoriile, nu un link mic în colț — el e
   singura cale spre restul, iar restul e chiar argumentul secțiunii. */
.ist-teaser__grid {
	display: grid;
	/* `auto-fit`, NU `auto-fill`: auto-fill păstrează piste goale la capătul
	   rândului (cu 3 carduri + cartonaș ieșeau 5 coloane, dintre care una
	   goală, iar cardurile rămâneau înguste degeaba). auto-fit strânge pistele
	   goale, deci cele patru elemente ocupă toată lățimea. */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	/* `stretch`, nu `start`: toate cardurile din rând ajung la înălțimea celui
	   mai înalt, inclusiv cartonașul-link. Cu `start` fiecare card își ținea
	   propria înălțime și rândul arăta ca un grafic cu bare. */
	align-items: stretch;
}

.ist-teaser__card {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid #ededed;
	border-radius: 12px;
	overflow: hidden;
}

/* Imaginea preia toată înălțimea rămasă din card, dar cu `contain`, NU `cover`.
   Cardurile vin din Canva cu textul DESENAT în imagine și cu proporții diferite
   între ele: `cover` ar fi tăiat exact textul ca să umple caseta. `contain`
   lasă o bandă de fundal sus/jos la cardurile mai late — preț mic pentru a nu
   decapita conținutul. */
.ist-teaser__img {
	flex: 1;
	min-height: 0;
	background-color: #f4f5f7;
}

.ist-teaser__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* `min-height`, nu `aspect-ratio`: cu proporție fixă fiecare card-schelet își
   impunea propria înălțime în funcție de lățimea coloanei, iar rândul ieșea
   inegal — exact ce trebuia reparat. Cu înălțime minimă, `align-items: stretch`
   le aliniază pe toate la cel mai înalt. */
.ist-teaser__img--empty {
	min-height: 280px;
	background-color: #ededed;
}

.ist-teaser__card--empty {
	border-style: dashed;
}

.ist-teaser__body {
	padding: 14px 16px 18px;
}

.ist-teaser__name {
	margin: 0 0 6px;
	font-size: 16px !important;
	font-weight: 700;
	color: #07214d;
}

.ist-teaser__quote {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #4a5568;
}

.ist-teaser__more {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 28px 24px;
	background-color: #07214d;
	border-radius: 12px;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.ist-teaser__more:hover {
	background-color: #0d3470;
}

.ist-teaser__more-label {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.ist-teaser__more-count {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffd200;
}

.ist-teaser__more i {
	font-size: 18px;
}

@media (max-width: 900px) {
	.ist-teaser__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ist-teaser__more {
		grid-column: 1 / -1;
		min-height: 0;
	}
}

/* ==============================================
   LIGHTBOX „click-to-enlarge” — carduri Canva
   ============================================== */
.ir-zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	position: relative;
	font: inherit;
	color: inherit;
}

.ir-zoom:focus-visible {
	outline: 2px solid #003da5;
	outline-offset: 2px;
}

.ir-zoom__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(7, 33, 77, 0.72);
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.ir-zoom:hover .ir-zoom__badge,
.ir-zoom:focus-visible .ir-zoom__badge {
	opacity: 1;
}

/* Fără hover (atingere), badge-ul rămâne vizibil — altfel indiciul „se mărește”
   nu ajunge niciodată la vizitatorii de pe mobil. */
@media (hover: none) {
	.ir-zoom__badge {
		opacity: 1;
	}
}

.brd-ir-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(7, 33, 77, 0.9);
}

/* `display: flex` de mai sus ar bate atributul `hidden` (ambele au aceeași
   specificitate 1,0,0, dar regula asta e mai jos în foaie) — de aceea explicit. */
.brd-ir-lightbox[hidden] {
	display: none;
}

.brd-ir-lightbox__img {
	max-width: 96vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.brd-ir-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brd-ir-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.28);
}

body.brd-ir-lock {
	overflow: hidden;
}