/*
 * Catalogue styles.
 *
 * Values come from tools/probe-styles.mjs measuring the live WoodMart
 * rendering, not from guesses: 1222px container, Rubik 14px/1.6 on #777,
 * headings #242424, accent #EA6801, buttons 12px/20px uppercase at 13px/600
 * with square corners, rules at rgba(0,0,0,.106).
 *
 * The custom properties fall back to the same literals so this stylesheet is
 * correct under WoodMart today and inherits the MRN theme's tokens later,
 * without a second version.
 */

.mrn-book,
.mrn-catalog,
.mrn-catalog__header,
.mrn-book-grid,
.mrn-pnld-band,
.mrn-pnld-close {
	--mrn-accent: var(--wp--preset--color--primary, #ea6801);
	--mrn-heading: var(--wp--preset--color--heading, #242424);
	--mrn-entity: var(--wp--preset--color--entity, #333);
	--mrn-body: var(--wp--preset--color--body, #767676);
	--mrn-rule: var(--wp--custom--rule, rgba(0, 0, 0, 0.106));
	--mrn-gap: 30px;
}

/* ------------------------------------------------------------ single book */

.mrn-book {
	max-width: 1080px;
	margin-inline: auto;
	padding-block: 55px 60px;
}

.mrn-book__layout {
	display: grid;
	grid-template-columns: minmax(320px, 500px) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.mrn-book__visual {
	width: 100%;
	max-width: 500px;
	justify-self: center;
}

.mrn-book__spread {
	display: block;
	width: 100%;
	height: auto;
}

.mrn-book__title {
	margin: 0 0 20px;
	color: var(--mrn-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.mrn-book__synopsis {
	color: var(--mrn-body);
	font-size: 14px;
	line-height: 1.7;
}

.mrn-book__synopsis p {
	margin: 0 0 1em;
}

/*
 * A description list, not the original table. Eleven label/value pairs are not
 * tabular data, and a <dl> is what a screen reader should announce. The grid
 * keeps the printed look: label left, value right, hairline between rows.
 */
.mrn-book__facts {
	margin: 30px 0 0;
	border-top: 1px solid var(--mrn-rule);
}

.mrn-book__fact {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 15px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mrn-rule);
	font-size: 14px;
}

.mrn-book__fact dt {
	margin: 0;
	color: var(--mrn-heading);
	font-weight: 500;
}

.mrn-book__fact dd {
	margin: 0;
	color: var(--mrn-body);
	text-align: right;
}

/*
 * The credit rows link to the person's page. Inheriting the row's body grey
 * made those two links invisible - a link nobody can see is not a link - so
 * they take the accent, which is what a link inside body copy does everywhere
 * else in the system.
 */
.mrn-book__fact dd a {
	color: var(--mrn-accent);
	text-decoration: none;
}

.mrn-book__fact dd a:hover,
.mrn-book__fact dd a:focus-visible {
	text-decoration: underline;
}

.mrn-book__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.mrn-book__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--control--height, 46px);
	padding: var(--wp--custom--control--padding, 12px 24px);
	border: 1px solid var(--mrn-accent);
	border-radius: var(--wp--custom--radius--button, 999px);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--control--tracking, 0.045em);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease,
		transform 0.25s ease;
}

.mrn-book__button:hover,
.mrn-book__button:focus-visible {
	transform: translateY(-2px);
}

.mrn-book__button--primary {
	background: var(--mrn-accent);
	color: #fff;
}

.mrn-book__button--primary:hover,
.mrn-book__button--primary:focus-visible {
	background: #c25601;
	border-color: #c25601;
	color: #fff;
}

.mrn-book__button--secondary {
	background: #fff;
	color: var(--mrn-accent);
}

.mrn-book__button--secondary:hover,
.mrn-book__button--secondary:focus-visible {
	background: var(--mrn-accent);
	color: #fff;
}

.mrn-book__related {
	margin-top: 70px;
	padding-top: 40px;
	border-top: 1px solid var(--mrn-rule);
}

.mrn-book__navigation {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	margin-top: 55px;
	padding-block: 22px;
	border-block: 1px solid var(--mrn-rule);
}

.mrn-book__navigation-next { text-align: right; }

.mrn-book__navigation a {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	color: var(--mrn-entity);
	text-decoration: none;
}

.mrn-book__navigation span {
	color: var(--mrn-body);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

.mrn-book__navigation strong {
	font-size: 14px;
	font-weight: 500;
}

.mrn-book__navigation a:hover strong,
.mrn-book__navigation a:focus-visible strong { color: var(--mrn-accent); }

.mrn-section-title {
	margin: 0 0 25px;
	color: var(--mrn-heading);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- catalogue */

.mrn-catalog {
	max-width: 1050px;
	padding-block: 10px 60px;
}

.mrn-catalog__header {
	padding-block: 40px 10px;
	text-align: center;
}

.mrn-catalog__title {
	margin: 0;
	color: var(--mrn-heading);
	font-size: 32px;
	font-weight: 400;
	text-transform: uppercase;
}

.mrn-catalog__intro {
	margin: 10px auto 0;
	max-width: 60ch;
	color: var(--mrn-body);
}

.mrn-catalog__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin-block: 40px;
}

.mrn-catalog__filter {
	color: var(--mrn-entity);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.mrn-catalog__filter:hover,
.mrn-catalog__filter:focus-visible,
.mrn-catalog__filter.is-active {
	color: var(--mrn-accent);
	border-bottom-color: var(--mrn-accent);
}

.mrn-book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 310px));
	justify-content: center;
	gap: var(--mrn-gap);
	max-width: 990px;
	margin-inline: auto;
	margin-bottom: 50px;
}

/*
 * Every title sits on the same square, light-grey display stage. Source images
 * include both square book mockups and portrait cover photos; containing them
 * here keeps the catalogue rhythm uniform without cropping or altering either.
 *
 * The stage keeps square corners deliberately. The 22px card radius belongs to
 * containers - blog cards, post cards, event cards. A book cover is not a
 * container, it is a picture of a physical thing, and a printed cover has
 * square corners. Rounding it reads as an app icon and quietly misdescribes the
 * product. The shadow does the lifting; the geometry stays honest.
 */
.mrn-book-card__cover {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f7f1e8);
	box-shadow: var(--wp--custom--shadow--card, 0 14px 40px rgba(36, 32, 28, 0.06));
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.mrn-book-card__cover:hover,
.mrn-book-card__cover:focus-visible {
	box-shadow: var(--wp--custom--shadow--lift, 0 18px 55px rgba(36, 32, 28, 0.11));
	transform: translateY(var(--wp--custom--lift, -4px));
}

.mrn-book-card__cover img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.4s ease;
}

.mrn-book-card__cover:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.mrn-book-card__cover,
	.mrn-book-card__cover img {
		transition: none;
	}

	.mrn-book-card__cover:hover {
		transform: none;
	}
}

