/* Explitia — Circle Menu (front + editor).
   Everything is scoped to .cme so Astra / theme styles don't collide.
   Selectors are written as ".cme .cme__x" (two classes) on purpose: this beats
   Astra rules such as "button:hover" or ".entry-content h3".

   Stage 3: desktop design. Narrow layout is a working baseline, polished in stage 6.
   Tokens (palette) were sampled from the design screenshots. */

/* ---------- Tokens ---------- */
.cme {
	--cme-bg: transparent;          /* no own background: the container behind the block shows through. A colour picked in the editor (Styl > Kolor) wins. The block is made for DARK backgrounds. */
	--cme-on-glow: #092652;         /* icon colour on the bright fill of a hovered arrow */
	--cme-text: #ffffff;
	--cme-accent: #19d3ff;          /* active label, highlights */
	--cme-blue: #1a9bf0;            /* item borders on the dark background */
	--cme-link-on-card: #0b73c0;    /* link on the light card: 4.6:1 (the bright blue was 2.8:1) */
	--cme-link-on-card-hover: #084f87;
	--cme-glow: #00b6f7;            /* active item fill, glow */
	--cme-item-bg: rgba(3, 30, 66, .22);   /* glass: the ring line shows through */
	--cme-item-border: rgba(61, 190, 255, .85);
	--cme-lit: #8aeaff;                /* bright piece of the ring next to the selected item */
	--cme-active-fill: rgba(214, 245, 255, .2);
	--cme-active-border: rgba(214, 245, 255, .55);
	--cme-line: rgba(26, 155, 240, .45);

	--cme-card-bg: #f4f7fa;
	--cme-card-title: #0d2145;
	--cme-card-text: #5b6b85;
	--cme-card-border: rgba(79, 208, 255, .95);
	--cme-card-glow: rgba(25, 190, 255, .35);
	--cme-link-line: #3fd8ff;          /* line from the sector to the card */

	--cme-center-text: #000;           /* text inside the white circle */
	/* --cme-font is not set on purpose: the block uses the font of the theme (Astra: Montserrat).
	   Only if the theme ever stops giving it to the block, set  --cme-font: Montserrat, sans-serif;  here. */

	--cme-sector-color: #17c4f6;     /* sector fill (the shape itself is the SVG in render.php, 40deg wide) */
	--cme-sector-rim: #a6f0ff;       /* bright outer edge */
	--cme-sector-angle: -90deg;     /* JS updates this (stage 4) */

	box-sizing: border-box;
	container-type: inline-size;    /* lets the layout react to the block's own width */
	overflow: clip;                /* a rotated sector has an invisible box that can cause sideways scroll */
	container-name: cme;
	width: 100%;
	padding: clamp(20px, 4vw, 24px);   /* small: the container around the block already has its own spacing; 24px still leaves room for the glow */
	background: var(--cme-bg);
	color: var(--cme-text);
	font-family: var(--cme-font, inherit);   /* the theme's font unless --cme-font says otherwise */
}

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

/* The `hidden` attribute must always win over theme display rules. */
.cme [hidden] {
	display: none !important;
}

/* Visually hidden text for screen readers. */
.cme .cme__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cme .cme__empty {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.4;
	opacity: .7;
}

/* ---------- Theme resets (Astra styles buttons, links, headings, paragraphs) ---------- */
.cme button {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
	text-shadow: none;
	min-width: 0;
	min-height: 0;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.cme a {
	text-decoration: none;
}

.cme :focus-visible {
	outline: 2px solid var(--cme-accent);
	outline-offset: 3px;
}

/* inside the light card the ring must be dark, cyan on white is 1.7:1 */
.cme .cme__card :focus-visible {
	outline-color: var(--cme-card-title);
}

/* ---------- Layout ---------- */
.cme .cme__layout {
	/* Narrow baseline. Sizes are driven by the block's own width (cqi). */
	--cme-ring: min(100cqi, 340px);
	/* room beside the ring (the ring is centred): half of what the ring leaves free, minus the gap */
	--cme-label-w: clamp(4.2rem, calc((100cqi - var(--cme-ring)) / 2 - var(--cme-label-gap) - 4px), 11rem);
	--cme-radius: calc((var(--cme-ring) - var(--cme-item)) / 2);
	--cme-item: calc(var(--cme-ring) * .23);
	--cme-label-gap: 14px;
	--cme-label-fs: clamp(.75rem, calc(var(--cme-label-w) / 9.8), 1rem);   /* narrower room = smaller letters (about 9.8 widths of the label per letter size) */
	--cme-sector-extra: 10px;        /* how far the sector reaches past the active item */

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 6cqi, 48px);
	position: relative;
	max-width: 1280px;
	margin-inline: auto;
}

