/* ---------------------------------------------------------------
   Kachelraster der Startseite – ersetzt die Masonry-Galerie.
   Maße aus dem Original bei 1440px: Raster 1310px breit (x 65–1375),
   vier Spalten, zwei Zeilen = 645px, 10px Fuge.

   Drei Kachelarten wie im Original:
   - Foto-Kachel: nur das Bild. Beim Überfahren legt sich ein Schleier
     (#1d1d1d, 40 %) darüber und der Titel erscheint mittig, weiß, 35px.
   - Transparente Kachel (Öffnungszeiten, Kia Ora): Petrol auf dem
     eigenen Hintergrund, Inhalt vertikal mittig.
   - Bild-Kachel: reine Illustration ohne Text.
   --------------------------------------------------------------- */

.kiwis-raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 317.5px;
	grid-auto-flow: dense;
	gap: 10px;
	max-width: 1310px;
	margin-inline: auto;
}

.kiwis-raster > * {
	margin-block: 0 !important;
	overflow: hidden;
	position: relative;
}

.kiwis-kachel--gross { grid-column: span 2; grid-row: span 2; }
.kiwis-kachel--hoch  { grid-row: span 2; }
.kiwis-kachel--quer  { grid-column: span 2; }

.kiwis-raster :is(h1, h2, h3, h4, h5, h6) { margin-block: 0; }

/* Bild-Kacheln */
.kiwis-raster .wp-block-image,
.kiwis-raster .wp-block-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

/* ---------------------------------------------------------------
   Foto-Kacheln mit Titel beim Überfahren
   --------------------------------------------------------------- */

.kiwis-raster .wp-block-cover {
	height: 100%;
	min-height: 100% !important;
	padding: 0;
}

.kiwis-raster .wp-block-cover .wp-block-cover__background {
	background-color: #1d1d1d !important;
	opacity: 0 !important;
	transition: opacity 250ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.kiwis-raster .wp-block-cover:not(.kiwis-kachel--zeiten) .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	text-align: center;
	opacity: 0;
	transition: opacity 250ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.kiwis-raster .wp-block-cover:not(.kiwis-kachel--zeiten):is(:hover, :focus-within) .wp-block-cover__background {
	opacity: 0.4 !important;
}

.kiwis-raster .wp-block-cover:not(.kiwis-kachel--zeiten):is(:hover, :focus-within) .wp-block-cover__inner-container {
	opacity: 1;
}

.kiwis-raster .wp-block-cover h3 {
	font-size: 35px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1.05px;
	text-transform: uppercase;
	color: #fff;
}

/* Ganze Kachel klickbar, ohne den Link seiner Bedeutung zu berauben. */
.kiwis-kachel h3 a {
	color: inherit;
	text-decoration: none;
}

.kiwis-kachel h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Geräte ohne Zeiger zeigen den Titel dauerhaft – sonst wäre er dort nie zu sehen. */
@media (hover: none) {
	.kiwis-raster .wp-block-cover:not(.kiwis-kachel--zeiten) .wp-block-cover__inner-container { opacity: 1; }
	.kiwis-raster .wp-block-cover:not(.kiwis-kachel--zeiten) .wp-block-cover__background { opacity: 0.4 !important; }
}

/* ---------------------------------------------------------------
   Kachel „So sind wir für Dich da“
   Weißer Grund mit Illustration, Inhalt 45px eingerückt und
   vertikal mittig, Titel 35px Petrol, Tabelle 238px, Schaltfläche
   gefüllt.
   --------------------------------------------------------------- */

.kiwis-kachel--zeiten .wp-block-cover__image-background {
	object-fit: fill;
}

.kiwis-kachel--zeiten .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 100%;
	padding: 0 45px;
	color: var(--wp--preset--color--primary);
	text-align: left;
}

.kiwis-kachel--zeiten h3 {
	color: var(--wp--preset--color--primary) !important;
	margin-block-end: 14px !important;
	max-width: 238px;
}

.kiwis-kachel--zeiten .kiwis-zeiten { width: 238px; }

.kiwis-kachel--zeiten .wp-block-buttons {
	margin-block-start: 20px;
}

.kiwis-kachel--zeiten .wp-block-button__link {
	background-color: var(--wp--preset--color--primary) !important;
	border: 1px solid transparent !important;
	color: #fff !important;
	padding: 12px 60px;
	border-radius: 5px;
}

.kiwis-kachel--zeiten .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent) !important;
}

/* ---------------------------------------------------------------
   Textkachel „Kia Ora“: Petrol auf Weiß, 70px eingerückt.
   --------------------------------------------------------------- */

.kiwis-kachel--text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 70px !important;
	background: transparent !important;
	color: var(--wp--preset--color--primary) !important;
}

.kiwis-kachel--text h3 {
	font-size: 35px;
	line-height: 1.3;
	letter-spacing: -1.05px;
	color: var(--wp--preset--color--primary) !important;
	margin-block-end: 14px !important;
}

.kiwis-kachel--text p {
	color: var(--wp--preset--color--primary) !important;
	margin: 0;
}

/* ---------------------------------------------------------------
   Schmale Bildschirme – dort blendet das Original das Raster aus;
   die Regeln greifen nur, falls es doch einmal sichtbar ist.
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
	.kiwis-raster { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
}

@media (max-width: 600px) {
	.kiwis-raster { grid-template-columns: 1fr; grid-auto-rows: 240px; }
	.kiwis-kachel--gross,
	.kiwis-kachel--quer,
	.kiwis-kachel--hoch { grid-column: span 1; grid-row: span 1; }
}