/**
 * AI+ 2026 Event Schedule block – frontend styles.
 */

.ai2026-event-schedule {
	--ai2026-box-border: linear-gradient(90deg, rgba(230, 200, 220, 0.95) 0%, rgba(200, 220, 240, 0.95) 100%);
	--ai2026-box-radius: 10px;
	--ai2026-connector-color: #b0b0b0;
	--ai2026-star-yellow: #f0c000;
	--ai2026-star-pink: #e91e8c;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem 0;
}

/* Flow: vertical stack with dashed connectors */
.ai2026-schedule-flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 1;
}

/* Day section */
.ai2026-schedule-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
}

/* Day label: stands alone in the flow between connector lines */
.ai2026-schedule-day-label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0.25rem 0;
	position: relative;
	z-index: 2;
}

.ai2026-schedule-day-label .ai2026-schedule-day-title {
	margin: 0;
	background: transparent;
}

.ai2026-schedule-day-title {
	font-family: inherit;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0;
	line-height: 1.2;
	color: #1a1a1a;
}

.ai2026-schedule-day > .ai2026-schedule-day-title {
	margin-bottom: 0;
}

/* Single node (one box centered) */
.ai2026-schedule-node {
	width: 100%;
	display: flex;
	justify-content: center;
}

.ai2026-schedule-node--single .ai2026-schedule-event-box {
	min-width: 180px;
}

/* Cell wrapper */
.ai2026-schedule-cell {
	display: flex;
	justify-content: center;
	overflow: visible;
}

/* Wrapper when an icon sits above the box – no longer needed, kept for compat */
.ai2026-schedule-event-box-wrap {
  display: contents;
}

/* Cells with icons: extra top padding so the overhanging icon doesn't touch the connector line */
.ai2026-schedule-cell:has(.ai2026-schedule-event-box__icon) {
  padding-top: 32px;
}

/* Icon: absolute, centered on the top border of the box – overlaps it like the original */
.ai2026-schedule-event-box__icon {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  padding: 2px;
  z-index: 2;
  pointer-events: none;
  flex-shrink: 0;
}

.ai2026-schedule-event-box__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ai2026-schedule-row .ai2026-schedule-cell {
	justify-content: stretch;
}

.ai2026-schedule-cell--empty {
	min-height: 20px;
}

/* SVG overlay for dashed connectors – sits behind content */
.ai2026-schedule-connector-svg path {
	stroke-dasharray: 6 5;
	stroke-linecap: round;
}

.ai2026-schedule-connector-svg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 0;
}

.ai2026-event-schedule {
	position: relative;
}

/* Row of 2 or 3 boxes */
.ai2026-schedule-row {
	display: grid;
	gap: 1.25rem;
	width: 100%;
	margin: 0;
	justify-content: center;
}

/* Text-wrap variant for long titles */
.ai2026-schedule-event-box--wrap {
	white-space: normal;
	max-width: 180px;
}

/* Two-box row: natural width, centered */
.ai2026-schedule-row--2 {
	grid-template-columns: max-content max-content;
}

/* Three-box row: equal-width columns, centered */
.ai2026-schedule-row--3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.ai2026-schedule-row--3 .ai2026-schedule-cell {
	justify-content: center;
	padding-top: 32px;
}

.ai2026-schedule-row--3 .ai2026-schedule-event-box {
	white-space: nowrap;
	box-sizing: border-box;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
	width: 100%;
	text-align: center;
}

@media (max-width: 500px) {
	/* Both 2-column and 3-column rows keep their multi-column layout on mobile
	   so the tree-branch connector logic in JS stays active (isMultiCol / tueSingleCol).
	   Reduce gap and allow text to wrap so boxes fit in narrow columns. */
	.ai2026-schedule-row--2 {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	.ai2026-schedule-row--3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.4rem;
	}

	.ai2026-schedule-row--2 .ai2026-schedule-cell,
	.ai2026-schedule-row--3 .ai2026-schedule-cell {
		justify-content: center;
	}

	.ai2026-schedule-row--2 .ai2026-schedule-event-box,
	.ai2026-schedule-row--3 .ai2026-schedule-event-box {
		white-space: normal;
		min-width: 0;
		max-width: none;
		padding-left: 0.4rem;
		padding-right: 0.4rem;
	}

	/* Force single-node cells to full width so all boxes share the same
	   horizontal centre as the connector line (containerCtrX). */
	.ai2026-schedule-node--single .ai2026-schedule-cell {
		width: 100%;
	}
}

/* ── Event boxes ──────────────────────────────────────────────────────────── */

/* Asymmetric double border: pink inner border, cyan ring offset to the left */
.ai2026-schedule-event-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.7rem 1.1rem 0.6rem;
  background: #fff;
  border-radius: var(--ai2026-box-radius);
  border: 2px solid #ed6cf4;
  /* Cyan ring shifted -5px left */
  box-shadow: -5px 0 0 2px #fff, -5px 0 0 4px #7df9f6;
  position: relative;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  margin: 6px 10px 6px 6px;
  overflow: visible;
}

.ai2026-event-schedule a.ai2026-schedule-event-box:hover {
  transform: translateY(-2px);
  box-shadow: -5px 0 0 2px #fff, -5px 0 0 4px #7df9f6, 0 6px 20px rgba(0, 0, 0, 0.1);
}

.ai2026-event-schedule a.ai2026-schedule-event-box:focus {
	outline: 2px solid #ed6cf4;
	outline-offset: 6px;
}

/* Faded variant */
.ai2026-schedule-event-box--faded {
	opacity: 0.7;
}

