/* =============================================================================
   ARTICLE DECK (includes/features/class-ace-article-deck.php)
   Ported from the Sheffield Parkour news rail. One card in view on narrow containers,
   two from 640px. Where motion is welcome and the browser has scroll timelines, the
   cards either side fan out behind the current ones like a deck: those still to come
   stack down and to the right, those already passed lift up and to the left, each a
   little smaller and darker. The fan follows the rail's own sideways scroll (swipe,
   drag, keyboard or the arrows), never the page scroll, and is transform and opacity
   only. Without scroll timelines or with reduced motion it is a plain snapping row.
   ============================================================================= */
.ace-deck {
	--deck-ink: var(--ace-ink, #f5f2ea);
	--deck-muted: var(--ace-muted, #b9b0a0);
	--deck-bg: var(--ace-bg, #14120f);
	--deck-card: rgba(28, 24, 19, .96);
	--deck-line: rgba(255, 255, 255, .16);
	--deck-a1: var(--ace-orange, #ff7a18);
	--deck-a2: #12b3a6;
	--deck-a3: #a06cff;
	container-type: inline-size;
	display: grid;
	position: relative;
}
.ace-deck__nav { position: relative; z-index: 1; display: flex; justify-content: flex-end; gap: 10px; padding: 0 0 6px; pointer-events: none; }
.ace-deck__nav[hidden] { display: none; }
.ace-deck__arrow {
	display: grid; place-items: center; width: 48px; height: 40px; padding: 0;
	background: var(--deck-card); color: var(--deck-ink); border: 2px solid var(--deck-line);
	box-shadow: 4px 4px 0 var(--deck-a1); transform: skewX(-12deg);
	font: 700 18px/1 system-ui, sans-serif; cursor: pointer; pointer-events: auto;
	transition: background .2s, color .2s, opacity .2s;
}
.ace-deck__arrow + .ace-deck__arrow { box-shadow: 4px 4px 0 var(--deck-a3); }
.ace-deck__arrow > span { transform: skewX(12deg); }
.ace-deck__arrow:hover { background: var(--deck-ink); color: var(--deck-bg); }
.ace-deck__arrow:focus-visible { outline: 3px solid var(--deck-a1); outline-offset: 3px; }
.ace-deck__arrow[aria-disabled="true"] { opacity: .4; cursor: default; }
.ace-deck__arrow[aria-disabled="true"]:hover { background: var(--deck-card); color: var(--deck-ink); }

/* --pad is the peek room either side, inside the container; --card one card; --step a card plus gap. */
.ace-deck__track {
	--per: 1; --gap: clamp(14px, 2cqw, 26px);
	--pad: clamp(14px, 7cqw, 80px);
	--ww: calc(100cqw - 2 * var(--pad));
	--card: calc((var(--ww) - (var(--per) - 1) * var(--gap)) / var(--per));
	--step: calc(var(--card) + var(--gap));
	position: relative; z-index: 0; isolation: isolate;
	display: grid; grid-auto-flow: column; grid-auto-columns: var(--card); gap: var(--gap);
	margin: 0; padding: 12px var(--pad) 26px; list-style: none;
	overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
	scrollbar-width: none;
}
.ace-deck__track::-webkit-scrollbar { display: none; }
.ace-deck__track:focus-visible { outline: 3px solid var(--deck-a1); outline-offset: -3px; border-radius: 12px; }
@container (min-width: 640px) { .ace-deck__track { --per: 2; } }
@container (min-width: 1180px) { .ace-deck__track { --per: 3; } }
@media (prefers-reduced-motion: no-preference) { .ace-deck__track { scroll-behavior: smooth; } }

/* Later cards sit behind earlier ones until the fan takes over the order. */
.ace-deck__item { z-index: calc(100 - var(--i, 0)); display: flex; min-width: 0; scroll-snap-align: start; }
.ace-deck__card {
	--c: var(--deck-a1);
	position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%;
	padding: 10px 10px 16px; box-sizing: border-box;
	background: var(--deck-card); color: var(--deck-ink);
	border: 2px solid var(--deck-line); border-radius: 12px;
	box-shadow: 7px 8px 0 var(--c);
	transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1);
}
.ace-deck__item:nth-child(3n+2) .ace-deck__card { --c: var(--deck-a2); }
.ace-deck__item:nth-child(3n) .ace-deck__card { --c: var(--deck-a3); }
.ace-deck__card > :not(.ace-deck__media) { margin-inline: 6px; }
/* The tilt: a slanted photograph, like the logo's forward diagonal. */
.ace-deck__media {
	--sl: clamp(12px, 6%, 30px);
	position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden;
	clip-path: polygon(var(--sl) 0, 100% 0, calc(100% - var(--sl)) 100%, 0 100%);
	background: #241f18;
}
.ace-deck__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ace-deck__media.is-empty { display: grid; place-items: center; color: var(--deck-muted); font: 800 2rem/1 system-ui, sans-serif; }
.ace-deck__meta { margin-top: 2px; margin-bottom: 0; color: var(--deck-muted); font-size: .8rem; letter-spacing: .02em; }
.ace-deck__title { margin-top: 0; margin-bottom: 0; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.15; }
.ace-deck__title a { color: var(--deck-ink); text-decoration: none; }
/* The whole card is the link's hit area; the heading keeps the accessible name. */
.ace-deck__title a::after { content: ""; position: absolute; inset: -2px; z-index: 3; border-radius: inherit; }
.ace-deck__title a:focus-visible { outline: none; }
.ace-deck__card:focus-within { outline: 3px solid var(--deck-ink); outline-offset: 3px; }
.ace-deck__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--deck-muted); font-weight: 700; font-size: .85rem; }
.ace-deck__chev { display: inline-block; transition: transform .25s; }
.ace-deck__card:is(:hover, :focus-within) { translate: -3px -3px; box-shadow: 11px 12px 0 var(--c); }
.ace-deck__card:is(:hover, :focus-within) .ace-deck__go { color: var(--deck-ink); }
.ace-deck__card:hover .ace-deck__chev { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
	.ace-deck__card:is(:hover, :focus-within) img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.ace-deck__card, .ace-deck__media img, .ace-deck__chev { transition: none; }
	.ace-deck__card:is(:hover, :focus-within) { translate: none; }
}

/* The fan's steps. Registered as lengths so they compute to pixels: js/ace-article-deck.js reads
   them back to draw the same deck where scroll timelines are missing (Firefox today), so the
   numbers live in one place. --fx is the sideways step between deck cards, --fy the drop. */
@property --fx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --fy { syntax: "<length>"; inherits: true; initial-value: 0px; }
.ace-deck__track { --fx: calc(var(--step) * .8); --fy: clamp(10px, 1.4vw, 22px); }
@container (min-width: 640px) {
	.ace-deck__track { --fx: clamp(16px, (var(--pad) - 6px) / 3, 60px); --fy: clamp(14px, 1.6vw, 24px); }
}

/* The fan. Each card's place is read off its own view timeline across the rail (inline axis):
   before "contain" it is in the deck to the right, after it in the deck to the left; keyframes
   every 25% are one card, four cards each way, the fourth fading out. z-index steps rather than
   tweens, so nothing jumps in front as a swipe starts. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ace-deck__track { padding-block: calc(var(--fy) * 3 + 12px) calc(var(--fy) * 3 + 26px); }
		.ace-deck__item {
			view-timeline: --ace-deck-card inline;
			animation: ace-deck-zr step-end both, ace-deck-zl step-end forwards;
			animation-timeline: --ace-deck-card, --ace-deck-card;
			animation-range: contain calc(var(--step) * -4) contain 0%, contain 100% contain calc(100% + var(--step) * 4);
		}
		.ace-deck__card {
			animation: ace-deck-r linear both, ace-deck-l linear forwards;
			animation-timeline: --ace-deck-card, --ace-deck-card;
			animation-range: contain calc(var(--step) * -4) contain 0%, contain 100% contain calc(100% + var(--step) * 4);
		}
		.ace-deck__card::before {
			content: ""; position: absolute; inset: -2px; z-index: 2; border-radius: inherit;
			background: var(--deck-bg); opacity: 0; pointer-events: none;
			animation: ace-deck-vr linear both, ace-deck-vl linear forwards;
			animation-timeline: --ace-deck-card, --ace-deck-card;
			animation-range: contain calc(var(--step) * -4) contain 0%, contain 100% contain calc(100% + var(--step) * 4);
		}
	}
}
@keyframes ace-deck-r {
	from { opacity: 0; transform: translate(calc((var(--fx) - var(--step)) * 4 + 10%), calc(var(--fy) * 3 + 10%)) scale(.8) rotate(2deg); }
	25% { opacity: 1; transform: translate(calc((var(--fx) - var(--step)) * 3 + 7.5%), calc(var(--fy) * 3 + 7.5%)) scale(.85) rotate(1.5deg); }
	to { opacity: 1; transform: none; }
}
@keyframes ace-deck-l {
	from { opacity: 1; transform: none; }
	75% { opacity: 1; transform: translate(calc((var(--step) - var(--fx)) * 3 - 7.5%), calc(var(--fy) * -3 - 7.5%)) scale(.85) rotate(-1.5deg); }
	to { opacity: 0; transform: translate(calc((var(--step) - var(--fx)) * 4 - 10%), calc(var(--fy) * -3 - 10%)) scale(.8) rotate(-2deg); }
}
@keyframes ace-deck-vr { from, 25% { opacity: .72; } 50% { opacity: .58; } 75% { opacity: .38; } to { opacity: 0; } }
@keyframes ace-deck-vl { from { opacity: 0; } 25% { opacity: .38; } 50% { opacity: .58; } 75%, to { opacity: .72; } }
@keyframes ace-deck-zr { from { z-index: 96; } 24.99% { z-index: 97; } 49.99% { z-index: 98; } 74.99% { z-index: 99; } 99.99%, to { z-index: 100; } }
@keyframes ace-deck-zl { from { z-index: 100; } 12.5% { z-index: 99; } 37.5% { z-index: 98; } 62.5% { z-index: 97; } 87.5%, to { z-index: 96; } }

/* The same deck drawn by js/ace-article-deck.js where scroll timelines are missing (Firefox today):
   it sets each card's transform, opacity and --dim, and each item's z-index, from the same maths. */
.ace-deck-js .ace-deck__track { padding-block: calc(var(--fy) * 3 + 12px) calc(var(--fy) * 3 + 26px); }
.ace-deck-js .ace-deck__card { will-change: transform; }
.ace-deck-js .ace-deck__card::before { content: ""; position: absolute; inset: -2px; z-index: 2; border-radius: inherit; background: var(--deck-bg); opacity: var(--dim, 0); pointer-events: none; }


/* Ace Media's homepage guides, using the shared article deck pattern. */
.home-guides { background: var(--ace-bg); color: var(--ace-text); padding: clamp(48px, 7vw, 100px) 0; position: relative; z-index: 1; overflow: hidden; }
.home-guides__head { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.home-guides__head h2 { color:var(--ace-heading); margin:8px 0 12px; font-size:clamp(2rem,4vw,3.5rem); line-height:1.1; }
.home-guides__head p { max-width:650px; margin:0; }
.home-guides__label { text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:var(--ace-orange); font-size:.8rem; }
.home-guides__all { color:var(--ace-text); font-weight:700; text-underline-offset:5px; }
.home-guides .ace-deck { --deck-ink:var(--ace-text); --deck-muted:var(--ace-muted); --deck-bg:var(--ace-bg); --deck-card:var(--ace-surface); --deck-line:var(--ace-border); margin-top:24px; }
.home-guides .ace-deck__title { font-family:'Bricolage Grotesque','Open Sans',sans-serif; font-size:clamp(1.25rem,1rem + .5vw,1.6rem); }
.home-guides .ace-deck__title a { color:var(--ace-text); }
.home-guides .ace-deck__card { padding:20px; }
.home-guides .ace-deck__summary { font-size:.95rem; line-height:1.6; margin-top:0; margin-bottom:16px; }
.home-guides .ace-deck__media { aspect-ratio:3 / 1; background:var(--ace-surface-2); display:flex; align-items:center; padding:15px 25px; font:800 clamp(2rem,5vw,4rem)/1 'Bricolage Grotesque',sans-serif; color:var(--c); }
.home-guides .ace-deck__nav { padding-right:15px; }