/* ==========================================================================
   "Why ILL" feature deck — standalone component, used only by the Internet
   Leased Line page (templates/home/partials/why-ill.php).

   Base rules render a plain static vertical list — this is the true
   fallback for no-JS, narrow viewports and prefers-reduced-motion. JS only
   adds .is-deck (desktop, motion allowed) to switch to the absolute-position
   overlapping card deck; it never toggles display, only opacity/transform,
   so all six cards' text stays in the DOM and reachable at all times.

   Deck-mode sizing has two tiers, matching why-ill-carousel.js's own
   breakpoints: 852-1149px (mid) is the base within .is-deck, 1150px+
   (desktop) overrides on top of it. Card position itself (translateX) is
   JS-driven inline style; this file only sizes the box. (Nominal spec
   breakpoints are 768/1024; raised here because the mid/desktop pixel
   formulas don't fit the container until 852px/1150px.)
   ========================================================================== */

:root {
	--wi-bg: var(--tint);
	--wi-card-bg: var(--white);
	--wi-border: var(--gray-100);
	--wi-title: var(--charcoal);
	--wi-text: var(--gray-500);
	--wi-accent: var(--blue);
}

.why-ill { padding: 88px 0; background: var(--wi-bg); }
.why-ill__container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.why-ill h2 { max-width: 640px; margin: 0 0 48px; font-size: 34px; color: var(--wi-title); }

/* ==========================================================================
   Card — shared between list mode and deck mode
   ========================================================================== */

.why-ill__card {
	position: static;
	width: 100%;
	box-sizing: border-box;
	background: var(--wi-card-bg);
	border: 1px solid var(--wi-border);
	border-radius: 12px;
	padding: 20px 24px;
	overflow: hidden;
}

.why-ill__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wi-border);
}
.why-ill__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.why-ill__title {
	margin: 14px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wi-title);
}
.why-ill__desc {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wi-text);
}

/* List mode (default): plain static vertical stack, full width, all text visible */
.why-ill__stage {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.why-ill__controls { display: none; }

/* ==========================================================================
   Alignment — heading indent matches the deck group's OFF inset, so the
   left-aligned heading and the centred card group read as one block. Only
   applied while the deck is actually active (container.is-deck, toggled by
   the same JS state as the cards) — list mode never gets this indent.
   ========================================================================== */

.why-ill__container.is-deck .eyebrow {
	padding-left: 40px;
}
.why-ill__container.is-deck h2 {
	padding-left: 40px;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.25;
}

/* ==========================================================================
   Deck mode — added by why-ill-carousel.js only when the viewport is wide
   enough and prefers-reduced-motion is not set. Base sizing below is the
   852-1149px ("mid") tier; the 1150px+ block overrides up to desktop sizing.
   ========================================================================== */

.why-ill__deck.is-deck .why-ill__stage {
	position: relative;
	display: block;
	height: 310px;
	overflow: hidden;
}
.why-ill__deck.is-deck .why-ill__card {
	position: absolute;
	/* top:50% + JS's constant translateY(-50%) centres the card vertically
	   in the stage, so scale() grows it symmetrically and the stage's
	   overflow:hidden never clips the featured card's scaled-up edges. */
	top: 50%;
	left: 0;
	width: 260px;
	height: 290px;
	padding: 0;
	overflow: hidden;
	border-width: 0;
	border-radius: 16px;
	transform: translateX(0) scale(1);
	opacity: 0;
	transition: transform .6s cubic-bezier(.32, .72, .3, 1), opacity .5s ease, border-color .3s ease;
}

/* Stacked face (default): the image ("th") fills the whole card edge to
   edge, so a bare sliver reads as a photo, not a blank loading skeleton.
   Text ("bd") stays in the DOM but invisible — opacity only, never
   display/visibility — so it's still crawlable and reachable. */
.why-ill__deck.is-deck .why-ill__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	margin: 0;
	border-radius: 0;
}
.why-ill__deck.is-deck .why-ill__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
}
.why-ill__deck.is-deck .why-ill__desc {
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.55;
}
.why-ill__deck.is-deck .bd { opacity: 0; }

/* Featured face: image shrinks back to an inset thumbnail and the text
   block becomes a visible, absolutely-positioned overlay at the bottom. */
.why-ill__deck.is-deck .why-ill__card.is-featured {
	border-width: 2px;
	border-color: var(--wi-accent);
}
.why-ill__deck.is-deck .why-ill__card.is-featured .why-ill__media {
	inset: 19px 19px auto;
	height: 189px;
	border-radius: 10px;
}
.why-ill__deck.is-deck .why-ill__card.is-featured .bd {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 20px 20px;
	opacity: 1;
}
.why-ill__deck.is-deck .why-ill__card.is-featured .why-ill__title { margin-top: 10px; }

.why-ill__deck.is-deck .why-ill__controls {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}
.why-ill__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--wi-border);
	background: var(--wi-card-bg);
	color: var(--wi-title);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.why-ill__arrow svg { width: 20px; height: 20px; }
.why-ill__arrow:hover,
.why-ill__arrow:focus-visible {
	border-color: var(--wi-accent);
	color: var(--wi-accent);
}

/* Desktop tier (1150px+) — overrides the mid-tier sizing above */
@media (min-width: 1150px) {
	.why-ill__container.is-deck .eyebrow {
		padding-left: 170px;
		font-size: 15px;
		letter-spacing: .09em;
	}
	.why-ill__container.is-deck h2 {
		padding-left: 170px;
		font-size: 38px;
		max-width: 520px;
	}

	.why-ill__deck.is-deck .why-ill__stage { height: 380px; }
	.why-ill__deck.is-deck .why-ill__card { width: 340px; height: 360px; }
	.why-ill__deck.is-deck .why-ill__title { font-size: 18px; }
	.why-ill__deck.is-deck .why-ill__desc { font-size: 15px; }
}

/* ==========================================================================
   Desktop refinements (>=1024px only)
   The deck heading's 520px cap is border-box and sits on a 170px left pad, so
   its real text column was ~350px and the line wrapped four times. Dropping
   the cap lets it use the container. The >=1150px deck sizes are re-stated so
   this block does not flatten that tier.
   ========================================================================== */
@media (min-width: 1024px) {
	.why-ill h2 { font-size: 36px; }
	.why-ill__title { font-size: 19px; }
	.why-ill__container.is-deck h2 { font-size: 32px; }
	.why-ill__deck.is-deck .why-ill__title { font-size: 18px; }
}
@media (min-width: 1150px) {
	.why-ill__container.is-deck h2 { font-size: 42px; max-width: none; }
	.why-ill__deck.is-deck .why-ill__title { font-size: 20px; }
}