/* cms-tutorial-step v1.1.3 | 2026-10-28
   Tokens: corsetmaking.css :root (2026-10-28, Design Tokens Pass 2 / Typography Pass 2). No hex, font stacks, px font sizes or var() fallbacks.
   Spacing / photo-size px values are allowed (no spacing token scale yet).
   1.1.2: --ts-gap (step spacing) is an internal variable like --ts-photo-h.
   Structure: .cms-tutorial-step (whole tutorial) > .cms-tutorial-step__step (one per list item).
   Breakpoints: 479 / 767 / 979 / 1199 */

/* ==========================================================================
   Tutorial wrapper
   ========================================================================== */
.cms-tutorial-step {
	margin: 0 0 30px 0;
	color: var(--text-body);
}

.cms-tutorial-step--width-medium {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Left edge lines up with the page H1 */
.cms-tutorial-step--width-medium-left {
	max-width: 800px;
	margin-left: 0;
	margin-right: auto;
}

/* Step spacing (1.1.2). Auto is resolved in the template:
   standard with dividers, roomy without. */
.cms-tutorial-step--spacing-compact {
	--ts-gap: 20px;
}

.cms-tutorial-step--spacing-standard {
	--ts-gap: 30px;
}

.cms-tutorial-step--spacing-roomy {
	--ts-gap: 50px;
}

/* ==========================================================================
   Step
   ========================================================================== */
.cms-tutorial-step__step + .cms-tutorial-step__step {
	margin-top: var(--ts-gap);
}

/* Automatic photo-to-photo space (1.1.3, tablet and up).
   When the previous step's photos end at its bottom edge and this step's photo
   starts at its top edge on the same side, add 30px so the photos don't read as one
   group. Mobile always shows text first, so it doesn't need this. */
@media (min-width: 768px) {
	.cms-tutorial-step__step--pos-below:not(.cms-tutorial-step__step--count-0) + .cms-tutorial-step__step:is(.cms-tutorial-step__step--pos-left, .cms-tutorial-step__step--pos-right, .cms-tutorial-step__step--pos-above),
	.cms-tutorial-step__step--pos-right + .cms-tutorial-step__step:is(.cms-tutorial-step__step--pos-right, .cms-tutorial-step__step--pos-above),
	.cms-tutorial-step__step--pos-left + .cms-tutorial-step__step:is(.cms-tutorial-step__step--pos-left, .cms-tutorial-step__step--pos-above) {
		margin-top: calc(var(--ts-gap) + 30px);
	}
}

/* Per-step Space Above override (1.1.3) - wins over the tutorial spacing and the automatic space */
.cms-tutorial-step .cms-tutorial-step__step + .cms-tutorial-step__step.cms-tutorial-step__step--space-none {
	margin-top: 0;
}

.cms-tutorial-step .cms-tutorial-step__step + .cms-tutorial-step__step.cms-tutorial-step__step--space-compact {
	margin-top: 20px;
}

.cms-tutorial-step .cms-tutorial-step__step + .cms-tutorial-step__step.cms-tutorial-step__step--space-roomy {
	margin-top: 50px;
}

.cms-tutorial-step .cms-tutorial-step__step + .cms-tutorial-step__step.cms-tutorial-step__step--space-extra {
	margin-top: 80px;
}

/* Divider between steps (not after the last one). Drawn as a pseudo-element
   so its width can be set; left-aligned with the text. */
.cms-tutorial-step--divider .cms-tutorial-step__step:not(:last-child) {
	position: relative;
	padding-bottom: var(--ts-gap);
}

.cms-tutorial-step--divider .cms-tutorial-step__step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--border-light);
}

.cms-tutorial-step--divider-half .cms-tutorial-step__step:not(:last-child)::after {
	width: 50%;
}

.cms-tutorial-step--divider-short .cms-tutorial-step__step:not(:last-child)::after {
	width: 80px;
}

/* Photo size caps (Large = 1.0.0 behavior) */
.cms-tutorial-step__step--size-large {
	--ts-photo-h: 560px;
	--ts-crop-sq: none;
	--ts-crop-pt: none;
}

