/* Document download — public link to a Media Library file. */

.wwh-doc-dl {
	max-width: 720px;
	margin: 0 auto;
}

.wwh-doc-dl__heading {
	font-family: var(--wp--preset--font-family--display), 'DM Serif Display', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	line-height: 1.1;
	margin: 0 0 0.6rem;
}

.wwh-doc-dl__description {
	margin: 0 0 1.4rem;
	color: var(--wp--preset--color--ink-caption, #5A544D);
}

.wwh-doc-dl__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid var(--wp--preset--color--brand-text, #8F632F);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--brand-text, #8F632F);
	font-family: var(--wp--preset--font-family--ui), 'Montserrat', sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.wwh-doc-dl__link:hover,
.wwh-doc-dl__link:focus-visible {
	background: var(--wp--preset--color--brand-text, #8F632F);
	color: var(--wp--preset--color--warm-cream, #F2EFEA);
}

/* Keep the focus ring visible against both cream and obsidian sections. */
.wwh-doc-dl__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.wwh-doc-dl__icon {
	display: inline-flex;
	flex-shrink: 0;
}

.wwh-doc-dl__meta {
	opacity: 0.75;
	font-size: 0.8rem;
}

/* On a dark band the bronze border/text drops below AA — switch to cream. */
.has-warm-obsidian-background-color .wwh-doc-dl__link,
.has-nocturne-background-color .wwh-doc-dl__link {
	border-color: var(--wp--preset--color--warm-cream, #F2EFEA);
	color: var(--wp--preset--color--warm-cream, #F2EFEA);
}

.has-warm-obsidian-background-color .wwh-doc-dl__link:hover,
.has-warm-obsidian-background-color .wwh-doc-dl__link:focus-visible,
.has-nocturne-background-color .wwh-doc-dl__link:hover,
.has-nocturne-background-color .wwh-doc-dl__link:focus-visible {
	background: var(--wp--preset--color--warm-cream, #F2EFEA);
	color: var(--wp--preset--color--warm-obsidian, #18140F);
}

@media (max-width: 480px) {
	.wwh-doc-dl__link {
		width: 100%;
		justify-content: center;
		text-align: center;
		/*
		 * border-box is required alongside width:100%. Without it the 1.5rem
		 * side padding and the 1px border are added ON TOP of the 100%, so the
		 * pill renders wider than its container — measured 377px inside a 375px
		 * viewport, pushing the whole page into horizontal scroll.
		 *
		 * This rule existed and looked right; it had simply never been seen,
		 * because this block was one of the 80 frozen at block.json version
		 * "1.0.0" and browsers were serving an older stylesheet. It surfaced
		 * the moment filemtime cache-busting landed.
		 */
		box-sizing: border-box;
	}
}

/* Eyebrow line above the heading (optional, every style). */
.wwh-doc-dl__eyebrow {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--ui), 'Montserrat', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-text, #8F632F);
}

.wwh-doc-dl__cover {
	max-width: 160px;
	margin-top: 1.25rem;
}

.is-style-wwh-steps .wwh-doc-dl__cover {
	max-width: none;
	margin-top: 0;
}

.wwh-doc-dl__cover-img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * "Numbered steps": a core/group block style (registered in
 * waterwheel-core.php) that turns the Document Download blocks inside it
 * into a numbered timeline: a bronze circle per step joined by a line, and
 * each step a card with an optional picture of the document. The number is
 * a CSS counter, so moving a block in the editor renumbers it. Used for the
 * Gallery artist guides on /exhibit/ (#gallery-guides).
 *
 * Direct children are targeted by .wp-block-wwh-document-download, not
 * .wwh-doc-dl: in the editor the group's child is the editor's wrapper and
 * the server-rendered .wwh-doc-dl sits inside it, so this way both look the
 * same.
 */
.is-style-wwh-steps {
	counter-reset: wwh-step;
}

.is-style-wwh-steps > .wp-block-wwh-document-download {
	--wwh-step-rail: 4.25rem;
	--wwh-step-dot: 3rem;
	--wwh-step-gap: 1.5rem;
	position: relative;
	counter-increment: wwh-step;
	box-sizing: border-box;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wwh-step-rail);
}

.is-style-wwh-steps > .wp-block-wwh-document-download + .wp-block-wwh-document-download {
	margin-block-start: var(--wwh-step-gap);
}

/* The numbered circle. */
.is-style-wwh-steps > .wp-block-wwh-document-download::before {
	content: counter(wwh-step);
	position: absolute;
	top: 1.4rem;
	left: 0;
	display: grid;
	place-items: center;
	width: var(--wwh-step-dot);
	height: var(--wwh-step-dot);
	border-radius: 50%;
	background: var(--wp--preset--color--brand-text, #8F632F);
	color: var(--wp--preset--color--warm-cream, #F2EFEA);
	font-family: var(--wp--preset--font-family--display), 'DM Serif Display', serif;
	font-style: italic;
	font-size: 1.45rem;
	line-height: 1;
	box-shadow: 0 0 0 6px var(--wp--preset--color--warm-cream, #F2EFEA);
	z-index: 1;
}

/* The line down to the next circle; the last step has none. */
.is-style-wwh-steps > .wp-block-wwh-document-download::after {
	content: "";
	position: absolute;
	top: calc(1.4rem + var(--wwh-step-dot));
	bottom: calc(-1 * (var(--wwh-step-gap) + 1.4rem));
	left: calc(var(--wwh-step-dot) / 2 - 1px);
	width: 2px;
	background: linear-gradient(var(--wp--preset--color--brand-text, #8F632F), rgba(143, 99, 47, 0.25));
}

.is-style-wwh-steps > .wp-block-wwh-document-download:not(:has(~ .wp-block-wwh-document-download))::after {
	display: none;
}

.is-style-wwh-steps .wwh-doc-dl {
	max-width: none;
}

.is-style-wwh-steps .wwh-doc-dl__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
	padding: 1.5rem 1.75rem;
	border: 1px solid rgba(24, 20, 15, 0.08);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(24, 20, 15, 0.05), 0 12px 28px -18px rgba(24, 20, 15, 0.35);
}

.is-style-wwh-steps .wwh-doc-dl__card.has-cover {
	grid-template-columns: minmax(0, 1fr) 128px;
}

.is-style-wwh-steps .wwh-doc-dl__heading {
	margin: 0 0 0.45rem;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	color: var(--wp--preset--color--ink-primary, #1A1613);
}

.is-style-wwh-steps .wwh-doc-dl__description {
	margin: 0 0 1.15rem;
}

/* The picture of the sheet: a page lying slightly askew on the card. */
.is-style-wwh-steps .wwh-doc-dl__cover {
	align-self: center;
	transform: rotate(2.5deg);
}

.is-style-wwh-steps .wwh-doc-dl__cover-img {
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(24, 20, 15, 0.08), 0 14px 22px -12px rgba(24, 20, 15, 0.45);
}

/*
 * The whole card opens the download on the site (the link's ::after covers
 * it). Not in the editor, where a click must select the block.
 */
body:not(.editor-styles-wrapper) .is-style-wwh-steps .wwh-doc-dl__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

.is-style-wwh-steps .wwh-doc-dl__card:hover .wwh-doc-dl__link {
	background: var(--wp--preset--color--brand-text, #8F632F);
	color: var(--wp--preset--color--warm-cream, #F2EFEA);
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-wwh-steps .wwh-doc-dl__card,
	.is-style-wwh-steps .wwh-doc-dl__cover {
		transition: transform 200ms ease, box-shadow 200ms ease;
	}

	.is-style-wwh-steps .wwh-doc-dl__card:hover {
		transform: translateY(-2px);
		box-shadow: 0 1px 2px rgba(24, 20, 15, 0.05), 0 18px 34px -18px rgba(24, 20, 15, 0.45);
	}

	.is-style-wwh-steps .wwh-doc-dl__card:hover .wwh-doc-dl__cover {
		transform: rotate(0deg) scale(1.04);
	}
}

/* Phones: a narrower rail, and no picture (it would squeeze the button). */
@media (max-width: 600px) {
	.is-style-wwh-steps > .wp-block-wwh-document-download {
		--wwh-step-rail: 3.1rem;
		--wwh-step-dot: 2.3rem;
		--wwh-step-gap: 1.25rem;
	}

	.is-style-wwh-steps > .wp-block-wwh-document-download::before {
		top: 1.1rem;
		font-size: 1.15rem;
		box-shadow: 0 0 0 4px var(--wp--preset--color--warm-cream, #F2EFEA);
	}

	.is-style-wwh-steps > .wp-block-wwh-document-download::after {
		top: calc(1.1rem + var(--wwh-step-dot));
		bottom: calc(-1 * (var(--wwh-step-gap) + 1.1rem));
	}

	.is-style-wwh-steps .wwh-doc-dl__card,
	.is-style-wwh-steps .wwh-doc-dl__card.has-cover {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.15rem 1.1rem;
	}

	.is-style-wwh-steps .wwh-doc-dl__cover {
		display: none;
	}

	/* Label and size each stay whole; the size drops under the label. */
	.is-style-wwh-steps .wwh-doc-dl__link {
		flex-wrap: wrap;
		column-gap: 0.55rem;
		row-gap: 0.15rem;
		padding: 0.75rem 1rem;
	}

	.is-style-wwh-steps .wwh-doc-dl__label,
	.is-style-wwh-steps .wwh-doc-dl__meta {
		white-space: nowrap;
	}
}