/* =========================================================
   Cennik Solofit

   The section is an Elementor container, not markup of our
   own, so the owner can drop anything into it. It carries the
   class "sfx" and the ID "cennik", and holds two things: the
   heading widget, and an empty inner container "sfx__slot"
   where the price list goes.

   Cream, like the other light sections, with the same
   symmetric edge shadows so it joins them without a line, a
   soft pool of light and one hairline glyph, a price tag.

   Elementor uses ::before on containers for background
   overlays, so everything here draws on ::after.
   ========================================================= */

.e-con.sfx {
	--sfx-ink: #0d0d0d;
	--sfx-paper: #f2f0eb;
	--sfx-accent: #f2b705;
	--sfx-head: "Chakra Petch";
	--sfx-body: "Barlow";
	/* The screen height in pixels, fixed while the page is open (snippet
	   10385), never svh. */
	--sfx-screen: var(--sf-screen, 820px);

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	width: 100%;
	max-width: none;
	padding: 4.5rem 1.15rem;
	background: radial-gradient(ellipse 95% 620px at 50% 420px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%), #f2f0eb;
	background: radial-gradient(ellipse min(1200px, 95vw) 620px at 50% 420px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%), #f2f0eb;
	box-shadow:
		inset 0 170px 150px -140px rgba(60, 50, 30, .07),
		inset 0 -170px 150px -140px rgba(60, 50, 30, .07);
	color: var(--sfx-ink);
	font-family: var(--sfx-body), sans-serif;
}

/* A price tag with its hole: what things cost. */
.e-con.sfx::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath fill='none' stroke='rgba(13,13,13,.1)' stroke-width='1' vector-effect='non-scaling-stroke' d='M80 10H268L290 32V168L268 190H80L10 100Z M74 88H90L98 96V104L90 112H74L66 104V96Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: clamp(11rem, 44vw, 15rem) auto;
	background-position: right -3.5rem top 2.5rem;
}

/* Everything in the section shares the site's content column: the other
   sections cap their inner box at 84rem and pad it by 3rem, so the text
   runs 78rem wide at most. The section's own padding gives the same edge on
   narrower screens. Elementor gives every widget in a container
   max-width:100% at 0,5,0, so this needs 0,6,0 to hold. */
.elementor.elementor .e-con.sfx > .elementor-element {
	width: 100%;
	max-width: 78rem;
	margin-inline: auto;
}

/* ---------- heading ---------- */

.sfx__head {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	max-width: 40rem;
}

.sfx__eyebrow {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-family: var(--sfx-body, "Barlow"), sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}

.sfx__dot {
	flex: none;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: #f2b705;
}

