/**
 * Page Tutoriels — templates/template-tutoriels.php only.
 *
 * Reused as-is, nothing redefined: color/spacing/type/radius tokens,
 * .container, .section, .breadcrumb / .page-header* (main.css component
 * 12), .card + .device-chip/.device-chip__label (main.css component 13),
 * .accordion (main.css component 10), .link-arrow. Only this page's own
 * new pieces live here: the device-selector grid, the step list +
 * screenshot placeholder box, and troubleshooting section spacing. No
 * new tokens.
 */

/* =========================================================
   Device selector — .device-chip reused as a real <a> this time (see
   the template's docblock for why real anchor links, not ARIA tabs).
   text-decoration:none here only: main.css's shared .device-chip has no
   opinion on link underlines since it's also used as a non-link <li> on
   the homepage.
   ========================================================= */

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

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

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

.tutoriels-selector__grid .device-chip {
	text-decoration: none;
}

/* =========================================================
   Device guides — one <section> per device, separated by a hairline
   rather than full section gaps (they're one continuous "pick a device,
   read its guide" flow, not separately-topiced page sections).
   scroll-margin-top keeps a jumped-to (or smooth-scrolled-to, via
   main.css's global `scroll-behavior: smooth`) H2 from landing behind
   the fixed site header.
   ========================================================= */

.tutoriels-guides {
	padding-block-end: var(--space-section-y);
}

.tutorial-device {
	scroll-margin-top: calc(var(--header-height) + var(--space-6));
	padding-block: var(--space-10);
}

.tutorial-device + .tutorial-device {
	border-top: 1px solid var(--color-border);
}

.tutorial-device__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.tutorial-device__icon {
	flex-shrink: 0;
	color: var(--color-accent);
}

/* =========================================================
   Step list — a real <ol> (see the template's docblock for why steps
   are list items, not headings), native ::marker styled instead of a
   custom numeral element, so the visible number and the one assistive
   tech announces ("N of 5") can never drift apart.
   ========================================================= */

.tutorial-steps {
	max-width: var(--container-reading);
	margin: 0 0 var(--space-8);
	padding-left: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.tutorial-step::marker {
	color: var(--color-accent);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
}

.tutorial-step__text {
	color: var(--color-text-muted);
}

.tutorial-step__text strong {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
}

/* Placeholder only — see the template's per-step PHP comment for the
   real <img> this becomes, with required alt text. Small and
   unobtrusive on purpose: an empty-state box, not a broken image. Sharp
   corners (--radius-md), not this brand's --radius-full — this box isn't
   a status pill, and every other rectangular container on this site
   (cards, inputs) already uses the sharp-corners scale. */
.tutorial-step__screenshot {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	color: var(--color-text-faint);
	font-size: var(--fs-xs);
}

.tutorial-step__screenshot .icon {
	flex-shrink: 0;
}

/* =========================================================
   Troubleshooting — reading-width accordion, same pattern as
   template-parts/faq.php / templates/template-faq.php.
   ========================================================= */

.tutorial-device__troubleshooting {
	max-width: var(--container-reading);
}

.tutorial-device__troubleshooting-title {
	margin-bottom: var(--space-4);
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}

.tutorial-device__accordion .accordion__question {
	font-size: var(--fs-sm);
}

.tutorial-device__help-link {
	margin-top: var(--space-6);
}