/* ============================================================
   NAMI SAKE - EVENTS SECTION STYLES
   ------------------------------------------------------------
   Dedicated stylesheet for the event pages.
   Loaded AFTER base.css and only from event pages, so it does not
   affect the rest of the site.

   IMAGES: must be placed in  en-US/img/
   Expected file names (see each block). Recommended format: .jpg
   Until the images exist the background will show black.
   ============================================================ */


/* --- Event page containers --- */

section.historia.taco {
	margin: 50px 0 50px 0;
	justify-content: center;
}

section.historia-quote.evento {
	background-color: #4BD3C9;
}

.flex-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center;
}

p.text-historia.text-historia.max-w-2xl.text-xl.md\:text-2xl {
	max-width: 50%;
	margin: 0 auto;
}


/* --- 1. La Licor Masterclass --- */

.historia .evento-la-licor {
	background: url(../img/evento-la-licor.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-la-licor-2 {
	background: url(../img/evento-la-licor-2.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-la-licor-3 {
	background: url(../img/evento-la-licor-3.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}


/* --- 2. Mariela Pairing Dinner --- */

.historia .evento-mariela {
	background: url(../img/evento-mariela.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-mariela-2 {
	background: url(../img/evento-mariela-2.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-mariela-3 {
	background: url(../img/evento-mariela-3.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}


/* --- 3. Ositos Tap Masterclass & Happy Hour --- */

.historia .evento-ositos {
	background: url(../img/evento-ositos.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-ositos-2 {
	background: url(../img/evento-ositos-2.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}

.historia .evento-ositos-3 {
	background: url(../img/evento-ositos-3.jpg);
	width: 50%;
	height: auto;
	background-size: cover;
	background-position: center;
}


/* --- Embedded video (Vimeo) ---
   Responsive 16:9 container. The iframe is absolutely positioned so
   the aspect ratio is kept at any viewport width. */

.video-evento-section {
	display: flex;
	justify-content: center;
	padding: 0 1.5rem;
	margin: 50px 0 50px 0;
}

/* Espacio inferior de la pagina del evento (solo paginas con video) */
main:has(.video-evento-section) > .contenido-evento:last-child {
	margin-bottom: 50px;
}

.video-evento {
	position: relative;
	width: 50%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	background-color: #000;
	overflow: hidden;
}

.video-evento iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Placeholder text shown until the iframe is added.
   Safe to delete once the video is in place. */
.video-evento .video-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 1rem;
	letter-spacing: 1px;
	text-align: center;
	padding: 1rem;
}

@media (max-width: 847px) {
	.video-evento {
		width: 100%;
	}
}

/* Variante para video vertical (portrait 9:16) */
.video-evento--vertical {
	width: 100%;
	max-width: 400px;
	aspect-ratio: 9 / 16;
}

/* Portada del evento (imagen principal): ancho completo en pantallas pequenas */
@media (max-width: 53em) {
	.historia .foto-historia {
		width: 100%;
		min-height: 0;
	}
}

/* La imagen principal se muestra COMPLETA (sin recorte), respetando su proporcion. */
section.historia.taco {
	height: auto;
}
.historia .foto-historia {
	min-height: 0;
}
.historia .evento-la-licor { aspect-ratio: 729 / 467; }
.historia .evento-mariela { aspect-ratio: 726 / 801; }
.historia .evento-ositos  { aspect-ratio: 721 / 503; }