/* ==========================================================================
   360 Comedy Event Posters
   Defaults match the design; Elementor style controls override them (their
   selectors are more specific), and layout values are custom properties.
   ========================================================================== */

.c360p {
	--c360p-cols: 3;
	--c360p-gap: 28px;
	--c360p-row-gap: var(--c360p-gap);
	--c360p-peek: 0px;
	--c360p-ratio: 2 / 3;
	--c360p-fit: cover;
	--c360p-pos: center;
	--c360p-dur: 300ms;
	--c360p-zoom: 1.08;
	--c360p-lift: 0px;
	--c360p-inset: 0px;
	--c360p-group-gap: 1em;
	--c360p-arrow: 44px;
	--c360p-focus: #f6be29;

	position: relative;
	width: 100%;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Fallback columns when Elementor's generated CSS isn't present */
@media (max-width: 1024px) { .c360p { --c360p-cols: 2; } }
@media (max-width: 767px)  { .c360p { --c360p-cols: 1; } }

.c360p *,
.c360p *::before,
.c360p *::after {
	box-sizing: border-box;
}

/* Elementor sizing.
   This widget has no natural width of its own (its content sizes itself to the
   space it's given), so like Elementor's Video and Accordion widgets it must
   take its width from the container. Without this, widgets inside boxed
   containers (.e-con-inner) or row-direction containers collapse to 0 px on
   the live site, even though the editor shows them. Custom widths set in
   Advanced → Layout still win because Elementor's own rules are more specific. */
.e-con-inner > .elementor-widget-c360_event_posters,
.e-con > .elementor-widget-c360_event_posters {
	width: var(--container-widget-width, 100%);
	--flex-grow: var(--container-widget-flex-grow, 1);
	flex-grow: var(--container-widget-flex-grow, 1);
	min-width: min(100%, 280px);
}
.elementor-widget-c360_event_posters > .elementor-widget-container {
	width: 100%;
}

/* ---- Grid ---- */
.c360p__viewport {
	position: relative;
}
.c360p .c360p__track {
	display: grid;
	grid-template-columns: repeat(var(--c360p-cols), minmax(0, 1fr));
	gap: var(--c360p-row-gap) var(--c360p-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.c360p .c360p__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}
.c360p .c360p__item::before,
.c360p .c360p__item::marker {
	content: none;
}

/* ---- Slider ---- */
.c360p--slider .c360p__track {
	display: flex;
	gap: var(--c360p-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* room so hover lift and shadows aren't clipped by the scroller */
	padding-block: calc(var(--c360p-lift) + 4px) 12px;
	margin-block: calc((var(--c360p-lift) + 4px) * -1) -12px;
}
.c360p--slider .c360p__track::-webkit-scrollbar {
	display: none;
}
.c360p--slider .c360p__track:focus-visible {
	outline: 2px solid var(--c360p-focus);
	outline-offset: 4px;
}
.c360p--slider .c360p__item {
	flex: 0 0 calc((100% - var(--c360p-gap) * (var(--c360p-cols) - 1) - var(--c360p-peek)) / var(--c360p-cols));
	scroll-snap-align: start;
}

/* ---- Card ---- */
.c360p .c360p-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	background-color: #0b1422;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--c360p-dur) ease, box-shadow var(--c360p-dur) ease, border-color var(--c360p-dur) ease;
	-webkit-tap-highlight-color: transparent;
}
.c360p div.c360p-card {
	cursor: default;
}
.c360p .c360p-card:hover,
.c360p .c360p-card:focus {
	color: inherit;
	text-decoration: none;
}
.c360p .c360p-card:focus {
	outline: none;
}
.c360p .c360p-card:focus-visible {
	outline: 3px solid var(--c360p-focus);
	outline-offset: 3px;
}

.c360p-card__media {
	position: relative;
	flex: none;
	overflow: hidden;
	aspect-ratio: var(--c360p-ratio);
}
.c360p .c360p-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: var(--c360p-fit);
	object-position: var(--c360p-pos);
	transition: transform var(--c360p-dur) ease, filter var(--c360p-dur) ease, opacity var(--c360p-dur) ease;
}

.c360p-card__ended {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(11, 20, 34, 0.85);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

/* ---- Info panel ---- */
.c360p-card__info {
	position: absolute;
	inset: var(--c360p-inset);
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75em;
	overflow-y: auto;
	padding: clamp(14px, 6cqi, 22px) clamp(14px, 6cqi, 22px) clamp(14px, 7cqi, 26px);
	background-color: #f6be29;
	color: #0b1422;
	text-align: left;
	scrollbar-width: thin;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--c360p-dur) ease, transform var(--c360p-dur) ease, visibility 0s linear var(--c360p-dur);
}

.c360p .c360p-card .c360p-card__title {
	margin: 0 0 0.45em;
	padding: 0;
	color: #0b1422;
	font-family: inherit;
	font-size: clamp(15px, 7cqi, 22px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
}
.c360p .c360p-card .c360p-card__details {
	color: #0b1422;
	font-family: inherit;
	font-size: clamp(13px, 6.1cqi, 18px);
	font-weight: 400;
	line-height: 1.38;
}
.c360p .c360p-card .c360p-card__details p {
	margin: 0 0 var(--c360p-group-gap);
	padding: 0;
	color: inherit;
	font: inherit;
}
.c360p .c360p-card .c360p-card__details p:last-child {
	margin-bottom: 0;
}

.c360p .c360p-card .c360p-card__btn {
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	flex: none;
	padding: 0.5em 0.9em;
	border: 0 solid transparent;
	border-radius: 8px;
	background-color: #22467a;
	color: #ffffff;
	font-family: inherit;
	font-size: clamp(16px, 9.4cqi, 28px);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	transition: background-color var(--c360p-dur) ease, color var(--c360p-dur) ease, filter var(--c360p-dur) ease;
}
.c360p .c360p-card .c360p-card__btn:hover {
	filter: brightness(1.12);
}

/* ---- Reveal states ---- */
.c360p .c360p-card.is-active .c360p-card__info,
.c360p .c360p-card:focus-visible .c360p-card__info,
.c360p--editor-open .c360p-card .c360p-card__info {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--c360p-dur) ease, transform var(--c360p-dur) ease, visibility 0s;
}
@media (hover: hover) {
	.c360p .c360p-card:hover .c360p-card__info {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity var(--c360p-dur) ease, transform var(--c360p-dur) ease, visibility 0s;
	}
	.c360p .c360p-card:hover {
		transform: translateY(calc(var(--c360p-lift) * -1));
	}
	.c360p--img-zoom .c360p-card:hover .c360p-card__media img      { transform: scale(var(--c360p-zoom)); }
	.c360p--img-blur .c360p-card:hover .c360p-card__media img      { filter: blur(4px); transform: scale(1.04); }
	.c360p--img-grayscale .c360p-card:hover .c360p-card__media img { filter: grayscale(1); }
	.c360p--img-darken .c360p-card:hover .c360p-card__media img    { filter: brightness(0.55); }
}
.c360p--img-zoom .c360p-card.is-active .c360p-card__media img      { transform: scale(var(--c360p-zoom)); }
.c360p--img-blur .c360p-card.is-active .c360p-card__media img      { filter: blur(4px); transform: scale(1.04); }
.c360p--img-grayscale .c360p-card.is-active .c360p-card__media img { filter: grayscale(1); }
.c360p--img-darken .c360p-card.is-active .c360p-card__media img    { filter: brightness(0.55); }

/* Starting positions for each animation (the reveal rules above reset transform) */
.c360p--anim-slide-up .c360p-card__info    { transform: translateY(100%); }
.c360p--anim-slide-down .c360p-card__info  { transform: translateY(-100%); }
.c360p--anim-slide-left .c360p-card__info  { transform: translateX(100%); }
.c360p--anim-slide-right .c360p-card__info { transform: translateX(-100%); }
.c360p--anim-zoom .c360p-card__info        { transform: scale(0.9); }
.c360p--anim-none .c360p-card__info        { transition: none !important; }

/* ---- Info always below the poster ---- */
.c360p--show-below .c360p-card__info {
	position: relative;
	inset: auto;
	flex: 1;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---- Touch screens ---- */
@media (hover: none) {
	.c360p--touch-below .c360p-card__info {
		position: relative;
		inset: auto;
		flex: 1;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.c360p--touch-direct:not(.c360p--editor-open) .c360p-card__info {
		display: none;
	}
}

/* ---- Slider arrows ---- */
.c360p .c360p__arrow,
.c360p .c360p__arrow:hover,
.c360p .c360p__arrow:focus {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: var(--c360p-arrow);
	height: var(--c360p-arrow);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(11, 20, 34, 0.85);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	color: #ffffff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.c360p .c360p__arrow:hover {
	background-color: #22467a;
}
.c360p .c360p__arrow:focus:not(:focus-visible) {
	outline: none;
}
.c360p .c360p__arrow:focus-visible {
	outline: 3px solid var(--c360p-focus);
	outline-offset: 2px;
}
.c360p .c360p__arrow svg {
	width: 55%;
	height: 55%;
}
.c360p .c360p__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}
.c360p .c360p__arrow--prev { left: 10px; }
.c360p .c360p__arrow--next { right: 10px; }
.c360p--arrows-outside .c360p__viewport {
	padding-inline: calc(var(--c360p-arrow) + 12px);
}
.c360p--arrows-outside .c360p__arrow--prev { left: 0; }
.c360p--arrows-outside .c360p__arrow--next { right: 0; }
.c360p.is-static .c360p__arrow {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.c360p .c360p-card,
	.c360p .c360p-card__info,
	.c360p .c360p-card__media img,
	.c360p .c360p-card .c360p-card__btn {
		transition: none !important;
	}
	.c360p .c360p-card__info {
		transform: none !important;
	}
	.c360p--slider .c360p__track {
		scroll-behavior: auto;
	}
}

/* ---- Panel height: grow the poster so the whole panel fits (no scrollbar) ---- */
.c360p-info-grow .c360p-card {
	display: grid;
	grid-template-areas: "c360p-stack";
}
.c360p-info-grow .c360p-card__media,
.c360p-info-grow .c360p-card__info {
	grid-area: c360p-stack;
	min-width: 0;
}
.c360p-info-grow .c360p-card__media {
	align-self: stretch;
}
.c360p-info-grow .c360p-card__info {
	position: relative;
	inset: auto;
	margin: var(--c360p-inset);
	overflow: visible;
}

/* ---- Trim the details to a set number of lines ---- */
.c360p-trim-yes .c360p-card__details {
	overflow: hidden;
	max-height: calc(1.5em * var(--c360p-details-lines, 6));
}
@supports (-webkit-line-clamp: 2) {
	.c360p-trim-yes .c360p-card__details {
		display: -webkit-box;
		max-height: none;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--c360p-details-lines, 6);
	}
}