/**
 * The events plugin, dressed.
 *
 * Sincronizadas Eventos already prints a clean BEM tree, so the theme styles
 * that markup instead of replacing it. Keeping the contract one-way means the
 * plugin can gain a field or a state without the theme having to be rewritten,
 * and the plugin keeps working under any other theme.
 *
 * The selectors below are the plugin's public surface. If one of them
 * disappears, this file is where it shows.
 */

/* ==================================================================== agenda */

.sincro-agenda {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Poster, then everything else. The card is a row on a desktop and stacks on a
 * phone, which is where most people arrive from Instagram. */
.sincro-agenda__item {
	position: relative;
	display: grid;
	grid-template-columns: 124px 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radio-lg);
	background: var(--wp--preset--color--rosa);
	transition: background-color 180ms ease;
}

.sincro-agenda__item:hover {
	background: var(--wp--preset--color--rosa-claro);
}

.sincro-agenda__imagen {
	display: block;
	border-radius: var(--wp--custom--radio);
	overflow: hidden;
	line-height: 0;
}

.sincro-agenda__imagen img {
	width: 100%;
	height: 124px;
	object-fit: cover;
}

.sincro-agenda__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: 1.15;
	margin: 0;
}

.sincro-agenda__titulo a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

/* The whole card is clickable, but only the title is focusable: a row is not
 * reachable by keyboard, so the link has to be the thing that takes focus. */
.sincro-agenda__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.sincro-agenda__item:focus-within {
	outline: 2px solid var(--wp--preset--color--tinta);
	outline-offset: 2px;
}

.sincro-agenda__titulo a:focus-visible {
	outline: none;
}

/* An empty agenda is a state of the page, not a grey line in a corner. */
.sincro-agenda__vacia {
	margin: 0;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radio-lg);
	background: var(--wp--preset--color--rosa-claro);
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	line-height: 1.2;
}

/* ============================================================ meta del evento */

.sincro-evento-meta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.sincro-agenda__item .sincro-evento-meta {
	gap: var(--wp--preset--spacing--10);
}

/* The date is what the eye looks for first, so it goes above the title and in
 * the accent ink. */
.sincro-evento-meta__cuando {
	order: -1;
	margin: 0;
	color: var(--wp--preset--color--coral-texto);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sincro-evento-meta__donde {
	margin: 0;
	color: var(--wp--preset--color--tinta-suave);
	font-size: var(--wp--preset--font-size--base);
}

.sincro-evento-meta__distintivos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--10) 0 0;
}

/* On the single event the meta sits above the content, so it breathes more. */
.sincro-evento-meta:not( .sincro-agenda__item * ) {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* =============================================================== datos del evento */

.sincro-evento-datos {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radio-lg);
	background: var(--wp--preset--color--rosa-claro);
}

.sincro-evento-datos__fila {
	display: grid;
	grid-template-columns: 8.125rem 1fr;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.sincro-evento-datos__fila > :first-child {
	color: var(--wp--preset--color--tinta-suave);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

/* ============================================= caja de acción y muro de socia
 *
 * The panel on the right of an event: what you can do here and now. Every
 * state uses the same anatomy so the reader learns where to look once.
 */

.sincro-caja,
.sincro-muro {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radio-lg);
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--tinta);
}

.sincro-caja__texto,
.sincro-muro__texto {
	margin: 0;
	font-weight: 500;
	line-height: 1.6;
}

.sincro-caja__accion,
.sincro-muro__accion {
	margin: 0;
}

.sincro-caja__form {
	margin: 0;
}

/* The buttons inside the panel follow the coral surface rule: cream ground,
 * dark coral label. */
.sincro-caja__boton,
.sincro-muro__enlace {
	/* Igual que el botón de la agenda: en móvil se estiran al 100 % y el
	 * relleno no puede sumarse por fuera. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--pulsable);
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: var(--wp--custom--radio-pildora);
	background: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--coral-texto);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.sincro-caja__boton:hover,
.sincro-muro__enlace:hover {
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--crema);
}

/* Cancelling frees the seat and cannot be undone inside the 24-hour window, so
 * it must not look like the button that books one. */
.sincro-caja__boton[value*="cancel"],
.sincro-caja__boton--cancelar {
	background: transparent;
	border: 2px solid var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--tinta);
}

/* ================================================================ mis eventos
 *
 * The «Mis eventos» tab inside WooCommerce's account page.
 */

.sincro-mis-eventos {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sincro-mis-eventos__item {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: var(--wp--custom--radio);
	background: var(--wp--preset--color--blanco);
}

.sincro-mis-eventos__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.3;
}

.sincro-mis-eventos__titulo a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.sincro-mis-eventos__detalles {
	margin: 0;
	color: var(--wp--preset--color--tinta-suave);
	font-size: var(--wp--preset--font-size--sm);
}

/* The reason a row has no cancel button belongs next to the row, not at the
 * bottom of the list. */
