/**
 * Cirkusbygningen Digital Signage Events
 * Mörk, elegant evenemangstavla optimerad för stående skärmar (1080x1920).
 *
 * Struktur (uppifrån och ned):
 *   .cds-header    – rubrik (t.ex. CIRKUSBYGNINGEN)
 *   .cds-boards    – roterande "tavlor" (fade)
 *     .cds-featured  – stort huvudevent (~40 %)
 *     .cds-list      – 3–5 kort (~60 %)
 *   .cds-footer    – QR-kod / läs mer
 *   .cds-progress  – diskret progressindikator
 */

/* -------------------------------------------------------------------------
 * Behållare – fyller hela vyn, kolumnlayout, ingen scroll.
 * ---------------------------------------------------------------------- */
.cds-signage {
	--cds-accent: #c9a24b;                 /* Kan överskridas via inställningar */
	--cds-bg: #0a0a0c;
	--cds-panel: #141419;
	--cds-text: #ffffff;
	--cds-muted: rgba(255, 255, 255, 0.72);
	--cds-fade: 1.2s;

	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--cds-bg);
	color: var(--cds-text);
	/* Ärver webbplatsens typsnitt som standard. Kan överskridas via
	   inställningen "Typsnitt" (påverkar rubrik & QR-text). */
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	z-index: 999999;
}

body.cds-signage-active {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Rubrik.
 * ---------------------------------------------------------------------- */
.cds-header {
	flex: 0 0 auto;
	padding: 30px 40px 26px;
	text-align: center;
	/* Ingen kant – rubriken möter featured-bilden sömlöst. */
}

.cds-header__title {
	/* Eget typsnitt för rubriken, annars ärvs standardtypsnittet. */
	font-family: var(--cds-header-font, inherit);
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cds-text);
	/* Långa rubriker radbryts (centrerat) i stället för att kapas. */
	white-space: normal;
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Tavlorna – staplade och tonade (en synlig i taget).
 * ---------------------------------------------------------------------- */
.cds-boards {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.cds-boardpage {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cds-fade) ease-in-out,
		visibility var(--cds-fade) ease-in-out;
}

.cds-boardpage.is-active {
	opacity: 1;
	visibility: visible;
}

/* -------------------------------------------------------------------------
 * Featured event (~40 %) – stor bild med mörk overlay och text nedtill.
 * ---------------------------------------------------------------------- */
.cds-featured {
	position: relative;
	flex: 0 0 38%;
	overflow: hidden;
}

.cds-featured__media {
	position: absolute;
	inset: 0;
}

.cds-featured__image {
	width: 100%;
	height: 100%;
	/* Visa hela bilden i sina rätta proportioner (ingen beskärning). */
	object-fit: contain;
	object-position: center;
	display: block;
}

.cds-featured--noimage {
	background:
		radial-gradient(circle at 28% 20%, rgba(201, 162, 75, 0.14), transparent 55%),
		linear-gradient(160deg, #16161d 0%, #0a0a0c 100%);
}

.cds-featured__overlay {
	position: absolute;
	inset: 0;
	/* Kraftig scrim nedtill så texten alltid vilar mot mörker,
	   även på ljusa/stökiga eventbilder. */
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.97) 0%,
		rgba(0, 0, 0, 0.92) 24%,
		rgba(0, 0, 0, 0.70) 42%,
		rgba(0, 0, 0, 0.30) 64%,
		rgba(0, 0, 0, 0.20) 100%
	);
}

.cds-featured__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 60px 40px;
	box-sizing: border-box;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.cds-featured__date {
	display: inline-flex;
	align-items: baseline;
	gap: 16px;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cds-accent);
	margin-bottom: 16px;
}

.cds-featured__time {
	color: var(--cds-muted);
	font-weight: 400;
	letter-spacing: 0.08em;
}

.cds-featured__title {
	margin: 0 0 12px;
	font-size: 60px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.01em;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cds-featured__location {
	font-size: 32px;
	font-weight: 400;
	color: var(--cds-text);
	opacity: 0.92;
	margin-bottom: 14px;
}

.cds-featured__location::before {
	content: "\2609";
	margin-right: 12px;
	color: var(--cds-accent);
	font-size: 0.8em;
}

.cds-featured__desc {
	margin: 0;
	font-size: 30px;
	line-height: 1.4;
	font-weight: 300;
	color: var(--cds-muted);
	max-width: 900px;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Listan (~60 %) – kompakta kort med miniatyr, datum och titel.
 * ---------------------------------------------------------------------- */
.cds-list {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	/* Korten får sin naturliga höjd och centreras – oavsett hur många
	   som visas ser de likadana ut (inga utsträckta rader/ramar). */
	justify-content: center;
	gap: 18px;
	padding: 26px 60px;
	box-sizing: border-box;
	overflow: hidden;
}

.cds-card {
	/* Ingen utsträckning – bilden bestämmer radens höjd. */
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	background: var(--cds-panel);
	border-radius: 12px;
	overflow: hidden;
}

.cds-card__media {
	flex: 0 0 212px; /* ~20px bredare än tidigare för större affischer */
	max-width: 212px;
	position: relative;
	overflow: hidden;
	background: #0a0a0c;
	/* Centrera bilden vertikalt om raden råkar bli högre än bilden. */
	display: flex;
	align-items: center;
	justify-content: center;
}

.cds-card__media--noimage {
	background:
		linear-gradient(160deg, #1c1c24 0%, #0e0e12 100%);
}

.cds-card__image {
	/* Bilden visas i naturlig höjd vid full bredd och bestämmer radhöjden. */
	width: 100%;
	height: auto;
	display: block;
}

.cds-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 18px 32px;
	overflow: hidden;
}

/* Titeln först och störst, sedan datum/tid – ordning styrs för läsbarhet. */
.cds-card__title {
	order: 1;
	margin: 0;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--cds-text);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cds-card__date {
	order: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cds-accent);
}

.cds-card__time {
	color: var(--cds-muted);
	font-weight: 400;
	margin-left: 12px;
}

.cds-card__location {
	order: 2;
	font-size: 23px;
	font-weight: 300;
	color: var(--cds-muted);

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
 * Fot – QR-kod och "läs mer"-text.
 * ---------------------------------------------------------------------- */
.cds-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 26px 60px;
	background: rgba(0, 0, 0, 0.35);
	border-top: 2px solid rgba(255, 255, 255, 0.08);
}

.cds-footer__text {
	/* Eget typsnitt för QR-texten, annars ärvs standardtypsnittet. */
	font-family: var(--cds-qr-font, inherit);
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cds-text);
}

