/**
 * Gosy — cabecera del evento (chip de tipo, fecha humanizada, iconos, cartel).
 * Encolado solo en páginas de evento (inc/eventprime-venue-location.php).
 *
 * El COLOR del chip lo pone cada tipo de evento (Background/Text del término,
 * inline desde icons.php): aquí solo se normaliza la forma.
 */

/* ---- ① Chip de tipo de evento: forma de píldora, sin romper línea ---- */
#ep_single_event_event_type.gosy-type-chip {
	display: inline-block;
	white-space: nowrap;
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* ---- ② Fecha humanizada en una línea ---- */
.gosy-event-when {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 0.95rem;
	margin: 4px 0 10px;
}

.gosy-when-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.gosy-when-item > svg {
	width: 17px;
	height: 17px;
	fill: var(--gosy-brand, #fe7900);
	flex-shrink: 0;
}

.gosy-when-day {
	font-weight: 600;
	color: var(--gosy-ink, #1a2538);
}

.gosy-when-time {
	color: var(--gosy-text, #2f3f5c);
	font-variant-numeric: tabular-nums;
}

.gosy-when-dur {
	color: var(--gosy-subtle, #8a98ad);
	font-size: 0.82rem;
}

/* ---- ③ Iconos de cabecera: monocromo con hover naranja ---- */
.gosy-header-actions {
	align-items: center;
	gap: 12px;
}

/* los ep-px-2 de los items del plugin sumarían al gap: fuera padding lateral */
.gosy-header-actions > a,
.gosy-header-actions > div,
.gosy-header-actions > span {
	padding-left: 0;
	padding-right: 0;
}

/* redes del evento (SVG inline propios) */
.gosy-header-actions .gosy-soc-link {
	display: inline-flex;
	align-items: center;
	color: #637799;
	transition: color 0.15s ease;
}

.gosy-header-actions .gosy-soc-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.gosy-header-actions .gosy-soc-link:hover {
	color: var(--gosy-brand, #fe7900);
}

.gosy-actions-sep {
	display: inline-block;
	width: 1px;
	height: 20px;
	background: var(--gosy-border, #e4ebf5);
	align-self: center;
}

/* acciones renderizadas por el plugin (favorito, calendario, compartir):
   unificar a monocromo apagado con hover naranja */
.gosy-header-actions .material-icons-outlined,
.gosy-header-actions .ep-handle-fav {
	color: #5f6b81;
}

.gosy-header-actions svg,
.gosy-header-actions svg.ep-btn-text-fill-color {
	fill: #5f6b81;
}

.gosy-header-actions .gosy-soc-link svg {
	fill: currentColor; /* los propios se gobiernan por color */
}

.gosy-header-actions a:hover svg,
.gosy-header-actions span:hover > svg,
.gosy-header-actions .ep-cursor:hover svg {
	fill: var(--gosy-brand, #fe7900);
}

.gosy-header-actions .material-icons-outlined:hover,
.gosy-header-actions .ep-handle-fav:hover {
	color: var(--gosy-brand, #fe7900);
}

/* ---- ③b Desplegables de calendario y compartir ----
   El plugin los abre hacia ARRIBA (bottom:40px) pisando el menú del sitio.
   Aquí se reorientan hacia abajo, alineados a la derecha, con el skin de
   tarjeta GoSocial y filas icono+texto con aire. */
.gosy-header-actions ul.ep-event-share {
	bottom: auto !important;
	top: 100%;
	left: auto !important;
	right: -8px;
	min-width: 180px;
	margin-top: 10px !important;
	padding: 8px;
	border: 1px solid var(--gosy-border, #d3def0);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(26, 37, 56, 0.06), 0 10px 28px rgba(26, 37, 56, 0.14);
}

/* sin flechita; ::before pasa a ser un puente invisible que mantiene el
   hover al cruzar el hueco entre icono y desplegable */
.gosy-header-actions ul.ep-event-share::after {
	display: none;
}

.gosy-header-actions ul.ep-event-share::before {
	content: '';
	display: block;
	position: absolute;
	top: -14px;
	bottom: auto;
	left: 0;
	right: 0;
	width: auto;
	height: 14px;
	margin: 0;
	border: 0;
}

/* filas: icono + texto, alineadas a la izquierda, hover naranja suave */
.gosy-header-actions .ep-event-share .ep-event-social-icon {
	text-align: left;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

.gosy-header-actions .ep-event-share .ep-event-social-icon a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 0.82rem;
	color: var(--gosy-text, #2f3f5c);
	transition: background 0.15s ease, color 0.15s ease;
}

.gosy-header-actions .ep-event-share .ep-event-social-icon a:hover {
	background: var(--gosy-brand-wash, #fff8f1);
	color: var(--gosy-brand, #fe7900);
}

.gosy-header-actions .ep-event-share .ep-social-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.82rem;
}

.gosy-header-actions .ep-event-share .ep-event-social-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex-shrink: 0;
}

/* ---- ④ Cartel con esquinas redondeadas ---- */
#ep_single_event_image img {
	border-radius: 12px;
}

/* El cartel es una masa oscura sin borde: los 12px estándar contra él se
   perciben más apretados que entre tarjetas blancas. Un poco más de aire
   para la tarjeta que le sigue (con y sin JS de pestañas). */
#ep_single_event_image + .gosy-event-card.ep-box-col-12 {
	margin-top: 18px;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
	.gosy-event-when {
		font-size: 0.88rem;
		gap: 4px 14px;
	}
}