/* ============================================================
   DLC Department Hero Slider - v1.6.3 | 2026-10-29
   Desktop: fixed height track, image fills slide, text panel overlaid at bottom, accent strip below
   Mobile (767px and below): image, then text panel, then accent strip, stacked
   Tokens: corsetmaking.css :root. Requires (2026-10-29 handoff to CMS Site Projects):
     --brand-gold-on-dark, --text-halo-dark
   Department panel / accent colors are the documented department-color exception (hardcoded).
   Contrast: every Text Style combination passes WCAG AA - see "Text Style" below.
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.dlc-dept-hero-slider {
	position: relative;
	width: 100%;
	max-width: 1062px;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--font-primary);
}

.dlc-dept-hero-slider:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* ── Track - desktop fixed height ────────────────────────── */
.dlc-dept-hero-slider__track {
	position: relative;
	width: 100%;
	height: var(--slide-height, 475px);
	overflow: visible;
}

/* ── Slides - desktop: absolute stacked, fade in/out ─────── */
.dlc-dept-hero-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: visible;
}

.dlc-dept-hero-slider__slide--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.dlc-dept-hero-slider__slide--hidden {
	display: none !important;
}

/* ── Image link wrapper (below the text panel) ────────────── */
.dlc-dept-hero-slider__image-link {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dlc-dept-hero-slider__image-link:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: -4px;
}

/* ── Image - desktop: fills entire slide ─────────────────── */
.dlc-dept-hero-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ── Text Panel - overlaid at bottom of image on desktop ─── */
.dlc-dept-hero-slider__panel {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	padding: 0.3em 0;
	z-index: 2;

	/* Text colors - Auto (light text, dark halo). Costume / Hat switch to dark text below. */
	--hs-eyebrow: var(--brand-gold-on-dark);
	--hs-heading: var(--color-white);
	--hs-halo-color: var(--text-halo-dark);
	--hs-halo: 0 0 1px var(--hs-halo-color), 0 0 2px var(--hs-halo-color), 0 0 4px var(--hs-halo-color);
}

.dlc-dept-hero-slider__panel-inner {
	width: 100%;
	max-width: 1062px;
	margin: 0 auto;
	padding: 0 1em;
	box-sizing: border-box;
	text-align: left;
}

/* Department panel colors - 90% default (department-color exception) */
.dlc-dept-hero-slider__panel--corset    { background: rgba(133, 82, 125, 0.9); --hs-band: rgb(133, 82, 125); }
.dlc-dept-hero-slider__panel--steampunk { background: rgba(119, 16, 0, 0.9);   --hs-band: rgb(119, 16, 0); }
.dlc-dept-hero-slider__panel--bra       { background: rgba(197, 77, 112, 0.9); --hs-band: rgb(191, 75, 109); } /* band 3% darker: white 4.73 (4.497 on the panel color) */
.dlc-dept-hero-slider__panel--leather   { background: rgba(35, 31, 32, 0.9);   --hs-band: rgb(35, 31, 32); }
.dlc-dept-hero-slider__panel--costume   { background: rgba(223, 127, 32, 0.9); --hs-band: rgb(223, 127, 32); }
.dlc-dept-hero-slider__panel--hat       { background: rgba(0, 154, 190, 0.9);  --hs-band: rgb(0, 154, 190); }
.dlc-dept-hero-slider__panel--all       { background: rgba(60, 60, 60, 0.9);   --hs-band: rgb(60, 60, 60); }

/* Panel Opacity: 80% (the 1.4.2 look) */
.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--corset    { background: rgba(133, 82, 125, 0.8); }
.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--steampunk { background: rgba(119, 16, 0, 0.8); }
.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--bra       { background: rgba(197, 77, 112, 0.8); }
.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--leather   { background: rgba(35, 31, 32, 0.8); }
.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--costume   { background: rgba(223, 127, 32, 0.8); }
.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--hat       { background: rgba(0, 154, 190, 0.8); }
.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--all       { background: rgba(60, 60, 60, 0.8); }

/* Costume and Hat (1.6.1): white text with the dark halo, like the other panels - closest to the
   original look. White eyebrow / link instead of pale gold (gold on orange / blue reads muddy).
   With the halo off they switch to black text (see Text Style below). */
.dlc-dept-hero-slider__panel--costume,
.dlc-dept-hero-slider__panel--hat {
	--hs-eyebrow: var(--color-white);
}

