/*
 * Read more — a block capped at a number of lines (text) or items (a grid of
 * cards). Classes are written by the Read more panel (inc/read-more.php); see
 * md/parent/block-editor.md §29.
 *
 *   read-more              on. Text: five lines.
 *   read-more--7 / 9 / 11 / 13   the line cap instead of five.
 *   read-more--items-2 / 3 / 4 / 6   item mode: show that many children.
 *   read-more--mobile      cap on phones only (48rem and below).
 *   read-more--no-button   no Read more button; the text is simply cut.
 *   is-capped              set by assets/js/read-more.js while the text
 *                          overflows the cap: the fade shows.
 *   is-expanded            set by the script when the button is pressed: the
 *                          cap is lifted.
 *
 * The cap is the prefixed line-clamp (-webkit-box + -webkit-line-clamp +
 * overflow hidden), which every browser draws the same. Do not add the
 * unprefixed `line-clamp`: Chrome's new implementation changes the box's
 * display and painted the ellipsis with the lines still showing (2026-10-09).
 * The text stays in the DOM in full (search,
 * screen readers, find in page). assets/js/read-more.js adds the button only
 * while the text overflows the cap, so a short block looks untouched.
 */

.read-more {
	--read-more-lines: 5;
}

.read-more--7  { --read-more-lines: 7; }
.read-more--9  { --read-more-lines: 9; }
.read-more--11 { --read-more-lines: 11; }
.read-more--13 { --read-more-lines: 13; }

.read-more:not([class*="read-more--items-"]):not(.is-expanded):not(.read-more--mobile) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--read-more-lines);
	overflow: hidden;
}

@media (width <= 48rem) {
	.read-more--mobile:not([class*="read-more--items-"]):not(.is-expanded) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--read-more-lines);
		overflow: hidden;
	}
}

/* Item mode: children past the count are hidden until the button is pressed.
   nth-child cannot read a custom property, so each count is its own rule.
   Front end only (`:not(.editor-styles-wrapper *)`): a hidden child in the
   canvas could not be selected or edited, so the editor shows every item, the
   same exception as a marquee's reduced-motion state (rules.md §5). Never on a
   carousel, which scrolls its items instead. */
:where(.read-more--items-2):not(.is-expanded, .carousel, .read-more--mobile, .editor-styles-wrapper *) > :nth-child(n + 3),
:where(.read-more--items-3):not(.is-expanded, .carousel, .read-more--mobile, .editor-styles-wrapper *) > :nth-child(n + 4),
:where(.read-more--items-4):not(.is-expanded, .carousel, .read-more--mobile, .editor-styles-wrapper *) > :nth-child(n + 5),
:where(.read-more--items-6):not(.is-expanded, .carousel, .read-more--mobile, .editor-styles-wrapper *) > :nth-child(n + 7) {
	display: none;
}

@media (width <= 48rem) {
	:where(.read-more--items-2.read-more--mobile):not(.is-expanded, .carousel, .editor-styles-wrapper *) > :nth-child(n + 3),
	:where(.read-more--items-3.read-more--mobile):not(.is-expanded, .carousel, .editor-styles-wrapper *) > :nth-child(n + 4),
	:where(.read-more--items-4.read-more--mobile):not(.is-expanded, .carousel, .editor-styles-wrapper *) > :nth-child(n + 5),
	:where(.read-more--items-6.read-more--mobile):not(.is-expanded, .carousel, .editor-styles-wrapper *) > :nth-child(n + 7) {
		display: none;
	}
}

/* The cut fades out over the last line and a half: a mask, so it reads as the
   surface behind the text on any palette. Only while the text actually
   overflows the cap (`is-capped`, set by the script with the button), so a
   short block is never faded. */
.read-more.is-capped:not(.is-expanded) {
	mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent); /* 1.6em: a line and a half of the block's own text, no token */
}

/* Items: the last row shown fades over its bottom XL, so it reads as more to come. */
.read-more.is-capped[class*="read-more--items-"]:not(.is-expanded) {
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wp--preset--spacing--xl)), transparent);
}

/* The button: a text link in the link tokens, placed right after the block. */
.read-more__toggle {
	display: inline-block;
	align-self: flex-start; /* in a flex column (a card) stay text-width, not full width */
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--custom--link--color);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--link--underline-offset);
	cursor: pointer;
}

.read-more__toggle:hover {
	color: var(--wp--custom--link--hover);
}

/* Space above the button: XS, tighter than the parent's block gap, so it reads
   as part of the text. Sibling selector (0,2,0) to beat core's flow-layout
   `> * + *` margin, which otherwise hands it the full block gap. In a flex or
   grid parent the gap is not a margin, so it still adds to this. */
.read-more + .read-more__toggle {
	margin-top: var(--wp--preset--spacing--xs);
}

/* Under a grid of cards the button is its own row: M, like the grid's own gaps. */
.read-more[class*="read-more--items-"] + .read-more__toggle {
	margin-top: var(--wp--preset--spacing--m);
}

/* Short text: the script leaves the button `hidden`; the class's display must not override that. */
.read-more__toggle[hidden] {
	display: none;
}