/**
 * Programación semanal.
 *
 * Sin JavaScript se ven los siete días uno tras otro. Cuando schedule.js
 * arranca, marca el contenedor con .is-enhanced y pasa a modo pestañas.
 *
 * @package ElEscorpion\Theme
 */

.esc-schedule {
	display: grid;
	gap: var(--esc-space-md);
}

/* --- Pestañas ----------------------------------------------------------- */

.esc-schedule__tabs {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	padding-block-end: 0.4rem;
	/* Desplazamiento horizontal con inercia en móvil. */
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.esc-schedule__tab {
	flex: 0 0 auto;
	padding: 0.6rem 1rem;
	min-height: 44px;
	border: 1px solid var(--esc-border);
	border-radius: var(--esc-radius-pill);
	background: transparent;
	color: var(--esc-muted);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	transition: border-color var(--esc-transition-fast), color var(--esc-transition-fast), background-color var(--esc-transition-fast);
}

.esc-schedule__tab:hover,
.esc-schedule__tab:focus-visible {
	border-color: var(--esc-primary);
	color: var(--esc-text);
}

.esc-schedule__tab.is-active {
	background: var(--esc-primary);
	border-color: var(--esc-primary);
	color: #fff;
}

/* Las pestañas solo tienen sentido si el JavaScript está activo. */
.esc-schedule:not(.is-enhanced) .esc-schedule__tabs {
	display: none;
}

/* --- Paneles ------------------------------------------------------------ */

.esc-schedule__panel {
	padding: var(--esc-space-sm);
	background: var(--esc-surface);
	border: 1px solid var(--esc-border);
	border-radius: var(--esc-radius);
}

.esc-schedule.is-enhanced .esc-schedule__panel[hidden] {
	display: none;
}

.esc-schedule__day {
	margin-block: 0 0.75rem;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--esc-primary);
}

/* Con pestañas, el título del día es redundante. */
.esc-schedule.is-enhanced .esc-schedule__day {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.esc-schedule__empty {
	margin: 0;
	color: var(--esc-muted);
	font-style: italic;
}

/* --- Franjas ------------------------------------------------------------ */

.esc-schedule__list {
	display: grid;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.esc-schedule__slot {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.2rem;
	padding: 0.75rem 0.5rem;
	border-block-end: 1px solid var(--esc-border);
}

.esc-schedule__slot:last-child {
	border-block-end: 0;
}

.esc-schedule__slot:hover {
	background: var(--esc-surface-alt);
	border-radius: var(--esc-radius-sm);
}

.esc-schedule__time {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--esc-primary);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 0.9375rem;
}

.esc-schedule__info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
}

.esc-schedule__program {
	color: var(--esc-text);
	font-weight: 600;
	text-decoration: none;
}

.esc-schedule__program:hover,
.esc-schedule__program:focus-visible {
	color: var(--esc-primary);
}

.esc-schedule__host {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--esc-muted);
	font-size: 0.875rem;
}

/* La franja que se está emitiendo se resalta desde JavaScript. */
.esc-schedule__slot.is-live {
	background: rgb(229 9 20 / 10%);
	border-radius: var(--esc-radius-sm);
	border-block-end-color: transparent;
	box-shadow: inset 3px 0 0 var(--esc-primary);
}

@media (min-width: 40rem) {

	.esc-schedule__slot {
		grid-template-columns: 11rem 1fr;
		align-items: center;
		gap: 1rem;
	}
}