/* Gray variant (e.g. AI+ TRACKS – faded/dimmed) */
.ai2026-schedule-event-box--gray {
	opacity: 0.5;
}

/* Gold border variant (e.g. KAKTUS MUSIC FESTIVAL) */
.ai2026-schedule-event-box--gold {
  border-color: #c9a227;
  box-shadow: 5px 0 0 2px #fff, 5px 0 0 4px #e8c547;
}

.ai2026-schedule-event-box__label {
	display: block;
}


.ai2026-schedule-event-box__logo {
	display: block;
	line-height: 0;
	margin: 0 auto;
}

.ai2026-schedule-event-box__logo svg {
	display: block;
	width: 110px;
	height: auto;
}

/* Kaktus logo box: keep same footprint as other events */
.ai2026-schedule-event-box--kaktus {
	padding: 0.45rem 0.7rem;
	min-width: 120px;
	gap: 0;
}

.ai2026-schedule-event-box--kaktus .ai2026-schedule-event-box__logo svg {
	width: 80px;
	max-width: 100%;
}

.ai2026-schedule-event-box__subtitle {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #c9a227;
	margin-top: 0;
	line-height: 1;
}

/* Star pinned to top-right corner inside the box */
.ai2026-schedule-star {
	position: absolute;
	top: 5px;
	right: 7px;
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	flex-shrink: 0;
}

.ai2026-schedule-star--yellow {
	background: var(--ai2026-star-yellow);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ai2026-schedule-star--pink {
	background: var(--ai2026-star-pink);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Legend at bottom */
.ai2026-schedule-legend {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ai2026-connector-color);
	font-size: 0.9rem;
	color: #555;
}

.ai2026-schedule-legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 0;
}

.ai2026-schedule-legend .ai2026-schedule-star {
	position: static;
	width: 0.75rem;
	height: 0.75rem;
}

/* Dark theme */
.ai2026-event-schedule--dark {
	background: #1a1a1a;
	padding: 2rem 1.5rem;
	border-radius: 8px;
}

.ai2026-event-schedule--dark .ai2026-schedule-legend {
	border-top-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.85);
}

.ai2026-event-schedule--dark .ai2026-schedule-day-title {
	color: #fff;
}

.ai2026-event-schedule--dark .ai2026-schedule-event-box {
  background: #2a2a2a;
  color: #fff;
  box-shadow: -5px 0 0 2px #2a2a2a, -5px 0 0 4px #7df9f6;
}

.ai2026-event-schedule--dark .ai2026-schedule-event-box__icon {
	background: #2a2a2a;
}

/* Arrow at bottom */
.ai2026-schedule-arrow-wrap {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ai2026-schedule-arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	height: auto;
	border: none;
}

.ai2026-schedule-arrow::before {
	content: '';
	display: block;
	width: 1.5px;
	height: 28px;
	background: repeating-linear-gradient(
		to bottom,
		#aab4be 0, #aab4be 6px,
		transparent 6px, transparent 11px
	);
}

.ai2026-schedule-arrow::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #aab4be;
}

.ai2026-event-schedule--dark .ai2026-schedule-arrow::before {
	background: repeating-linear-gradient(
		to bottom,
		#d0d0d0 0, #d0d0d0 6px,
		transparent 6px, transparent 11px
	);
}

.ai2026-event-schedule--dark .ai2026-schedule-arrow::after {
	border-top-color: #d0d0d0;
}

/* ── Horizontal layout ──────────────────────────────────────────────────── */

.ai2026-event-schedule--horizontal {
	max-width: 1100px;
}

.ai2026-schedule-flow--horizontal {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1.5rem;
	position: relative;
	overflow-x: auto;
	padding-bottom: 0.5rem;
}

.ai2026-schedule-h-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
	position: relative;
}

/* Horizontal stream: concurrent events within a day are grouped left→right */
.ai2026-h-stream {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
}

/* Each time-group: concurrent events stacked vertically */
.ai2026-h-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.ai2026-schedule-flow--horizontal .ai2026-schedule-day-title {
	font-size: clamp(1rem, 2.5vw, 1.5rem);
	margin: 0 0 0.5rem;
	text-align: center;
}

.ai2026-schedule-flow--horizontal .ai2026-schedule-cell {
	display: flex;
	justify-content: center;
}

.ai2026-schedule-flow--horizontal .ai2026-schedule-event-box {
	white-space: normal;
	min-width: 82px;
	max-width: 130px;
	font-size: 0.62rem;
	padding: 0.5rem 0.7rem;
}

@media (max-width: 767px) {
	.ai2026-schedule-flow--horizontal {
		flex-direction: column;
		overflow-x: visible;
		padding-bottom: 0;
	}

	.ai2026-schedule-h-col {
		width: 100%;
	}

	/* On narrow viewports collapse time-groups to vertical stacking */
	.ai2026-h-stream {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.ai2026-h-group {
		align-items: center;
	}

	.ai2026-schedule-flow--horizontal .ai2026-schedule-event-box {
		min-width: 160px;
		max-width: none;
		white-space: nowrap;
	}
}

/* SVG layout */
.ai2026-event-schedule--svg .ai2026-schedule-flow,
.ai2026-event-schedule--svg .ai2026-schedule-connector-svg {
	display: none;
}

.ai2026-schedule-svg-wrap {
	width: 100%;
	max-width: 100%;
	line-height: 0;
}

.ai2026-schedule-svg-img {
	width: 100%;
	height: auto;
	display: block;
}

.ai2026-event-schedule--svg .ai2026-schedule-legend {
	margin-top: 1.5rem;
}