@container cme (min-width: 860px) {
	.cme .cme__layout {
		--cme-ring: clamp(300px, 34cqi, 480px);
		/* the card column: 32% of the block as before, plus a quarter of what the block has over 860px (275px at 860, about 440px at 1150, 480px at most) */
		--cme-card-col: clamp(260px, calc(32cqi + (100cqi - 860px) * .24), 480px);
		/* the image keeps the height the old, narrower card gave it (32% of the block, which was 20px narrower before the padding became smaller): a wider card is not a taller card */
		--cme-media-h: calc(clamp(260px, 32cqi - 20px, 400px) / 2);
		/* wide layout: the ring sits in the left column, the card column and the gap are not free. The layout itself is never wider than 1280px, even in a wider block. */
		--cme-inset: 10px;   /* the label of the selected item on the far left is pushed out by ~48px: this keeps it inside the block */
		--cme-label-w: clamp(6rem, calc((min(100cqi, 1280px) - var(--cme-inset) - var(--cme-card-col) - clamp(24px, 4cqi, 56px) - var(--cme-ring)) / 2 - var(--cme-label-gap) - 4px), 10.5rem);
		--cme-item: clamp(48px, calc(var(--cme-ring) * .17), 88px);
		--cme-radius: calc(var(--cme-ring) * .38);
		--cme-label-fs: clamp(.75rem, calc(var(--cme-label-w) / 9.8), .95rem);   /* smaller letters while the room beside the ring is tight (860-1000px) */
		--cme-sector-extra: 32px;

		grid-template-columns: minmax(0, 1fr) var(--cme-card-col);
		gap: clamp(24px, 4cqi, 56px);
		padding-left: var(--cme-inset);
	}

	.cme .cme__panels {
		max-width: none;
		margin-inline: 0;
	}

	/* fixed image height instead of the 16:8 ratio (more specific than the base rule below, which comes later in the file) */
	.cme .cme__layout .cme__media {
		aspect-ratio: auto;
		height: var(--cme-media-h);
	}
}

/* ---------- Ring ---------- */
.cme .cme__ring {
	position: relative;
	z-index: 1;
	width: var(--cme-ring);
	height: var(--cme-ring);
	margin: 3.5rem auto;             /* room for labels above and below the circle (also the pushed-out label of the active item) */
}

/* thin guide circle that goes through the item centres */
.cme .cme__ring::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--cme-radius) * 2);
	height: calc(var(--cme-radius) * 2);
	translate: -50% -50%;
	border: 1px solid var(--cme-line);
	border-radius: 50%;
}

/* pointer sector: a square box centred on the ring and rotated towards the active item.
   The shape (rounded outer edge, bright rim, glow) is the SVG inside it. */
.cme .cme__sector {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: calc((var(--cme-radius) + var(--cme-item) * .5 + var(--cme-sector-extra)) * 2);
	height: calc((var(--cme-radius) + var(--cme-item) * .5 + var(--cme-sector-extra)) * 2);
	translate: -50% -50%;
	rotate: var(--cme-sector-angle);
	transition: rotate .45s cubic-bezier(.3, .7, .2, 1);
	pointer-events: none;
}

