/* Caroline Tonna — Slideshow / walk-through cards
   Standalone viewer; shares the theme tokens, isolated from lightbox.css.
   Mobile-first: base = 375, then >=768, then >=1025. */

.ct-slideshow {
	--ct-ss-bg: #10201b;          /* dark viewer ground; overridable per slideshow */
	--ct-ss-fg: var(--color-button-text, #F5F0E8);
	margin: 2rem 0;
}

.ct-slideshow__title {
	font-family: var(--font-fraunces, serif);
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0 0 1rem;
	color: var(--color-text);
}

/* ── Image shapes (cover + shelf cards) ─────────────────────── */
.ct-ss-shape-square    img { aspect-ratio: 1 / 1;  object-fit: cover; }
.ct-ss-shape-portrait  img { aspect-ratio: 3 / 4;  object-fit: cover; }
.ct-ss-shape-landscape img { aspect-ratio: 16 / 9; object-fit: cover; }
.ct-ss-shape-original  img { object-fit: cover; }

/* ── Full-screen cover trigger ──────────────────────────────── */
.ct-slideshow__cover {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: none;
	overflow: hidden;
	border-radius: 4px;
}
.ct-slideshow__cover img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .5s ease;
}
.ct-slideshow__cover:hover img,
.ct-slideshow__cover:focus-visible img { transform: scale(1.03); }

