/**
 * PPB Core — utility helpers (single-purpose classes).
 * Prefix: ppb-u-
 * Spacing tokens: see tokens.css (--ppb-space-stack-*, --ppb-space-after-heading).
 */

/* Visually hidden but available to screen readers */
.ppb-u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Same as sr-only until focused/activated (e.g. skip / form submit controls). */
.ppb-u-sr-only-focusable:not(:focus):not(:focus-within):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Light panel background — use with component BEM blocks (gift card, split-banner column, room panel, …) */
.ppb-u-surface-panel {
	background: var(--ppb-color-surface-panel, #f9f9fb);
}

/*
 * Prose — WYSIWYG/HTML columns (page builder text blocks, text-image copy, …).
 * Max width, vertical rhythm, lists, and headings use body text colour (not brand primary).
 */
.ppb-u-prose {
	max-width: var(--ppb-measure-prose, 65ch);
	color: var(--ppb-color-text, #1a1a1a);
}

.ppb-u-prose > * {
	margin-block: 0;
}

.ppb-u-prose > * + * {
	margin-block-start: var(--ppb-space-stack-sm);
}

.ppb-u-prose > :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-display, inherit);
	font-weight: var(--ppb-font-weight-display-strong, 600);
	line-height: var(--ppb-leading-tight, 1.3);
	color: var(--ppb-color-text, #1a1a1a);
}

.ppb-u-prose > h1 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.ppb-u-prose > h2 {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.ppb-u-prose > h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.ppb-u-prose > h4 {
	font-size: var(--ppb-text-xl, 1.25rem);
}

.ppb-u-prose > h5,
.ppb-u-prose > h6 {
	font-size: var(--ppb-text-lg, 1.125rem);
}

/* A bit more air before headings than between body paragraphs. */
.ppb-u-prose > * + :is(h2, h3, h4, h5, h6) {
	margin-block-start: var(--ppb-space-stack-md);
}

.ppb-u-prose > h1 + * {
	margin-block-start: var(--ppb-space-stack-sm);
}

.ppb-u-prose > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--ppb-space-after-heading);
}

/*
 * Do not use `margin: 0` on p / ul / ol / blockquote — it beats `.ppb-u-prose > * + *` (same “column”
 * but higher specificity) and strips vertical rhythm between stacked blocks.
 */
.ppb-u-prose :is(ul, ol) {
	margin-inline: 0;
	margin-block-end: 0;
	padding-inline-start: 1.25em;
}

.ppb-u-prose ul {
	list-style-type: disc;
}

.ppb-u-prose ol {
	list-style-type: decimal;
}

.ppb-u-prose li {
	margin-block-start: 0.35em;
}

.ppb-u-prose :is(ul, ol) > li:first-child {
	margin-block-start: 0;
}

.ppb-u-prose :is(ul, ol) :is(ul, ol) {
	margin-block: 0.5em;
}

.ppb-u-prose :is(ul, ol) ul {
	list-style-type: circle;
}

.ppb-u-prose blockquote {
	margin-inline: 0;
	margin-block-end: 0;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--color-secondary, #1e374b);
	font-style: italic;
}

.ppb-u-prose blockquote > * + * {
	margin-block-start: var(--ppb-space-stack-xs);
}

/* Editors often wrap each list item in <p> — don’t stack paragraph margins inside <li>. */
.ppb-u-prose li > p {
	margin: 0;
}

.ppb-u-prose li > p + p {
	margin-block-start: var(--ppb-space-stack-xs);
}

/*
 * Shared underline for text links — `currentColor` keeps underline in sync with the element’s colour
 * (prose anchors, cancelled-policy label on room cards, …).
 */
.ppb-u-text-link-underline,
.ppb-u-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: 0.2em;
	transition:
		color var(--ppb-transition-base, 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94)),
		text-decoration-color var(--ppb-transition-base, 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

.ppb-u-prose a {
	color: var(--color-secondary);
}

.ppb-u-prose a:hover,
.ppb-u-prose a:focus-visible {
	color: color-mix(in srgb, var(--color-secondary) 82%, black);
	text-decoration-color: color-mix(in srgb, var(--color-secondary) 82%, black);
}

/* Vertical stacks — parent must be a flex column or CSS grid; gap uses global tokens */
.ppb-u-flex-col-gap-sm {
	display: flex;
	flex-direction: column;
	gap: var(--ppb-space-stack-sm);
}

.ppb-u-flex-col-gap-md {
	display: flex;
	flex-direction: column;
	gap: var(--ppb-space-stack-md);
}

.ppb-u-flex-col-gap-lg {
	display: flex;
	flex-direction: column;
	gap: var(--ppb-space-stack-lg);
}

.ppb-u-flex-col-gap-xl {
	display: flex;
	flex-direction: column;
	gap: var(--ppb-space-stack-xl);
}

/*
 * Responsive card grid — 3 → 2 (@56rem) → 1 (@36rem).
 * Used by event-card-grid and venue-finder.
 */
.ppb-u-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
}

@media (max-width: 56rem) {
	.ppb-u-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 36rem) {
	.ppb-u-card-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Section / card titles — consistent space before following body content */
.ppb-u-me-after-heading {
	margin-block-end: var(--ppb-space-after-heading);
}

/* margin-block-start — space before this block (after a sibling or page chrome) */
.ppb-u-ms-stack-xs {
	margin-block-start: var(--ppb-space-stack-xs);
}

.ppb-u-ms-stack-sm {
	margin-block-start: var(--ppb-space-stack-sm);
}

.ppb-u-ms-stack-md {
	margin-block-start: var(--ppb-space-stack-md);
}

.ppb-u-ms-stack-lg {
	margin-block-start: var(--ppb-space-stack-lg);
}

.ppb-u-ms-stack-xl {
	margin-block-start: var(--ppb-space-stack-xl);
}

/* ------------------------------------------------------------------
   Typography micro-polish
   - `balance` stops orphaned words on headings ("one word on line 2")
   - `pretty` evens out paragraph ragging and reduces ugly line breaks
   Both degrade to default wrapping in older browsers (harmless).
   ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p,
li,
dd,
blockquote {
	text-wrap: pretty;
}

/* ------------------------------------------------------------------
   Text selection
   Use secondary accent so selection is visible but on-brand.
   Foreground uses page surface for readable contrast.
   ------------------------------------------------------------------ */

::selection {
	background: var(--color-secondary);
	color: var(--ppb-color-surface-page, #fff);
}