/**
 * TGJ Scroller — the cards in the reworked row.
 *
 * The row itself (cards across, gaps, scroll-snap, arrows, progress line,
 * the heading as the first card) is the Slideshow row's: the Scroller prints
 * its markup and loads journal-blocks-tgj-slideshow.css. This file is only the
 * card — image with the text below it or over it — and the heading-above
 * option with its text link. Breakpoints: tablet 768px, laptop 1024px.
 */

/* ── The card ──────────────────────────────────────────────── */

/* Text below: the slide is the whole card, so it drops the row's frame (the
   radius and crop move to the image) and its shape (the image keeps it). */
.tgj-scroller--text-below .tgj-slideshow__slide {
	border-radius: 0;
	overflow: visible;
	aspect-ratio: auto;
}

.tgj-scroller__card {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tgj-scroller__image {
	position: relative;
	overflow: hidden;
	border-radius: var(--ss-radius);
	background: var(--tgj-surface-sunk, #f6f6f3);
}

.tgj-scroller__image picture,
.tgj-scroller__image img {
	display: block;
	width: 100%;
}

/* Shapes: the image is cropped to them (natural keeps its own). */
.tgj-scroller--shape-portrait .tgj-scroller__image  { aspect-ratio: 3 / 4; }
.tgj-scroller--shape-portrait45 .tgj-scroller__image { aspect-ratio: 4 / 5; }
.tgj-scroller--shape-square .tgj-scroller__image    { aspect-ratio: 1 / 1; }
.tgj-scroller--shape-landscape .tgj-scroller__image { aspect-ratio: 3 / 2; }

.tgj-scroller:not(.tgj-scroller--shape-natural) .tgj-scroller__image picture {
	height: 100%;
}

.tgj-scroller:not(.tgj-scroller--shape-natural) .tgj-scroller__image img {
	height: 100%;
	object-fit: cover;
}

.tgj-scroller--shape-natural .tgj-scroller__image img {
	height: auto;
}

.tgj-scroller__text {
	padding-top: var(--space-12);
}

.tgj-scroller__title {
	margin: 0;
	font-size: var(--tgj-body);
	line-height: var(--tgj-lh-body);
	font-weight: 400;
}

.tgj-scroller__sub {
	margin: var(--space-4, 4px) 0 0;
	font-size: var(--tgj-small);
	line-height: var(--tgj-lh-small);
	color: var(--tgj-text-muted, #5f5f5a);
}

.tgj-scroller__sub del {
	opacity: 0.7;
}

.tgj-scroller__cta {
	margin: var(--space-8) 0 0;
	font-size: var(--tgj-small);
	line-height: var(--tgj-lh-small);
	font-style: italic;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.tgj-scroller__card:hover .tgj-scroller__title,
a.tgj-scroller__card:focus-visible .tgj-scroller__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Text over the image ───────────────────────────────────── */

/* The old feature panels' look: the slide keeps the row's frame and takes the
   shape, the image fills it under an even dark tint, and the text is centred
   in the middle, all of it shown. */
.tgj-scroller--text-over.tgj-scroller--shape-portrait .tgj-slideshow__slide   { aspect-ratio: 3 / 4; }
.tgj-scroller--text-over.tgj-scroller--shape-portrait45 .tgj-slideshow__slide { aspect-ratio: 4 / 5; }
.tgj-scroller--text-over.tgj-scroller--shape-square .tgj-slideshow__slide     { aspect-ratio: 1 / 1; }
.tgj-scroller--text-over.tgj-scroller--shape-landscape .tgj-slideshow__slide  { aspect-ratio: 3 / 2; }

/* Wider cards than the row's 2.5 below laptop, so the centred text fits:
   one and a peek on phones, 1.75 on tablets, as the old feature panels. */
.tgj-scroller--text-over .tgj-slideshow__slide {
	flex-basis: 85%;
}

@media (min-width: 768px) {
	.tgj-scroller--text-over .tgj-slideshow__slide {
		flex-basis: calc((100% - var(--ss-gap)) / 1.75);
	}
}

@media (min-width: 1024px) {
	.tgj-scroller--text-over.tgj-slideshow--cards-2 .tgj-slideshow__slide { flex-basis: calc((100% - 1 * var(--ss-gap)) / 2); }
	.tgj-scroller--text-over.tgj-slideshow--cards-3 .tgj-slideshow__slide { flex-basis: calc((100% - 2 * var(--ss-gap)) / 3); }
	.tgj-scroller--text-over.tgj-slideshow--cards-4 .tgj-slideshow__slide { flex-basis: calc((100% - 3 * var(--ss-gap)) / 4); }
	.tgj-scroller--text-over.tgj-slideshow--cards-6 .tgj-slideshow__slide { flex-basis: calc((100% - 5 * var(--ss-gap)) / 6); }
}

.tgj-scroller--text-over .tgj-scroller__card {
	position: relative;
	color: #fff;
}

.tgj-scroller--text-over .tgj-scroller__image {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.tgj-scroller--text-over .tgj-scroller__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #231f20;
	opacity: 0.25;
	mix-blend-mode: multiply;
}

.tgj-scroller--text-over .tgj-scroller__text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-24);
	text-align: center;
}

.tgj-scroller--text-over .tgj-scroller__title {
	font-size: var(--tgj-small-header);
	line-height: var(--tgj-lh-small-header);
}

.tgj-scroller--text-over .tgj-scroller__sub {
	margin-top: var(--space-4, 4px);
	font-size: var(--tgj-body);
	line-height: var(--tgj-lh-body);
	color: inherit;
}

.tgj-scroller--text-over .tgj-scroller__cta {
	font-size: var(--tgj-body);
	line-height: var(--tgj-lh-body);
}

/* ── Heading above the row ─────────────────────────────────── */

/* The old Scroller's header: heading and text on the left, an italic text
   link on the right, shrunk to an arrow below laptop width. The Slideshow row
   hides the copy above from tablet up (it becomes the first card there);
   Above keeps it at every size. */
.tgj-scroller--heading-above .tgj-slideshow__intro--above {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-24);
	margin-bottom: var(--space-32);
}

.tgj-scroller__more {
	flex: none;
	display: inline-flex;
	align-items: center;
	color: inherit;
	font-size: var(--tgj-body);
	line-height: var(--tgj-lh-body);
	font-style: italic;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tgj-scroller__more-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.tgj-scroller__more-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.tgj-scroller__more-arrow {
		display: none;
	}
}

/* ── Heading beside: the first card ────────────────────────── */

/* The button sits under the text, not pinned to the foot of the card (the
   Slideshow row's intro card spaces them apart). */
.tgj-scroller .tgj-slideshow__intro--card {
	justify-content: flex-start;
	gap: var(--space-16);
}

/* ── The row: gap and arrows ───────────────────────────────── */

/* The old Scroller's 24px between cards at every size (the Slideshow row
   widens to 40 on laptops). */
.tgj-scroller.tgj-slideshow {
	--ss-gap: var(--gap, 24px);
}

/* Arrows: the Slideshow row's edge arrows (journal-blocks-tgj-slideshow.css),
   moved to half the image's height, and none on text-over rows (the old
   feature panels had none). The rail is a container, so one card's width is
   (100cqw - gaps) / cards across, and the image is that over its shape. */
.tgj-scroller__rail {
	position: relative;
	container-type: inline-size;
}

.tgj-scroller--text-over .tgj-scroller__arrows:not([hidden]) {
	display: none;
}

@media (min-width: 1024px) {
	.tgj-scroller.tgj-slideshow--cards-2 { --tgj-scroller-n: 2; }
	.tgj-scroller.tgj-slideshow--cards-3 { --tgj-scroller-n: 3; }
	.tgj-scroller.tgj-slideshow--cards-4 { --tgj-scroller-n: 4; }
	.tgj-scroller.tgj-slideshow--cards-6 { --tgj-scroller-n: 6; }

	.tgj-scroller--shape-portrait   { --tgj-scroller-h: 4 / 3; }
	.tgj-scroller--shape-portrait45 { --tgj-scroller-h: 5 / 4; }
	.tgj-scroller--shape-square     { --tgj-scroller-h: 1; }
	.tgj-scroller--shape-landscape  { --tgj-scroller-h: 2 / 3; }
	.tgj-scroller--shape-natural    { --tgj-scroller-h: 1; }

	.tgj-scroller__arrows .tgj-slideshow__arrow {
		top: calc((100cqw - (var(--tgj-scroller-n, 4) - 1) * var(--ss-gap)) / var(--tgj-scroller-n, 4) * (var(--tgj-scroller-h, 1)) / 2);
	}
}

/* ── Editor ────────────────────────────────────────────────── */

.journal-blocks-scroller-cards {
	margin-top: var(--space-16);
	padding: var(--space-16);
	border: 1px dashed #c3c4c7;
}

.tgj-scroller-card-editor {
	max-width: 320px;
}

.tgj-scroller-card-editor__image {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.tgj-scroller-card-editor__image img {
	display: block;
	width: 100%;
	height: auto;
}