/* ── Text Style - every combination passes AA ───────────────
   Worst case measured = light photo behind the panel (Corset slides are product shots on white).
   Halo Auto: text measured against the halo, about 16:1 on every panel.
   Halo Off - panels that would fail get a fix automatically:
     Corset: white eyebrow / link (90%: 4.8). At 80% also the solid band (white 6.0).
     Bra:    always the solid band, all text white (4.5).
     Costume / Hat: all text black, no halo (90%: 5.9 / 5.3; 80%: Costume 4.8, Hat gets the solid band, black 6.4).
     Others pass as is (Steampunk 7.0+, Leather 9.3+, All 4.7+).
   Solid band: Bra eyebrow / link turn white (gold on solid Bra is only 3.5). */
.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel { --hs-halo: none; }

.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--costume,
.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--hat {
	--hs-eyebrow: var(--color-black);
	--hs-heading: var(--color-black);
}

.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--corset,
.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--bra,
.dlc-dept-hero-slider--textbg-band .dlc-dept-hero-slider__panel--bra {
	--hs-eyebrow: var(--color-white);
}

/* ── Accent Strip - full viewport width ───────────────────── */
.dlc-dept-hero-slider__accent {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 32px;
	z-index: 2;
}

.dlc-dept-hero-slider__accent--corset    { background: rgba(157, 99, 153, 0.8); }
.dlc-dept-hero-slider__accent--steampunk { background: rgba(133, 30, 0, 0.8); }
.dlc-dept-hero-slider__accent--bra       { background: rgba(230, 65, 116, 0.8); }
.dlc-dept-hero-slider__accent--leather   { background: rgba(14, 14, 14, 0.8); }
.dlc-dept-hero-slider__accent--costume   { background: rgba(255, 135, 0, 0.8); }
.dlc-dept-hero-slider__accent--hat       { background: rgba(0, 190, 233, 0.8); }
.dlc-dept-hero-slider__accent--all       { background: rgba(80, 80, 80, 0.8); }

/* ── Text Lines ───────────────────────────────────────────── */
.dlc-dept-hero-slider__line1,
.dlc-dept-hero-slider__line2,
.dlc-dept-hero-slider__line3,
.dlc-dept-hero-slider__line4 {
	margin: 0;
	text-shadow: var(--hs-halo);
}

.dlc-dept-hero-slider__line1 {
	color: var(--hs-eyebrow);
	font-size: var(--font-size-16);
	line-height: 1.42857;
	font-weight: 500;
}

.dlc-dept-hero-slider__line2 {
	color: var(--hs-heading);
	font-family: inherit;
	font-size: var(--font-size-25);
	line-height: 1.4;
	font-weight: 600;
}

.dlc-dept-hero-slider__line3 {
	color: var(--hs-heading);
	font-size: var(--font-size-16);
	line-height: 1.42857;
	font-weight: 500;
}

.dlc-dept-hero-slider__line3 em {
	font-style: italic;
	color: inherit;
}

.dlc-dept-hero-slider__line4 {
	font-size: var(--font-size-16);
	line-height: 1.42857;
	font-weight: 500;
}

.dlc-dept-hero-slider__line4 a {
	color: var(--hs-eyebrow);
	text-decoration: none;
}

.dlc-dept-hero-slider__line4 a:hover {
	text-decoration: underline;
}

.dlc-dept-hero-slider__line4 a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Solid band behind each line (panel stays see-through around it): the Text Background setting,
   plus the automatic halo-off fixes for Bra (always) and Corset / Hat (at 80%) */
.dlc-dept-hero-slider--textbg-band .dlc-dept-hero-slider__line1,
.dlc-dept-hero-slider--textbg-band .dlc-dept-hero-slider__line2,
.dlc-dept-hero-slider--textbg-band .dlc-dept-hero-slider__line3,
.dlc-dept-hero-slider--textbg-band .dlc-dept-hero-slider__line4,
.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--bra .dlc-dept-hero-slider__line1,
.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--bra .dlc-dept-hero-slider__line2,
.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--bra .dlc-dept-hero-slider__line3,
.dlc-dept-hero-slider--halo-off .dlc-dept-hero-slider__panel--bra .dlc-dept-hero-slider__line4,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--corset .dlc-dept-hero-slider__line1,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--corset .dlc-dept-hero-slider__line2,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--corset .dlc-dept-hero-slider__line3,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--corset .dlc-dept-hero-slider__line4,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--hat .dlc-dept-hero-slider__line1,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--hat .dlc-dept-hero-slider__line2,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--hat .dlc-dept-hero-slider__line3,
.dlc-dept-hero-slider--halo-off.dlc-dept-hero-slider--opacity-80 .dlc-dept-hero-slider__panel--hat .dlc-dept-hero-slider__line4 {
	display: table;
	margin: 2px 0;
	padding: 1px 8px;
	background: var(--hs-band);
}