/* the ring itself lights up for a moment right next to the selected item (turns with the sector) */
.cme .cme__sector::before {
	content: "";
	position: absolute;
	inset: calc(var(--cme-item) * .5 + var(--cme-sector-extra));
	border: 2px solid var(--cme-lit);
	border-radius: 50%;
	-webkit-mask-image: conic-gradient(from 90deg, transparent 0 21deg, #000 23deg, transparent 37deg, transparent 1turn);
	mask-image: conic-gradient(from 90deg, transparent 0 21deg, #000 23deg, transparent 37deg, transparent 1turn);
}

.cme .cme__sector-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cme .cme__sector-glow {
	opacity: .8;
}

.cme .cme__center {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	width: calc(var(--cme-ring) * .34);
	aspect-ratio: 1;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	box-shadow:
		0 0 0 clamp(5px, 1.2cqi, 9px) rgba(255, 255, 255, .1),
		0 0 0 clamp(10px, 2.4cqi, 18px) rgba(25, 211, 255, .08),
		0 0 28px 4px rgba(170, 236, 255, .55),
		0 0 70px 14px rgba(0, 182, 247, .32);
}

.cme .cme__logo {
	display: block;
	width: 72%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}

/* Text instead of the logo (block field "Tekst w środku koła", at most 24 characters).
   Size comes from the circle (--cme-ring) and from the longest word (set in render.php),
   so one long word, for example a German one, still fits. At most 3 lines. */
.cme .cme__center-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	box-sizing: border-box;
	width: 86%;
	margin: 0;
	padding: 0;
	/* fits the longest word into the circle (.40 / letters), between 10px and the size of a short word */
	font-size: max(10px, calc(var(--cme-ring) * clamp(.01, calc(.40 / var(--cme-center-word, 8)), .058)));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: anywhere;          /* last resort: a word that still does not fit is broken */
	color: var(--cme-center-text);
}

/* ---------- Items ---------- */
.cme .cme__tabs {
	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
}

.cme .cme__item {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: var(--cme-item);
	height: var(--cme-item);
	margin: calc(var(--cme-item) / -2) 0 0 calc(var(--cme-item) / -2);
	/* go out along the angle, then rotate back so the content stays upright */
	transform: rotate(var(--cme-angle)) translateX(var(--cme-radius)) rotate(calc(-1 * var(--cme-angle)));
	color: var(--cme-text);
	pointer-events: auto;
}

/* the visible circle with the icon */
.cme .cme__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 2px solid var(--cme-item-border);
	border-radius: 50%;
	background: var(--cme-item-bg);
	color: var(--cme-text);
	box-shadow: inset 0 0 14px rgba(25, 211, 255, .12);
	transition:
		transform .35s cubic-bezier(.2, .7, .2, 1),
		background-color .25s ease,
		border-color .25s ease,
		box-shadow .25s ease;
}

.cme .cme__icon svg {
	display: block;
	width: 46%;
	height: 46%;
}

.cme .cme__item:hover .cme__icon {
	border-color: var(--cme-accent);
	box-shadow:
		inset 0 0 16px rgba(25, 211, 255, .22),
		0 0 18px rgba(25, 211, 255, .35);
}

/* the active item is a light glass bubble inside the sector */
.cme .cme__item.is-active {
	--cme-label-gap: calc(14px + var(--cme-sector-extra));   /* its label moves out, past the sector */
}

.cme .cme__item--left.is-active {
	--cme-label-gap: calc(30px + var(--cme-sector-extra));   /* the sector's side corner reaches further out here */
}

.cme .cme__item.is-active .cme__icon {
	transform: scale(1.12);
	border-color: var(--cme-active-border);
	background: var(--cme-active-fill);
	box-shadow:
		inset 0 0 18px rgba(255, 255, 255, .22),
		0 0 24px rgba(25, 211, 255, .55);
}

.cme .cme__item:focus-visible {
	outline: none;
}

.cme .cme__item:focus-visible .cme__icon {
	outline: 2px solid var(--cme-accent);
	outline-offset: 4px;
}

/* labels sit OUTSIDE the ring; the side comes from PHP (cme__item--top|right|bottom|left) */
.cme .cme__label {
	position: absolute;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	width: max-content;
	max-width: var(--cme-label-w);
	overflow-wrap: break-word;       /* a very long word breaks instead of being cut off */
	font-size: var(--cme-label-fs);
	line-height: 1.25;
	color: var(--cme-text);
	transition: color .25s ease;
}

.cme .cme__item--right .cme__label {
	left: calc(100% + var(--cme-label-gap));
	top: 50%;
	translate: 0 -50%;
	text-align: left;
}

.cme .cme__item--left .cme__label {
	right: calc(100% + var(--cme-label-gap));
	top: 50%;
	translate: 0 -50%;
	text-align: right;
}

.cme .cme__item--top .cme__label {
	bottom: calc(100% + var(--cme-label-gap));
	left: 50%;
	translate: -50% 0;
	text-align: center;
}

.cme .cme__item--bottom .cme__label {
	top: calc(100% + var(--cme-label-gap));
	left: 50%;
	translate: -50% 0;
	text-align: center;
}

.cme .cme__item.is-active .cme__label {
	color: #fff;
	font-weight: 500;
}

/* ---------- Card ---------- */
.cme .cme__panels {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 34rem;
	min-width: 0;
	margin-inline: auto;
}

.cme .cme__card {
	overflow: hidden;
	border-radius: 14px;
	background: var(--cme-card-bg);
	color: var(--cme-card-text);
	box-shadow:
		0 0 0 1.5px var(--cme-card-border),
		0 0 26px var(--cme-card-glow),
		0 20px 50px rgba(0, 8, 24, .55);
}

.cme .cme__media {
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: #0b2447;
}

.cme .cme__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.cme .cme__body {
	padding: clamp(16px, 2cqi, 24px);
}

