/* TILE GRID — .db-tiles   (about = 1)
   Prototype .ab-offer: the four brand tiles (Catering, Mittagstisch,
   Kochschule, Torten) as images with the label centred on top of a dark scrim.

   NOT .db-cardgrid, which is what the first build used. Both are "a grid of
   images with text", but cardgrid puts a heading and copy *below* a square
   image in three columns, while this puts one centred label *over* a 240/440px
   image in two columns. Reading the section list rather than the markup is how
   they got conflated.

   Built on core/cover per tile so the image, scrim and centred content come for
   free. Following trap 7, the scrim is a customGradient at dimRatio 100 rather
   than a dimRatio value — core multiplies its own 0.5 base opacity into
   dimRatio, so an authored 0.32 would render at 0.16. */
.db-tiles { background: var(--sand); border-bottom: 1px solid var(--line); }

.db-tiles .db-tiles__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-block: 40px;
}

.db-tiles__title {
	font-size: clamp(1.5rem, 6vw, 5rem);
	line-height: 1.1;
	text-align: center;
	max-width: 20ch;
}

.db-tiles .db-tiles__grid { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* Cover would otherwise impose its own min-height; height is driven here so the
   breakpoint can change it (trap 5 — an inline minHeight beats media queries). */
.db-tiles__tile.wp-block-cover {
	height: 240px;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}

.db-tiles__tile.wp-block-cover > .wp-block-cover__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.db-tiles__tile img.wp-block-cover__image-background { transition: transform .6s ease; }
.db-tiles__tile:hover img.wp-block-cover__image-background { transform: scale(1.04); }

.db-tiles__label {
	margin: 0;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(1.125rem, 3vw, 1.5rem);
	line-height: 1.3;
	color: var(--white);
	text-align: center;
}
.db-tiles__label a { color: inherit; }

@media (min-width: 861px) {
	.db-tiles .db-tiles__inner { padding-block: 120px; gap: 48px; }
	.db-tiles__title { font-size: 5rem; }
	.db-tiles .db-tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.db-tiles__tile.wp-block-cover { height: 440px; }
	.db-tiles__label { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.db-tiles__tile img.wp-block-cover__image-background,
	.db-tiles__tile:hover img.wp-block-cover__image-background { transition: none; transform: none; }
}

/* --- the whole tile is the link ------------------------------------------
   Client: "the blocks should be clickable not just the titles/text inside them."
   Only the label carried the <a>, so the other ~95% of a 240/440px image was
   dead.

   Done with a stretched pseudo-element rather than by wrapping the tile in an
   anchor: the tile is a core/cover, and core owns its markup — an <a> around it
   is not something the block editor can express, and nesting one inside would
   still leave the image outside the hit area. `::after` on the existing link
   covers the tile and needs no markup change at all, so the client can still
   edit the label as ordinary text and the link target stays in the editor.

   The tile needs `position: relative` for the overlay to size to it, and the
   label needs a z-index so its text stays selectable above its own overlay. */
.db-tiles__tile { position: relative; }

.db-tiles__label a::after {
	content: "";
	position: absolute;
	inset: 0;
	/* above the cover's scrim, below nothing else — the tile has no other
	   interactive content */
	z-index: 1;
}

/* Affordance for the whole tile, not just the words. */
.db-tiles__tile { transition: filter .25s ease; }
.db-tiles__tile:hover,
.db-tiles__tile:focus-within { filter: brightness(1.08); }

/* Keyboard users must still see where they are: the focus ring belongs on the
   tile now that the tile is the target. */
.db-tiles__label a:focus-visible { outline: none; }
.db-tiles__tile:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }