/**
 * Aktion-teaser — card linking to one aktion from inside an article.
 *
 * Two stadier share one card; .is-active / .is-closed selects the
 * variant. Open is loud — yellow edge, pulsing dot, yellow pill CTA.
 * Closed is the same card turned down: grey edge, static dot, muted
 * image, the CTA reduced to a quiet text link.
 *
 * Sizing is driven by a container query, not the viewport, so the card
 * also lays itself out correctly inside a narrow column.
 *
 * Uses theme tokens (--wp--preset--color--amnesty-yellow, gray-*,
 * black) with hardcoded fallbacks, same as petition-action-module.
 */

.petition-teaser {
	--pt-yellow: var(--wp--preset--color--amnesty-yellow, #fcdb00);
	--pt-black:  var(--wp--preset--color--black, #1a1a1a);
	--pt-g100:   var(--wp--preset--color--gray-100, #f5f5f5);
	--pt-g200:   var(--wp--preset--color--gray-200, #ececec);
	--pt-g400:   var(--wp--preset--color--gray-400, #c8c8c8);
	--pt-g600:   var(--wp--preset--color--gray-600, #6a6a6a);

	container-type: inline-size;
	position: relative;
	background: #fff;
	border: 1px solid var(--pt-g200);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--libre-franklin, inherit);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.petition-teaser.is-closed {
	background: var(--pt-g100);
}

.petition-teaser:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* ---------- Layout ---------- */

.petition-teaser__inner {
	display: grid;
	grid-template-columns: 1fr;
}

/* The image only earns its own column once the card is wide enough for
   the text beside it to stay readable. Below that it stacks on top. */
@container (min-width: 480px) {
	.petition-teaser.has-image .petition-teaser__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: stretch;
		/* Keeps the picture from being squeezed into a letterbox when
		   most of the card's parts are switched off. */
		min-height: 220px;
	}

	/* Side by side, the text sets the height and the image fills it.
	   Holding the media to 4:3 here instead would make a wide card as
	   tall as a third of its width, stranding the text in whitespace. */
	.petition-teaser.has-image .petition-teaser__media {
		aspect-ratio: auto;
	}

	.petition-teaser.has-image .petition-teaser__body {
		justify-content: center;
	}
}

/* The ratio lives on the container, and the image is taken out of flow
   inside it. If the image kept `height: 100%` it would both define the
   row height and be sized by it — a cycle the browser resolves by
   inventing a number, which blew every card up to 1500px tall. */
.petition-teaser__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--pt-g100);
	aspect-ratio: 4 / 3;
}

/* rocketways-images-byline wraps a credited image in a relative, inline
   <span class="rw-byline">. That span became the image's containing block,
   and with nothing in flow it measured 0×0 — so the absolute img below
   filled nothing and the teaser showed an empty grey box. Let the span
   fill the media box instead, so the img and the credit both hang off it. */
.petition-teaser__media .rw-byline {
	position: absolute;
	inset: 0;
	display: block;
}

.petition-teaser__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease, filter 0.2s ease;
}

.petition-teaser:hover .petition-teaser__img {
	transform: scale(1.03);
}

/* A finished aktion is history, not a live appeal — the image says so
   before the label does. */
.petition-teaser.is-closed .petition-teaser__img {
	filter: grayscale(0.4);
	opacity: 0.85;
}

.petition-teaser__body {
	padding: 20px 24px 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ---------- Eyebrow ---------- */

.petition-teaser__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 800;
	line-height: 1;
	color: var(--pt-black);
}

.petition-teaser.is-closed .petition-teaser__eyebrow {
	color: var(--pt-g600);
}

.petition-teaser__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--pt-yellow);
	animation: petition-teaser-pulse 2s ease-in-out infinite;
}

.petition-teaser.is-closed .petition-teaser__dot {
	background: var(--pt-g400);
	animation: none;
}

@keyframes petition-teaser-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ---------- Title ---------- */

.petition-teaser__title {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--trade-gothic, 'Trade Gothic Next', Impact, sans-serif);
	font-weight: 800;
	font-size: clamp(1.125rem, 1rem + 0.6cqi, 1.4375rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--pt-black);
}

.petition-teaser__link {
	color: inherit;
	text-decoration: none;
}

/* The whole card is the click target, but only this one link is in the
   tab order and it carries the accessible name. */
.petition-teaser__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.petition-teaser__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Focus lands on the link but must be drawn around the card it covers. */
.petition-teaser:has(.petition-teaser__link:focus-visible) {
	outline: 3px solid var(--pt-black);
	outline-offset: 2px;
}

.petition-teaser__link:focus-visible {
	outline: none;
}

/* ---------- Body text ---------- */

.petition-teaser__text {
	margin: 10px 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--pt-g600);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Letter ---------- */

/* Same serif-in-a-box treatment as the action module, so the letter
   reads as the same document in both places. Capped and scrollable:
   a letter is as long as it needs to be, and a teaser is not. */

.petition-teaser__letter {
	width: 100%;
	margin: 14px 0 0;
}

.petition-teaser__letter-label {
	margin: 0 0 8px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pt-g600);
}