.sfx__title {
	margin: 0;
	font-family: var(--sfx-head, "Chakra Petch"), sans-serif;
	font-weight: 700;
	font-size: clamp(2.1rem, 8.8vw, 2.8rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: #0d0d0d;
	text-wrap: balance;
}

/* The yellow marker the cream sections use for their accent word. */
.sfx__title em {
	padding: 0 .06em;
	font-style: italic;
	color: #0d0d0d;
	background-image: linear-gradient(rgba(0, 0, 0, 0) 62%, rgba(242, 183, 5, .85) 62%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sfx__lead {
	max-width: 36rem;
	margin: 0;
	font-family: var(--sfx-body, "Barlow"), sans-serif;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(13, 13, 13, .66);
}

/* ---------- the hourly rates ----------
   A table of what one hour costs by time of day, drawn like
   the cards beside it: a hairline frame on a white wash, the
   yellow octagon badges, and a faint tint per time of day.
   From 1200px it stands to the right of the heading, its
   bottom level with the cards; narrower, it follows them.
   The theme styles every table (borders on every cell,
   zebra rows, hover), so each rule here carries two classes. */

.sfx__intro {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.sfx-rates {
	width: 100%;
	max-width: 40rem;
}

.sfx-rates .sfx-rates__table {
	width: 100%;
	margin: 0;
	border: 1px solid rgba(13, 13, 13, .14);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 3px;
	overflow: hidden;
	background: rgba(255, 255, 255, .5);
	font-family: var(--sfx-body, "Barlow"), sans-serif;
	font-size: 1rem;
	color: #0d0d0d;
}

.sfx-rates .sfx-rates__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sfx-rates .sfx-rates__table :is(th, td) {
	padding: .85rem 1rem;
	border: 0;
	border-bottom: 1px solid rgba(13, 13, 13, .08);
	background: transparent;
	line-height: 1.3;
	vertical-align: middle;
	text-align: left;
}

.sfx-rates .sfx-rates__table thead th {
	padding-block: .75rem;
	border-bottom-color: rgba(13, 13, 13, .12);
	white-space: nowrap;
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}

.sfx-rates .sfx-rates__table :is(thead th, td):not(:first-child) {
	text-align: right;
}

.sfx-rates .sfx-rates__table tbody tr:last-child > * {
	border-bottom: 0;
}

/* One tint per time of day: night blue, the calm hours yellow, the peak warm. */
.sfx-rates .sfx-rates__table .sfx-rates__row--moon > *,
.sfx-rates .sfx-rates__table .sfx-rates__row--moon:hover > * {
	background: rgba(40, 58, 120, .05);
}

.sfx-rates .sfx-rates__table .sfx-rates__row--sun > *,
.sfx-rates .sfx-rates__table .sfx-rates__row--sun:hover > * {
	background: rgba(242, 183, 5, .1);
}

.sfx-rates .sfx-rates__table .sfx-rates__row--flame > *,
.sfx-rates .sfx-rates__table .sfx-rates__row--flame:hover > * {
	background: rgba(214, 84, 34, .07);
}

.sfx-rates .sfx-rates__pora {
	display: flex;
	align-items: center;
	gap: .8rem;
}

/* The octagon, the Chakra Petch full stop, as on the cards beside it. */
.sfx-rates .sfx-rates__badge {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	background: #f2b705;
	color: #0d0d0d;
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.sfx-rates .sfx-rates__badge svg {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
}

.sfx-rates .sfx-rates__name {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
	font-family: var(--sfx-head, "Chakra Petch"), sans-serif;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #0d0d0d;
}

.sfx-rates .sfx-rates__hours {
	font-family: var(--sfx-body, "Barlow"), sans-serif;
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: rgba(13, 13, 13, .6);
}

.sfx-rates .sfx-rates__price {
	font-family: var(--sfx-head, "Chakra Petch"), sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sfx-rates .sfx-rates__tokens {
	font-size: .92rem;
	font-weight: 600;
	white-space: nowrap;
}

.sfx-rates__note {
	margin: .7rem 0 0;
	font-family: var(--sfx-body, "Barlow"), sans-serif;
	font-size: .85rem;
	line-height: 1.5;
	color: rgba(13, 13, 13, .6);
}

/* The tokens again, under the price: shown only on phones, where the
   third column goes so the names of the times keep to one line. */
.sfx-rates .sfx-rates__per {
	display: none;
}

@media (max-width: 479.98px) {
	.sfx-rates .sfx-rates__table :is(th, td):nth-child(3) {
		display: none;
	}

	.sfx-rates .sfx-rates__per {
		display: block;
		margin-top: .15rem;
		font-family: var(--sfx-body, "Barlow"), sans-serif;
		font-size: .8rem;
		font-weight: 600;
		letter-spacing: 0;
		color: rgba(13, 13, 13, .6);
	}

	.sfx-rates .sfx-rates__table :is(th, td) {
		padding: .75rem .8rem;
	}

	.sfx-rates .sfx-rates__pora {
		gap: .7rem;
	}

	.sfx-rates .sfx-rates__badge {
		width: 2.1rem;
		height: 2.1rem;
	}

	.sfx-rates .sfx-rates__price {
		font-size: 1.25rem;
	}

	.sfx-rates .sfx-rates__name {
		font-size: .8rem;
		letter-spacing: .01em;
	}

	.sfx-rates .sfx-rates__table thead th {
		letter-spacing: .12em;
	}
}

@media (min-width: 1200px) {
	.sfx__intro.has-rates {
		display: grid;
		grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 4vw, 4.5rem);
		align-items: end;
	}

	.sfx__intro.has-rates .sfx-rates {
		justify-self: end;
		max-width: 36rem;
	}
}

/* The narrower desktops: the table gets a fair share of the row, so the
   names of the times keep to one line. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
	.sfx__intro.has-rates {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

/* ---------- the slot ----------
   Empty, it shows where the price list goes. Anything put in
   it in the editor replaces the hint. */

.e-con.sfx > .sfx__slot {
	position: relative;
	min-height: 0;
	padding: 0;
}

.e-con.sfx > .sfx__slot:not(:has(> *)) {
	display: grid;
	place-items: center;
	min-height: 14rem;
	border: 1px dashed rgba(13, 13, 13, .25);
	border-radius: 3px;
	background: repeating-linear-gradient(-45deg, rgba(13, 13, 13, .045) 0 12px, rgba(13, 13, 13, 0) 12px 24px);
}

.e-con.sfx > .sfx__slot:not(:has(> *))::after {
	content: "Miejsce na cennik";
	position: static;
	font-family: "Chakra Petch", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .02em;
	color: rgba(13, 13, 13, .5);
}

/* ---------- sizes ---------- */

@media (min-width: 1025px) {
	.e-con.sfx {
		gap: clamp(2.5rem, calc(var(--sfx-screen) * .05), 3.5rem);
		padding: clamp(5rem, calc(var(--sfx-screen) * .11), 7.5rem) 3rem;
	}

	.e-con.sfx::after {
		/* Top right, beside the heading. */
		background-size: clamp(260px, 22vw, 360px) auto;
		background-position: right 6vw top 4rem;
	}

	.sfx__title {
		font-size: clamp(2.8rem, 4.2vw, 4rem);
	}

	.sfx__lead {
		font-size: 1.08rem;
	}

	.e-con.sfx > .sfx__slot:not(:has(> *)) {
		min-height: 18rem;
	}
}

@media print {
	.e-con.sfx::after {
		display: none;
	}
}