.mrn-book-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--mrn-accent);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/*
 * The horizontal padding matters now that cards carry an award line. With none,
 * a title with three seals wrapped hard against both card edges - measured at
 * exactly the card width on every card that wrapped.
 */
.mrn-book-card__body {
	padding: 15px 12px 0;
	text-align: center;
}

.mrn-book-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.mrn-book-card__title a {
	color: var(--mrn-entity);
	text-decoration: none;
}

.mrn-book-card__title a:hover,
.mrn-book-card__title a:focus-visible {
	color: var(--mrn-accent);
}

.mrn-book-card__price {
	margin: 6px 0 0;
	color: var(--mrn-body);
	font-size: 14px;
}

.mrn-catalog__empty {
	padding-block: 40px;
	text-align: center;
	color: var(--mrn-body);
}

.mrn-catalog__pagination {
	margin-bottom: 60px;
}

.mrn-catalog__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.mrn-catalog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--mrn-rule);
	border-radius: var(--wp--custom--radius--button, 999px);
	color: var(--mrn-entity);
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.mrn-catalog__pagination .page-numbers:hover,
.mrn-catalog__pagination .page-numbers:focus-visible,
.mrn-catalog__pagination .page-numbers.current {
	background: var(--mrn-accent);
	border-color: var(--mrn-accent);
	color: #fff;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.mrn-book__layout {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.mrn-book__visual { max-width: 500px; }
}