.cms-tutorial-step__step--size-medium {
	--ts-photo-h: 400px;
	--ts-crop-sq: 400px;
	--ts-crop-pt: 300px;
}

.cms-tutorial-step__step--size-small {
	--ts-photo-h: 280px;
	--ts-crop-sq: 280px;
	--ts-crop-pt: 210px;
}

.cms-tutorial-step__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cms-tutorial-step__text {
	min-width: 0;
}

/* ==========================================================================
   Heading + step label
   ========================================================================== */
.cms-tutorial-step__heading {
	margin: 0 0 12px 0;
	line-height: 1.3;
	font-weight: 600;
	color: var(--text-body);
}

/* Content Header - 20 (18 mobile), matches h2.content-page-header */
.cms-tutorial-step--heading-content-header .cms-tutorial-step__heading {
	font-family: var(--font-heading-family);
	font-size: var(--font-heading-size-md);
}

/* Section Title - Crimson Text 25 (20 mobile) */
.cms-tutorial-step--heading-section-title .cms-tutorial-step__heading {
	font-family: var(--font-accent-family);
	font-size: var(--font-accent-size-md);
}

/* Label stays inside the heading for the outline, but sits on its own line (eyebrow role, 12 allowed for labels) */
.cms-tutorial-step__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-ui-family);
	font-size: var(--font-ui-size-sm);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.cms-tutorial-step__title {
	display: block;
}

/* Screen-reader-only separator between label and title */
.cms-tutorial-step__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Body (markdown rendered by cms-tutorial-step.js) - body copy 16
   ========================================================================== */
.cms-tutorial-step__body {
	font-family: var(--font-primary);
	font-size: var(--font-size-16);
	line-height: 1.7;
	color: var(--text-body);
}

/* No-JS fallback keeps line breaks readable */
.cms-tutorial-step__body[data-markdown]:not([data-rendered]) {
	white-space: pre-line;
}

.cms-tutorial-step__body p {
	margin: 0 0 12px 0;
}

.cms-tutorial-step__body ul,
.cms-tutorial-step__body ol {
	margin: 0 0 12px 0;
	padding-left: 20px;
}

.cms-tutorial-step__body li {
	margin-bottom: 4px;
}

.cms-tutorial-step__body > :last-child {
	margin-bottom: 0;
}

.cms-tutorial-step__body strong {
	font-weight: 600;
}

/* Links in body text: site link tokens, underlined (WCAG 1.4.1) */
.cms-tutorial-step__body a {
	color: var(--link-color);
	text-decoration: underline;
}

.cms-tutorial-step__body a:hover,
.cms-tutorial-step__body a:focus {
	color: var(--link-hover);
	text-decoration: underline;
}

/* ==========================================================================
   Photos
   ========================================================================== */
.cms-tutorial-step__media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
	min-width: 0;
}

