/**
 * public.css — AgendaWP
 *
 * A propósito, este archivo NO redefine .taller-card, .form-wrap, .cupos,
 * etc. — esas clases ya existen en el style.css del theme Huellas Puntanas
 * y el plugin las reutiliza tal cual para que el resultado sea visualmente
 * idéntico a la maqueta original.
 *
 * Acá solo van los agregados que el theme no contempla porque no existían
 * en la demo estática original: el overlay de imagen sobre .taller-top
 * (en la demo era un color sólido) y algunos detalles menores del form.
 */

/* Imagen destacada del item como fondo de la tarjeta, con degradado
   terracota superpuesto en vez del color sólido de la demo original. */
.taller-top.con-imagen {
	background-size: cover;
	background-position: center;
	position: relative;
}
.taller-top.con-imagen::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--terracota-oscuro, #8a4420);
	opacity: 0.5;
	mix-blend-mode: multiply;
}
.taller-top.con-imagen span.tag {
	position: relative;
	z-index: 1;
}

/* Aviso cuando no hay talleres/eventos publicados */
.awp-public-notice {
	background: var(--arcilla-clara, #eee3cc);
	border: 1px solid var(--arcilla-borde, #c9af80);
	border-radius: 14px;
	padding: 20px 24px;
	color: var(--tinta-suave, #635a48);
	text-align: center;
}

/* Grilla de horarios dentro del form (modo turnos) */
.agendawp-horarios-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.agendawp-horario-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Página propia de cada item: hero con imagen destacada */
.agendawp-single-hero {
	width: 100%;
	aspect-ratio: 21/9;
	border-radius: var(--radio, 18px);
	background-size: cover;
	background-position: center;
	position: relative;
	margin-bottom: 32px;
}
.agendawp-single-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		0deg,
		rgba(46, 42, 34, 0.55) 0%,
		rgba(46, 42, 34, 0) 55%
	);
}
.agendawp-single-hero .tag {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 20px;
	background: var(--tinta, #2e2a22);
	color: var(--crema, #fbf7ef);
	font-size: 0.72rem;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}