/* ============================================================
   SIC Wheel Spin — cards arranged along an arc, like a fanned
   deck. Clicking a side card rotates the wheel so that card
   becomes the centre one.

   Each card is positioned by rotating it around a pivot point
   far below the stage, which is what produces the fan shape:
   the card is turned by its angle, then pushed outward along
   that angle by the wheel radius.
   ============================================================ */

.sicwheel {
	/* Navy field with a blush panel inset in it. Text and cards sit on the
	   panel, so they stay navy-on-blush and white respectively — nothing is
	   placed directly on the navy. */
	--sw-bg:      #021859;
	--sw-text:    #021859;
	--sw-muted:   rgba(2,24,89,.66);
	--sw-accent:  #bf1304;
	--sw-card:    #ffffff;

	/* The panel the wheel actually lives on. Now a Style control like the
	   rest, so it is set per block; this value is only the fallback for
	   markup rendered before the control existed. */
	--sw-panel:   #f2e0df;

	background: var(--sw-bg);
	color: var(--sw-text);
	padding: 56px 48px 64px;
	font-family: var(--sic-body-font);
	overflow: hidden;
}
.sicwheel-inner {
	max-width: 1240px; margin: 0 auto;
	background: var(--sw-panel);
	border-radius: 6px;
	padding: 72px 56px 64px;
}

/* ---- intro ---- */
.sicwheel-eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--sw-accent);
}
.sicwheel-eyebrow span { width: 34px; height: 1px; background: var(--sw-accent); display: inline-block; }
.sicwheel-heading {
	margin: 0 0 12px;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1;
}
.sicwheel-intro {
	margin: 0 0 40px; max-width: 60ch;
	color: var(--sw-muted);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.7;
}

/* ---- stage ---- */
.sicwheel-stage {
	position: relative;
	min-height: 360px;
	margin: 0 auto;
	overflow: hidden;            /* trims the outer cards rather than overflowing the page */
}
.sicwheel-track {
	/* The pivot: placed below the visible stage so the cards, pushed up
	   from it, fan across the top of the arc inside the stage. */
	position: absolute; left: 50%; top: 0;
	width: 0; height: 0;
}

.sicwheel-card {
	position: absolute;
	/* Centred on the pivot, then rotated and pushed up by the radius. */
	left: 0; top: 0;

	/* Card width comes from a variable so the block can override it.
	   --sw-cw is the orientation default below; --sw-cw-set is what the
	   Card width field writes, when it is filled in. The min() keeps a wide
	   card from running off a narrow screen without needing a breakpoint
	   for every possible value. */
	--sw-cw: 240px;
	--sw-card-final: min(var(--sw-cw-set, var(--sw-cw)), 78vw);
	width: var(--sw-card-final);
	margin-left: calc(var(--sw-card-final) / -2);
	transform-origin: 50% 50%;
	background: var(--sw-card);
	color: #021859;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(2,24,89,.16);
	transition: transform .62s cubic-bezier(.22,.68,.28,1),
	            opacity .45s ease,
	            box-shadow .4s ease;
	/* The card itself stays opaque. Side cards overlap each other, and a
	   translucent card let the card behind it — and the band background —
	   show through the photo. */
	opacity: 1;
}

/* Side cards recede behind a veil in the PANEL's colour — the surface the
   cards actually sit on — laid over the card rather than applied to it, so
   the card underneath is never see-through. Tinting with --sw-bg would now
   wash them navy, which brings them forward instead of letting them
   recede. Clipped by the card's overflow:hidden, so it follows the
   rounded corners. */
.sicwheel-card::after {
	content: '';
	position: absolute; inset: 0;
	background: var(--sw-panel);
	opacity: .5;
	pointer-events: none;
	transition: opacity .45s ease;
}
.sicwheel-card.is-active {
	z-index: 50;                       /* centre card sits over its neighbours */
	box-shadow: 0 22px 60px rgba(2,24,89,.24);
	cursor: default;
}
.sicwheel-card.is-active::after { opacity: 0; }

/* ---- card media, portrait (default) or landscape ----
   Orientation comes from the block's Photo orientation field, written
   onto the section as data-orient. A landscape card is widened as well
   as reshaped: at the portrait width of 240px a 4:3 photo is only 180px
   tall and reads as a thumbnail on the arc. margin-left is always half
   the width, because the card is centred on the wheel's pivot. */
/* Height is fixed per orientation rather than derived from the width with
   aspect-ratio. With aspect-ratio, widening the card made it taller in
   proportion and the whole thing scaled up; now a wider card is simply
   wider, and object-fit shows more of the photo across. --sw-mh is the
   default for the orientation and can be overridden per block. */
.sicwheel-media {
	--sw-mh: 320px;
	height: var(--sw-mh-set, var(--sw-mh));
	overflow: hidden;
	background: rgba(2,24,89,.08);   /* navy at 8%, the palette's placeholder tone */
}
.sicwheel[data-orient="landscape"] .sicwheel-media { --sw-mh: 240px; }
.sicwheel[data-orient="landscape"] .sicwheel-card { --sw-cw: 320px; }
.sicwheel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sicwheel-cap {
	padding: 14px 16px 16px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .1em; line-height: 1.45;
	color: #021859;
	text-align: center;
}