@media (max-width: 767px) {
	.mrn-book-grid {
		grid-template-columns: minmax(0, 330px);
		gap: 35px;
	}

	.mrn-book { padding-block: 38px 45px; }

	.mrn-book__navigation {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.mrn-book__navigation-next { text-align: left; }

	.mrn-book__fact {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.mrn-book__fact dd {
		text-align: left;
	}

	.mrn-book__actions .mrn-book__button {
		flex: 1 1 100%;
	}
}

/* ----------------------------------------------------------------- authors */

/*
 * The roster, and one person's page.
 *
 * What this replaced was sixteen complete biographies in four ~250px columns.
 * Every person shouted at the same volume, the page ran to several screens of
 * unbroken prose, and the evidence that earns a teacher's trust - an FNLIJ
 * seal, a Jabuti final, an IBBY honour list - was buried in the fourth
 * paragraph of a block nobody finished.
 *
 * So the index carries what can be scanned and the person's own page carries
 * what has to be read. The card is composed as a plate: portrait, name and
 * craft centred above a hairline, then the works left-aligned below it, the way
 * a colophon sets a caption over a list. The alignment change is deliberate and
 * the rule is what makes it read that way.
 */

.mrn-roster {
	--mrn-accent: var(--wp--preset--color--primary, #ea6801);
	--mrn-heading: var(--wp--preset--color--heading, #242424);
	--mrn-entity: var(--wp--preset--color--entity, #333);
	--mrn-body: var(--wp--preset--color--body, #767676);
	--mrn-rule: var(--wp--custom--rule, rgba(0, 0, 0, 0.106));

	max-width: 1180px;
	margin-inline: auto;
	padding-block: 20px 45px;
}

/* The catalogue's tab pattern, not a second control language. */
.mrn-roster__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin-block: 30px 45px;
}

.mrn-roster__filter-link {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	color: var(--mrn-entity);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
}

.mrn-roster__filter-link:hover,
.mrn-roster__filter-link:focus-visible,
.mrn-roster__filter-link.is-active {
	color: var(--mrn-accent);
	border-bottom-color: var(--mrn-accent);
}

.mrn-roster__count {
	padding: 2px 7px;
	border-radius: var(--wp--custom--radius--button, 999px);
	background: var(--wp--preset--color--surface, #f7f1e8);
	color: var(--mrn-heading);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.mrn-roster__filter-link.is-active .mrn-roster__count {
	background: var(--mrn-accent);
	color: #fff;
}

/*
 * A wall of portraits, four across.
 *
 * The cell carries the face, the name and the craft, and nothing that varies in
 * length. Two earlier attempts put a biography excerpt and then a works list in
 * here, and both broke the grid for the same reason: people are not uniform.
 * Marcos Nascimento has seven titles and Faw Carvalho has one, so any list makes
 * one column tall and its neighbour short.
 *
 * A works *count* would fit on one line and was the obvious repair, but it
 * quietly ranks the roster - the same objection this codebase already raised
 * against ordering the catalogue by how many seals a book carries. The books
 * belong on the person's own page, where they can be shown properly.
 */
.mrn-roster__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	/*
	 * Row gap is zero and the separation is padding on the cell instead. With
	 * subgrid below, a gap here would fall between the portrait, the name and
	 * the role as well as between people - the parent's row-gap applies to every
	 * track a subgrid item spans.
	 */
	column-gap: 0;
	row-gap: 0;
}

.mrn-creator {
	position: relative;
	min-width: 0;
	padding: 0 25px 55px;
	text-align: center;
}

/*
 * Three shared rows, so the names sit on one baseline and the roles on another
 * however long either runs. "Mestre em Comunicacao Visual e autora" takes two
 * lines where "Autor" takes one, and without this that one cell would push the
 * whole row out of alignment.
 *
 * Progressive: without subgrid the cells simply size themselves, which is only
 * ragged when a role wraps.
 */
@supports (grid-template-rows: subgrid) {
	.mrn-creator {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
	}
}

/*
 * 150px, down from 170px.
 *
 * Six of the fifteen portraits are 150x150 originals - there is no larger file
 * to ask for - so at 170px those six were being upscaled and shown soft. The
 * frame now matches the smallest real asset instead of stretching it, and the
 * 365px portraits stay crisp at any density.
 *
 * The frame is drawn whether or not a photograph exists, so a missing image
 * leaves a warm paper disc rather than collapsing the cell.
 */
.mrn-creator__portrait {
	width: 150px;
	height: 150px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wp--preset--color--surface, #f7f1e8);
	box-shadow: var(--wp--custom--shadow--card, 0 14px 40px rgba(36, 32, 28, 0.06));
}

.mrn-creator__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}

.mrn-creator:hover .mrn-creator__portrait img {
	transform: scale(1.04);
}

.mrn-creator__name {
	margin: 20px 0 0;
	align-self: start;
	font-family: var(--wp--preset--font-family--literata, Literata, Georgia, serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--mrn-entity);
}

.mrn-creator__name a {
	color: inherit;
	text-decoration: none;
}

/*
 * One link, stretched over the cell. The portrait and the role are not separate
 * targets, so the roster costs fifteen tab stops instead of forty-five, and the
 * accessible name is the person's name rather than "Ler a biografia" repeated.
 */
.mrn-creator__name a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.mrn-creator:hover .mrn-creator__name a,
.mrn-creator__name a:focus-visible {
	color: var(--mrn-accent);
}

.mrn-creator__name a:focus-visible {
	outline: 2px solid var(--mrn-accent);
	outline-offset: 4px;
}

.mrn-creator__role {
	margin: 5px 0 0;
	align-self: start;
	color: var(--mrn-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.mrn-roster__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.mrn-roster__grid { grid-template-columns: 1fr; }
	.mrn-creator { padding-inline: 0; padding-bottom: 45px; }
}

/* ------------------------------------------------------------- one person */

.mrn-person {
	--mrn-accent: var(--wp--preset--color--primary, #ea6801);
	--mrn-heading: var(--wp--preset--color--heading, #242424);
	--mrn-entity: var(--wp--preset--color--entity, #333);
	--mrn-body: var(--wp--preset--color--body, #767676);
	--mrn-rule: var(--wp--custom--rule, rgba(0, 0, 0, 0.106));

	max-width: 1180px;
	margin-inline: auto;
	padding-block: 50px 60px;
}

/*
 * The header and the biography hold the 886px reading measure while the work
 * below is allowed the full shell. Two measures, and the page is read before it
 * is browsed.
 */
.mrn-person__header,
.mrn-person__bio {
	max-width: 886px;
	margin-inline: auto;
}

.mrn-person__header {
	text-align: center;
	margin-bottom: 35px;
}

/* 150px for the same reason as the roster: six originals are only 150x150. */
.mrn-person__portrait {
	width: 150px;
	height: 150px;
	margin: 0 auto 24px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wp--preset--color--surface, #f7f1e8);
	box-shadow: var(--wp--custom--shadow--card, 0 14px 40px rgba(36, 32, 28, 0.06));
}

.mrn-person__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.mrn-person__name {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--literata, Literata, Georgia, serif);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--mrn-heading);
}

.mrn-person__role {
	margin: 0;
	color: var(--mrn-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Long-form prose steps up to 16px/1.75, as everywhere else meant for reading. */
.mrn-person__bio {
	margin-bottom: 55px;
	color: var(--mrn-body);
	font-size: 16px;
	line-height: 1.75;
}

.mrn-person__bio p {
	margin: 0 0 1.1em;
}

.mrn-person__bio p:last-child {
	margin-bottom: 0;
}

.mrn-person__bio a {
	color: var(--mrn-accent);
}

/*
 * Matched to the book grid's own 990px measure, not the 1180px shell. Left at
 * the shell width the heading sat 95px to the left of the first cover it was
 * naming, which read as a stray label rather than a section title.
 */
.mrn-person__works {
	max-width: 990px;
	margin-inline: auto;
	margin-bottom: 20px;
}

.mrn-person__footer {
	max-width: 886px;
	margin-inline: auto;
	padding-top: 40px;
	border-top: 1px solid var(--mrn-rule);
	text-align: center;
}

.mrn-person__submit {
	margin: 24px 0 0;
	color: var(--mrn-body);
	font-size: 14px;
	line-height: 1.7;
}

.mrn-person__submit a {
	color: var(--mrn-accent);
}

@media (max-width: 767px) {
	.mrn-person { padding-block: 35px 45px; }
}

/* the page's own introduction, which lives in the page content */
.mrn-authors-intro {
	padding-block: 40px 10px;
	text-align: center;
}

.mrn-authors-intro__title {
	margin: 0 0 10px;
	color: var(--wp--preset--color--heading, #242424);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.3;
}

.mrn-authors-intro__text {
	margin: 0 auto;
	max-width: 75ch;
	color: var(--wp--preset--color--body, #767676);
	font-size: 14px;
	line-height: 1.7;
}

/* -------------------------------------------------------------- seals */

/*
 * A seal is evidence, not a sticker. It reads as something stamped onto the
 * paper: the awarding body's name in the label voice, on warm paper, with a
 * hairline. No gold, no ribbon, no rosette - a teacher recognises "FNLIJ", and
 * ornament around it would make a real distinction look decorative.
 */
.mrn-book-card__cover {
	position: relative;
}

.mrn-book-card__seals {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 100%;
	padding: 10px;
}

.mrn-seal-mark {
	padding: 5px 9px;
	border: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, 0.106));
	background: var(--wp--preset--color--surface, #f7f1e8);
	color: var(--wp--preset--color--heading, #242424);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * The caption role, not a second title. At 500 on the heading colour this line
 * was competing with the book's own name directly above it - and on a
 * three-seal title it ran to two dark lines. The stamped marks on the cover
 * already carry the signal; this is the readable, screen-reader version of the
 * same thing and it should sit behind the title, not beside it.
 */
.mrn-book-card__awards {
	margin: 6px 0 0;
	color: var(--mrn-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

/* single book */

.mrn-book__seals {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

/*
 * A hairline box on paper, matching the mark stamped on the cover - not the
 * accent-coloured left rule this started as. That rule is the callout pattern,
 * and it made a credential read as a notification. A seal is not an alert.
 */
.mrn-book__seal {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 14px;
	border: 1px solid var(--mrn-rule, rgba(0, 0, 0, 0.106));
	background: var(--wp--preset--color--surface, #f7f1e8);
}

.mrn-book__seal-name {
	color: var(--wp--preset--color--heading, #242424);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.mrn-book__seal-body {
	color: var(--mrn-body, #767676);
	font-size: 12px;
	line-height: 1.45;
}

/* catalogue filter */

.mrn-catalog__filter--seal {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.mrn-catalog__filter-count {
	padding: 2px 7px;
	border-radius: var(--wp--custom--radius--button, 999px);
	background: var(--wp--preset--color--surface, #f7f1e8);
	color: var(--wp--preset--color--heading, #242424);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.mrn-catalog__filter--seal.is-active .mrn-catalog__filter-count {
	background: var(--mrn-accent, #ea6801);
	color: #fff;
}

@media (max-width: 767px) {
	.mrn-book__seals { gap: 8px; }
	.mrn-book__seal { flex: 1 1 100%; }
}

/* =========================================================================
   PNLD Literário — "As duas faixas"
   =========================================================================
   The age band leads. Each approved work owns a full-bleed band headed by its
   PNLD category, alternating ground and mirroring its photograph, so two works
   read as two decisions rather than one card repeated.
   ========================================================================= */

.mrn-pnld__intro {
	padding-block: 0 var(--wp--preset--spacing--50, 45px);
	max-width: var(--wp--custom--layout--reading, 886px);
}

/*
 * Fluid rather than the flat 44px h1. Shortening the title from 71 characters
 * to 38 fixed the desktop line count, but at 375px a fixed 44px still broke it
 * over four lines and pushed the first band off the first screen. The ramp's
 * h-1 is the ceiling, not the mobile size.
 */
.mrn-pnld__title {
	margin: 0;
	font-size: clamp(30px, 8vw, var(--wp--preset--font-size--h-1, 44px));
	line-height: 1.2;
	text-wrap: balance;
}

.mrn-pnld__deck {
	margin: var(--wp--preset--spacing--30, 20px) 0 0;
	font-size: var(--wp--preset--font-size--large, 16px);
	line-height: 1.75;
}

/* ------------------------------------------------------------------ band */

/*
 * A band carries a ground, so it reaches both window edges. `.mrn-bleed`
 * cancels the gutter its parent column adds; the `.container` inside brings the
 * content back to the 1222px shell.
 */
/*
 * One rule, and only where two bands actually meet.
 *
 * Every hairline on this page was doing a job that space could do: under the
 * deck, inside each band, above the close block. Six rules before the reader
 * reached a book, on a page whose whole argument is two objects. A hairline
 * earns its place when nothing else marks the boundary - here that is the seam
 * between one work and the next, and nowhere else.
 */
.mrn-pnld-band {
	margin-inline: calc(-1 * var(--mrn-gutter, 15px));
}

.mrn-pnld-band + .mrn-pnld-band {
	border-top: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, 0.106));
}

/*
 * Bands do not alternate ground. Two works are two decisions, and the hairline
 * plus the mirrored photograph already say where one ends and the next begins;
 * a paper stripe on every other band said it a second time, in colour, and made
 * the page read as banding rather than as a sequence. White is the page.
 */

/*
 * The gap is columns-only. `gap: 90px` also applied between row 1 and the
 * drawer, which put the widest step in the scale between a button and the thing
 * it revealed — 90px of the 229px a visitor had to cross to read the synopsis
 * their click produced. A column gutter and a row gutter are not the same
 * measurement and they stopped sharing a value.
 */
.mrn-pnld-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 0 var(--wp--preset--spacing--70, 90px);
	align-items: start;
	padding-block: var(--wp--preset--spacing--60, 60px);
}

/*
 * Mirroring has to move the track sizes, not just the order. Swapping `order`
 * alone leaves the photograph in the 1fr column and the text in the 460px one,
 * which blows the second band's photograph up to 640px and squeezes its text —
 * the two bands stop being the same component at different handedness.
 */
/*
 * Mirroring places cells explicitly instead of reordering them.
 *
 * `order` was the obvious way to swap the photograph and the text, and it put
 * the drawer in the wrong place: order defaults to 0, so a drawer with no order
 * of its own sorted ahead of the two cells that had one, and the second band
 * opened its details above the book instead of below it. Explicit rows and
 * columns cannot develop that kind of opinion.
 */
.mrn-pnld-band--mirror .mrn-pnld-band__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
}

.mrn-pnld-band__photo { grid-column: 1; grid-row: 1; }

/*
 * The body fills the row rather than sitting at its top, so its actions can sink
 * to the foot of the column and land level with the bottom of the photograph.
 *
 * The photograph keeps `align-items: start` from the grid: stretching it would
 * stretch the paper ground behind a fixed-ratio image and leave a warm strip
 * under the book. Only the text column stretches, and it stretches on purpose.
 */
.mrn-pnld-band__body {
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.mrn-pnld-band--mirror .mrn-pnld-band__photo { grid-column: 2; }
.mrn-pnld-band--mirror .mrn-pnld-band__body { grid-column: 1; }

/*
 * A photograph of a printed book keeps the book's own geometry: square corners
 * and an ambient shadow, never the container radius. The paper ground behind it
 * means a slow image reveals warm paper rather than a grey hole.
 */
.mrn-pnld-band__photo {
	background: var(--wp--preset--color--paper-deep, #ede5d9);
	box-shadow: var(--wp--custom--shadow--card, 0 14px 40px rgba(36, 32, 28, 0.06));
	overflow: hidden;
}

.mrn-pnld-band__image {
	display: block;
	width: 100%;
	height: auto;
}

.mrn-pnld-band__category {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2, 32px);
	line-height: 1.25;
}

/* On an obra page the categoria is context, not the page's own heading. */
.mrn-pnld-band__category--sub {
	font-size: var(--wp--preset--font-size--x-large, 20px);
	color: var(--wp--preset--color--heading, #242424);
}

.mrn-pnld-band__age {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--large, 16px);
}

/* Was a hairline between the categoria and the work. Space carries it. */
.mrn-pnld-band__rule {
	height: 0;
	margin: var(--wp--preset--spacing--40, 30px) 0 0;
	border: 0;
}

.mrn-pnld-band__work,
.mrn-pnld-obra__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3, 28px);
	line-height: 1.25;
}

.mrn-pnld-band__work a {
	color: inherit;
	text-decoration: none;
}

.mrn-pnld-band__work a:hover,
.mrn-pnld-band__work a:focus-visible {
	color: var(--wp--preset--color--primary, #ea6801);
}

.mrn-pnld-band__meta {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--medium, 14px);
}

.mrn-pnld-band__meta a { color: inherit; }
.mrn-pnld-band__sep { color: var(--wp--custom--rule, rgba(0, 0, 0, 0.35)); }

/* ------------------------------------------------------- código do livro */

/*
 * The one fact a coordinator carries away and retypes into a government
 * system, so it is selectable text with a copy control beside it — never a
 * button that hides the value, and never behind a disclosure.
 */
.mrn-pnld__code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: var(--wp--preset--spacing--30, 20px) 0 0;
	padding: 10px 14px;
	background: var(--wp--preset--color--surface, #f7f1e8);
	border: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, 0.106));
	width: fit-content;
	max-width: 100%;
}


.mrn-pnld__code-label {
	font-size: var(--wp--preset--font-size--x-small, 12px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body, #767676);
}

.mrn-pnld__code-value {
	font-size: var(--wp--preset--font-size--large, 16px);
	font-weight: 500;
	letter-spacing: 0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--heading, #242424);
}

.mrn-pnld__copy {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--wp--preset--color--primary, #ea6801);
}

.mrn-pnld__copy svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mrn-pnld__copy:hover { background: rgba(234, 104, 1, 0.1); }

.mrn-pnld__copy-done {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	padding: 4px 8px;
	background: var(--wp--preset--color--ink, #24201c);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small, 12px);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--transition, 0.25s ease);
}

.mrn-pnld__copy.is-copied .mrn-pnld__copy-done { opacity: 1; }

/* ----------------------------------------------------------------- seals */

.mrn-pnld__seals {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--wp--preset--spacing--20, 15px) 0 0;
	padding: 0;
	list-style: none;
}

.mrn-pnld__seal {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 13px;
	background: var(--wp--preset--color--surface, #f7f1e8);
	border: 1px solid var(--wp--custom--rule, rgba(0, 0, 0, 0.106));
}


.mrn-pnld__seal-name {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--heading, #242424);
}

.mrn-pnld__seal-body {
	font-size: 11px;
	color: var(--wp--preset--color--body, #767676);
}

/* --------------------------------------------------------------- actions */

/*
 * The band's two routes, and the one element that closed the hole under the
 * text column. `margin-top: auto` in the flex body sinks the row to the foot of
 * the column, which does two things at once: the 139px of unused column becomes
 * deliberate air above the controls, and the control a visitor clicks now sits
 * on the same line as the bottom of the photograph — so the drawer opens
 * directly beneath the button instead of 229px below it and 550px to its left.
 *
 * `auto` collapses to zero when the column has no slack, which is exactly what
 * is wanted below 900px: stacked, the row keeps its own 20px and nothing moves.
 */
.mrn-pnld-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 20px);
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--40, 30px);
}

/* ---------------------------------------------------------------- toggle */

.mrn-pnld__toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 4px 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small, 13px);
	font-weight: 600;
	letter-spacing: var(--wp--custom--control--tracking, 0.045em);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #ea6801);
}

.mrn-pnld__toggle svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--wp--custom--transition, 0.25s ease);
}

.mrn-pnld__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mrn-pnld__toggle .mrn-pnld__toggle-close { display: none; }
.mrn-pnld__toggle[aria-expanded="true"] .mrn-pnld__toggle-open { display: none; }
.mrn-pnld__toggle[aria-expanded="true"] .mrn-pnld__toggle-close { display: inline; }

/* ---------------------------------------------------------------- drawer */

/*
 * The drawer spans the whole band rather than continuing the text column: a
 * synopsis stacked under the identity runs that column far past the photograph
 * and leaves the band lopsided.
 *
 * It animates a pixel height, set from pnld.js, and that is deliberate. `auto`
 * is not animatable, and the usual escape - `grid-template-rows` from 0fr to
 * 1fr - does not resolve here: the drawer is a spanning item of the band's own
 * grid, and measured, the child was 460px while the row insisted on 46px.
 *
 * So the height is the transition and the content fades in just behind it. A
 * height transition reflows what sits below the drawer, which is inherent to a
 * disclosure that pushes content rather than covering it; it is bounded to one
 * element on one click, and collapses to 1ms under prefers-reduced-motion.
 */
.mrn-pnld-band__drawer {
	grid-column: 1 / -1;
	grid-row: 2;
	overflow: hidden;
	transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * `:not([hidden])` is load-bearing. A bare `display` here would beat the
 * user-agent rule for the hidden attribute and every drawer on the page would
 * render open - the same trap the mobile drawer and search overlay documented.
 */
.mrn-pnld-band__drawer:not([hidden]) {
	display: block;
}

/*
 * One reading column, not two.
 *
 * The drawer used to split 1fr | 420px, with the right column holding a fact
 * list of Autor / Ilustração / Gênero — all three already printed in the band's
 * meta line one heading above. A column of nothing new measured 185px against a
 * 460px sibling and left a 275px hole, and the 90px gutter beside it was the
 * third use of the widest step in one band. The facts are gone, the column with
 * them, and what remains is what the drawer was always for: something to read.
 */
.mrn-pnld-band__drawer-inner {
	max-width: var(--wp--custom--layout--reading, 886px);
	padding-top: var(--wp--preset--spacing--50, 45px);
	opacity: 0;
	transition: opacity 0.4s ease 0.12s;
}

.mrn-pnld-band__drawer.is-open .mrn-pnld-band__drawer-inner {
	opacity: 1;
}

.mrn-pnld__synopsis p {
	margin: 0 0 1em;
	font-size: var(--wp--preset--font-size--large, 16px);
	line-height: 1.75;
	max-width: 62ch;
}

.mrn-pnld__synopsis p:last-child { margin-bottom: 0; }

.mrn-pnld__materials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: var(--wp--preset--spacing--40, 30px) 0 0;
}

.mrn-pnld__more {
	margin: var(--wp--preset--spacing--30, 20px) 0 0;
	font-size: var(--wp--preset--font-size--medium, 14px);
}

.mrn-pnld__more a { color: var(--wp--preset--color--primary, #ea6801); }

/* ----------------------------------------------------------------- close */

.mrn-pnld-close {
	margin-inline: calc(-1 * var(--mrn-gutter, 15px));
	background: var(--wp--preset--color--surface, #f7f1e8);
	margin-top: var(--wp--preset--spacing--60, 60px);
	padding-block: var(--wp--preset--spacing--60, 60px);
}

.mrn-pnld-close__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40, 30px);
}

.mrn-pnld-close__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2, 32px);
	line-height: 1.25;
}

.mrn-pnld-close__text {
	margin: 10px 0 0;
	max-width: 520px;
}

.mrn-pnld-close__action { margin: 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	.mrn-pnld-band__inner {
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
		gap: 0 var(--wp--preset--spacing--50, 45px);
	}

	.mrn-pnld-band--mirror .mrn-pnld-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	}
}

@media (max-width: 900px) {
	/*
	 * Stacked, the row gap comes back: the two cells are now above and below one
	 * another, so the gutter between them is a row gutter and has to exist.
	 */
	.mrn-pnld-band__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50, 45px);
	}

	/* Mirroring is a two-column gesture; stacked, the photo always leads. */
	.mrn-pnld-band__photo,
	.mrn-pnld-band--mirror .mrn-pnld-band__photo { grid-column: 1; grid-row: auto; }
	.mrn-pnld-band__body,
	.mrn-pnld-band--mirror .mrn-pnld-band__body { grid-column: 1; grid-row: auto; }
	.mrn-pnld-band__drawer { grid-row: auto; }

	.mrn-pnld-band--mirror .mrn-pnld-band__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.mrn-pnld-band__photo { max-width: 420px; }

	/* The restored row gap already separates the drawer; its own lead-in shrinks
	   so the two do not add up to a 90px hole under the button. */
	.mrn-pnld-band__drawer-inner {
		padding-top: var(--wp--preset--spacing--30, 20px);
	}
}

@media (max-width: 767px) {
	.mrn-pnld-band__inner { padding-block: var(--wp--preset--spacing--50, 45px); }
	.mrn-pnld-close__inner { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.mrn-pnld-band__drawer,
	.mrn-pnld-band__drawer-inner,
	.mrn-pnld__toggle svg,
	.mrn-pnld__copy-done {
		transition-duration: 1ms;
	}
}