/* =========================================================
   Promocje Solofit

   Messages that come back across the site, drawn the way
   the sections already draw their small print:

   .sf-promo--chips  a row of badges, hairline border and a
                     line icon, like the tags on the report
                     page; the discount is the warm one.
   .sf-promo--cards  short cards with a yellow octagon badge,
                     for the price list; the price card
                     (--wide) spans the row.

   --dark and --light follow the section they sit in.
   ========================================================= */

.sf-promo {
	--sfpr-ink: #0d0d0d;
	--sfpr-paper: #f2f0eb;
	--sfpr-accent: #f2b705;

	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Barlow", sans-serif;
}

.sf-promo *,
.sf-promo *::before,
.sf-promo *::after {
	box-sizing: border-box;
}

.sf-promo > li {
	margin: 0;
}

.sf-promo--dark {
	--sfpr-text: rgba(242, 240, 235, .86);
	--sfpr-strong: var(--sfpr-paper);
	--sfpr-muted: rgba(242, 240, 235, .66);
	--sfpr-line: rgba(242, 240, 235, .16);
	--sfpr-ico: var(--sfpr-accent);
	--sfpr-hot-line: rgba(242, 183, 5, .5);
	--sfpr-hot-bg: rgba(242, 183, 5, .08);
	--sfpr-card: rgba(242, 240, 235, .03);
}

.sf-promo--light {
	--sfpr-text: var(--sfpr-ink);
	--sfpr-strong: var(--sfpr-ink);
	--sfpr-muted: rgba(13, 13, 13, .68);
	--sfpr-line: rgba(13, 13, 13, .14);
	--sfpr-ico: var(--sfpr-ink);
	--sfpr-hot-line: rgba(13, 13, 13, .2);
	--sfpr-hot-bg: rgba(242, 183, 5, .18);
	--sfpr-card: rgba(255, 255, 255, .5);
}

/* ---------- badges ---------- */

.sf-promo--chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.sf-promo__chip {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .5rem .85rem;
	border: 1px solid var(--sfpr-line);
	border-radius: 3px;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--sfpr-text);
}

.sf-promo__chip .sf-promo__i {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	color: var(--sfpr-ico);
}

.sf-promo__chip--hot {
	border-color: var(--sfpr-hot-line);
	background: var(--sfpr-hot-bg);
	font-weight: 600;
	color: var(--sfpr-strong);
}

/* ---------- cards ---------- */

.sf-promo--cards {
	display: grid;
	gap: .75rem;
	width: 100%;
}

.sf-promo__card {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: .9rem;
	align-items: start;
	padding: 1rem 1.1rem;
	border: 1px solid var(--sfpr-line);
	border-radius: 3px;
	background: var(--sfpr-card);
}

.sf-promo__card--hot {
	border-color: var(--sfpr-hot-line);
	background: var(--sfpr-hot-bg);
}

/* The octagon, the Chakra Petch full stop, as a badge. */
.sf-promo__badge {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--sfpr-accent);
	color: var(--sfpr-ink);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.sf-promo__badge .sf-promo__i {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 1.9;
}

.sf-promo__body {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

.sf-promo__title {
	font-family: "Chakra Petch", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--sfpr-strong);
}

.sf-promo__text {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--sfpr-muted);
	text-wrap: pretty;
}

@media (min-width: 640px) {
	.sf-promo--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The price runs across the row; a card left on its own does too. */
	.sf-promo__card--wide,
	.sf-promo__card--wide + .sf-promo__card:last-child,
	.sf-promo__card:only-child {
		grid-column: 1 / -1;
	}
}

/* ---------- where they sit ---------- */

/* Booking intro: between the copy and the button. */
.sf-book__body > .sf-promo {
	margin-top: .25rem;
}

/* The calendar: under the lead. */
.sfr__head > .sf-promo {
	margin-top: .35rem;
}

/* The price list: under the lead, above the prices. */
.sfx__head > .sf-promo {
	margin-top: .75rem;
}

/* The footer's booking line: the slogan with the badges under it. */
.sf-promo-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-width: 0;
}

/* O nas, closing call to book: centred like the rest of it. */
.sfa--close .sf-promo {
	justify-content: center;
	margin-top: .25rem;
}

@media (forced-colors: active) {
	.sf-promo__badge {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}
}