/* ---- controls ---- */
.sicwheel-controls {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin-top: 26px;
}
/* On the arc the stage is tall enough to hold the outermost cards without
   clipping them, which leaves space under the fan. The controls sit up in
   that space rather than below it, so the wheel keeps its height and the
   arrows read as part of it. z-index clears the cards, which go up to 50. */
.sicwheel[data-arrange="arc"] .sicwheel-controls {
	position: relative;
	z-index: 60;
	margin-top: -58px;
}
.sicwheel-btn {
	width: 44px; height: 44px; border-radius: 999px;
	/* currentColor so the arrows work on a light or dark band, rather
	   than assuming white-on-dark. */
	border: 1px solid currentColor;
	background: transparent; color: var(--sw-text);
	opacity: .55;
	cursor: pointer; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
	transition: border-color .15s ease, color .15s ease;
}
.sicwheel-btn:hover { border-color: var(--sw-accent); color: var(--sw-accent); opacity: 1; }
.sicwheel-dots { display: flex; align-items: center; gap: 8px; }
.sicwheel-dot {
	width: 7px; height: 7px; border-radius: 999px;
	background: currentColor; opacity: .28; color: var(--sw-text);
	border: 0; padding: 0; cursor: pointer;
	transition: background .2s ease, width .2s ease;
}
.sicwheel-dot.is-active { background: var(--sw-accent); color: var(--sw-accent); opacity: 1; width: 20px; }

@media (max-width: 900px) {
	.sicwheel { padding: 28px 16px 32px; }
	.sicwheel-inner { padding: 44px 20px 40px; }
	.sicwheel-stage { height: 400px; }
	.sicwheel-card { --sw-cw: 170px; }
	.sicwheel-media { --sw-mh: 226px; }
	.sicwheel[data-orient="landscape"] .sicwheel-media { --sw-mh: 170px; }
	.sicwheel[data-arrange="arc"] .sicwheel-controls { margin-top: -40px; }
	.sicwheel[data-orient="landscape"] .sicwheel-card { --sw-cw: 230px; }

	/* ---- the whole photograph, at this size ----
	   A card on a phone is small enough that cropping to fill it loses
	   the subject: a group of four across a 170px box keeps the middle
	   two. `contain` shows all of it, at the cost of space along one
	   axis where the photograph's proportions differ from the card's.

	   That space is only a problem if it is a different colour, so the
	   box takes the CARD's own — the photograph then reads as sitting on
	   the card rather than in a tinted well with bars around it. The
	   placeholder tone stays on the card itself, so an empty slot still
	   shows something. */
	.sicwheel-media {
		background: var(--sw-card);
	}
	.sicwheel-media img { object-fit: contain; }
	/* A card with no photograph at all keeps the placeholder, which is
	   what tells an author the slot is empty. */
	.sicwheel-media:empty { background: rgba(2,24,89,.08); }
}
@media (prefers-reduced-motion: reduce) {
	.sicwheel-card { transition: none; }
	.sicwheel-card::after { transition: none; }
}
/* ============================================================
   Full-screen view
   ------------------------------------------------------------
   Opened by clicking the card already in the centre. It is a
   child of <body>, not of the wheel: the wheel's cards sit
   inside transformed ancestors, and a fixed child of a
   transformed element is positioned against that element rather
   than the viewport — it would be trapped inside the wheel.
   ============================================================ */
.sicwheel-lightbox {
	position: fixed; inset: 0;
	z-index: 9999;              /* above the fixed site header */
	display: flex; align-items: center; justify-content: center;
	flex-direction: column;
	gap: 18px;
	padding: clamp(24px, 5vw, 64px);
	background: rgba(12,10,17,.92);
	cursor: zoom-out;
}
.sicwheel-lightbox[hidden] { display: none; }
.sicwheel-lb-fig {
	margin: 0;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	max-width: 100%; max-height: 100%;
}
.sicwheel-lb-img {
	/* The whole picture, never cropped: seeing all of it is the point of
	   opening it. Both dimensions are capped so a tall image cannot run
	   past the bottom of the screen. */
	max-width: min(1400px, 100%);
	max-height: 82vh;
	width: auto; height: auto;
	object-fit: contain;
	display: block;
	cursor: default;            /* the picture itself is not a close target */
	box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.sicwheel-lb-cap {
	margin: 0;
	max-width: 70ch;
	text-align: center;
	font-family: var(--sic-label-font);
	font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
	line-height: 1.7;
	color: rgba(255,255,255,.82);
}
.sicwheel-lb-cap[hidden] { display: none; }
.sicwheel-lb-close {
	position: absolute; top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px);
	width: 44px; height: 44px;      /* a comfortable touch target */
	border: 0; border-radius: 999px;
	background: rgba(255,255,255,.12);
	color: #fff; font-size: 16px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease;
}
.sicwheel-lb-close:hover,
.sicwheel-lb-close:focus-visible { background: rgba(255,255,255,.24); }
/* The page behind must not scroll while the overlay is up. */
html.sicwheel-lb-open, html.sicwheel-lb-open body { overflow: hidden; }

/* The centred card invites the click that opens it. */
.sicwheel-card.is-active { cursor: zoom-in; }