/**
 * Single e-edition: the reader and the library strip beneath it.
 *
 * Colours, radii and spacing come from the theme's own design tokens rather
 * than fixed values, so the library reads as part of the site instead of as a
 * plugin bolted onto it. The card geometry (1px border, 8px radius, cover-fit
 * image) matches the "Ander onlangse uitgawes" cards exactly.
 *
 * @package nm_dp_plugin
 * @since 2.5.0
 */

/* -------------------------------------------------------------------------
 * Reader sizing
 *
 * Issuu's embed reserves height with `padding-top: max(60%, 326px)` on a
 * zero-height box. That aspect-ratio approach is right on a desktop, but on a
 * 375px-wide phone 60% is 225px, so the floor of 326px wins and the entire
 * newspaper is rendered into a box about a third of the screen tall. A broadsheet
 * front page at that size is unreadable.
 *
 * Below the tablet breakpoint the box is switched to a share of the viewport
 * instead. `svh` rather than `dvh` is deliberate: dvh tracks the browser chrome
 * as it hides and shows on scroll, which would resize the iframe mid-read and
 * make the flipbook re-lay-out under the reader's finger. svh is the stable
 * small-viewport value.
 *
 * Height is capped short of the full viewport so a margin of the page stays
 * visible around the reader. A reader taller than the screen is the classic
 * touch scroll trap: every vertical swipe lands inside the iframe and the page
 * itself can no longer be scrolled past it.
 * ---------------------------------------------------------------------- */

.nm-dp-edition-reader {
	position: relative;
	width: 100%;
}

/*
 * `!important` on both properties, not just padding: Issuu's wrapper carries
 * `padding-top: max(60%,326px); height: 0` as an INLINE style, and an inline
 * declaration outranks any stylesheet selector. Overriding only the padding
 * left `height: 0` standing, so the box collapsed to whatever min-height
 * provided and the fix silently did almost nothing.
 */
@media (max-width: 781px) {
	.nm-dp-edition-reader {
		padding-top: 0 !important;
		height: 78vh !important; /* Fallback for browsers without svh. */
		height: 78svh !important;
		min-height: 420px;
	}
}

/* Phone landscape: vertical space is scarce, so give the reader nearly all of
   it rather than a proportion of a very short viewport. */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) {
	.nm-dp-edition-reader {
		padding-top: 0 !important;
		height: 92vh !important;
		height: 92svh !important;
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------
 * Scroll veil
 *
 * A cross-origin iframe swallows every wheel tick and touch drag over it, so
 * the page could not be scrolled past the reader — on a phone, where the reader
 * fills most of the screen, there was nowhere left to swipe. The veil sits over
 * the iframe until the reader is deliberately activated.
 * ---------------------------------------------------------------------- */

.nm-dp-reader-shell {
	position: relative;
}

.nm-dp-reader-veil {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 0 1.25rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	/* Above the iframe, below anything the theme floats over the page. */
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
}

.nm-dp-reader-shell.is-active .nm-dp-reader-veil {
	display: none;
}

.nm-dp-reader-veil__hint {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #c8102e);
	color: var(--wp--preset--color--base, #fff);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
	/* The hint is a label for the veil, never a separate click target. */
	pointer-events: none;
}

.nm-dp-reader-veil:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: -3px;
}

@media (hover: hover) {
	.nm-dp-reader-veil:hover .nm-dp-reader-veil__hint {
		background: var(--wp--preset--color--primary-alt, var(--wp--preset--color--primary, #c8102e));
	}
}

/* -------------------------------------------------------------------------
 * Library strip
 * ---------------------------------------------------------------------- */

.nm-dp-library {
	margin-block: var(--wp--style--block-gap, 2rem);
}

.nm-dp-library__intro {
	margin-block: 0 1.5rem;
	color: var(--wp--preset--color--main, inherit);
	opacity: 0.7;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
}

/*
 * A scroll-snapping row on narrow screens, a wrapping grid once there is room.
 * No JavaScript: the browser's own overflow scrolling is smoother than anything
 * a carousel script would do, and it keeps working if scripts fail.
 */
.nm-dp-library__list {
	display: grid;
	grid-auto-flow: column;
	/*
	 * A fixed range rather than 1fr. With `1fr` a short library stretched each
	 * cover to fill the row — two editions on a tablet produced two 337px
	 * covers, which reads as a gallery rather than a picker. Clamped, the strip
	 * looks the same whether the reader has two back issues or twelve.
	 */
	grid-auto-columns: clamp(118px, 30vw, 165px);
	gap: var(--wp--style--block-gap, 1.5rem);
	margin: 0;
	padding: 0 0 0.75rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

@media (min-width: 782px) {
	.nm-dp-library__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-auto-columns: auto;
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

.nm-dp-library__item {
	scroll-snap-align: start;
	margin: 0;
}

.nm-dp-library__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	text-decoration: none;
	color: var(--wp--preset--color--main, inherit);
}

/* Matches the theme's edition cards: 1px border, 8px radius, cover-fit image. */
.nm-dp-library__card {
	display: block;
	border: 1px solid var(--wp--preset--color--border-light, #f0f0f0);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 150ms ease, transform 150ms ease;
}

.nm-dp-library__figure {
	margin: 0;
}

.nm-dp-library__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 794 / 1148;
	object-fit: cover;
}

.nm-dp-library__title {
	font-size: var(--wp--preset--font-size--small, 0.85rem);
	line-height: 1.3;
}

.nm-dp-library__link:hover .nm-dp-library__card,
.nm-dp-library__link:focus-visible .nm-dp-library__card {
	border-color: var(--wp--preset--color--primary, currentColor);
}

/* A visible focus ring is the keyboard user's only position indicator here. */
.nm-dp-library__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (hover: hover) {
	.nm-dp-library__link:hover .nm-dp-library__card {
		transform: translateY(-2px);
	}
}

/*
 * The edition being read. Marked by more than colour: a heavier border, a weight
 * change and a text badge, so it is still identifiable without colour
 * perception and to a screen reader via aria-current on the link.
 */
.nm-dp-library__item.is-current .nm-dp-library__card {
	border-color: var(--wp--preset--color--primary, currentColor);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary, currentColor);
}

.nm-dp-library__item.is-current .nm-dp-library__title {
	font-weight: 700;
}

/* Only ever rendered on the current edition. */
.nm-dp-library__badge {
	align-self: flex-start;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #c8102e);
	color: var(--wp--preset--color--base, #fff);
	font-size: 0.7rem;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
	.nm-dp-library__card {
		transition: none;
	}

	.nm-dp-library__link:hover .nm-dp-library__card {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.nm-dp-library__item.is-current .nm-dp-library__card {
		box-shadow: 0 0 0 2px var(--wp--preset--color--primary, currentColor);
	}
}