.cms-tutorial-step__step--count-2 .cms-tutorial-step__media {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cms-tutorial-step__step--count-3 .cms-tutorial-step__media {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 4 or more photos: 4 across, extra photos wrap to new rows */
.cms-tutorial-step__step--count-4 .cms-tutorial-step__media {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Medium widths: 4-across goes 2 x 2 */
.cms-tutorial-step--width-medium .cms-tutorial-step__step--count-4 .cms-tutorial-step__media,
.cms-tutorial-step--width-medium-left .cms-tutorial-step__step--count-4 .cms-tutorial-step__media {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cms-tutorial-step__figure {
	margin: 0;
	text-align: center;
	min-width: 0;
}

.cms-tutorial-step__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Natural fit: never crop - cap the height by Photo Size */
.cms-tutorial-step__step--fit-natural .cms-tutorial-step__img {
	width: auto;
	max-height: var(--ts-photo-h);
}

/* Uniform crops - Large fills the column, Medium / Small cap the width */
.cms-tutorial-step__step--fit-square .cms-tutorial-step__img,
.cms-tutorial-step__step--fit-portrait .cms-tutorial-step__img {
	width: 100%;
	object-fit: cover;
}

.cms-tutorial-step__step--fit-square .cms-tutorial-step__img {
	aspect-ratio: 1 / 1;
	max-width: var(--ts-crop-sq);
}

.cms-tutorial-step__step--fit-portrait .cms-tutorial-step__img {
	aspect-ratio: 3 / 4;
	max-width: var(--ts-crop-pt);
}

.cms-tutorial-step__caption {
	margin-top: 8px;
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	line-height: 1.5;
	color: var(--text-muted);
}

/* Enlarge trigger + linked image wrappers shrink-wrap the photo */
.cms-tutorial-step__zoom,
.cms-tutorial-step__img-link {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.cms-tutorial-step__zoom {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

/* Crops: wrapper matches the (possibly capped) image width so the zoom icon sits on the photo */
.cms-tutorial-step__step--fit-square .cms-tutorial-step__zoom,
.cms-tutorial-step__step--fit-square .cms-tutorial-step__img-link {
	display: block;
	width: 100%;
	max-width: var(--ts-crop-sq);
	margin: 0 auto;
}

.cms-tutorial-step__step--fit-portrait .cms-tutorial-step__zoom,
.cms-tutorial-step__step--fit-portrait .cms-tutorial-step__img-link {
	display: block;
	width: 100%;
	max-width: var(--ts-crop-pt);
	margin: 0 auto;
}

.cms-tutorial-step__zoom-icon {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--border-light);
	background-color: var(--color-white);
	color: var(--text-body);
	pointer-events: none;
}

.cms-tutorial-step__zoom:hover .cms-tutorial-step__img {
	opacity: 0.9;
}

/* Standard site focus style */
.cms-tutorial-step__zoom:focus-visible,
.cms-tutorial-step__img-link:focus-visible,
.cms-tutorial-step__body a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Image position (tablet and up)
   DOM order is always text first - matches mobile and reading order
   ========================================================================== */
@media (min-width: 768px) {
	.cms-tutorial-step__step--pos-above .cms-tutorial-step__media {
		order: -1;
	}

	/* 1.1.1: the photo column shrinks to fit the photo (max half the width), fixed 30px gap, text takes the rest */
	.cms-tutorial-step__step--pos-left .cms-tutorial-step__inner,
	.cms-tutorial-step__step--pos-right .cms-tutorial-step__inner {
		display: grid;
		gap: 30px;
		align-items: start;
	}

	.cms-tutorial-step__step--pos-left .cms-tutorial-step__inner {
		grid-template-columns: fit-content(50%) minmax(0, 1fr);
	}

	.cms-tutorial-step__step--pos-left .cms-tutorial-step__media {
		order: -1;
	}

	.cms-tutorial-step__step--pos-right .cms-tutorial-step__inner {
		grid-template-columns: minmax(0, 1fr) fit-content(50%);
	}

	/* A long caption should wrap under the photo, not widen the photo column */
	.cms-tutorial-step__step--pos-left .cms-tutorial-step__caption,
	.cms-tutorial-step__step--pos-right .cms-tutorial-step__caption {
		contain: inline-size;
	}

	/* 1.1.1: Text Alignment - Center (default Top) */
	.cms-tutorial-step__step--pos-left.cms-tutorial-step__step--valign-center .cms-tutorial-step__inner,
	.cms-tutorial-step__step--pos-right.cms-tutorial-step__step--valign-center .cms-tutorial-step__inner {
		align-items: center;
	}
}

/* ==========================================================================
   Tablet (768-979): 3-4 photos drop to 2 columns
   ========================================================================== */
@media (min-width: 768px) and (max-width: 979px) {
	.cms-tutorial-step__step--count-3 .cms-tutorial-step__media,
	.cms-tutorial-step__step--count-4 .cms-tutorial-step__media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Mobile (767 and below): text first, photos 1 per row
   ========================================================================== */
@media (max-width: 767px) {
	.cms-tutorial-step--heading-content-header .cms-tutorial-step__heading {
		font-size: var(--font-heading-size-sm);
	}

	.cms-tutorial-step--heading-section-title .cms-tutorial-step__heading {
		font-size: var(--font-size-20);
	}

	.cms-tutorial-step__step--count-2 .cms-tutorial-step__media,
	.cms-tutorial-step__step--count-3 .cms-tutorial-step__media,
	.cms-tutorial-step__step--count-4 .cms-tutorial-step__media,
	.cms-tutorial-step--width-medium .cms-tutorial-step__step--count-4 .cms-tutorial-step__media,
	.cms-tutorial-step--width-medium-left .cms-tutorial-step__step--count-4 .cms-tutorial-step__media {
		grid-template-columns: 1fr;
	}

	/* Small square crops: 2 per row */
	.cms-tutorial-step__step--fit-square.cms-tutorial-step__step--count-2 .cms-tutorial-step__media,
	.cms-tutorial-step__step--fit-square.cms-tutorial-step__step--count-3 .cms-tutorial-step__media,
	.cms-tutorial-step__step--fit-square.cms-tutorial-step__step--count-4 .cms-tutorial-step__media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.cms-tutorial-step__step--size-large {
		--ts-photo-h: 480px;
	}

	.cms-tutorial-step__step--size-medium {
		--ts-photo-h: 360px;
	}

	.cms-tutorial-step__step--size-small {
		--ts-photo-h: 240px;
	}

	/* 44px tap target */
	.cms-tutorial-step__zoom-icon {
		width: 44px;
		height: 44px;
		right: 6px;
		bottom: 6px;
	}
}

/* ==========================================================================
   Lightbox (one shared <dialog> per page, created by JS)
   ========================================================================== */
html.cms-tutorial-step-lightbox-open {
	overflow: hidden;
}

.cms-tutorial-step-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.cms-tutorial-step-lightbox::backdrop {
	background-color: var(--overlay-scrim);
}

.cms-tutorial-step-lightbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 60px 80px;
	box-sizing: border-box;
}

.cms-tutorial-step-lightbox__figure {
	margin: 0;
	text-align: center;
	max-width: 100%;
}

.cms-tutorial-step-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 180px);
	width: auto;
	height: auto;
	margin: 0 auto;
}

.cms-tutorial-step-lightbox__caption {
	max-width: 700px;
	margin: 12px auto 0 auto;
	font-family: var(--font-primary);
	font-size: var(--font-size-14);
	line-height: 1.5;
	color: var(--color-white);
}

.cms-tutorial-step-lightbox__count {
	margin: 8px 0 0 0;
	font-family: var(--font-ui-family);
	font-size: var(--font-ui-size-sm);
	letter-spacing: 0.05em;
	color: var(--color-white);
}

.cms-tutorial-step-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--text-body);
	cursor: pointer;
}

.cms-tutorial-step-lightbox__btn:hover {
	background-color: var(--btn-gold-hover-bg);
	color: var(--btn-gold-hover-text);
}

/* Standard focus ring, with a white halo so it reads on the dark scrim */
.cms-tutorial-step-lightbox__btn:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--color-white);
}

