/**
 * izebuy reusable sidebar widgets.
 * Card chrome + the internals for the four brand widgets (Latest Blog, News,
 * Sign-up CTA, Ad). Class-based and unscoped, so a widget looks the same in any
 * sidebar (home columns now, blog later).
 * Depends on: tokens.css
 */

/* ── Widget card ────────────────────────────────────────────────────────── */
.ize-widget {
	background: var(--ize-surface);
	border: 1px solid var(--ize-line);
	border-radius: var(--ize-radius);
	padding: var(--ize-4);
	margin-bottom: var(--ize-4);
}
.ize-widget:last-child {
	margin-bottom: 0;
}
.ize-widget__title {
	margin: 0 0 var(--ize-3);
	font-size: var(--ize-fs-xs);
	font-weight: 700;
	color: var(--ize-ink-2);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
/* Editor-only "configure me" hint (visitors never see this). */
.ize-widget__note {
	margin: 0;
	padding: var(--ize-3);
	border: 1px dashed var(--ize-line);
	border-radius: var(--ize-radius-sm);
	background: var(--ize-surface-2);
	color: var(--ize-ink-3);
	font-size: var(--ize-fs-xs);
	font-style: italic;
}

/* ── Latest blog posts ──────────────────────────────────────────────────── */
.ize-widget-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Compact list row: a small image on the left, title + excerpt + date on the
 * right. The image is a little bigger than before but the item stays a slim
 * preview, not a card. */
.ize-wp {
	display: flex;
	align-items: flex-start;
	gap: var(--ize-3);
	padding: var(--ize-3) 0;
	border-bottom: 1px solid var(--ize-line);
}
.ize-wp:first-child {
	padding-top: 0;
}
.ize-wp:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.ize-wp__thumb {
	flex: 0 0 80px;   /* a little bigger than the old 56px, still a small preview */
	line-height: 0;
}
.ize-wp__thumb img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--ize-radius-sm);
	display: block;
}
.ize-wp__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ize-wp__title {
	font-size: var(--ize-fs-sm);
	font-weight: 600;
	line-height: var(--ize-lh-heading);
	color: var(--ize-ink);
	text-decoration: none;
}
.ize-wp__title:hover {
	color: var(--ize-accent);
}
/* A short teaser beside the image, capped at two lines so the row stays compact. */
.ize-wp__excerpt {
	font-size: var(--ize-fs-xs);
	line-height: 1.35;
	color: var(--ize-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ize-wp__date {
	font-size: var(--ize-fs-xs);
	color: var(--ize-ink-3);
}

/* ── Newspaper (izebuy · Newspaper widget) ──────────────────────────────────
 * A whole printed newspaper, no card chrome. The widget adds `ize-paper-host`
 * to its sidebar wrapper so we can strip the usual border/padding/background —
 * the `.ize-paper` sheet supplies its own look: crumpled newsprint (pure CSS,
 * no image asset), serif type, a masthead, and stories you flip through one
 * page at a time (newspaper.js). Paper colour is themeable per widget (sepia /
 * grey / classic). To use a real crumpled photo instead, set `--paper-texture`
 * to a `url(...)`; to print photos in colour, set `--paper-photo-filter: none`.
 *
 * NB: type sizes in here are intentionally SELF-CONTAINED — fixed rem values,
 * not the global --ize-fs-* scale. It's a standalone "printed paper" widget, so
 * it keeps its own proportions regardless of the site-wide scale or the +5 bump.
 * Don't fold these back into the tokens. */
.widget.ize-paper-host,
.ize-paper-host {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.ize-paper {
	--paper-ink: #1c1814;
	--paper-bg: #f3efe2;
	--paper-rule: rgba(28, 24, 20, 0.32);
	/* Fixed reader height: every story shows in the same-size box, so a page turn
	 * never resizes the widget (and never shoves the widgets below it around).
	 * Trimmed so the whole sheet reads as a shorter newspaper-portrait rectangle;
	 * overflowing copy is simply clipped to this height. Tune this value to taste. */
	--paper-page-h: 220px;
	--paper-photo-filter: grayscale(1) contrast(1.05);
	--paper-texture: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
	position: relative;
	/* Keep the sheet a newspaper-portrait rectangle: cap the width so it stays
	 * proportionate to the trimmed height (about a 2:3 portrait) instead of
	 * stretching wide on a roomy sidebar, and centre it within the column. */
	max-width: 260px;
	margin-inline: auto;
	padding: var(--ize-5) var(--ize-5) var(--ize-4);
	overflow: hidden;
	color: var(--paper-ink);
	font-family: Georgia, "Times New Roman", Times, serif;
	background-color: var(--paper-bg);
	/* Layered crease light + shadow to fake the scrunched-up folds, plus two
	 * faint diagonal fold lines. rgba layers composite straight onto the paper. */
	background-image:
		radial-gradient(120% 80% at 14% 6%, rgba(255, 255, 255, 0.55), transparent 44%),
		radial-gradient(100% 70% at 86% 18%, rgba(0, 0, 0, 0.05), transparent 55%),
		radial-gradient(80% 90% at 26% 96%, rgba(0, 0, 0, 0.045), transparent 60%),
		radial-gradient(110% 70% at 74% 78%, rgba(255, 255, 255, 0.32), transparent 52%),
		linear-gradient(116deg, transparent 0 37.5%, rgba(0, 0, 0, 0.03) 38% 38.6%, transparent 39% 100%),
		linear-gradient(248deg, transparent 0 61%, rgba(0, 0, 0, 0.025) 61.4% 62%, transparent 62.4% 100%);
	box-shadow: var(--ize-shadow-lg), inset 0 0 70px rgba(120, 95, 60, 0.13);
	transform: rotate(-0.35deg);
}
/* Paper grain — its own layer so it can multiply onto everything below. */
.ize-paper::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--paper-texture);
	background-size: 160px 160px;
	mix-blend-mode: multiply;
	opacity: 0.32;
	pointer-events: none;
}
.ize-paper > * {
	position: relative;
	z-index: 1;
}

/* Masthead ------------------------------------------------------------------ */
.ize-paper__masthead {
	text-align: left;
	margin-bottom: var(--ize-3);
}
.ize-paper__nameplate {
	margin: 0;
	padding-bottom: 5px;
	border-bottom: 3px double var(--paper-ink);
	color: var(--paper-ink);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 900;
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.ize-paper__dateline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ize-2);
	margin: 0;
	padding: 4px 0;
	border-bottom: 1px solid var(--paper-ink);
	font-size: 0.7rem;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.ize-paper__edition {
	font-weight: 700;
	font-style: normal;
}

/* Story headline + photo ---------------------------------------------------- */
.ize-paper__headline {
	display: block;
	margin-bottom: 2px;
	color: var(--paper-ink);
	font-weight: 800;
	font-size: clamp(1.25rem, 3.6vw, 1.7rem);
	line-height: 1.12;
	text-align: left;
	text-decoration: none;
	text-wrap: balance;
}
.ize-paper__headline:hover,
.ize-paper__headline:focus-visible {
	text-decoration: underline;
}
.ize-paper__byline {
	margin: 0 0 6px;
	font-size: 0.68rem;
	font-style: italic;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	color: color-mix(in srgb, var(--paper-ink) 66%, transparent);
}
/* Photo floated into the top-right corner so the story text wraps down its left
 * side and on underneath it (newspaper style), rather than sitting on top. */
.ize-paper__figure {
	float: right;
	width: 42%;
	max-width: 220px;
	margin: 2px 0 10px 16px;
}
.ize-paper__figure img,
.ize-paper__photo {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--paper-ink);
	filter: var(--paper-photo-filter);
}
.ize-paper__article::after {
	content: "";
	display: block;
	clear: both;
}
.ize-paper__body {
	margin: 0 0 0.6em;
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: justify;
	hyphens: auto;
}
.ize-paper__body:last-child {
	margin-bottom: 0;
}
/* Drop cap opening the story. */
.ize-paper__body--lead::first-letter {
	float: left;
	margin: 4px 8px 0 0;
	font-size: 3.1em;
	line-height: 0.66;
	font-weight: 800;
}

