/* =========================================================
   Solofit site styles

   These used to live in Elementor's Site Settings custom CSS.
   That field is capped at 10 000 characters and cuts whatever
   sits past the limit without warning, which was silently
   dropping the depth rules at the bottom. Nothing here is
   capped, and the file is cache-busted by modification time.
   ========================================================= */

/* ---------------------------------------------------------
   PRIMARY BUTTON
   Square-edged, high contrast, soft accent glow. Add the
   class "btn-primary" to any Elementor button or link. The
   doubled class outranks Elementor's own button styles.
   --------------------------------------------------------- */

.btn-primary.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: 16px 34px;
	border: 0;
	border-radius: 3px;
	background-color: #F2B705;
	background-image: none;
	color: #111111;
	font-family: "Barlow", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow:
		0 0 22px -2px rgba(242, 183, 5, .38),
		0 10px 26px -10px rgba(242, 183, 5, .5);
	transition: transform .25s cubic-bezier(.22, .61, .36, 1), background-color .25s ease, box-shadow .25s ease;
}

.btn-primary.btn-primary:hover,
.btn-primary.btn-primary:focus-visible {
	background-color: #ffc81f;
	color: #111111;
	transform: translateY(-2px);
	box-shadow:
		0 0 30px 0 rgba(242, 183, 5, .55),
		0 16px 38px -12px rgba(242, 183, 5, .75);
}

.btn-primary.btn-primary:focus-visible {
	outline: 2px solid #f2f0eb;
	outline-offset: 3px;
}

.btn-primary.btn-primary:active {
	transform: translateY(0);
	box-shadow:
		0 0 18px -2px rgba(242, 183, 5, .45),
		0 8px 20px -10px rgba(242, 183, 5, .6);
}

@media (prefers-reduced-motion: reduce) {
	.btn-primary.btn-primary {
		transition: background-color .2s ease;
	}
	.btn-primary.btn-primary:hover,
	.btn-primary.btn-primary:focus-visible,
	.btn-primary.btn-primary:active {
		transform: none;
	}
}

/* ---------------------------------------------------------
   FULL-HEIGHT SECTIONS
   min-height, not height, so a section whose content is
   taller than the screen grows instead of clipping.

   The height is --sf-screen from snippet 10385: the screen
   height in pixels, measured when the page opens and changed
   only when the screen really changes (a phone turned, a
   window resized). Not vh, svh or dvh: on an iPhone those
   follow Safari's bars, and sections jumped as they came and
   went. 820px stands in only if that snippet is off.

   Left out here: .sf-hero, whose track spans several screens
   for the video scrub, and .sf-book and .sfw, which size
   themselves in their own snippets.
   --------------------------------------------------------- */

.sfp, .sfk, .sfe, .sfo, .sfq, .sfr {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: var(--sf-screen, 820px);
}

/* The inner wrapper takes the leftover height and centres its
   own content. Split in two because some inners are flex
   columns and some are grids, and the property differs. */

.sfk__inner,
.sfe__inner,
.sfr__inner {
	flex: 1 0 auto;
	justify-content: center;
}

.sfp__inner,
.sfo__inner,
.sfq__inner {
	flex: 1 0 auto;
	align-content: center;
}

@media (orientation: landscape) and (max-height: 560px) {
	.sfp, .sfk, .sfe, .sfo, .sfq, .sfr {
		min-height: 0;
	}
}

/* ---------------------------------------------------------
   DEPTH AND SECTION JOINS

   The joins used to be a dark floor, then a 1px seam, then a
   bright band at the top of the next section: a hard step.

   Now the top and bottom edges of every section darken by
   exactly the same amount. Where two sections of the same
   tone meet, both sides of the join are one colour, so the
   join disappears into a soft shadowed gutter instead of a
   line. Where dark meets cream there is a clean edge with no
   bands beside it. Depth comes from that gutter plus a soft
   pool of light behind each section's content (see the
   background layers below).

   Still inset box-shadows for the edges, because every one
   of these sections sets its own `background` shorthand.
   --------------------------------------------------------- */

.sf-book,
.sfw,
.sfk,
.sfo,
.sfr,
.sfa--close {
	box-shadow:
		inset 0 170px 150px -140px rgba(0, 0, 0, .55),
		inset 0 -170px 150px -140px rgba(0, 0, 0, .55);
}

