/* ============================================================
 * BIOTA · SECTION · Ecosystem  (markup: templates/front-page.html)
 * Six category tiles. Mobile: Kamera full-width above a 2-up grid.
 * Desktop: a 3-column bento with Kamera as a 2x2 hero on the left.
 * Builds on: .biota-section / __inner / __header, .biota-tile, .biota-badge.
 * ============================================================ */

.biota-ekosistem__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--bt-20);
}

/* Match the tiles to the source photos' 4:3 ratio so nothing is cropped top or
   bottom. On mobile every tile (incl. the full-width Kamera) is 4:3; on desktop
   the small tiles stay 4:3 and drive the row height, while the featured Kamera
   derives its height from spanning two rows (see below). */
.biota-ekosistem__grid > * {
	aspect-ratio: 4 / 3;
}

/* Mobile: the featured Kamera tile (first) spans the full width; the other
   five flow two-up below it (Kunci ends up alone on the last row). */
.biota-ekosistem__grid > :first-child {
	grid-column: 1 / -1;
}

/* Desktop bento:
 *   +---------------+----------+
 *   |               | Pet Tech |
 *   |    Kamera     +----------+
 *   |   (2 x 2)     | Storage  |
 *   +-------+-------+----------+
 *   | Lampu | Autom | Kunci    |
 *   +-------+-------+----------+
 */
@media (min-width: 900px) {
	/* This section needs a wide content column for the bento. */
	.biota-section__inner:has(.biota-ekosistem__grid) {
		max-width: 1280px;
	}
	.biota-ekosistem__grid {
		grid-template-columns: repeat(3, 1fr);
		/* Rows follow the 4:3 small tiles instead of a fixed height. */
		grid-auto-rows: auto;
		gap: 20px;
	}
	/* Kamera spans 2x2, so its height comes from the two rows, not its own
	   ratio (2 cols wide over 2 rows tall lands at ~4:3 anyway). */
	.biota-ekosistem__grid > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; } /* Kamera */
	.biota-ekosistem__grid > :nth-child(2) { grid-column: 3;     grid-row: 1; }     /* Pet Tech */
	.biota-ekosistem__grid > :nth-child(3) { grid-column: 3;     grid-row: 2; }     /* Storage */
	.biota-ekosistem__grid > :nth-child(4) { grid-column: 1;     grid-row: 3; }     /* Lampu Pintar */
	.biota-ekosistem__grid > :nth-child(5) { grid-column: 2;     grid-row: 3; }     /* Automasi */
	.biota-ekosistem__grid > :nth-child(6) { grid-column: 3;     grid-row: 3; }     /* Kunci Pintu */
}