.cms-tutorial-step-lightbox__btn[hidden] {
	display: none;
}

.cms-tutorial-step-lightbox__close {
	top: 16px;
	right: 16px;
}

.cms-tutorial-step-lightbox__prev {
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
}

.cms-tutorial-step-lightbox__next {
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}

@media (max-width: 767px) {
	.cms-tutorial-step-lightbox__stage {
		padding: 70px 12px 80px 12px;
	}

	.cms-tutorial-step-lightbox__img {
		max-height: calc(100vh - 200px);
	}

	.cms-tutorial-step-lightbox__prev,
	.cms-tutorial-step-lightbox__next {
		top: auto;
		bottom: 16px;
		transform: none;
	}

	.cms-tutorial-step-lightbox__prev {
		left: calc(50% - 56px);
	}

	.cms-tutorial-step-lightbox__next {
		right: calc(50% - 56px);
	}
}

/* ==========================================================================
   Motion - only for users who have not asked to reduce it
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.cms-tutorial-step__img {
		transition: opacity 0.15s ease;
	}

	.cms-tutorial-step-lightbox[open],
	.cms-tutorial-step-lightbox[open]::backdrop {
		animation: cms-tutorial-step-fade 0.2s ease-out;
	}

	.cms-tutorial-step-lightbox__btn {
		transition: background-color 0.15s ease;
	}
}

@keyframes cms-tutorial-step-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}