.cds-qr {
	flex: 0 0 auto;
	background: #ffffff;
	border-radius: 12px;
	padding: 14px;
	line-height: 0;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.cds-qr__image {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: contain;
	image-rendering: pixelated;
}

/* -------------------------------------------------------------------------
 * Progressindikator – diskret linje längst ned.
 * ---------------------------------------------------------------------- */
.cds-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: rgba(255, 255, 255, 0.12);
	z-index: 5;
}

.cds-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--cds-accent);
}

/* -------------------------------------------------------------------------
 * Meddelande (inga event / TEC saknas).
 * ---------------------------------------------------------------------- */
.cds-signage--notice {
	align-items: center;
	justify-content: center;
}

.cds-notice {
	margin: auto;
	max-width: 70%;
	text-align: center;
	font-size: 44px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--cds-muted);
}

/* -------------------------------------------------------------------------
 * Temaskydd – tvinga våra färger/typografi så att temat (t.ex. Avada)
 * inte kan skriva över rubrik- och textfärger. Digital signage måste vara
 * robust oavsett vilket tema som är aktivt.
 * ---------------------------------------------------------------------- */
.cds-signage .cds-header__title,
.cds-signage .cds-featured__title,
.cds-signage .cds-card__title {
	color: #ffffff !important;
}

.cds-signage .cds-featured__date,
.cds-signage .cds-card__date {
	color: var(--cds-accent) !important;
}

.cds-signage .cds-featured__location {
	color: #ffffff !important;
}

.cds-signage .cds-featured__desc,
.cds-signage .cds-featured__time,
.cds-signage .cds-card__time {
	color: rgba(255, 255, 255, 0.75) !important;
}

.cds-signage .cds-footer__text {
	color: #ffffff !important;
}

/* Nollställ ev. temastilar på våra rubriker (marginal, transform, skugga). */
.cds-signage h2.cds-featured__title,
.cds-signage h3.cds-card__title {
	margin: 0 0 12px !important;
	padding: 0 !important;
	text-transform: none !important;
	background: none !important;
}

.cds-signage h3.cds-card__title {
	margin: 0 !important;
}

/* -------------------------------------------------------------------------
 * Responsivt – skala för mindre stående skärmar. Aldrig scroll.
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.cds-header { padding: 28px 40px 22px; }
	.cds-header__title { font-size: 42px; }

	.cds-featured__content { padding: 0 40px 32px; }
	.cds-featured__title { font-size: 52px; }
	.cds-featured__date { font-size: 26px; }
	.cds-featured__location,
	.cds-featured__desc { font-size: 26px; }

	.cds-list { padding: 24px 40px; gap: 16px; }
	.cds-card__title { font-size: 32px; }
	.cds-card__date { font-size: 22px; }
	.cds-card__location { font-size: 22px; }

	.cds-footer { padding: 20px 40px; }
	.cds-footer__text { font-size: 30px; }
	.cds-qr__image { width: 120px; height: 120px; }
}

@media (max-width: 600px) {
	.cds-header__title { font-size: 32px; letter-spacing: 0.16em; }

	.cds-featured__title { font-size: 40px; }
	.cds-featured__date { font-size: 22px; margin-bottom: 10px; }
	.cds-featured__location,
	.cds-featured__desc { font-size: 22px; }

	.cds-card__media { flex-basis: 28%; }
	.cds-card__body { padding: 16px 20px; }
	.cds-card__title { font-size: 26px; }
	.cds-card__date { font-size: 18px; }
	.cds-card__location { font-size: 18px; }

	.cds-footer__text { font-size: 24px; }
	.cds-qr__image { width: 96px; height: 96px; }
	.cds-notice { font-size: 30px; }
}

/* Liggande orientering – minska featured-höjden så listan får plats. */
@media (orientation: landscape) {
	.cds-featured { flex-basis: 46%; }
	.cds-featured__title { font-size: 56px; }
}

/* Respektera användare som föredrar mindre rörelse. */
@media (prefers-reduced-motion: reduce) {
	.cds-boardpage { transition-duration: 0.4s; }
}