/* PollyVox v0.14.1 — mobile Stories and resilient typography. */

/* Saved custom font names may not exist on every device. These declarations
   ensure the emitted token always resolves to a legible sans-serif face. */
body,
button,
input,
select,
textarea { font-family: var(--pv-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif); }

h1, h2, h3, h4, h5, h6,
.pv-section__title,
.pv-stories-showcase__head h2,
.pv-story-lead__content h3,
.pv-story-row__content h3 { font-family: var(--pv-font-head, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif); }

/* Keep all Stories content inside the viewport even with long titles. */
.pv-stories-showcase,
.pv-stories-showcase__grid,
.pv-story-stack,
.pv-story-row,
.pv-story-row__content,
.pv-story-row__content h3 { min-width: 0; max-width: 100%; }

.pv-story-row__content h3 {
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Tablet and phone: a single lead followed by full-width horizontal rows.
   This is deliberately independent of the old compact-layout preference so
   an outdated saved setting can never restore the broken two-column view. */
@media (max-width: 1024px) {
	.pv-stories-showcase__grid {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px !important;
	}

	.pv-story-stack {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

@media (max-width: 760px) {
	.pv-stories-showcase {
		padding: 18px 0;
		overflow: clip;
	}

	.pv-stories-showcase__head {
		grid-template-columns: auto minmax(24px, 1fr);
		gap: 14px;
		padding-inline: 0;
		margin-bottom: 18px;
	}

	.pv-stories-showcase__head h2 {
		font-size: clamp(1.9rem, 9vw, 2.65rem);
		line-height: 1.02;
	}

	.pv-story-lead {
		width: 100%;
		min-height: 0 !important;
		aspect-ratio: 16 / 10;
		border-radius: 10px;
	}

	.pv-story-lead__content {
		inset: auto 10px 10px;
		padding: 14px;
		border-radius: 10px;
	}

	.pv-story-lead__content h3 {
		font-size: clamp(1.02rem, 4.8vw, 1.22rem);
		line-height: 1.25;
	}

	.pv-story-lead__content > span {
		display: flex;
		flex-wrap: wrap;
		gap: 5px 12px;
		margin-top: 10px;
		font-size: .72rem;
	}

	.pv-story-row {
		display: grid !important;
		grid-template-columns: 112px minmax(0, 1fr) !important;
		align-items: stretch;
		width: 100%;
		min-height: 84px;
		gap: 10px;
		padding: 8px;
		border-radius: 10px;
	}

	.pv-story-row__media {
		width: 112px !important;
		height: auto !important;
		aspect-ratio: 16 / 9 !important;
		align-self: start;
		border-radius: 10px;
	}

	.pv-story-row__content {
		display: flex;
		flex-direction: column;
		padding: 1px 0;
		overflow: hidden;
	}

	.pv-story-row__content h3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: .9rem;
		line-height: 1.25;
	}

	.pv-story-row__content > span {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 2px 8px;
		margin-top: auto;
		padding-top: 6px;
		font-size: .64rem;
	}
}

@media (max-width: 390px) {
	.pv-story-row { grid-template-columns: 96px minmax(0, 1fr) !important; }
	.pv-story-row__media { width: 96px !important; }
	.pv-story-row__content h3 { font-size: .84rem; }
}