/* albinfo-v2 bundle: site-rotator.css — generated; do not edit */

/* --- hero-rotator.css --- */
/*
  Component: hero rotator.
  Figma: "hero 003 4 sec change article" (62:2239) — 1280×580.

  - Auto-rotates every 4s, fade transition.
  - Pauses on hover/focus and when the section is offscreen.
  - Respects prefers-reduced-motion (no auto-advance).
  - Slides are absolutely positioned over each other so total height is
    one slide tall (no layout shift).

  Markup contract: see template-parts/hero/rotator.php
*/

.c-hero-rotator {
	position: relative;
	width: 100%;
	max-width: var(--container-width);
	aspect-ratio: 1280 / 580;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-bg-elev);
	margin-inline: auto;
	isolation: isolate;
}

.c-hero-rotator__slides {
	position: absolute;
	inset: 0;
}

.c-hero-rotator__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 700ms ease, visibility 0s linear 700ms;
}

.c-hero-rotator__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 700ms ease, visibility 0s linear 0s;
	z-index: 1;
}

.c-hero-rotator__media {
	position: absolute;
	inset: 0;
}

/* DO NOT strip height:100% — required so object-fit fills the absolute media box on desktop. */
.c-hero-rotator__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Vertical gradient: transparent top → near-solid dark at bottom (matches Figma rgba(32,33,36, 0 → 0.9)). */
.c-hero-rotator__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(32, 33, 36, 0) 30%,
		rgba(32, 33, 36, 0.9) 100%
	);
	pointer-events: none;
}

/* Live Updates badge — top-left 20/20. */
.c-hero-rotator__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px;
	background: var(--c-light);
	color: var(--c-dark);
	border-radius: var(--radius-sm);
	font-size: var(--fs-label-12);
	line-height: var(--lh-label-12);
	font-weight: var(--fw-regular);
	z-index: 3;
}

.c-hero-rotator__badge-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	background: var(--c-red);
	border-radius: 2px;
	padding: 2px;
}
.c-hero-rotator__badge-dot::before {
	content: "";
	width: 4px;
	height: 4px;
	background: #c10525;
	border-radius: 2px;
	animation: hero-pulse 1.4s ease-in-out infinite;
}

@keyframes hero-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

/* Bottom content block, padding 32px. */
.c-hero-rotator__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	z-index: 2;
}

.c-hero-rotator__cat {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--c-light);
	border-radius: var(--radius-md);
	color: var(--c-light);
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.42px;             /* Figma: -3 → -0.42px at 14pt */
	text-transform: uppercase;
	width: max-content;
}

/* Title + description sit side-by-side at desktop, stacked at mobile. */
.c-hero-rotator__lockup {
	display: grid;
	grid-template-columns: minmax(0, 609px) minmax(0, 572px);
	gap: 20px;
	align-items: end;
}

.c-hero-rotator__title {
	margin: 0;
	font-size: var(--fs-hero);              /* 48 */
	line-height: var(--lh-hero);            /* 60 */
	font-weight: var(--fw-bold);
	letter-spacing: -1.92px;                /* Figma: -4 → -1.92px at 48pt */
	color: var(--c-light);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-hero-rotator__desc {
	margin: 0;
	font-size: var(--fs-h3);                /* 21 */
	line-height: 1.2;
	font-weight: var(--fw-semibold);
	color: var(--c-light);

	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Indicators (dots) — Figma doesn't show them but every rotator needs them
   for a11y; we render them subtly bottom-right and they double as nav. */
.c-hero-rotator__dots {
	position: absolute;
	bottom: 16px;
	right: 24px;
	z-index: 4;
	display: flex;
	gap: 8px;
}

.c-hero-rotator__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}
.c-hero-rotator__dot:hover { background: rgba(255, 255, 255, 0.8); }
.c-hero-rotator__dot.is-active {
	background: var(--c-light);
	transform: scale(1.2);
}
.c-hero-rotator__dot:focus-visible {
	outline: 2px solid var(--c-light);
	outline-offset: 3px;
}

/* Large faded prev/next affordances on the photo edges. */
.c-hero-rotator__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 200ms ease, transform 200ms ease;
}
.c-hero-rotator__arrow:hover,
.c-hero-rotator__arrow:focus-visible {
	opacity: 0.95;
}
.c-hero-rotator__arrow:focus-visible {
	outline: 2px solid var(--c-light);
	outline-offset: 4px;
}
.c-hero-rotator__arrow--prev { left: 12px; }
.c-hero-rotator__arrow--next { right: 12px; }
.c-hero-rotator__arrow svg { display: block; }

