/**
 * Devices / compatibility — template-parts/devices.php, front-page.php
 * only, directly after How It Works.
 *
 * Reused as-is, nothing redefined: color/spacing/type/radius/shadow
 * tokens, .container, .section, .card, .device-chip/.device-chip__label
 * (main.css component 13 — used to be local here; promoted while
 * building templates/template-tutoriels.php, which needed it a second
 * time), .section-label, .link-arrow (main.css component 9), the Signal
 * Chevron, get_icon(). No new tokens.
 */

.devices__header {
	max-width: 60ch;
	margin-inline: auto;
	margin-bottom: var(--space-9);
	text-align: center;
}

.devices__subcopy {
	margin-top: var(--space-4);
	font-size: var(--fs-md);
	line-height: var(--lh-md);
}

/* =========================================================
   Two-column layout — chips first (the actually useful, scannable
   content that answers "is my device supported"), visual second, same
   content-before-decoration order the hero used for its own two-column
   mobile stack. Not omitted on the smallest breakpoint: it's pure CSS
   with zero image weight, so there's no real performance cost to justify
   removing it, just a size reduction (see below).
   ========================================================= */

.devices__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
}

@media (min-width: 1024px) {
	.devices__columns {
		grid-template-columns: 1.05fr 1fr;
		align-items: center;
		gap: var(--space-10);
	}
}

/* =========================================================
   Chip grid layout — .device-chip itself is main.css component 13.
   ========================================================= */

.devices__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
}

@media (min-width: 1024px) {
	.devices__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.devices__reassurance {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.devices__cta {
	margin-top: var(--space-2);
}

/* =========================================================
   Visual — abstract device cluster, NOT literal hardware: a TV-shaped
   panel, a tablet-shaped panel peeking behind it, and a phone-shaped
   panel in front, connected by an ANIMATED Signal Chevron standing in
   for "signal syncing to every screen" — its existing snap-flash (not a
   slow fade) IS the "quick snap-transition" this brief asks for, reused
   as-is rather than a new animation. Shapes use radius-xl, matching the
   hero section's photo rounding, so the device cluster reads as the same
   kind of image treatment as the hero graphics. Sizes/positions below
   are one-off layout literals (same precedent as header.css's toggle
   geometry), not reusable tokens.
   ========================================================= */

.devices__visual {
	position: relative;
	min-height: 22rem;
}

.devices__shape {
	position: absolute;
	overflow: hidden;
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border-strong);
	background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface));
}

.devices__shape img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.devices__shape--tv {
	top: 0;
	left: 0;
	width: 75%;
	aspect-ratio: 16 / 10;
	box-shadow: var(--shadow-md);
	z-index: 1;
}

/* Rectangular landscape frame (was a tall 3/4 portrait box that read as a
   plain square) — sized to actually hold a tablet product photo instead
   of just a decorative silhouette. */
.devices__shape--tablet {
	top: 8%;
	right: 0;
	width: 38%;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-sm);
	z-index: 0;
}

.devices__shape--phone {
	right: 8%;
	bottom: 0;
	width: 26%;
	aspect-ratio: 9 / 18;
	box-shadow: var(--shadow-lg);
	z-index: 2;
}

/* Scroll-in reveal — genuinely triggered by scroll position (this
   section sits well below the fold, unlike the hero's visual column, so
   a load-triggered animation would already be finished by the time
   anyone scrolls here). Uses the CSS animation-timeline: view()
   scroll-driven-animations feature instead of a JS IntersectionObserver,
   to keep this section's "zero JS" performance profile. Progressive
   enhancement: the safe default (outside @supports) is fully visible
   with no animation, so browsers without view-timeline support just see
   the static final state — never a stuck-invisible element. */
@supports (animation-timeline: view()) {
	.devices__visual {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
		animation: devices-visual-in var(--duration-slow) var(--ease-emphasized) both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
}

@keyframes devices-visual-in {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	@supports (animation-timeline: view()) {
		.devices__visual {
			opacity: 1;
			transform: none;
			animation: none;
		}
	}
}

@media (max-width: 1023px) {
	.devices__visual {
		min-height: 16rem;
		/* A definite width (not just max-width) is required here: this
		   grid item's only children are position:absolute (see
		   .devices__shape), so they contribute no intrinsic content size
		   — combined with margin-inline:auto, an auto width would make
		   the item shrink-to-fit that (empty) intrinsic size instead of
		   stretching, collapsing it to 0 rather than centering a 20rem
		   box. */
		width: 20rem;
		max-width: 100%;
		margin-inline: auto;
	}
}