.sincro-mis-eventos__nota {
	margin: 0;
	color: var(--wp--preset--color--tinta-suave);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

/* ==================================================================== móvil */

@media ( max-width: 48rem ) {
	.sincro-agenda__item {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.sincro-agenda__imagen img {
		height: 10rem;
	}

	.sincro-evento-datos__fila {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--10);
	}

	.sincro-caja__boton,
	.sincro-muro__enlace {
		width: 100%;
	}
}

/* ===================================================== orden de la tarjeta
 *
 * El plugin imprime imagen, título y después el bloque de datos, y en una
 * rejilla de dos columnas eso coloca el título arriba y los datos debajo, en
 * la columna equivocada. Con `display: contents` el bloque de datos deja de
 * ser una caja y sus hijos entran en la rejilla, así que la fecha puede ir
 * donde el diseño la quiere: encima del título, que es lo primero que busca
 * quien mira la agenda.
 */

.sincro-agenda__item {
	grid-template-areas:
		"foto cuando"
		"foto titulo"
		"foto donde"
		"foto chips";
	grid-template-rows: auto auto auto auto;
	align-content: center;
	row-gap: var(--wp--preset--spacing--10);
}

.sincro-agenda__item .sincro-evento-meta {
	display: contents;
}

.sincro-agenda__imagen {
	grid-area: foto;
	align-self: center;
}

.sincro-agenda__item .sincro-evento-meta__cuando {
	grid-area: cuando;
}

.sincro-agenda__titulo {
	grid-area: titulo;
}

.sincro-agenda__item .sincro-evento-meta__donde {
	grid-area: donde;
}

.sincro-agenda__item .sincro-evento-meta__distintivos {
	grid-area: chips;
	margin-top: var(--wp--preset--spacing--10);
}

@media ( max-width: 48rem ) {
	.sincro-agenda__item {
		grid-template-areas:
			"foto"
			"cuando"
			"titulo"
			"donde"
			"chips";
		grid-template-rows: auto;
	}
}

/* ======================================================== bloque de fecha
 *
 * Desde la versión 1.7.0 el plugin saca la fecha troceada y un botón. El
 * bloque de fecha es lo primero que busca quien mira una agenda, así que va
 * el primero de la fila y en el color de acento.
 */

.sincro-agenda__item {
	grid-template-columns: 96px 124px 1fr auto;
	grid-template-areas:
		"fecha foto cuando accion"
		"fecha foto titulo accion"
		"fecha foto donde  accion"
		"fecha foto chips  accion";
}

.sincro-agenda__fecha {
	grid-area: fecha;
	align-self: center;
	display: grid;
	gap: 2px;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radio);
	background: var(--wp--preset--color--coral-texto);
	color: var(--wp--preset--color--crema);
	text-align: center;
}

.sincro-agenda__mes {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sincro-agenda__dia {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-md);
	line-height: 1;
}

.sincro-agenda__anio,
.sincro-agenda__hora {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

.sincro-agenda__accion {
	grid-area: accion;
	align-self: center;
	margin: 0;
}

/* El botón repite el enlace del título, que es el que recibe el foco, así que
 * aquí solo tiene que parecer pulsable. Va por encima del enlace estirado
 * para que el cursor cambie donde se espera. */
.sincro-agenda__boton {
	position: relative;
	z-index: 1;
	/* En móvil se estira al 100 %, y sin esto el relleno y el borde se suman
	 * por fuera: 48 px que sacaban la página de la pantalla. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--pulsable);
	padding: 0.875rem 1.375rem;
	border: 2px solid var(--wp--preset--color--tinta);
	border-radius: var(--wp--custom--radio-pildora);
	background: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

/* La línea completa de fechas sigue ahí para quien usa lector de pantalla:
 * el bloque solo enseña el día de inicio, y un taller de cuatro sesiones
 * necesita que se anuncie el rango entero. */
.sincro-agenda__item .sincro-evento-meta__cuando {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

@media ( max-width: 60rem ) {
	/* En pantalla estrecha el cartel estorba más de lo que aporta: lo que hace
	 * falta es la fecha, el nombre y si quedan plazas. */
	.sincro-agenda__item {
		grid-template-columns: 84px 1fr;
		grid-template-areas:
			"fecha titulo"
			"fecha donde"
			"chips chips"
			"accion accion";
	}

	.sincro-agenda__imagen {
		display: none;
	}

	.sincro-agenda__boton {
		width: 100%;
	}
}

/* The theme lays out the plugin's output after it has chosen the real action. */
.sincro-event-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, .48fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	align-items: start;
}
.sincro-event-description { grid-column: 1; grid-row: 1; min-width: 0; }
.sincro-event-description > :first-child { margin-block-start: 0; }
.sincro-event-layout > .sincro-evento-datos { grid-column: 1; grid-row: 2; margin: 0; }
.sincro-event-layout > :is(.sincro-caja, .sincro-muro) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.sincro-event-layout > .sincro-aviso { grid-column: 1 / -1; grid-row: 1; }
.sincro-event-layout:has(> .sincro-aviso) > .sincro-event-description { grid-row: 2; }
.sincro-event-layout:has(> .sincro-aviso) > .sincro-evento-datos { grid-row: 3; }
.sincro-event-layout:has(> .sincro-aviso) > :is(.sincro-caja, .sincro-muro) { grid-row: 2 / span 2; }
.sincro-open-event h2 { margin: 0; font-size: var(--wp--preset--font-size--display-xs); }
.sincro-open-event p { margin: 0; }
.sincro-evento-datos dd { margin: 0; }
.sincro-event-description img { max-width: 100%; height: auto; }
@media (max-width: 48rem) {
	.sincro-event-layout { display: flex; flex-direction: column; }
	.sincro-event-layout > * { box-sizing: border-box; width: 100%; }
	.sincro-event-layout > .sincro-aviso { order: -1; }
}