/* Citadel Practice — [citadel_practice]. Matched to Figma frames Menu 1440 / Menu 1024 (tabs) and Menu 390 (accordion).
   No own background: the dark #270202 comes from the Elementor container. */
.cp{
	--cp-text:#fff;
	--cp-muted:rgba(255,255,255,.5);
	--cp-accent:#A82308;
	--cp-line:rgba(255,255,255,.25);
	--cp-font:var(--e-global-typography-primary-font-family,"Google Sans"),-apple-system,system-ui,"Segoe UI",Arial,sans-serif;
	/* titles and items share one size: 32px at 1120 content width (1140 box − 2×10), ≈24px at 920 (1024 frame) */
	--cp-size:clamp(18px,4.4cqi - 17px,32px);
	/* inner column padding next to the divider: 60 @1126, 46 @942 */
	--cp-gutter:clamp(24px,5.3cqi,60px);

	display:block;width:100%;max-width:1140px;margin:0 auto;padding:0 10px;box-sizing:border-box;container-type:inline-size;
}
.cp *{box-sizing:border-box}

.cp__grid{
	position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	color:var(--cp-text);font-family:var(--cp-font);font-size:var(--cp-size);line-height:1.3;
	font-weight:400;text-align:left;
}
/* divider: full height of the block, exactly in the middle */
.cp__grid::before{
	content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
	background:var(--cp-line);pointer-events:none;
}

/* left column: titles (gap 24 @32px / 16 @24px ≈ .7em) */
.cp__tabs{
	display:flex;flex-direction:column;align-items:flex-start;gap:.7em;
	margin:0;padding:25px var(--cp-gutter) 25px 0;
}
.cp__tab{
	display:block;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
	font:inherit;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:0;text-align:left;
	white-space:normal;max-width:100%;   /* theme buttons are nowrap: long titles must wrap, not widen the column */
	color:var(--cp-muted);cursor:pointer;transition:color .2s;
	-webkit-appearance:none;appearance:none;
}
/* the theme paints generic button:hover/focus (pink bg, white ring) — outrank it for every state */
.cp .cp__tabs .cp__tab,
.cp .cp__tabs .cp__tab:hover,
.cp .cp__tabs .cp__tab:focus,
.cp .cp__tabs .cp__tab:active{background:transparent;border:0;box-shadow:none;outline:0;text-decoration:none;-webkit-tap-highlight-color:transparent}
.cp .cp__tabs .cp__tab:hover{color:rgba(255,255,255,.8)}
.cp .cp__tabs .cp__tab:focus{color:var(--cp-muted)}
.cp .cp__tabs .cp__tab.is-active,
.cp .cp__tabs .cp__tab.is-active:hover,
.cp .cp__tabs .cp__tab.is-active:focus{color:var(--cp-text);cursor:default}
.cp .cp__tabs .cp__tab:focus-visible{outline:2px solid var(--cp-accent);outline-offset:4px}

/* right column: only the active list is rendered, so the block height follows it (min = the titles column) */
.cp__panels{display:block;margin:0;padding:25px 0 25px var(--cp-gutter)}
.cp__panel{display:none;margin:0;padding:0}
.cp__panel.is-active{display:block;animation:cp-fade .25s ease}
@keyframes cp-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* items: 16px apart, red ring bullet (18/3 @32px, 16.5/2.75 @24px) */
.cp__list{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.cp__item{display:flex;align-items:flex-start;gap:.6em;margin:0;padding:0}
.cp__item::before{
	content:"";flex:0 0 auto;box-sizing:border-box;width:.56em;height:.56em;margin-top:.37em;
	border:max(2px,.094em) solid var(--cp-accent);border-radius:50%;
}

/* mobile (≤787px, Anton's breakpoint) — Figma 390 frame: accordion, everything 24px */
@media (max-width:787px){
	.cp{container-type:normal;padding:0 16px}
	.cp__grid{display:flex;flex-direction:column;align-items:stretch;gap:16px;font-size:24px}
	.cp__grid::before{display:none}
	/* tabs and panels become direct flex items; interleave them by index */
	.cp__tabs,.cp__panels{display:contents}
	.cp__tab{order:calc(var(--i) * 2);width:100%;line-height:31px;text-align:center}   /* bold + centred */
	.cp__panel{
		order:calc(var(--i) * 2 + 1);
		padding:8px 0 16px;line-height:34px;   /* title→list 24, list→next title 32 */
	}
	.cp__panel.is-active{display:block;animation:none}
	/* list rows left-aligned: bullet 15px / 2.5px ring, 13px gap, centred on the first 34px line */
	.cp__item{gap:13px;font-weight:400}
	.cp__item::before{width:15px;height:15px;border-width:2.5px;margin-top:9.5px}
}