/* Golden Grading — Just Graded: the band of recently graded slabs on the home page (gg-just-graded.php).
   Each slab is gg-site-chrome's flip slab, unchanged: its .gg-flip rules (site-chrome.css) draw it and site-chrome.js
   leans and turns it. This file lays out the band and moves the row.

   Two layouts. STILL (the default: no script, reduced motion, or fewer than 6 slabs): a row you can swipe or scroll.
   MOVING (.is-moving, added by just-graded.js): every slab sits at the row's start and runs the same loop, offset by
   its own negative delay (the keyframes, written for this list's length, are printed in the head by the plugin), so
   the row never jumps and each slab keeps the side it was turned to. Every length follows one unitless width,
   --gg-jg-w: the slab (px), the gap (an eighth of it) and k = width / 350, which scales the flip's 3D to the slab's
   size, so a small slab turns exactly like the home page's 350px one. */
.gg-jg {
	--gg-jg-w: 220;
	--gg-jg-top: 26px; /* the moving row's room above the slabs */
	--gg-k: calc(var(--gg-jg-w) / 350);
	position: relative;
	box-sizing: border-box;
	clear: both;
	/* full width, less a classic scrollbar (the script measures it) */
	width: calc(100vw - var(--gg-sbw, 0px));
	margin: 0 0 0 calc(50% - (100vw - var(--gg-sbw, 0px)) / 2);
	padding: 44px 0 22px;
	background: #fff; /* the pictures have white around the holder */
}
.gg-jg__head {
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: 1248px;
	margin: 0 auto;
	padding: 0 15px;
}
.gg-jg__intro { min-width: 0; }
.gg-jg .gg-jg__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'd77', sans-serif !important;
	font-size: clamp(32px, 2.8vw, 46px) !important;
	line-height: 1 !important;
	text-transform: uppercase;
	color: var(--gg-ink, #161616) !important;
}
.gg-jg .gg-jg__sub { margin: 10px 0 0 !important; padding: 0 !important; font-size: 18px; line-height: 1.45; color: #444; }
/* "Click / Tap a slab to flip it" is true only once the scripts run. */
.gg-jg__hint { display: inline-flex; align-items: center; gap: .4em; margin-left: .3em; color: #595959; white-space: nowrap; visibility: hidden; }
.gg-jg.is-ready .gg-jg__hint { visibility: visible; }
.gg-jg__hint svg { flex: none; }
/* Stops the moving row (WCAG 2.2.2). Shown by the script only while the row moves. */
.gg-jg .gg-jg__pause {
	all: unset;
	box-sizing: border-box;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--gg-ink, #161616);
	border-radius: 50%;
	background: #fff;
	color: var(--gg-ink, #161616);
	cursor: pointer;
}
.gg-jg .gg-jg__pause[hidden] { display: none; }
.gg-jg .gg-jg__pause:hover, .gg-jg .gg-jg__pause:focus-visible { background: var(--gg-ink, #161616); color: var(--gg-gold, #E5B510); }
.gg-jg .gg-jg__pause:focus-visible { outline: 3px solid var(--gg-gold, #E5B510); outline-offset: 2px; }
.gg-jg__pause-g, .gg-jg__pause[aria-pressed="true"] .gg-jg__pause-p { display: none; }
.gg-jg__pause[aria-pressed="true"] .gg-jg__pause-g { display: inline; }

/* ---- STILL: a row you can swipe or scroll, starting in line with the page ---- */
.gg-jg__viewport {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: max(15px, calc(50% - 609px));
	scrollbar-width: thin;
	padding: 26px 0 30px;
}
.gg-jg .gg-jg__track {
	display: flex;
	width: max-content;
	margin: 0 !important;
	padding: 0 max(15px, calc(50% - 609px)) !important; /* in line with the title; 50% of the row, not of the window */
}
.gg-jg .gg-jg__item:last-child { margin-right: 0 !important; }
/* A turning slab reaches about a quarter of its width above itself; the still row is a scroller and would cut that
   off, so it gets the room (with reduced motion the turn is instant and needs none). Where the moving row clips
   sideways only, the room reaches up over the title instead of pushing the slabs down, so they sit where the moving
   row has them: the band is as tall before the script starts the row as after, and the home slabs under it don't
   jump. (The Pause button, at the title's foot, only shows while the row moves.) */
@media (prefers-reduced-motion: no-preference) {
	.gg-jg:not(.is-moving) .gg-jg__viewport { padding-top: calc(var(--gg-jg-w) * .27px); }
	@supports (overflow: clip) {
		.gg-jg:not(.is-moving) .gg-jg__viewport { margin-top: calc(var(--gg-jg-top) - var(--gg-jg-w) * .27px); }
	}
}
/* For the same reason, until the script runs, a row that is about to move shows no scrollbar (the moving row has none). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.gg-jg:not(.is-ready) .gg-jg__viewport { scrollbar-width: none; }
	.gg-jg:not(.is-ready) .gg-jg__viewport::-webkit-scrollbar { display: none; }
}
.gg-jg .gg-jg__item {
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc(var(--gg-jg-w) * 1px);
	margin: 0 calc(var(--gg-jg-w) * .125px) 0 0 !important;
	padding: 0 !important;
	text-align: center;
	scroll-snap-align: start;
}
/* The slab turned or lifted comes in front of its neighbours. */
.gg-jg .gg-jg__item:has(.gg-flip.is-live, .gg-flip.is-flipping) { z-index: 1; }

/* ---- MOVING ---- */
.gg-jg.is-moving .gg-jg__viewport {
	overflow: hidden;
	scroll-snap-type: none;
	max-width: calc(var(--gg-jg-n1, 15) * var(--gg-jg-w) * 1.125px); /* wider and a slab would wrap in view */
	margin: 0 auto;
	padding: 26px 0 30px;
}
@supports (overflow: clip) {
	/* clip sideways only: nothing (focus, find, script) can scroll it, and a turning slab can reach above and below */
	.gg-jg.is-moving .gg-jg__viewport { overflow-x: clip; overflow-y: visible; }
}
@supports not (overflow: clip) {
	.gg-jg.is-moving .gg-jg__viewport { padding-top: calc(var(--gg-jg-w) * .27px); } /* hidden clips the turn: room */
}
.gg-jg.is-moving .gg-jg__track { position: relative; display: block; width: auto; padding: 0 !important; }
.gg-jg.is-moving .gg-jg__item,
.gg-jg.is-moving .gg-jg__item:last-child {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 !important;
	animation: gg-jg-run var(--gg-jg-dur, 96s) linear var(--gg-jg-delay, 0s) infinite;
}
.gg-jg.is-moving .gg-jg__item:first-child { position: relative; } /* holds the row's height; every slab starts here */
.gg-jg.is-moving.is-hover .gg-jg__item,
.gg-jg.is-moving.is-held .gg-jg__item,
.gg-jg.is-moving.is-paused .gg-jg__item,
.gg-jg.is-moving.is-off .gg-jg__item { animation-play-state: paused; }
/* soft edges, as white veils over the row (a mask would also cut a turning slab's top and bottom) */
.gg-jg.is-moving .gg-jg__viewport::before,
.gg-jg.is-moving .gg-jg__viewport::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 56px;
	pointer-events: none;
}
.gg-jg.is-moving .gg-jg__viewport::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.gg-jg.is-moving .gg-jg__viewport::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }

/* ---- the slab: gg-site-chrome's flip slab, its 3D scaled by k (perspective, lift, bump) ---- */
.gg-jg .gg-flip { max-width: none; }
.gg-jg .gg-flip__btn { perspective: calc(1100px * var(--gg-k, 1)); }
.gg-jg .gg-flip__tilt { transform: rotateX(var(--gg-rx, 0deg)) rotateY(var(--gg-ry, 0deg)) translateZ(calc(var(--gg-z, 0px) * var(--gg-k, 1))); }
.gg-jg .gg-flip.is-flipping .gg-flip__bump { animation-name: gg-jg-bump-l; }
@keyframes gg-jg-bump-l { 0% { transform: translateZ(0); } 40% { transform: translateZ(44px); } 100% { transform: translateZ(0); } }
@keyframes gg-jg-bump-m { 0% { transform: translateZ(0); } 40% { transform: translateZ(38px); } 100% { transform: translateZ(0); } }
@keyframes gg-jg-bump-s { 0% { transform: translateZ(0); } 40% { transform: translateZ(30px); } 100% { transform: translateZ(0); } }
/* The home slabs' one-time "peek" is left out here: the row's own motion says these move. */
.gg-jg .gg-flip.is-peek .gg-flip__bump { animation: none; }

/* Under each slab: the name and the grade, in the label's black and gold (screen readers get both from the slab). */
.gg-jg .gg-jg__cap { margin: 16px 0 0 !important; padding: 0 !important; line-height: 1.1; }
.gg-jg .gg-jg__name {
	display: block;
	overflow: hidden;
	font-family: 'd77', sans-serif;
	font-size: 20px;
	letter-spacing: .01em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--gg-ink, #161616);
}
.gg-jg .gg-jg__grade {
	display: inline-block;
	margin-top: 7px;
	padding: 4px 11px 3px;
	border-radius: 999px;
	background: var(--gg-ink, #161616) !important; /* the theme clears every p span's background with !important */
	color: var(--gg-gold, #E5B510);
	font-family: 'd77', sans-serif;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
}

@media (max-width: 1023.98px) {
	.gg-jg { --gg-jg-w: 190; }
	.gg-jg .gg-flip.is-flipping .gg-flip__bump { animation-name: gg-jg-bump-m; }
}
@media (max-width: 767.98px), (max-height: 500px) and (max-width: 1023.98px) {
	.gg-jg { --gg-jg-w: 150; --gg-jg-top: 20px; padding: 34px 0 12px; }
	.gg-jg .gg-flip.is-flipping .gg-flip__bump { animation-name: gg-jg-bump-s; }
	.gg-jg__head { align-items: flex-start; }
	.gg-jg .gg-jg__sub { margin-top: 8px !important; font-size: 16px; }
	.gg-jg__hint { display: flex; margin: 4px 0 0; }
	.gg-jg__viewport { padding: 20px 0 24px; }
	.gg-jg.is-moving .gg-jg__viewport { padding: 20px 0 24px; }
	.gg-jg.is-moving .gg-jg__viewport::before, .gg-jg.is-moving .gg-jg__viewport::after { width: 24px; }
	.gg-jg .gg-jg__cap { margin-top: 12px !important; }
	.gg-jg .gg-jg__name { font-size: 16px; }
	.gg-jg .gg-jg__grade { margin-top: 6px; padding: 4px 9px 3px; font-size: 14px; }
}
@media print {
	.gg-jg { display: none; }
}