/* Reader: the stack of story "pages". Progressive enhancement — without JS the
 * pages stack and stay readable; newspaper.js adds `is-interactive`, which shows
 * one page at a time and turns them with a flip. */
.ize-paper__reader {
	position: relative;
}
.ize-paper__page {
	padding-top: var(--ize-3);
	border-top: 3px double var(--paper-ink);
}
.ize-paper__page:first-child {
	padding-top: 0;
	border-top: 0;
}

.ize-paper.is-interactive .ize-paper__pages {
	position: relative;
	/* Fixed height (see --paper-page-h): the reader is the same size on every
	 * story, so turning a page can't resize the widget or shove the widgets below
	 * it around. */
	height: var(--paper-page-h, 220px);
	cursor: pointer;
	touch-action: pan-y;
}
.ize-paper.is-interactive .ize-paper__page {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;            /* clip this story's copy to the fixed-size page */
	padding-top: 0;
	border-top: 0;
}
.ize-paper.is-interactive .ize-paper__page.is-active {
	display: block;
}
/* A headline can't grow the box: cap it at two lines and ellipsise the rest. */
.ize-paper.is-interactive .ize-paper__headline {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Flip stage: wraps the sheet and holds the 3D perspective; it does NOT clip, so
 * the page can swing up out of the sheet's own bounds as it opens. */
.ize-paper-stage {
	position: relative;
	perspective: 1700px;
}

/* The page-turn. newspaper.js drops a clone of the whole sheet on top of the live
 * widget and flips it open about the left-hand spine — it swings over and away,
 * revealing the next story beneath. The hidden back face lets the single sheet
 * vanish cleanly as it passes edge-on. Built and torn down per turn, so at rest
 * it costs nothing. */
.ize-paper-flip {
	--ize-flip-duration: 0.6s;
	--ize-flip-turn: -170deg;   /* how far the sheet swings open over the spine */
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	transform-origin: left center;   /* the spine, down the left-hand edge */
	transform: rotate(-0.35deg) rotateY(0deg);
	backface-visibility: hidden;
	will-change: transform;
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
	transition: transform var(--ize-flip-duration) cubic-bezier(0.40, 0.02, 0.22, 1);
}
.ize-paper-flip.is-open {
	transform: rotate(-0.35deg) rotateY(var(--ize-flip-turn));
}

/* Navigation — hidden until JS upgrades the reader. */
.ize-paper__nav {
	display: none;
}
.ize-paper.is-interactive .ize-paper__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ize-3);
	margin-top: var(--ize-3);
	padding-top: var(--ize-2);
	border-top: 1px solid var(--paper-ink);
}
.ize-paper__btn {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--paper-ink);
	background: transparent;
	border: 1px solid var(--paper-ink);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s var(--ize-ease, ease), color 0.15s var(--ize-ease, ease);
}
.ize-paper__btn:hover,
.ize-paper__btn:focus-visible {
	background: var(--paper-ink);
	color: var(--paper-bg);
}
.ize-paper__counter {
	font-size: 0.72rem;
	font-style: italic;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--paper-ink) 70%, transparent);
}