.petition-teaser__letter-body {
	font-family: 'Crimson Pro', Georgia, serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pt-black);
	background: var(--pt-g100);
	padding: 14px 16px;
	max-height: 150px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--pt-yellow) transparent;
	box-shadow: inset 0 -12px 14px -12px rgba(0, 0, 0, 0.12);
	/* The card-wide link overlay sits above everything; without this
	   the letter could be seen but never scrolled. */
	position: relative;
	z-index: 1;
}

.petition-teaser__letter-body:focus-visible {
	outline: 2px solid var(--pt-black);
	outline-offset: 2px;
}

.petition-teaser.is-dark .petition-teaser__letter-body:focus-visible {
	outline-color: var(--pt-yellow);
}

.petition-teaser__letter-body::-webkit-scrollbar { width: 3px; }
.petition-teaser__letter-body::-webkit-scrollbar-thumb { background: var(--pt-yellow); }
.petition-teaser__letter-body > :first-child { margin-top: 0; }
.petition-teaser__letter-body > :last-child { margin-bottom: 0; }
.petition-teaser__letter-body p { margin: 0 0 12px; }

.petition-teaser.is-closed .petition-teaser__letter-body {
	background: #fff;
}

.petition-teaser.is-dark .petition-teaser__letter-label {
	color: rgba(255, 255, 255, 0.6);
}

.petition-teaser.is-dark .petition-teaser__letter-body {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.86);
	box-shadow: inset 0 -12px 14px -12px rgba(0, 0, 0, 0.5);
}

/* ---------- Counter ---------- */

.petition-teaser__count {
	margin: 16px 0 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 8px;
}

.petition-teaser__count-num {
	font-family: var(--wp--preset--font-family--trade-gothic, 'Trade Gothic Next', Impact, sans-serif);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--pt-black);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.petition-teaser__count-label {
	font-size: 0.875rem;
	color: var(--pt-g600);
}

/* ---------- CTA ---------- */

.petition-teaser__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1;
	background: var(--pt-yellow);
	color: var(--pt-black);
	padding: 12px 20px;
	border-radius: 999px;
	transition: background 0.2s ease;
}

/* Darkened from the token rather than a hand-picked hex: the theme's
   amnesty-yellow is #FFFF00 locally but the fallback here is #fcdb00,
   and a fixed hover colour would be wrong against one of them. */
.petition-teaser:hover .petition-teaser__cta {
	background: color-mix(in srgb, var(--pt-yellow) 88%, #000);
}

/* Closed: no form to fill in, so the loud pill would be a false
   promise. Reduced to a text link that still reads as the next step. */
.petition-teaser.is-closed .petition-teaser__cta {
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--pt-black);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--pt-g400);
}

.petition-teaser.is-closed:hover .petition-teaser__cta {
	background: none;
	text-decoration-color: var(--pt-black);
}

.petition-teaser__cta-arrow {
	transition: transform 0.2s ease;
}

.petition-teaser:hover .petition-teaser__cta-arrow {
	transform: translateX(3px);
}

/* ---------- Dark scheme ---------- */

/* Same card, inverted. The yellow stays the one loud thing, so it has
   to carry the accent work the white background used to do: it moves
   onto the count, which is the number the card exists to show. */

.petition-teaser.is-dark {
	background: var(--pt-black);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.petition-teaser.is-dark.is-closed {
	background: #111;
	border-color: rgba(255, 255, 255, 0.1);
}

.petition-teaser.is-dark .petition-teaser__media {
	background: rgba(255, 255, 255, 0.06);
}

.petition-teaser.is-dark .petition-teaser__eyebrow,
.petition-teaser.is-dark .petition-teaser__title {
	color: #fff;
}

.petition-teaser.is-dark.is-closed .petition-teaser__eyebrow {
	color: rgba(255, 255, 255, 0.6);
}

.petition-teaser.is-dark .petition-teaser__text {
	color: rgba(255, 255, 255, 0.72);
}

.petition-teaser.is-dark .petition-teaser__count-num {
	color: var(--pt-yellow);
}

.petition-teaser.is-dark .petition-teaser__count-label {
	color: rgba(255, 255, 255, 0.72);
}

.petition-teaser.is-dark.is-closed .petition-teaser__dot {
	background: rgba(255, 255, 255, 0.4);
}

/* The closed CTA is a text link, so on black it needs light ink. */
.petition-teaser.is-dark.is-closed .petition-teaser__cta {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

.petition-teaser.is-dark.is-closed:hover .petition-teaser__cta {
	text-decoration-color: #fff;
}

.petition-teaser.is-dark:has(.petition-teaser__link:focus-visible) {
	outline-color: var(--pt-yellow);
}

/* ---------- Title hidden ---------- */

/* The link survives the title being switched off — it still carries the
   card's accessible name — but it must take up no room. */
.petition-teaser__link--bare {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* The theme ships .screen-reader-text, but this block is also dropped
   into contexts that may not, so it stands on its own. */
.petition-teaser .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* With the title gone the body would otherwise start with a stray gap. */
.petition-teaser__body > :first-child {
	margin-top: 0;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.petition-teaser,
	.petition-teaser__img,
	.petition-teaser__cta,
	.petition-teaser__cta-arrow {
		transition: none;
	}

	.petition-teaser:hover {
		transform: none;
	}

	.petition-teaser:hover .petition-teaser__img {
		transform: none;
	}

	.petition-teaser__dot {
		animation: none;
	}
}