/* ------------------- Paired with the 300×600 home ad ------------------- */
/* The ad sits beside the rotator from 1201px up (see .c-home-row-with-ad in
   ad-slot.css), narrowing the content column to ~948px. Two things go wrong
   at that width if we just let aspect-ratio do its thing: the rotator gets
   noticeably shorter than the 600px ad next to it (mismatched heights), and
   the 48px title starts wrapping awkwardly in less room than it was drawn
   for. Fix both: pin the rotator to the ad's own height, and reuse the
   compact type scale already designed for the narrow/mobile rotator instead
   of inventing new sizes. */
@media (min-width: 1201px) {
	.c-home-row-with-ad .c-hero-rotator {
		aspect-ratio: auto;
		height: 600px;
	}
	.c-home-row-with-ad .c-hero-rotator__lockup {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.c-home-row-with-ad .c-hero-rotator__title {
		font-size: 32px;
		line-height: 38px;
		letter-spacing: -1px;
		-webkit-line-clamp: 3;
	}
	.c-home-row-with-ad .c-hero-rotator__desc {
		font-size: 16px;
		-webkit-line-clamp: 3;
	}
}

/* ------------------- Responsive ------------------- */
@media (max-width: 900px) {
	.c-hero-rotator { aspect-ratio: 4 / 5; border-radius: 0; }
	.c-hero-rotator__lockup {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.c-hero-rotator__title { font-size: 32px; line-height: 38px; -webkit-line-clamp: 3; }
	.c-hero-rotator__desc  { font-size: 16px; -webkit-line-clamp: 3; }
	.c-hero-rotator__body  { padding: 20px; }
	.c-hero-rotator__arrow svg { width: 40px; height: 40px; }
}

/* ------------------- Reduced motion ------------------- */
@media (prefers-reduced-motion: reduce) {
	.c-hero-rotator__slide { transition: none; }
	.c-hero-rotator__badge-dot::before { animation: none; }
}

/* --- hero-related.css --- */
/*
  Hero related-news overlay (Blick-style glass panel on rotator slides).
  Markup: template-parts/hero/related-panel.php
*/

.c-hero-related {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	width: min(380px, 42%);
	max-height: calc(100% - 100px);
	overflow: auto;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: rgba(32, 33, 36, 0.78);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--c-light);
	pointer-events: auto;
}

.c-hero-related__topic {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-bold);
	letter-spacing: -0.42px;
	text-transform: uppercase;
	color: var(--c-light);
}

.c-hero-related__topic-mark {
	display: inline-block;
	flex-shrink: 0;
	width: 3px;
	height: 1.1em;
	background: var(--c-accent);
	border-radius: 1px;
}

.c-hero-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.c-hero-related__item {
	margin: 0;
}

.c-hero-related__link {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: inherit;
	text-decoration: none;
}

.c-hero-related__link:hover .c-hero-related__title {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.c-hero-related__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-sm);
	aspect-ratio: 1;
	background: rgba(255, 255, 255, 0.08);
}

.c-hero-related__img,
.c-hero-related__media img,
.c-hero-related__media .c-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-hero-related__media .c-card-vertical__img--placeholder {
	width: 100%;
	height: 100%;
	min-height: 72px;
}

.c-hero-related__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.c-hero-related__kicker {
	font-size: var(--fs-label-12);
	line-height: var(--lh-label-12);
	font-weight: var(--fw-regular);
	color: rgba(255, 255, 255, 0.72);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-hero-related__title {
	font-size: var(--fs-heading-14);
	line-height: 1.25;
	font-weight: var(--fw-semibold);
	color: var(--c-light);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-hero-rotator__slide-link {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--c-light);
	text-decoration: none;
	z-index: 1;
}

@media (max-width: 900px) {
	.c-hero-related {
		display: none;
	}
}