/* ── Controls - in the accent strip ───────────────────────── */
.dlc-dept-hero-slider__controls {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 32px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.dlc-dept-hero-slider__arrow,
.dlc-dept-hero-slider__pause {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	color: var(--color-white);
	cursor: pointer;
	font-size: var(--font-size-18);
	font-weight: 700;
	line-height: 1;
	user-select: none;
	text-shadow: 0 0 2px var(--text-halo-dark);
}

.dlc-dept-hero-slider__pause[hidden] {
	display: none;
}

.dlc-dept-hero-slider__pause svg {
	filter: drop-shadow(0 0 1px var(--text-halo-dark));
}

.dlc-dept-hero-slider__pause .dlc-dept-hero-slider__icon-play,
.dlc-dept-hero-slider__pause.is-paused .dlc-dept-hero-slider__icon-pause {
	display: none;
}

.dlc-dept-hero-slider__pause.is-paused .dlc-dept-hero-slider__icon-play {
	display: block;
}

.dlc-dept-hero-slider__arrow:hover,
.dlc-dept-hero-slider__pause:hover {
	color: var(--brand-gold-on-dark);
}

.dlc-dept-hero-slider__arrow:focus-visible,
.dlc-dept-hero-slider__pause:focus-visible,
.dlc-dept-hero-slider__dot:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 0;
	border-radius: 3px;
}

.dlc-dept-hero-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

/* Dot buttons: 24px tap area, small visible dot drawn inside */
.dlc-dept-hero-slider__dot {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.dlc-dept-hero-slider__dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-white);
	opacity: 0.6;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 2px var(--text-halo-dark);
}

.dlc-dept-hero-slider__dot--active::before {
	width: 11px;
	height: 11px;
	opacity: 1;
}

.dlc-dept-hero-slider__dot:hover::before {
	opacity: 1;
}

/* ── Motion - only when the visitor hasn't asked for reduced motion ── */
@media (prefers-reduced-motion: no-preference) {
	.dlc-dept-hero-slider__slide {
		transition: opacity 0.5s ease, visibility 0.5s ease;
	}

	.dlc-dept-hero-slider__arrow,
	.dlc-dept-hero-slider__pause {
		transition: color 0.2s ease;
	}
}

/* ── Tablet (768-979px): desktop layout, smaller heading ──── */
@media (min-width: 768px) and (max-width: 979px) {
	.dlc-dept-hero-slider__line2 {
		font-size: var(--font-size-20);
	}
}

/* -- 768-1199px (1.6.2): scale the slide with the window instead of cropping.
      The track keeps the photo's shape (1062 x 475) and never grows past the
      Slide Height setting, so the whole photo shows as the window narrows. -- */
@media (min-width: 768px) and (max-width: 1199px) {
	.dlc-dept-hero-slider__track {
		height: auto;
		aspect-ratio: 1062 / 475;
		max-height: var(--slide-height, 475px);
	}
}

/* ── Mobile Layout (767px and below) ──────────────────────── */
@media (max-width: 767px) {

	.dlc-dept-hero-slider__track {
		height: auto !important;
		overflow: visible;
	}

	.dlc-dept-hero-slider__slide {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		opacity: 0;
		visibility: hidden;
		display: none;
	}

	.dlc-dept-hero-slider__slide--active {
		opacity: 1;
		visibility: visible;
		display: block;
	}

	.dlc-dept-hero-slider__image-link {
		position: static;
		display: block;
	}

	.dlc-dept-hero-slider__image {
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}

	.dlc-dept-hero-slider__panel {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		transform: none;
		padding: 0.6em 0;
	}

	.dlc-dept-hero-slider__panel-inner {
		max-width: 100%;
		padding: 0 1em;
		text-align: left;
	}

	.dlc-dept-hero-slider__line2 { font-size: var(--font-size-18); }
	.dlc-dept-hero-slider__line1,
	.dlc-dept-hero-slider__line3,
	.dlc-dept-hero-slider__line4 { font-size: var(--font-size-14); }

	.dlc-dept-hero-slider__accent {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		transform: none;
		height: 32px;
		display: block;
	}

	.dlc-dept-hero-slider__controls {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
		height: 32px;
		background: none;
	}

	.dlc-dept-hero-slider {
		position: relative;
	}
}