/*
 * Events Bento Block — style.css
 * AMK-1171
 *
 * Bento grid with featured tall card, image stack, banner image,
 * horizontal card, and two small hover-reveal cards.
 */

/* ============================================================
   Section wrapper
   ============================================================ */
.amk-events-bento {
	width: min(100%, var(--amk-container-max, 75rem));
	margin-inline: auto;
	padding-inline: var(--amk-gutter, clamp(1rem, 4vw, 2rem));
}

/* ============================================================
   Header: headline + intro
   ============================================================ */
.amk-events-bento__header {
	margin-bottom: 3rem;
}

.amk-events-bento__headline {
	font-family: "Roboto", sans-serif;
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: #33475b;
	margin: 0 0 1.5rem;
}

.amk-events-bento__intro {
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #33475b;
	max-width: 780px;
}

.amk-events-bento__intro p {
	margin: 0 0 1rem;
}

.amk-events-bento__intro p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Bento grid
   Left column ≈ 38%, Right column ≈ 62%
   ============================================================ */
.amk-events-bento__grid {
	display: grid;
	grid-template-columns: 38fr 62fr;
	gap: 16px;
}

/* ============================================================
   Left column
   ============================================================ */
.amk-events-bento__left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ============================================================
   Right column
   ============================================================ */
.amk-events-bento__right {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Top row: banner image + horizontal card side by side */
.amk-events-bento__top-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

/* Bottom row: two small cards side by side */
.amk-events-bento__bottom-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* ============================================================
   Shared card base
   All cards share position:relative, border-radius, overflow
   ============================================================ */
.amk-events-bento__featured,
.amk-events-bento__horizontal,
.amk-events-bento__small-card,
.amk-events-bento__banner,
.amk-events-bento__stack-item {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	display: block;
}

/* Background image fills card */
.amk-events-bento__card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: inherit;
}

/* ============================================================
   Featured card (tall, left column)
   ============================================================ */
.amk-events-bento__featured {
	flex: 1;
	min-height: 500px;
}

/* ============================================================
   Image stack (two side-by-side images below featured)
   ============================================================ */
.amk-events-bento__stack {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	flex-shrink: 0;
}

.amk-events-bento__stack-item {
	aspect-ratio: 1 / 1;
}

/* ============================================================
   Banner image (wide landscape, no text)
   ============================================================ */
.amk-events-bento__banner {
	aspect-ratio: 16 / 6;
	flex-shrink: 0;
}

/* ============================================================
   Horizontal card (right column, full width)
   ============================================================ */
.amk-events-bento__horizontal {
	flex: 1;
	min-height: 300px;
}

/* Horizontal card description: hidden by default, reveal on hover */
.amk-events-bento__horizontal .amk-events-bento__card-desc,
.amk-events-bento__horizontal .amk-events-bento__card-top {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.amk-events-bento__horizontal:hover .amk-events-bento__card-desc,
.amk-events-bento__horizontal:focus-visible .amk-events-bento__card-desc,
.amk-events-bento__horizontal:hover .amk-events-bento__card-top,
.amk-events-bento__horizontal:focus-visible .amk-events-bento__card-top {
	opacity: 1;
}

/* Shift card-bottom up on hover to reveal description */
.amk-events-bento__horizontal:hover .amk-events-bento__card-bottom,
.amk-events-bento__horizontal:focus-visible .amk-events-bento__card-bottom,
.amk-events-bento__horizontal:hover .amk-events-bento__card-top,
.amk-events-bento__horizontal:focus-visible .amk-events-bento__card-top {
	transform: none;
}

/* ============================================================
   Small cards (hover reveal)
   ============================================================ */
.amk-events-bento__small-card {
	aspect-ratio: 3 / 4;
}

/* ============================================================
   Card top overlay (badge + location/date)
   ============================================================ */
.amk-events-bento__card-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(rgb(0, 0, 0) 5%, rgba(0, 0, 0, 0) 60%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 1;
}

/* Badge */
.amk-events-bento__badge {
	display: inline-block;
	align-self: flex-start;
	padding: 2px 10px;
	border: 1px solid #fff;
	border-radius: 4px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 24px;
	text-transform: uppercase;
	color: #fff;
}

/* Meta row: location + date */
.amk-events-bento__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.amk-events-bento__location {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 24px;
	text-transform: uppercase;
	color: #fff;
}

.amk-events-bento__date {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 24px;
	text-transform: uppercase;
	color: #fff;
}

/* ============================================================
   Card bottom overlay (title + description)
   ============================================================ */
.amk-events-bento__card-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	z-index: 1;
}

.amk-events-bento__card-bottom--large {
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 70%);
}

.amk-events-bento__card-bottom--small {
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 70%);
}

/* Horizontal card bottom overlay: shift up on hover to reveal description */
.amk-events-bento__horizontal .amk-events-bento__card-bottom {
	transition: transform 0.25s ease;
}

.amk-events-bento__card-title {
	font-family: "Roboto", sans-serif;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 52px;
	color: #fff;
	margin: 0 0 8px;
}

.amk-events-bento__card-bottom--small .amk-events-bento__card-title {
	font-size: 28px;
	line-height: 1.2;
}

.amk-events-bento__card-desc {
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 26px;
	color: #fff;
	margin: 0;
}

/* Small card description: hidden by default, reveal on hover */
.amk-events-bento__card-desc--hover {
	opacity: 0;
	font-size: 16px;
	transition: opacity 0.25s ease;
}

.amk-events-bento__small-card:hover .amk-events-bento__card-desc--hover,
.amk-events-bento__small-card:focus-visible .amk-events-bento__card-desc--hover {
	opacity: 1;
}

/* ============================================================
   Reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.amk-events-bento__featured,
	.amk-events-bento__card-desc--hover {
		transition: none;
	}
}

/* ============================================================
   Responsive: tablet (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
	.amk-events-bento__headline {
		font-size: 40px;
	}

	.amk-events-bento__card-title {
		font-size: 28px;
		line-height: 1.3;
	}

	.amk-events-bento__card-bottom--small .amk-events-bento__card-title {
		font-size: 22px;
	}
}

/* ============================================================
   Responsive: mobile (≤768px) — single column stack
   ============================================================ */
@media (max-width: 768px) {
	.amk-events-bento__grid {
		grid-template-columns: 1fr;
	}

	.amk-events-bento__headline {
		font-size: 32px;
	}

	.amk-events-bento__featured {
		min-height: 400px;
		flex: none;
		aspect-ratio: 3 / 4;
	}

	.amk-events-bento__banner {
		aspect-ratio: 16 / 7;
	}

	.amk-events-bento__horizontal {
		min-height: 250px;
	}

	.amk-events-bento__stack {
		grid-template-columns: 1fr 1fr;
	}

	.amk-events-bento__bottom-row {
		grid-template-columns: 1fr;
	}

	.amk-events-bento__small-card {
		aspect-ratio: 16 / 9;
	}

	/* Show description on mobile (no hover on touch) */
	.amk-events-bento__card-desc--hover {
		opacity: 1;
	}
}