/* Thira — Latest Stories  (v2.4)
   Hardened against theme CSS: list markers/margins removed, overlay text forced
   white, theme link underlines killed, IMAGE SIZING FORCED (defeats a theme
   `img { height:auto }` that would otherwise distort the hero/slide images),
   mobile counter overlays the image. */

.thira-ls {
	--thira-cream: #f3deca;
	--thira-oxblood: #301014;
	--thira-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
	--thira-sans: "Jost", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--thira-ls-height: clamp(440px, 80vh, 800px);
	--thira-ls-fade: 560ms;
	--thira-ls-crop: center 30%;
	--thira-ls-interval: 5s;
	--thira-ls-ring-circ: 56.55;
	--thira-ls-mobile-h: clamp(440px, 78vh, 720px);

	--thira-ls-title: clamp(22px, 2.1vw, 32px);
	--thira-ls-dek: clamp(13px, 0.95vw, 15px);
	--thira-ls-item: clamp(13px, 0.95vw, 15px);
	--thira-ls-eyebrow: 11px;

	position: relative;
	width: 100%;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

/* defensive resets so theme content styles can't leak in */
.thira-ls, .thira-ls *, .thira-ls *::before, .thira-ls *::after { box-sizing: border-box; }
.thira-ls a { text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; }
.thira-ls .thira-ls__list,
.thira-ls .thira-ls__track {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.thira-ls .thira-ls__item, .thira-ls .thira-ls__slide { list-style: none !important; margin: 0; }

/* FORCE image sizing — beats theme rules like `img { height:auto !important }` */
.thira-ls .thira-ls__layer,
.thira-ls .thira-ls__slide-img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}

@keyframes thira-ls-sweep {
	from { stroke-dashoffset: var(--thira-ls-ring-circ); }
	to   { stroke-dashoffset: 0; }
}

/* ============================ DESKTOP ============================ */
.thira-ls__desktop { position: relative; width: 100%; }
.thira-ls__desktop, .thira-ls__desktop a { color: #fff !important; }

.thira-ls__hero-link { display: block; position: relative; width: 100%; }

.thira-ls__stage {
	display: block; position: relative; width: 100%;
	height: var(--thira-ls-height) !important; overflow: hidden; background: var(--thira-oxblood);
}
.thira-ls .thira-ls__layer {
	position: absolute; inset: 0; height: 100% !important;
	object-position: var(--thira-ls-crop);
	opacity: 0; transition: opacity var(--thira-ls-fade) ease; will-change: opacity;
}
.thira-ls__layer.is-current { opacity: 1; }

.thira-ls__hero-scrim {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.08) 32%, rgba(0,0,0,0.08) 58%, rgba(0,0,0,0.52) 100%),
		linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 40%);
}

.thira-ls__hero-meta {
	position: absolute; left: clamp(22px, 4vw, 64px); bottom: clamp(22px, 4.5vh, 52px);
	max-width: min(50%, 560px); display: block; opacity: 1; transition: opacity 220ms ease; z-index: 2;
}
.thira-ls__hero-meta.is-fading { opacity: 0; }
.thira-ls__hero-title {
	display: block; font-family: var(--thira-serif) !important; font-size: var(--thira-ls-title);
	font-weight: 500; line-height: 1.08; margin: 0 0 0.4em; color: #fff !important; text-shadow: 0 1px 22px rgba(0,0,0,0.45);
}
.thira-ls__hero-dek {
	display: block; font-family: var(--thira-serif) !important; font-size: var(--thira-ls-dek);
	font-weight: 400; line-height: 1.33; max-width: 44ch; color: #fff !important; opacity: 0.95; text-shadow: 0 1px 16px rgba(0,0,0,0.4);
}

.thira-ls__index {
	position: absolute; right: clamp(22px, 4vw, 64px); bottom: clamp(22px, 4.5vh, 52px);
	width: min(40%, 340px); z-index: 2;
}
.thira-ls__label {
	display: block; font-family: var(--thira-sans) !important; font-weight: 300; font-size: var(--thira-ls-eyebrow);
	text-transform: uppercase; letter-spacing: 0.12em; color: #fff !important; opacity: 0.85; margin-bottom: 0.9em;
}
.thira-ls__list { display: block; }

.thira-ls__item { opacity: 0.45; transition: opacity 240ms ease; }
.thira-ls__item.is-active, .thira-ls__item:hover, .thira-ls__item:focus-within { opacity: 1; }

