/* ==========================================================================
   Emergency House – Galéria grid
   A sablon (sablonhouse/styles.css) .gallery layout-jának 1:1 mása, .eh-
   prefixszel. A képet egy abszolút media-wrapperbe tesszük, hogy ne
   "fújja fel" a gridet (a <img> width/height attribútumai miatt).
   Csak a grid (konténer/cím nélkül).

   Elrendezés (3 oszlop, 2 sor):
     [   TALL   ] [ 1:1 ] [ 1:1 ]
     [  (4:5)   ] [      WIDE     ]
   ========================================================================== */

.eh-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
}

/* --- Cella -------------------------------------------------------------- */
.eh-gallery__cell {
	position: relative;
	min-width: 0;
	min-height: 0;
	border-radius: 2px;
	background: #111; /* alap háttér, amíg nincs kép */
	/* Nincs overflow:hidden a cellán — a sarokvonal kilógjon! A képet a
	   .eh-gallery__media belső wrapper vágja kerekre. */
}

/* --- Cellatípusok (a sablon .gallery__* szabályai) ---------------------- */
.eh-gallery__cell--tall {
	grid-row: span 2;
	aspect-ratio: 4 / 5;
}
.eh-gallery__cell--square {
	/* Nincs aspect-ratio: a cella stretch-szel kitölti a sort, amit a bal
	   oldali tall (4:5) magassága határoz meg. Így nem marad rés a
	   négyzetek és a széles kép között. A képet az object-fit:cover vágja. */
}
.eh-gallery__cell--wide {
	grid-column: span 2;
	min-height: 150px;
}

/* --- Kép: abszolút media-wrapper --------------------------------------- */
/* A kép kikerül a flow-ból → nem hat a cella méretére, biztos kitölti a cellát,
   a cella méretét pedig az aspect-ratio + grid adja. */
.eh-gallery__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 2px;
}
.eh-gallery__media img,
.eh-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Üres slot placeholder (sablon .placeholder) ----------------------- */
.eh-gallery__cell--empty {
	background: repeating-linear-gradient( 135deg, #141414 0 14px, #1b1b1b 14px 28px );
	border: 1px solid #ffffff17;
}

/* --- Sárga sarokvonal a nagy kép bal-felső sarkán (sablon .corner--tl .corner--sm) -- */
.eh-gallery__corner {
	position: absolute;
	top: -10px;
	left: -10px;
	width: 52px;
	height: 52px;
	border-top: 4px solid #E8E51C;
	border-left: 4px solid #E8E51C;
	z-index: 2;
	pointer-events: none;
	box-sizing: border-box;
}

/* --- Reszponzív --------------------------------------------------------- */
/* Tablet: 2 oszlop, a tall a tetején széles bannerként. */
@media ( max-width: 860px ) {
	.eh-gallery {
		grid-template-columns: 1fr 1fr;
	}
	.eh-gallery__cell--tall {
		grid-row: auto;
		grid-column: span 2;
		aspect-ratio: 16 / 10;
	}
}

/* Mobil: egy oszlop, minden cella fix 250px magas. */
@media ( max-width: 640px ) {
	.eh-gallery {
		grid-template-columns: 1fr;
	}
	.eh-gallery__cell {
		height: 250px;
	}
	.eh-gallery__cell--tall {
		grid-row: auto;
		grid-column: auto;
		aspect-ratio: auto;
	}
	.eh-gallery__cell--wide {
		grid-column: auto;
	}
}