/* ============================================================
   SICO Archive Hero — term name + auto-fading slideshow
   Mega-menu DNA (dark panel, white uppercase headings) but
   stretched into a hero composition.
   ============================================================ */

.sico-hero {
	background: #0a0a0a;
	color: #fff;
	overflow: hidden;
}
.sico-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 7fr 5fr;            /* text column wider than image */
	gap: 0;                                    /* gradient overlay handles the seam */
	align-items: stretch;
}
.sico-hero--no-media .sico-hero__inner {
	grid-template-columns: 1fr;
	padding: 24px;
	min-height: 160px;
}

/* ---------- Copy column ---------- */

.sico-hero__copy {
	min-width: 0;
	padding: 28px 32px 28px 0;
	position: relative;
	z-index: 2;                                /* sits over the gradient seam */
}
.sico-hero__eyebrow {
	display: block;
	font: 700 12px/1 "Open Sans", Roboto, Arial, sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #d20f26;
	margin-bottom: 18px;
}
.sico-hero__title,
.sico-hero h1.sico-hero__title {
	font: 700 48px/1.05 "Open Sans", Roboto, Arial, sans-serif !important;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none;                           /* let the column define the width */
}

/* ---------- Brochure CTA (rendered when per-term featured_brochure set) ---------- */

.sico-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 12px 22px;
	background: transparent;
	color: #fff !important;                    /* defeat Divi anchor-color rules */
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	font: 600 13px/1 "Open Sans", Roboto, Arial, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
	cursor: pointer;
}
.sico-hero__cta:hover,
.sico-hero__cta:focus {
	background: #fff;
	color: #1f1f1f !important;
	border-color: #fff;
	text-decoration: none !important;
}
.sico-hero__cta-arrow {
	font-size: 16px;
	line-height: 1;
	display: inline-block;
	transition: transform 200ms ease;
}
.sico-hero__cta:hover .sico-hero__cta-arrow {
	transform: translateX(4px);
}

/* `.btn-brochure.sico-btn` is the sico-product-pro plugin's button class
   — we add it to the hero CTA to inherit the plugin's JS modal handler
   (data-json → branded viewer). The plugin's CSS gives those classes a
   pill-shaped dark fill that doesn't suit our white-bordered ghost
   treatment on the dark hero, so we override the relevant properties.
   Specificity: `.sico-hero .sico-hero__cta` (3 classes) beats the
   plugin's `.btn-brochure.sico-btn` (2 classes). */
.sico-hero .sico-hero__cta.btn-brochure {
	background: transparent;
	border-radius: 4px;
	font-family: "Open Sans", Roboto, Arial, sans-serif;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
}
.sico-hero .sico-hero__cta.btn-brochure:hover {
	background: #fff;
}

.sico-hero__media {
	position: relative;
	aspect-ratio: 21 / 9;                      /* shorter cinematic — drives hero height */
	overflow: hidden;
	background: #1a1a1a;
}
.sico-hero__slides {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
}
.sico-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation-duration: var(--sico-hero-total, 12s);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	animation-delay: calc(var(--i, 0) * var(--sico-hero-step, 4s));
	animation-name: sico-hero-fade-3;             /* default; overridden below by data-count */
}
.sico-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Per-count keyframes — each slide holds visible from 0 to (1/N + small
   overlap) so the next slide has time to fade in BEFORE this one fades
   out. Eliminates the dark gap that happened when the keyframe was
   sized for 3 slides but only 2 were uploaded.
   Animation-fill-mode: both means slides stay opacity 0 during their
   pre-delay so they're not all stacked visible at t=0. */

.sico-hero[data-count="1"] .sico-hero__slide { animation-name: sico-hero-fade-1; }
.sico-hero[data-count="2"] .sico-hero__slide { animation-name: sico-hero-fade-2; }
.sico-hero[data-count="3"] .sico-hero__slide { animation-name: sico-hero-fade-3; }
.sico-hero[data-count="4"] .sico-hero__slide { animation-name: sico-hero-fade-4; }
.sico-hero[data-count="5"] .sico-hero__slide { animation-name: sico-hero-fade-5; }
.sico-hero[data-count="6"] .sico-hero__slide { animation-name: sico-hero-fade-6; }

/* Each slide's keyframe shape:
     0%        opacity 0   (pre-fade — also what fill-mode "both" shows
                            during the slide's pre-delay)
     3%        opacity 1   (fade-in done)
     (1/N)%    opacity 1   (held visible to the end of its slot)
     (1/N+3)%  opacity 0   (fade-out done, 3% overlap into next slot)
     100%      opacity 0
   The fade-in window of slide N+1 (0–3%) overlaps slide N's fade-out
   window (1/N – 1/N+3%) so they crossfade. At cycle wrap, the last
   slide's fade-out overlaps slide 0's fade-in for the same effect — no
   "fresh-slide-jumps-to-opaque" snap when the last slide ends. */

@keyframes sico-hero-fade-1 { 0%, 100% { opacity: 1; } }

@keyframes sico-hero-fade-2 {
	0%        { opacity: 0; }
	3%, 50%   { opacity: 1; }
	53%, 100% { opacity: 0; }
}
@keyframes sico-hero-fade-3 {
	0%             { opacity: 0; }
	3%, 33.33%     { opacity: 1; }
	36.33%, 100%   { opacity: 0; }
}
@keyframes sico-hero-fade-4 {
	0%        { opacity: 0; }
	3%, 25%   { opacity: 1; }
	28%, 100% { opacity: 0; }
}
@keyframes sico-hero-fade-5 {
	0%        { opacity: 0; }
	3%, 20%   { opacity: 1; }
	23%, 100% { opacity: 0; }
}
@keyframes sico-hero-fade-6 {
	0%             { opacity: 0; }
	3%, 16.67%     { opacity: 1; }
	19.67%, 100%   { opacity: 0; }
}

/* Two layered gradients on the image:
     1. Strong left-edge gradient that bleeds into the dark text column
        so the title sits on a continuous black field (no hard seam).
     2. Subtle right-edge gradient that softens the image's cropped right
        edge against the page background — important on wider viewports
        where the image extends to the page max-width. */
.sico-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			90deg,
			rgba(10, 10, 10, 1) 0%,
			rgba(10, 10, 10, 0.85) 18%,
			rgba(10, 10, 10, 0.5) 38%,
			rgba(10, 10, 10, 0) 60%
		),
		linear-gradient(
			270deg,
			rgb(10 10 10) 0%,
			rgba(10, 10, 10, 0.15) 12%,
			rgba(10, 10, 10, 0) 28%
		);
	pointer-events: none;
	z-index: 1;
}

/* ---------- Responsive ---------- */

@media (max-width: 992px) {
	.sico-hero__title,
	.sico-hero h1.sico-hero__title { font-size: 38px !important; }
}
@media (max-width: 768px) {
	.sico-hero__inner {
		grid-template-columns: 1fr;
		padding: 0 16px;
	}
	.sico-hero__copy { padding: 20px 0; }
	.sico-hero__title,
	.sico-hero h1.sico-hero__title { font-size: 30px !important; }
	.sico-hero__media { aspect-ratio: 16 / 9; }
}