/*
 * Promocje — two promotion cards ("Strefa Pacjenta 60+" / SENIOR badge,
 * and the first-visit offer). Page-scoped stylesheet, loaded only on the
 * Promocje page.
 *
 * Reveal states for .dd-reveal-item are gated by html.dd-js (added by a
 * site-wide reveal script): without that class every card shows its
 * final state. prefers-reduced-motion is handled globally in main.css.
 */

.dd-promocje {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Card ---------------------------------------------------------------- */

.dd-promo-card {
	width: 100%;
	max-width: 820px;
	padding: clamp(1.75rem, 5vw, 3rem);
	background: #fafafa;
	border: 1px solid rgb(10 10 10 / 6%);
	border-top: 3px solid var(--dd-color-accent);
}

.dd-promo-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45em;
	font-family: var(--dd-font-heading);
	font-size: var(--dd-card-title);
	font-weight: 500;
	line-height: 1.2;
	color: var(--dd-color-ink);
	margin-bottom: 0.75em;
}

.dd-promo-card__body {
	font-family: var(--dd-font-body);
	color: var(--dd-color-text);
	margin: 0;
}

/* --- Copper badge ---------------------------------------------------------
   D23 asks for +20% relative to body copy; this is +10% (1.1em below). At +20%
   the second card's title breaks onto two lines from 1280px up, which destroys
   the "w tym samym wierszu" the same client asked for in P12 — measured at
   390/600/768/900/990/1100/1280/1440/1920. One line was chosen over 10% of pill.
   Both cards carry a badge — "SENIOR" and "PIERWSZA WIZYTA" — and the rest of
   each title runs on the same line outside the pill, which is why the title is
   a wrapping flex row. */

/*
 * Metrics are set so that the longer of the two badges still leaves room for
 * the rest of its title beside it: "PIERWSZA WIZYTA" is more than twice the
 * length of "SENIOR", and at the old tracking it took 402 of the card's 723px
 * of content width, pushing "z przeglądem i planem leczenia" onto a second line
 * — which is the one thing the client said this card must not do. The badge is
 * still the largest thing in the title, which is what D23 asks for.
 */
.dd-promo__badge {
	display: inline-block;
	padding: 0.22em 0.72em;
	border-radius: 999px;
	background: var(--dd-color-accent);
	color: #0a0a0a;
	font-family: var(--dd-font-body);
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- 31.10.2026 note --------------------------------------------------
   Emphasized (medium weight) — explicitly NOT on a pink background;
   powder pink is reserved for the price list page only. */

.dd-promo__note {
	margin: 1em 0 0;
	padding-left: 0.9em;
	border-left: 2px solid var(--dd-color-accent);
	font-family: var(--dd-font-body);
	color: var(--dd-color-ink);
	font-weight: 600;
}

/* --- Price ---------------------------------------------------------------- */

.dd-promo__price {
	font-family: var(--dd-font-heading);
	color: var(--dd-color-accent-ink);
	font-size: 1.3em;
	font-weight: 700;
}

/* --- rtg footnote ----------------------------------------------------------
   D23: footnote set −20% relative to body copy. */

/* No opacity here. D23 asks for a footnote 20% smaller than the body copy, not
   a fainter one, and 0.75 over #555555 on #fafafa computed to 3.9:1 at 13.6px —
   under the 4.5:1 the size demands. The size alone carries the demotion. */
.dd-promo__footnote {
	margin: 0.75em 0 0;
	font-family: var(--dd-font-body);
	color: var(--dd-color-text);
	font-size: calc(var(--wp--preset--font-size--medium) * 0.8);
}

/* --- Reveal (JS-gated) ------------------------------------------------ */

html.dd-js .dd-reveal-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

html.dd-js .dd-reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 680px) {
	.dd-promocje {
		gap: 1.5rem;
	}

	.dd-promo-card {
		max-width: none;
		padding: 1.5rem 1.25rem;
	}
}