/*
 * Packed Plans blocks — shared primitives.
 *
 * Registered as the style handle `packedplans-shared` and listed in every block.json's "style"
 * array, so WordPress still only serves it when one of these blocks is on the page. It holds the
 * pieces more than one block renders: the CTA, the chip, the eyebrow rule, the card figure, the
 * delta glyphs, the callout and the two card shells.
 *
 * It only ever CONSUMES --pp-* tokens; the theme's assets/css/tokens.css is the only file that
 * defines them. The one exception is .pp-u-visually-hidden, repeated here byte-identically so a
 * block is never a leaking screen-reader span if it renders before the theme's CSS.
 */

.pp-u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ eyebrow rule */

.pp-rule {
	display: block;
	width: 24px;
	height: 2px;
	/* Optical alignment: the cap of the rule lines up with the stem of the first letter. */
	margin-left: -1px;
	background: var(--pp-accent);
}

.pp-hero__eyebrow,
.pp-costs__title,
.pp-tiers__title,
.pp-duration__title,
.pp-stays__title,
.pp-acts__title,
.pp-itin__title,
.pp-faq__title {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: var(--pp-space-3);
}

/* ------------------------------------------------------------------ chips */

.pp-chip {
	display: inline-block;
	padding: var(--pp-space-1) var(--pp-space-2);
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface-2);
	color: var(--pp-text);
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-ui);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.pp-chip--best {
	background: var(--pp-success-weak);
	color: var(--pp-success);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.pp-chip--peak {
	background: var(--pp-warn-weak);
	color: var(--pp-warn);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.pp-chip--rec {
	background: var(--pp-accent-weak);
	color: var(--pp-text);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--pp-fs-micro);
}

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

.pp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pp-space-2);
	min-height: 48px;
	text-decoration: none;
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-body);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
}

.pp-cta--solid {
	width: 100%;
	padding: 14px 20px;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-cta-bg);
	color: var(--pp-cta-text);
}

.pp-cta--link {
	min-height: 44px;
	padding: var(--pp-space-2) 0;
	color: var(--pp-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pp-cta__arrow {
	display: inline-block;
	transition: transform var(--pp-dur-fast) var(--pp-ease);
}

@media (hover: hover) {
	.pp-cta:hover .pp-cta__arrow {
		transform: translateX(2px);
	}

	.pp-cta--solid:hover {
		background: color-mix(in srgb, var(--pp-cta-bg) 88%, var(--pp-cta-text));
	}
}

.pp-cta:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--pp-shadow-focus);
	border-radius: var(--pp-radius-pill);
}

.pp-cta--solid:focus-visible {
	/* The ring needs separation from the accent fill it sits on (DESIGN §5.3). */
	box-shadow: 0 0 0 2px var(--pp-surface), var(--pp-shadow-focus);
}

/* G5: full contrast, never muted grey. */
.pp-cta__note {
	margin: var(--pp-space-2) 0 0;
	color: var(--pp-text);
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-ui);
}

/* ------------------------------------------------------------------ card figures */

.pp-figure__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--pp-ratio, 3 / 2);
	object-fit: cover;
	transition: transform var(--pp-dur-slow) var(--pp-ease);
}

/* No photo is better than a broken frame or someone else's stock photo (DESIGN §5.2). */
.pp-figure__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--pp-ratio, 3 / 2);
	background: var(--pp-surface-2);
	color: var(--pp-text-muted);
	font-family: var(--pp-font-display);
	font-weight: var(--pp-fw-display, 400);
	font-size: var(--pp-fs-display);
	line-height: 1;
}

/* ------------------------------------------------------------------ deltas */

.pp-delta {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.pp-delta--down {
	color: var(--pp-success);
}

.pp-delta--up {
	color: var(--pp-warn);
}

/* ------------------------------------------------------------------ callout */

.pp-callout {
	padding: var(--pp-space-4);
	border-radius: var(--pp-radius-md);
	border-left: 3px solid var(--pp-accent);
	background: var(--pp-surface-2);
}

.pp-callout__label {
	margin: 0 0 var(--pp-space-2);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pp-callout__body {
	margin: 0;
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
}

/* ------------------------------------------------------------------ card shells */

.pp-stay,
.pp-act {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
	/* Borders, not shadows. */
	box-shadow: var(--pp-shadow-0);
	transition: border-color var(--pp-dur) var(--pp-ease);
}

@media (hover: hover) {
	.pp-stay:hover,
	.pp-act:hover {
		border-color: var(--pp-border-strong);
	}

	.pp-stay:hover .pp-figure__img,
	.pp-act:hover .pp-figure__img {
		transform: scale(1.03);
	}
}

.pp-stay__media,
.pp-act__media {
	position: relative;
	margin: 0;
}

.pp-stay__media {
	overflow: hidden;
}

/*
 * The activity numeral overhangs the media by 12px (DESIGN §6.7), so the clip that keeps the
 * hover scale inside its frame (polish #5) lives on an inner element and not on the <figure>
 * itself — clipping there would shave the overlap off and the numeral would read as flush.
 */
.pp-act__frame {
	display: block;
	overflow: hidden;
}

.pp-stay__body,
.pp-act__body {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
	padding: var(--pp-space-4);
}

@media (min-width: 37.5em) {
	.pp-stay__body,
	.pp-act__body {
		padding: var(--pp-space-5);
	}
}

.pp-stay__area {
	margin: 0;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pp-stay__name,
.pp-act__name {
	margin: 0;
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display, 400);
	line-height: var(--pp-lh-heading);
}

.pp-stay__price {
	margin: 0;
}

.pp-stay__why,
.pp-act__why {
	margin: 0;
	color: var(--pp-text);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
}

.pp-stay__cta {
	margin-top: auto;
	padding-top: var(--pp-space-3);
}

.pp-act__cta {
	margin: auto 0 0;
	padding-top: var(--pp-space-3);
}

/* The magazine numeral is decoration: the ordered list already carries the position. */
.pp-act__num {
	position: absolute;
	left: 0;
	bottom: -12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--pp-brand-sun);
	color: var(--pp-brand-ink);
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h4);
	font-weight: var(--pp-fw-display, 400);
	font-variant-numeric: tabular-nums;
}

@media print {
	.pp-stay,
	.pp-act {
		break-inside: avoid;
	}

	.pp-act__num {
		display: none;
	}
}