.sfp,
.sfe,
.sfq,
.sfa--light {
	box-shadow:
		inset 0 170px 150px -140px rgba(60, 50, 30, .07),
		inset 0 -170px 150px -140px rgba(60, 50, 30, .07);
}

/* The hero is a video, so its last screen is never quite the
   colour of the section under it and used to stop on a line.
   A fade at the bottom of the stage lands on exactly the
   colour a dark section's top edge darkens to (#0D0D0D under
   55% black), so the video dissolves into the next section.
   It sits with the scrim, under the copy and the step bars. */

.sf-hero__stage::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: clamp(140px, calc(var(--sf-screen, 820px) * .24), 260px);
	background: linear-gradient(rgba(6, 6, 6, 0), rgba(6, 6, 6, .72) 55%, rgb(6, 6, 6));
	pointer-events: none;
}

/* Panels and image frames sit on the page rather than in it.
   A wide, soft, mostly-downward shadow plus a hairline edge
   reads as height without any visible grey box. */

.sf-book__slot,
.sfo__panel,
.sfr__slot,
.sfa__frame {
	box-shadow:
		0 40px 80px -44px rgba(0, 0, 0, .9),
		0 8px 24px -18px rgba(0, 0, 0, .7),
		0 0 0 1px rgba(242, 240, 235, .07);
}

.sfa--light .sfa__frame {
	box-shadow:
		0 40px 80px -46px rgba(17, 17, 17, .55),
		0 8px 24px -18px rgba(17, 17, 17, .3),
		0 0 0 1px rgba(17, 17, 17, .08);
}

/* ---------------------------------------------------------
   BACKGROUND LAYERS: LIGHT POOL AND GLYPH

   Two pseudo elements under each section's copy. Both are
   absolutely positioned, so neither becomes a flex or grid
   item. isolation:isolate on the section keeps z-index -1
   above the section's own background and below its content.

   ::before  a soft pool of light behind the content.

   ::after   a big faint outlined glyph drawn in Chakra Petch
             geometry: straight stems, 45 degree chamfers,
             octagonal dots. Same idea as the "?" in FAQ and
             the quote mark in Opinie, which keep their own
             markup, and the same line: a 1px hairline that
             never scales, yellow at 22% on dark sections and
             ink at 10% on cream.

   A glyph may run off the left or right edge of the screen,
   never off the top or bottom. Two same-tone sections now
   meet without a visible join, so a glyph cut there would
   look cut by nothing.
   --------------------------------------------------------- */

.sf-book, .sfw, .sfp, .sfk, .sfe, .sfo, .sfq, .sfr,
.sfa--light, .sfa--close {
	isolation: isolate;
}

.sf-book::before, .sfw::before, .sfk::before, .sfo::before, .sfr::before, .sfa--close::before,
.sfp::before, .sfe::before, .sfq::before, .sfa--light::before,
.sf-book::after, .sfw::after, .sfp::after, .sfk::after, .sfe::after, .sfr::after,
.sfa--split::after, .sfa--cards::after, .sfa--close::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* The light pool. The first value is the plain fallback; the
   second only lands where min() is allowed in a gradient size.
   A percentage and a length cannot be mixed inside that min(),
   which is why it is 95vw and not 95%. */

.sf-book::before, .sfw::before, .sfk::before, .sfo::before, .sfr::before, .sfa--close::before {
	background: radial-gradient(ellipse 95% 620px at 50% 420px, rgba(242, 240, 235, .055), rgba(242, 240, 235, 0) 70%);
	background: radial-gradient(ellipse min(1200px, 95vw) 620px at 50% 420px, rgba(242, 240, 235, .055), rgba(242, 240, 235, 0) 70%);
}