.ct-slideshow__cover-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: #fff;
	text-align: center;
	background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
	padding: 1rem;
}
.ct-slideshow__cover-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	color: var(--color-button-bg, #1A2E28);
	transition: transform .2s ease, background .2s ease;
}
.ct-slideshow__cover:hover .ct-slideshow__cover-play { transform: scale(1.08); }
.ct-slideshow__cover-title {
	font-family: var(--font-fraunces, serif);
	font-size: 1.35rem;
	line-height: 1.2;
	text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.ct-slideshow__cover-count {
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .85;
}

/* ── Shelf (inline row) ─────────────────────────────────────── */
.ct-slideshow__shelf {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	padding-bottom: .5rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.ct-slideshow__card {
	position: relative;
	flex: 0 0 68%;
	max-width: 68%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	scroll-snap-align: start;
	border-radius: 4px;
	overflow: hidden;
}
.ct-slideshow__card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .4s ease;
}
.ct-slideshow__card:hover img,
.ct-slideshow__card:focus-visible img { transform: scale(1.04); }
.ct-slideshow__card-title {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: .5rem .6rem;
	color: #fff;
	font-family: var(--font-fraunces, serif);
	font-size: .95rem;
	text-align: left;
	background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}

.ct-slideshow-placeholder {
	padding: 1.25rem;
	border: 1px dashed var(--color-border, #E0D9CE);
	border-radius: 4px;
	color: var(--color-text-light, #5C7A6E);
	font-style: italic;
	text-align: center;
}

/* ── Viewer overlay (built by slideshow.js) ─────────────────── */
.ct-ss-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	flex-direction: column;
	background: var(--ct-ss-bg, #10201b);
	color: var(--ct-ss-fg, #F5F0E8);
	opacity: 0;
	transition: opacity .25s ease;
}
.ct-ss-viewer.is-open { display: flex; opacity: 1; }
body.ct-ss-lock { overflow: hidden; }

.ct-ss-stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 3.25rem .75rem 1rem;
	overflow: hidden;
}

/* One slide */
.ct-ss-slide {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	gap: .75rem;
}
.ct-ss-slide.is-active { display: flex; }

.ct-ss-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
}
.ct-ss-slide img {
	max-width: 100%;
	max-height: 68vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 3px;
}

/* Caption block. Rich text: inline font-family/size/colour from the editor
   win over these defaults (inline style beats a class rule). */
.ct-ss-cap-inner { max-width: min(92%, 42rem); }
.ct-ss-cap-title {
	font-family: var(--font-fraunces, serif);
	font-size: 1.15rem;
	line-height: 1.2;
	margin: 0 0 .2rem;
}
.ct-ss-cap-title p { margin: 0; }
.ct-ss-cap-text {
	font-size: .9rem;
	line-height: 1.55;
	margin: 0;
}
.ct-ss-cap-text p { margin: 0 0 .4rem; }
.ct-ss-cap-text p:last-child { margin-bottom: 0; }
.ct-ss-cap-link {
	display: inline-block;
	margin-top: .5rem;
	font-size: .85rem;
	letter-spacing: .03em;
	color: inherit;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

/* Below the image: static block, horizontal alignment only */
.ct-ss-slide--below .ct-ss-cap { margin-top: .85rem; width: 100%; display: flex; }
.ct-ss-slide--below .ct-ss-cap--h-left   { justify-content: flex-start; }
.ct-ss-slide--below .ct-ss-cap--h-center { justify-content: center; }
.ct-ss-slide--below .ct-ss-cap--h-right  { justify-content: flex-end; }

/* Overlay: caption floats over the image; placement = vertical + horizontal */
.ct-ss-slide--overlay .ct-ss-figure { position: relative; }
.ct-ss-slide--overlay .ct-ss-cap {
	position: absolute;
	inset: 0;
	display: flex;
	padding: 1.25rem;
	pointer-events: none;
}
.ct-ss-slide--overlay .ct-ss-cap-inner {
	pointer-events: auto;
	color: #fff;
	background: rgba(0, 0, 0, .42);
	padding: .8rem 1.05rem;
	border-radius: 5px;
	backdrop-filter: blur(2px);
}
/* vertical placement (cross axis) */
.ct-ss-slide--overlay .ct-ss-cap--v-top    { align-items: flex-start; }
.ct-ss-slide--overlay .ct-ss-cap--v-middle { align-items: center; }
.ct-ss-slide--overlay .ct-ss-cap--v-bottom { align-items: flex-end; }
/* horizontal placement (main axis) */
.ct-ss-slide--overlay .ct-ss-cap--h-left   { justify-content: flex-start; }
.ct-ss-slide--overlay .ct-ss-cap--h-center { justify-content: center; }
.ct-ss-slide--overlay .ct-ss-cap--h-right  { justify-content: flex-end; }

/* text alignment follows horizontal placement (both modes) */
.ct-ss-cap--h-left   .ct-ss-cap-inner { text-align: left; }
.ct-ss-cap--h-center .ct-ss-cap-inner { text-align: center; }
.ct-ss-cap--h-right  .ct-ss-cap-inner { text-align: right; }

/* ── Chrome: close, counter, arrows, dots ───────────────────── */
.ct-ss-btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.35);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.ct-ss-btn:hover { background: rgba(0,0,0,.6); }
.ct-ss-close { top: .6rem; right: .6rem; font-size: 1.5rem; line-height: 1; }
.ct-ss-prev  { top: 50%; left: .4rem;  transform: translateY(-50%); }
.ct-ss-next  { top: 50%; right: .4rem; transform: translateY(-50%); }

.ct-ss-counter {
	position: absolute;
	top: .8rem; left: .8rem;
	z-index: 2;
	font-size: .8rem;
	letter-spacing: .05em;
	opacity: .8;
}

/* Progress dots */
.ct-ss-dots {
	display: flex;
	gap: .4rem;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: .75rem 1rem 1.1rem;
}
.ct-ss-dot {
	width: 8px; height: 8px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.35);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.ct-ss-dot.is-active { background: #fff; transform: scale(1.25); }

/* ── Dive Deeper final slide ────────────────────────────────── */
.ct-ss-slide--dive {
	display: none;
	overflow-y: auto;
	align-items: flex-start;
	padding: 1rem .25rem;
}
.ct-ss-slide--dive.is-active { display: block; }
.ct-ss-dive-inner {
	max-width: 60rem;
	margin: 0 auto;
	width: 100%;
}
.ct-ss-dive-heading {
	font-family: var(--font-fraunces, serif);
	font-size: 1.5rem;
	text-align: center;
	margin: 0 0 1.25rem;
}
.ct-ss-dive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.ct-ss-dive-card {
	display: flex;
	gap: .9rem;
	text-decoration: none;
	color: inherit;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 6px;
	overflow: hidden;
	transition: background .2s ease, transform .2s ease;
}
.ct-ss-dive-card:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.ct-ss-dive-card-thumb {
	flex: 0 0 92px;
	align-self: stretch;
	background-size: cover;
	background-position: center;
	background-color: rgba(255,255,255,.08);
	min-height: 92px;
}
.ct-ss-dive-card-body { padding: .75rem .9rem .8rem 0; flex: 1 1 auto; }
.ct-ss-dive-card-type {
	display: inline-block;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: .25rem;
}
.ct-ss-dive-card-title {
	font-family: var(--font-fraunces, serif);
	font-size: 1.05rem;
	line-height: 1.25;
	margin: 0 0 .15rem;
}
.ct-ss-dive-card-source { font-size: .8rem; opacity: .75; margin: 0 0 .3rem; }
.ct-ss-dive-card-desc   { font-size: .85rem; line-height: 1.5; opacity: .85; margin: 0; }

/* ── Tablet ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.ct-slideshow__title { font-size: 1.75rem; }
	.ct-slideshow__card { flex-basis: 38%; max-width: 38%; }
	.ct-slideshow__cover-title { font-size: 1.75rem; }
	.ct-ss-stage { padding: 3.5rem 3.5rem 1rem; }
	.ct-ss-slide img { max-height: 74vh; }
	.ct-ss-cap-title { font-size: 1.35rem; }
	.ct-ss-close { top: 1rem; right: 1rem; }
	.ct-ss-prev  { left: 1rem; }
	.ct-ss-next  { right: 1rem; }
	.ct-ss-dive-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
	.ct-ss-dive-card { flex-direction: column; }
	.ct-ss-dive-card-thumb { flex-basis: auto; width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
	.ct-ss-dive-card-body { padding: .8rem .9rem 1rem; }
}

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 1025px) {
	.ct-slideshow__card { flex-basis: 24%; max-width: 24%; }
	.ct-ss-slide img { max-height: 78vh; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ct-slideshow__cover img,
	.ct-slideshow__card img,
	.ct-ss-viewer,
	.ct-ss-dive-card { transition: none; }
}