/* Ride types bento: asymmetric, six tiles, one tall and two wide. */
.azb-bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.azb-tile {
	position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
	min-height: 240px; border-radius: var(--radius-card); background: var(--azb-raised);
	color: var(--azb-ink) !important; text-decoration: none;
}
.azb-tile__media { position: absolute; inset: 0; z-index: -1; }
.azb-tile__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: transform var(--dur-reveal) var(--ease-out), opacity var(--dur-ui) var(--ease-out); }
.azb-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--azb-bg) 92%, transparent) 100%); }
.azb-tile::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--azb-accent), var(--azb-accent-hi));
	transform: scaleX(0); transform-origin: left; transition: transform var(--dur-reveal) var(--ease-out);
}
.azb-tile__body { display: grid; gap: var(--s-2); width: 100%; padding: var(--s-6); }
.azb-tile__title { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.azb-tile__line { color: color-mix(in srgb, var(--azb-ink) 78%, var(--azb-bg)); font-size: var(--fs-small); max-width: 30ch; }
.azb-tile__go { position: absolute; top: var(--s-5); right: var(--s-5); display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--azb-bg) 60%, transparent); color: var(--azb-ink); }
.azb-tile--a .azb-tile__title { font-size: clamp(2rem, 3.6vw, 3rem); }

@media (min-width: 768px) {
	.azb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "a c" "d d" "e f"; grid-auto-rows: minmax(220px, auto); }
}
@media (min-width: 1024px) {
	.azb-bento { grid-template-columns: 1.25fr 1fr 1fr; grid-template-areas: "a b c" "a d d" "e f f"; grid-auto-rows: minmax(250px, 1fr); }
}
@media (min-width: 768px) {
	.azb-tile--a { grid-area: a; } .azb-tile--b { grid-area: b; } .azb-tile--c { grid-area: c; }
	.azb-tile--d { grid-area: d; } .azb-tile--e { grid-area: e; } .azb-tile--f { grid-area: f; }
}

/* Hover reveal: image push-in and a copper edge sweep. Touch devices keep the static state. */
@media (hover: hover) and (pointer: fine) {
	.azb-tile__line { opacity: 0.72; transition: opacity var(--dur-ui) var(--ease-out); }
	.azb-tile:hover .azb-tile__media img { transform: scale(1.05); opacity: 0.85; }
	.azb-tile:hover::after { transform: scaleX(1); }
	.azb-tile:hover .azb-tile__line { opacity: 1; }
	.azb-tile:hover .azb-tile__go { background: var(--azb-accent); color: var(--azb-bg); }
}
.azb-tile:focus-visible { outline: 2px solid var(--azb-accent); outline-offset: 3px; }

/* Staggered entrance (azb-motion.js adds .is-in per tile). */
.azb-js [data-azb-stagger] > *:not(.is-in) { opacity: 0; transform: translateY(24px); }
[data-azb-stagger] > * { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
	.azb-js [data-azb-stagger] > *:not(.is-in) { transform: none; }
	.azb-tile__media img, .azb-tile::after { transition: none; }
}