.sfp::before, .sfe::before, .sfq::before, .sfa--light::before {
	background: radial-gradient(ellipse 95% 620px at 50% 420px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
	background: radial-gradient(ellipse min(1200px, 95vw) 620px at 50% 420px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
}

.sf-book::after, .sfw::after, .sfp::after, .sfk::after, .sfe::after, .sfr::after,
.sfa--split::after, .sfa--cards::after, .sfa--close::after {
	background-image: var(--sf-glyph);
	background-repeat: no-repeat;
	background-size: var(--sf-glyph-size);
	background-position: var(--sf-glyph-pos);
}

/* Which glyph, per section. Phones first: tucked into the top
   right beside the heading, the way the FAQ mark sits. */

/* Booking intro: a clock, for "na godziny". */
.sf-book {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='none' stroke='rgba(242,183,5,.22)' stroke-width='1' vector-effect='non-scaling-stroke' d='M92 10H208L290 92V208L208 290H92L10 208V92Z M113 60H187L240 113V187L187 240H113L60 187V113Z M136 92H164V136H208V164H136Z'/%3E%3C/svg%3E");
	--sf-glyph-size: clamp(11rem, 40vw, 15rem) auto;
	--sf-glyph-pos: right -4rem top 2.5rem;
}

/* Dlaczego: an exclamation mark, the answer to the FAQ's question. */
.sfw {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 320'%3E%3Cpath fill='none' stroke='rgba(242,183,5,.22)' stroke-width='1' vector-effect='non-scaling-stroke' d='M106 10H134L156 32V178L134 200H106L84 178V32Z M106 232H134L156 254V282L134 304H106L84 282V254Z'/%3E%3C/svg%3E");
	--sf-glyph-size: auto clamp(12rem, 44vw, 17rem);
	--sf-glyph-pos: right -3rem top 2.5rem;
}

/* Jak to dziala: an arrow, one step to the next. */
.sfp {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 240'%3E%3Cpath fill='none' stroke='rgba(13,13,13,.1)' stroke-width='1' vector-effect='non-scaling-stroke' d='M32 84H190V20L310 120L190 220V156H32L10 134V106Z'/%3E%3C/svg%3E");
	--sf-glyph-size: clamp(12rem, 46vw, 17rem) auto;
	--sf-glyph-pos: right -4rem bottom 2rem;
}

/* Dla kogo: a figure. */
.sfk,
.sfa--cards {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300'%3E%3Cpath fill='none' stroke='rgba(242,183,5,.22)' stroke-width='1' vector-effect='non-scaling-stroke' d='M114 10H146L170 34V66L146 90H114L90 66V34Z M60 120H200L240 160V290H20V160Z'/%3E%3C/svg%3E");
	--sf-glyph-size: auto clamp(10rem, 36vw, 14rem);
	--sf-glyph-pos: right -2.5rem top 2.5rem;
}

.sfa--cards {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 300'%3E%3Cpath fill='none' stroke='rgba(13,13,13,.1)' stroke-width='1' vector-effect='non-scaling-stroke' d='M114 10H146L170 34V66L146 90H114L90 66V34Z M60 120H200L240 160V290H20V160Z'/%3E%3C/svg%3E");
}

/* Wyposazenie: a dumbbell. */
.sfe {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200'%3E%3Cpath fill='none' stroke='rgba(13,13,13,.1)' stroke-width='1' vector-effect='non-scaling-stroke' d='M26 20H44L60 36V164L44 180H26L10 164V36Z M84 45H96L110 59V141L96 155H84L70 141V59Z M110 84H230V116H110Z M244 45H256L270 59V141L256 155H244L230 141V59Z M296 20H314L330 36V164L314 180H296L280 164V36Z'/%3E%3C/svg%3E");
	--sf-glyph-size: clamp(13rem, 48vw, 18rem) auto;
	--sf-glyph-pos: right -3rem top 3rem;
}

/* Rezerwacja, on the home page and closing the O nas page: a calendar. */
.sfr,
.sfa--close {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='none' stroke='rgba(242,183,5,.22)' stroke-width='1' vector-effect='non-scaling-stroke' d='M46 50H254L280 76V254L254 280H46L20 254V76Z M62 120H238L250 132V238L238 250H62L50 238V132Z M86 20H102L108 26V74L102 80H86L80 74V26Z M198 20H214L220 26V74L214 80H198L192 74V26Z M78 146H108L114 152V176L108 182H78L72 176V152Z M135 146H165L171 152V176L165 182H135L129 176V152Z M192 146H222L228 152V176L222 182H192L186 176V152Z M78 198H108L114 204V222L108 228H78L72 222V204Z M135 198H165L171 204V222L165 228H135L129 222V204Z'/%3E%3C/svg%3E");
	--sf-glyph-size: clamp(11rem, 40vw, 15rem) auto;
	--sf-glyph-pos: right -3rem top 2.5rem;
}

/* Kim jestesmy on O nas: a map pin, a gym in Bialystok. */
.sfa--split {
	--sf-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 320'%3E%3Cpath fill='none' stroke='rgba(13,13,13,.1)' stroke-width='1' vector-effect='non-scaling-stroke' d='M80 10H160L230 80V160L120 310L10 160V80Z M105 60H135L155 80V110L135 130H105L85 110V80Z'/%3E%3C/svg%3E");
	--sf-glyph-size: auto clamp(12rem, 44vw, 16rem);
	--sf-glyph-pos: right -3rem top 2.5rem;
}

/* Desktop: each glyph moves to the emptiest part of its section,
   measured on the live layouts, and grows. */
@media (min-width: 1025px) {
	.sf-book {
		/* Bottom left, beside and below the call to action; the right
		   half is the calendar panel, which is opaque. */
		--sf-glyph-size: clamp(280px, 24vw, 400px) auto;
		--sf-glyph-pos: left -6rem bottom 2.5rem;
	}

	.sfw {
		/* Top right, half tucked behind the sticky photo. */
		--sf-glyph-size: auto clamp(300px, 28vw, 440px);
		--sf-glyph-pos: right -2.5rem top 5rem;
	}

	.sfp {
		/* Left column, below the heading. */
		--sf-glyph-size: clamp(300px, 28vw, 460px) auto;
		--sf-glyph-pos: left -5rem bottom 3rem;
	}

	.sfk,
	.sfa--cards {
		/* Top right, beside the heading. */
		--sf-glyph-size: auto clamp(300px, 28vw, 440px);
		--sf-glyph-pos: right 5vw top 5rem;
	}

	.sfe {
		/* Bottom right, under the shortest equipment column. */
		--sf-glyph-size: clamp(320px, 30vw, 500px) auto;
		--sf-glyph-pos: right -4rem bottom 3rem;
	}

	.sfr {
		/* Top right, beside the heading and above the calendar. */
		--sf-glyph-size: clamp(260px, 24vw, 400px) auto;
		--sf-glyph-pos: right 6vw top 4rem;
	}

	.sfa--close {
		--sf-glyph-size: clamp(260px, 24vw, 400px) auto;
		--sf-glyph-pos: right -3rem bottom 3rem;
	}

	.sfa--split {
		--sf-glyph-size: auto clamp(300px, 28vw, 420px);
		--sf-glyph-pos: left -3rem bottom 3rem;
	}
}

@media print {
	.sf-book::before, .sfw::before, .sfk::before, .sfo::before, .sfr::before, .sfa--close::before,
	.sfp::before, .sfe::before, .sfq::before, .sfa--light::before,
	.sf-book::after, .sfw::after, .sfp::after, .sfk::after, .sfe::after, .sfr::after,
	.sfa--split::after, .sfa--cards::after, .sfa--close::after {
		display: none;
	}
}

/* ---------------------------------------------------------
   FULL-BLEED INSIDE ELEMENTOR
   Each section is built to span the screen. Dropping one into
   an Elementor container would trap it at the container's
   width, so the wrappers step aside. script.js measures and
   does the actual pulling.
   --------------------------------------------------------- */

[class*="elementor-widget-solofit_"],
[class*="elementor-widget-solofit_"] > .elementor-widget-container {
	width: 100%;
	max-width: none;
}

.elementor-widget-container > .sf-hero,
.elementor-widget-container > .sf-book,
.elementor-widget-container > .sfw,
.elementor-widget-container > .sfp,
.elementor-widget-container > .sfk,
.elementor-widget-container > .sfe,
.elementor-widget-container > .sfo,
.elementor-widget-container > .sfq,
.elementor-widget-container > .sfr,
.elementor-widget-container > [data-sfa] {
	max-width: none;
}

.elementor-editor-active [class*="elementor-widget-solofit_"] {
	min-height: 1px;
}

/* ---------------------------------------------------------
   Opt-in helper for sections built in Elementor rather than
   in a snippet. Add the class "section-full". The same fixed
   screen height as every other section.
   --------------------------------------------------------- */

.section-full.section-full {
	box-sizing: border-box;
	min-height: var(--sf-screen, 820px);
	justify-content: center;
}

@media (orientation: landscape) and (max-height: 560px) {
	.section-full.section-full {
		min-height: 0;
	}
}