/* Paper colour themes (per-widget setting). Newsprint is the default above. */
.ize-paper.ize-paper--sepia {
	--paper-bg: #e7d4ab;
	--paper-ink: #3c2a14;
	--paper-rule: rgba(60, 42, 20, 0.34);
}
.ize-paper.ize-paper--grey {
	--paper-bg: #d8d9d4;
	--paper-ink: #1f201d;
	--paper-rule: rgba(31, 32, 29, 0.32);
}
.ize-paper.ize-paper--classic {
	--paper-bg: #fbfaf6;
	--paper-ink: #15130f;
	--paper-rule: rgba(21, 19, 15, 0.30);
}

/* Respect reduced-motion: no page-turn animation (newspaper.js also skips the
 * flip clone and just swaps the story instantly). */
@media (prefers-reduced-motion: reduce) {
	.ize-paper-flip {
		display: none;
	}
}

/* ── Sign-up call to action ─────────────────────────────────────────────── */
.ize-cta {
	text-align: center;
}
.ize-cta__media {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--ize-3);
	border-radius: var(--ize-radius-sm);
}
.ize-cta__text {
	margin: 0 0 var(--ize-4);
	font-size: var(--ize-fs-sm);
	color: var(--ize-ink-2);
}
.ize-cta__btn {
	display: inline-block;
	width: 100%;
	padding: var(--ize-3) var(--ize-4);
	background: var(--ize-accent);
	color: #fff;
	font-size: var(--ize-fs-sm);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--ize-radius-pill);
	transition: background 0.2s var(--ize-ease, ease);
}
.ize-cta__btn:hover,
.ize-cta__btn:focus {
	background: var(--ize-accent-700);
	color: #fff;
}

/* ── Ad slot ────────────────────────────────────────────────────────────── */
.ize-ad {
	text-align: center;
	overflow: hidden;
}
.ize-ad img,
.ize-ad ins,
.ize-ad iframe {
	max-width: 100%;
}

/* ── Ad categories ───────────────────────────────────────────────────────────
 * Clean, professional category list (desktop sidebar): name on the left, a
 * muted count pill on the right, a subtle brand-tinted hover row, and a clear
 * active state (brand tint + left accent bar). The brand colour is pulled from
 * Theme Options via --ize-accent, so it always matches the site. */
.ize-cats {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ize-cats__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ize-3);
	padding: var(--ize-3) var(--ize-2);
	border-radius: var(--ize-radius-sm);
	color: var(--ize-ink);
	font-size: var(--ize-fs-sm);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background 0.15s var(--ize-ease, ease), color 0.15s var(--ize-ease, ease);
}
.ize-cats__link:hover,
.ize-cats__link:focus-visible {
	background: color-mix(in srgb, var(--ize-accent) 8%, transparent);
	color: var(--ize-accent);
}
.ize-cats__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ize-cats__count {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: var(--ize-radius-pill);
	background: var(--ize-surface-2);
	color: var(--ize-ink-3);
	font-size: var(--ize-fs-xs);
	font-weight: 600;
	transition: background 0.15s var(--ize-ease, ease), color 0.15s var(--ize-ease, ease);
}
.ize-cats__link:hover .ize-cats__count,
.ize-cats__link:focus-visible .ize-cats__count {
	background: color-mix(in srgb, var(--ize-accent) 14%, transparent);
	color: var(--ize-accent);
}
/* Active category — current archive or active ?category= filter. */
.ize-cats__item--active .ize-cats__link {
	background: color-mix(in srgb, var(--ize-accent) 8%, transparent);
	box-shadow: inset 3px 0 0 var(--ize-accent);
	color: var(--ize-accent);
	font-weight: 700;
}
.ize-cats__item--active .ize-cats__count {
	background: color-mix(in srgb, var(--ize-accent) 14%, transparent);
	color: var(--ize-accent);
}