/*
 * Media & checklist block — frontend + editor styles.
 * Every selector is scoped to the root class .wsc-media-checklist (three-way sync rule).
 * Tokens only: theme.json presets (--wp--preset--*) plus theme customs. No !important.
 *
 * It applies .wsc-section and .wsc-container in render.php, so no padding or
 * container-width rule belongs here.
 *
 * NOTE: the surface, grid and image rules below are deliberately kept
 * structurally identical to blocks/media-text/style.css. The two blocks draw the
 * same component with different right-hand content, and were built separately by
 * decision rather than necessity — keeping the rules aligned makes a future
 * merge mechanical instead of archaeological. Only the content column and the
 * notice panel are genuinely this block's own.
 */

.wsc-media-checklist {
	background-color: var(--wp--preset--color--surface);
}

.wsc-media-checklist__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60); /* 40px between the columns and the notice */
}

/* Columns ------------------------------------------------------------- */

.wsc-media-checklist__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--60); /* 40px stacked */
}

@media (min-width: 1024px) {
	.wsc-media-checklist__grid {
		grid-template-columns: 1fr 1fr;
		gap: 5rem; /* 80px */
		align-items: center;
	}

	.wsc-media-checklist__grid--single {
		grid-template-columns: 1fr;
	}

	/*
	 * Image right. The DOM stays image-first, so the mobile stack and the --single
	 * collapse are both untouched; only the desktop track assignment flips. Scoped
	 * inside this query because below it there is a single track, where order is
	 * inert.
	 *
	 * RTL — measured, accepted, do not "fix" silently. Grid tracks already flip
	 * under direction: rtl, so an instance set to Right paints on the left in an
	 * RTL market. That is logical-layout behaviour and every other rule in this
	 * file behaves the same way; no market on the network is RTL today.
	 *
	 * Visual order ≠ DOM order here, so a screen reader reaches the image before
	 * the copy. Accepted for a decorative image beside its own copy — the same
	 * trade-off plan-highlights already ships (style.css:178).
	 */
	.wsc-media-checklist__grid--media-right .wsc-media-checklist__media {
		order: 2;
	}
}

.wsc-media-checklist__media {
	margin: 0;
}

/*
 * Only what both image styles share. The crop lives on --photo below rather than
 * here, because a product shot is not a crop that needs undoing — no ratio may
 * reach that element in the first place.
 */
.wsc-media-checklist__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--sm); /* 16px */
}

/* 4:3 from the frame's 560x420. */
.wsc-media-checklist__image--photo {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Product-shot treatment — an app mockup rather than a photograph. Measured from
 * node 16424:8323, the mock itself, NOT from the 16424:8322 column around it:
 * that column is a bare centring wrapper with no fill, padding or effect of its
 * own, which the grid cell and the auto margin below already reproduce.
 *
 * Neither a ratio nor an object-fit crop reaches this element — cropping a mockup
 * to 4:3 would slice the device, which is why the crop sits on --photo rather than
 * on the shared rule. The frame draws it 380 wide inside a 560 column, and the cap
 * is what preserves that proportion at any export resolution: upload at 2x for
 * sharpness and it still paints at 380.
 * `max-width: 100%` alone would size it to the file's intrinsic width, so a
 * retina export would paint at the full column width, half again as wide as
 * drawn.
 *
 * box-shadow AND NOT filter: drop-shadow. The ramp is four layers, and chained
 * drop-shadow() filters COMPOUND — each one shadows the previous filter's output
 * including its shadow — so four of them do not equal four independent shadows.
 * box-shadow takes all four at once and follows the border-radius below.
 *
 * The trade-off that buys: box-shadow paints the element's rounded-rectangle box,
 * not the PNG's alpha. Correct here because the design's mock IS a rounded card
 * (uniform 24px corners, gradient fills). Upload a cut-out device with a shaped
 * alpha channel and the shadow will square it off behind the silhouette.
 */
.wsc-media-checklist__image--device {
	width: auto;
	max-width: min(100%, 23.75rem); /* 380px */
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--md); /* 24px */
	box-shadow: var(--wp--custom--shadow--lifted);
}

.wsc-media-checklist__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40); /* 24px between the lead and the list */
}

.wsc-media-checklist__lead {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30); /* 16px */
}

/* An h2 by document outline, at the frame's H3 metrics — same treatment as
   media-text and trust-logos: the level is semantic, the size is visual. */
.wsc-media-checklist__heading {
	margin-block: 0;
	font-size: 1.5rem; /* 24px */
	line-height: 1.1667; /* 28/24 */
	letter-spacing: 0;
}

.wsc-media-checklist__intro {
	margin-block: 0;
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: -0.01em; /* -0.14px at the 14px body size */
}

/* Checklist ----------------------------------------------------------- */

/*
 * The list is authored as a real <ul> inside a wysiwyg, so these rules restyle
 * editor-produced markup rather than markup this template controls.
 *
 * :where(ul) keeps the scope to unordered lists at zero specificity — an <ol> an
 * editor pastes keeps its own numbers instead of being hijacked by the dot, and
 * a nested element can still override without an escalation contest.
 */
.wsc-media-checklist__list :where(ul) {
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
	letter-spacing: -0.01em; /* -0.14px at the 14px body size */
}

.wsc-media-checklist__list :where(ul) > li {
	position: relative;
	padding-inline-start: 1.625rem; /* 26px — the 10px dot plus the frame's 16px gap */
}

.wsc-media-checklist__list :where(ul) > li + li {
	margin-block-start: var(--wp--preset--spacing--30); /* 16px */
}

