/**
 * Kategória promók a termékrácsban.
 *
 * A rács a WooCommerce Product Collection blokké. Amíg nincs promó a lapon,
 * a blokk saját, egyenlő hasábos rácsa marad érvényben. Ha van promó, a
 * rácsot 12 hasábra váltjuk: így a termék és a promó szélessége külön
 * hangolható, és a magas promó szélesebb lehet egy terméknél.
 *
 *   ┌──────┬──────┬──────────────┐
 *   │ prod │ prod │              │   termék: 3 hasáb
 *   ├──────┼──────┤    PROMO     │   promó : 6 hasáb, 2 sor
 *   │ prod │ prod │              │
 *   └──────┴──────┴──────────────┘
 *   ┌─────────┬─────────┬─────────┐
 *   │ product │ product │ product │  termék: 4 hasáb
 *   └─────────┴─────────┴─────────┘
 *   ┌───────────────────────────────┐
 *   │           SZÉLES              │  promó: teljes sor
 *   └───────────────────────────────┘
 */

/*
 * A két osztály együtt azért kell, mert a WooCommerce a hasábokat
 * .wc-block-product-template__responsive.columns-N alatt állítja be –
 * azonos fajsúlyú szabályt a betöltési sorrend döntene el.
 */
.wc-block-product-template__responsive.wc-block-product-template:has(.canissi-promo) {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	/* A több cellás elemek körül keletkező lyukakat betölti. */
	grid-auto-flow: dense;
}

/* Alap: három termék egy sorban. */
.wc-block-product-template:has(.canissi-promo) > .wc-block-product {
	grid-column: span 4;
}

/*
 * A magas promó melletti négy termék keskenyebb, hogy kettő elférjen mellé.
 * A :has() a szomszéd-kombinátorral visszafelé is tud nézni, ezért nincs
 * szükség sem külön osztályra, sem nth-child számolgatásra: a szabály akkor
 * is helyes marad, ha a minta (pl. "2:magas, 5:szeles") megváltozik.
 *
 * FONTOS: mind a négy szelektor a rács-előtaggal kezdődik. Nélküle a promó
 * UTÁNI két szabály fajsúlya (0,2,0) kisebb lenne a fenti alapszabálynál
 * (0,3,0), így azok a termékek span 4-et kapnának: a második nem férne be a
 * kép melletti két hasábba, lecsúszna, és üres rés maradna a kép mellett.
 */
.wc-block-product-template:has(.canissi-promo) > .wc-block-product:has(+ .canissi-promo--tall),
.wc-block-product-template:has(.canissi-promo) > .wc-block-product:has(+ .wc-block-product + .canissi-promo--tall),
.wc-block-product-template:has(.canissi-promo) > .canissi-promo--tall + .wc-block-product,
.wc-block-product-template:has(.canissi-promo) > .canissi-promo--tall + .wc-block-product + .wc-block-product {
	grid-column: span 3;
}

.canissi-promo {
	position: relative;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	/* A téma rácsa igazíthat felülre; a promónak ki kell töltenie a celláját. */
	align-self: stretch;
}

.canissi-promo__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #f2f2f2;
}

/*
 * A több sort átfogó csempéknél a magasság a szomszédos termékek soraiból jön,
 * nem a kép saját arányából. A height:100% ilyenkor nem old fel, mert a szülő
 * magassága automatikus — ezért a médiát kiterítjük a cellára.
 */
.canissi-promo--tall .canissi-promo__media,
.canissi-promo--large .canissi-promo__media {
	position: absolute;
	inset: 0;
}

/* Fél szélesség, két sor magas: a minta „magas” lépése. */
.canissi-promo--tall {
	grid-column: span 6;
	grid-row: span 2;
}

/* Kétharmad szélesség, két sor magas. */
.canissi-promo--large {
	grid-column: span 8;
	grid-row: span 2;
}

/* Teljes szélességű sáv. */
.canissi-promo--wide {
	grid-column: 1 / -1;
}

/*
 * A széles sávnak nincs termék-arányú magassága, amihez igazodjon, ezért kap
 * egy sajátot. A többinél a rács cellái adják a méretet.
 */
.canissi-promo--wide .canissi-promo__media {
	aspect-ratio: 21 / 9;
	height: auto;
}

/*
 * Közepes nézet: két termék egy sorban, a promók teljes szélességben.
 * Fél hasábnyi promó mellé itt már nem férne el értelmes méretű termék.
 */
@media (max-width: 900px) {
	.wc-block-product-template:has(.canissi-promo) > .wc-block-product,
	.wc-block-product-template:has(.canissi-promo) > .wc-block-product:has(+ .canissi-promo--tall),
	.wc-block-product-template:has(.canissi-promo) > .wc-block-product:has(+ .wc-block-product + .canissi-promo--tall),
	.wc-block-product-template:has(.canissi-promo) > .canissi-promo--tall + .wc-block-product,
	.wc-block-product-template:has(.canissi-promo) > .canissi-promo--tall + .wc-block-product + .wc-block-product {
		grid-column: span 6;
	}

	.wc-block-product-template:has(.canissi-promo) > .canissi-promo--tall,
	.wc-block-product-template:has(.canissi-promo) > .canissi-promo--large {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Sorátfogás nélkül a kép visszakerül a normál folyamba. */
	.canissi-promo--tall .canissi-promo__media,
	.canissi-promo--large .canissi-promo__media {
		position: static;
		aspect-ratio: 16 / 9;
		height: auto;
	}
}

/*
 * Keskeny nézet: egy hasáb. Ott nincs mit átfogni, minden elem teljes
 * szélességű lesz.
 */
@media (max-width: 600px) {
	.wc-block-product-template:has(.canissi-promo) > .wc-block-product,
	.wc-block-product-template:has(.canissi-promo) > .wc-block-product:has(+ .canissi-promo--tall),
	.wc-block-product-template:has(.canissi-promo) > .wc-block-product:has(+ .wc-block-product + .canissi-promo--tall),
	.wc-block-product-template:has(.canissi-promo) > .canissi-promo--tall + .wc-block-product,
	.wc-block-product-template:has(.canissi-promo) > .canissi-promo--tall + .wc-block-product + .wc-block-product,
	.wc-block-product-template:has(.canissi-promo) > .canissi-promo {
		grid-column: 1 / -1;
	}

	/*
	 * Álló arány, ahogy a termékkártyák képei. A magas és a nagy promót
	 * külön is fel kell sorolni: a 900-as töréspont fekvő arányt adott
	 * nekik nagyobb fajsúllyal, azt itt kell visszavenni.
	 */
	.canissi-promo__media,
	.canissi-promo--tall .canissi-promo__media,
	.canissi-promo--large .canissi-promo__media {
		aspect-ratio: 4 / 5;
		height: auto;
	}

	.canissi-promo--wide .canissi-promo__media {
		aspect-ratio: 16 / 9;
	}
}