.thira-ls__item-link {
	position: relative; display: grid; grid-template-columns: minmax(64px, 36%) 1fr;
	gap: clamp(8px, 1vw, 20px); align-items: baseline; padding: 0.12em 0; color: #fff !important;
}
.thira-ls__item-cat {
	font-family: var(--thira-sans) !important; font-weight: 300; font-size: var(--thira-ls-eyebrow);
	text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.5; color: #fff !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thira-ls__item-title {
	font-family: var(--thira-serif) !important; font-size: var(--thira-ls-item); font-weight: 400; line-height: 1.25; color: #fff !important;
}

.thira-ls__ring { position: absolute; left: -1.45em; top: 0.62em; width: 12px; height: 12px; opacity: 0; pointer-events: none; }
.thira-ls__item.is-active .thira-ls__ring { opacity: 1; }
.thira-ls__ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.thira-ls__ring-bg { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1.6; }
.thira-ls__ring-fg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: var(--thira-ls-ring-circ); stroke-dashoffset: var(--thira-ls-ring-circ); }
.thira-ls__item.is-active .thira-ls__ring-fg { animation: thira-ls-sweep var(--thira-ls-interval) linear forwards; }
.thira-ls.is-paused .thira-ls__ring-fg { animation-play-state: paused; }
.thira-ls.is-static .thira-ls__ring-fg { animation: none; stroke-dashoffset: 0; }

/* ============================ MOBILE ============================ */
.thira-ls__mobile { display: none; position: relative; background: transparent; }

.thira-ls__track {
	display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.thira-ls__track::-webkit-scrollbar { display: none; }

.thira-ls__slide { position: relative; flex: 0 0 100%; width: 100%; scroll-snap-align: start; }
.thira-ls__slide-link { display: block; position: relative; color: #fff !important; }
.thira-ls .thira-ls__slide-img {
	height: var(--thira-ls-mobile-h) !important; object-position: center; background: var(--thira-oxblood);
}
.thira-ls__slide-scrim {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 46%),
		linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 22%);
}
.thira-ls__slide-meta {
	position: absolute; left: clamp(20px, 6vw, 30px); right: clamp(20px, 6vw, 30px);
	bottom: clamp(24px, 8vw, 40px); display: block; z-index: 2; text-align: center;
}
.thira-ls__slide-cat {
	display: block; font-family: var(--thira-sans) !important; font-weight: 300; font-size: var(--thira-ls-eyebrow);
	text-transform: uppercase; letter-spacing: 0.12em; color: #fff !important; opacity: 0.92; margin-bottom: 0.7em;
}
.thira-ls__slide-title {
	display: block; font-family: var(--thira-serif) !important; font-size: clamp(24px, 7vw, 32px);
	font-weight: 500; line-height: 1.1; margin-bottom: 0.3em; color: #fff !important; text-shadow: 0 1px 20px rgba(0,0,0,0.5);
}
.thira-ls__slide-dek {
	display: block; font-family: var(--thira-serif) !important; font-size: 15px; font-weight: 400;
	line-height: 1.33; color: #fff !important; opacity: 0.95; text-shadow: 0 1px 16px rgba(0,0,0,0.45);
	max-width: 34ch; margin-left: auto; margin-right: auto;
}

.thira-ls__counter {
	position: absolute; top: clamp(14px, 4vw, 22px); left: 50%; transform: translateX(-50%);
	display: flex; align-items: center; gap: 0.6em; z-index: 3;
	font-family: var(--thira-sans) !important; font-weight: 300; font-size: var(--thira-ls-eyebrow);
	letter-spacing: 0.12em; color: #fff !important; text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.thira-ls__counter-sep { opacity: 0.5; }

.thira-ls__cring { width: 12px; height: 12px; display: inline-block; }
.thira-ls__cring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.thira-ls__cring-bg { fill: none; stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.8; }
.thira-ls__cring-fg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-dasharray: var(--thira-ls-ring-circ); stroke-dashoffset: var(--thira-ls-ring-circ); }
.thira-ls__cring-fg.is-running { animation: thira-ls-sweep var(--thira-ls-interval) linear forwards; }
.thira-ls.is-paused .thira-ls__cring-fg.is-running { animation-play-state: paused; }
.thira-ls.is-static .thira-ls__cring { display: none; }

@media (max-width: 768px) {
	.thira-ls__desktop { display: none; }
	.thira-ls__mobile { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.thira-ls__layer, .thira-ls__hero-meta, .thira-ls__item { transition: none; }
	.thira-ls__ring-fg, .thira-ls__cring-fg { animation: none !important; stroke-dashoffset: 0; }
}