/*
 * The frame's 10px dot. The 4px offset is measured against the 20px body line
 * height (0.875rem x 1.43): it sits the dot high in the first line, level with
 * the cap height rather than the optical centre, and holds there however many
 * lines the item wraps to. If the body line height changes, this moves with it.
 */
.wsc-media-checklist__list :where(ul) > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.25rem; /* 4px */
	width: 0.625rem; /* 10px */
	height: 0.625rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--ink-soft);
}

/* Closing text and CTA row --------------------------------------------- */

/*
 * The paragraph under the checklist. Same face and rhythm as the intro above it
 * — it is the other half of the same argument, not a new register. Its 24px of
 * separation is __content's gap, so nothing is declared for it here.
 */
.wsc-media-checklist__outro {
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: -0.01em; /* -0.14px at the 14px body size */
}

.wsc-media-checklist__outro > :where(p) {
	margin-block: 1.25rem; /* 20px */
}

.wsc-media-checklist__outro > :first-child {
	margin-block-start: 0;
}

.wsc-media-checklist__outro > :last-child {
	margin-block-end: 0;
}

/*
 * The frame spreads the two ends across the column rather than spacing them by a
 * fixed gap (node 16424:8319 is justify-between at full width) — so the link
 * sits against the right edge of the content column whatever either label says.
 *
 * The gap only applies once the row wraps, which is why it is small: at that
 * point the two items are stacked and 24px is a vertical rhythm, not the
 * horizontal spread it would be undoing.
 *
 * One side missing still works: a lone button sits left and a lone link sits
 * left too, because justify-content has nothing to push it against.
 */
.wsc-media-checklist__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40); /* 24px, wrapped only */
	width: 100%;
}

/*
 * The mono face the frame uses for both this and the button label. The underline
 * is .wsc-link--inverted (style.css) — already drawn, retracting on hover.
 *
 * ink-soft rather than ink: the design context reports --dark-gray here, the
 * same value the body copy takes, so the link sits with the prose rather than
 * competing with the heading.
 */
.wsc-media-checklist__link {
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: 0; /* The Mono token is 0; the inherited body default is -1%. */
	line-height: 1.25; /* Figma says "normal" — the theme's standing value for it */
	text-transform: uppercase;
}

/* Notice panel -------------------------------------------------------- */

.wsc-media-checklist__notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20); /* 12px */
	padding: var(--wp--preset--spacing--40); /* 24px */
	border-radius: var(--wp--custom--radius--sm); /* 16px */
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	text-align: center;
}

/*
 * A panel heading, not a section heading — the block's h2 is up in the content
 * column, so this is a paragraph carrying the heading face by hand.
 */
.wsc-media-checklist__notice-title {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.5rem; /* 24px */
	line-height: 1.1667; /* 28/24 */
	letter-spacing: 0;
}

.wsc-media-checklist__notice-text {
	letter-spacing: -0.01em; /* -0.14px at the 14px body size */
}

/* Same paragraph rhythm as the other prose fields — a two-paragraph notice must
   not run together. Adjacent margins collapse to a single 20px gap. */
.wsc-media-checklist__notice-text > :where(p) {
	margin-block: 1.25rem; /* 20px */
}

.wsc-media-checklist__notice-text > :first-child {
	margin-block-start: 0;
}

.wsc-media-checklist__notice-text > :last-child {
	margin-block-end: 0;
}

/*
 * theme.json sets elements.link { color: currentColor } globally, so the red has
 * to be stated explicitly — it is not a default this inherits. Bold and the
 * underline come from the frame; theme.json's global underline is dropped for a
 * background gradient that can animate, since text-decoration cannot.
 *
 * CONTRAST — measured, accepted, do not "fix" silently. danger (#e9310e) on ink
 * (#15120d) is 4.37:1. At 14px/700 this is normal-scale text, so WCAG AA wants
 * 4.5:1 and this misses. Kept deliberately: the red is the design's, and the
 * alternative (inheriting white at 18.7:1) drops an accent the frame specifies.
 * The gap is in the palette, not in this rule — #e9310e clears AA against
 * neither ink nor white. Revisit when the design system revisits the red.
 *
 * THE UNDERLINE is .wsc-link (style.css), inverted and copied rather than
 * applied: this text is a wysiwyg field, so the <a> is the editor's and carries
 * no theme class — only a descendant selector can reach it. Everything
 * mechanical is the primitive's, including why it is a background rather than a
 * positioned rule; read the reasoning there. It has no margin to give back
 * because this link is inline in prose, where vertical padding is inert.
 *
 * Inverted because the frame draws this underline as already there, so it
 * retracts on hover instead of arriving — the anchors are the primitive's two
 * states swapped. Both directions still sweep left-to-right.
 *
 * That inversion is now a shared primitive: .wsc-link--inverted in style.css.
 * THIS RULE STILL CANNOT USE IT, for the reason above — the <a> belongs to the
 * wysiwyg and carries no class of ours to hang the modifier on. The duplication
 * is deliberate and noted at both ends; if the primitive changes, change this
 * with it.
 */
.wsc-media-checklist__notice-text a {
	color: var(--wp--preset--color--danger);
	font-weight: 700;
	text-decoration: none;
	padding-block-end: 0.125rem; /* 2px — the gap under the baseline */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 100%;
	transition: background-size 0.3s var(--wsc-ease);
}

.wsc-media-checklist__notice-text a:hover,
.wsc-media-checklist__notice-text a:focus-visible {
	background-size: 0 1px;
	background-position: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.wsc-media-checklist__notice-text a {
		transition: none;
	}
}