.cme .cme__title {
	margin: 0 0 .45em;
	padding: 0;
	font-family: inherit;           /* not the theme's separate heading font: one font in the whole block */
	font-size: clamp(1.1rem, 1.2cqi + .7rem, 1.45rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--cme-card-title);
}

.cme .cme__desc {
	margin: 0 0 1.1em;
	padding: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--cme-card-text);
}

.cme a.cme__link {
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	padding-block: 6px;             /* target at least 24px high (WCAG 2.2) ... */
	margin-block: -6px;             /* ... and the layout stays as it was */
	color: var(--cme-link-on-card);
	text-decoration: none;
	box-shadow: none;
}

.cme a.cme__link:hover,
.cme a.cme__link:focus-visible {
	color: var(--cme-link-on-card-hover);
	text-decoration: underline;
}

.cme .cme__link-arrow {
	transition: transform .2s ease;
}

.cme a.cme__link:hover .cme__link-arrow {
	transform: translateX(3px);
}

/* ---------- Dots + arrows ---------- */
.cme .cme__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}

.cme .cme__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cme .cme__dot {
	position: relative;
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .4);
	transition: width .25s ease, background-color .25s ease;
}

/* bigger invisible hit area around the tiny dot */
.cme .cme__dot::after {
	content: "";
	position: absolute;
	inset: -14px -5px;
}

.cme .cme__dot:hover {
	background: rgba(255, 255, 255, .55);
}

.cme .cme__dot.is-active {
	width: 26px;
	background: var(--cme-accent);
}

.cme .cme__arrows {
	display: flex;
	gap: 10px;
}

.cme .cme__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(25, 211, 255, .5);
	border-radius: 50%;
	background: transparent;
	color: var(--cme-accent);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cme .cme__arrow:hover {
	border-color: var(--cme-glow);
	background: var(--cme-glow);
	color: var(--cme-on-glow);
}

.cme .cme__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ---------- Pause button (autoplay control) ---------- */
.cme .cme__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, .65);
	transition: color .2s ease, background-color .2s ease;
}

.cme .cme__pause:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--cme-accent);
}

.cme .cme__pause-icon {
	display: block;
	width: 18px;
	height: 18px;
}

.cme .cme__pause-icon--play,
.cme.is-paused .cme__pause-icon--pause {
	display: none;
}

.cme.is-paused .cme__pause-icon--play {
	display: block;
}

/* ---------- Card entrance (the class is re-added by view.js on every change) ---------- */
@keyframes cmeCardIn {
	from {
		opacity: 0;
		translate: 0 8px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

.cme .cme__card.is-entering {
	animation: cmeCardIn .35s cubic-bezier(.2, .7, .2, 1) both;
}

/* ---------- Line from the sector to the card + card reveal (wide layout) ---------- */
.cme .cme__connector {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.cme .cme__connector-path {
	fill: none;
	stroke: var(--cme-link-line);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke-dashoffset .22s cubic-bezier(.3, .6, .3, 1) .3s;   /* view.js sets the real duration; starts when the sector has almost arrived */
}

.cme .cme__connector-dot {
	fill: #c9f5ff;
	opacity: 0;
	transition: opacity .15s ease .45s;
}

.cme.is-linked .cme__connector-dot {
	opacity: 1;
}

@keyframes cmeCardWipe {
	from {
		clip-path: inset(-60px calc(100% + 60px) -60px -60px round 14px);
	}

	to {
		clip-path: inset(-60px -60px -60px -60px round 14px);
	}
}

@container cme (min-width: 860px) {
	.cme .cme__connector {
		display: block;
	}

	/* the card is "drawn" from left to right, as if the line pulled it out */
	.cme .cme__card.is-entering {
		animation: cmeCardWipe .3s cubic-bezier(.65, 0, .35, 1) backwards;
	}

	/* after a click on another item: wait for the sector and the line first */
	.cme.is-switching .cme__card.is-entering {
		animation-delay: var(--cme-card-delay, .4s);
	}
}

/* ---------- Phone: block narrower than 600px (variant A: icons only) ---------- */
@container cme (max-width: 599.98px) {
	/* Labels are not drawn, but stay in the DOM: screen readers still read them. */
	.cme .cme__label {
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* The room that was kept for the labels is not needed any more. */
	.cme .cme__ring {
		margin: 12px auto;
	}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.cme .cme__sector,
	.cme .cme__icon,
	.cme .cme__label,
	.cme .cme__dot,
	.cme .cme__arrow,
	.cme .cme__pause,
	.cme .cme__link-arrow {
		transition: none;
	}

	.cme .cme__card.is-entering {
		animation: none;
	}

	.cme .cme__connector-path,
	.cme .cme__connector-dot {
		transition: none;
	}
}