/*
 * Boho Kursy - front-end styles of the Elementor widgets.
 * Colours and fonts come from the widget's Style tab (defaults = the site's Elementor globals).
 * Values below are fallbacks only, so the tiles look right even before Elementor's CSS loads.
 */

/* ---------- All widgets: full width inside Elementor containers ----------
 * Elementor containers wrap their children (multi-line flex). In that case the browser works out a widget's
 * height at its "fit-content" width first and only then stretches it to the column. A short course title meant
 * a narrow first pass, so the photo (its height comes from the aspect ratio) was counted too short, and after
 * stretching it overlapped the groups below it (phones, 13.10: +4 to +81 px). Full width removes the narrow pass.
 * :where() keeps this weak - a width set for the widget in Elementor still wins. */
:where(.e-con, .e-con-inner) > :where(.elementor-widget-boho-naglowek-kursu, .elementor-widget-boho-status-zapisow, .elementor-widget-boho-siatka-kursow, .elementor-widget-boho-okruszki) {
	width: 100%;
}

/* ---------- Grid ---------- */

/* Text colours meet WCAG AA (4.5:1) on white; the brand's lighter brown/grey are reserved for large text. */

.boho-siatka {
	--boho-lift: 6px;
	--boho-status-open: #068268;
	--boho-status-soon: #8A6230;
	--boho-status-waitlist: #9A5B00;
	--boho-status-closed: #5F6B7A;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 1024px) {
	.boho-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.boho-siatka {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Tile ---------- */

.boho-kafel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	color: #1A202C; /* White card: dark text also inside a colour field. */
	background-color: #fff;
	border: 1px solid #EADFD3;
	border-radius: 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boho-kafel:hover,
.boho-kafel:focus-within {
	transform: translateY(calc(-1 * var(--boho-lift)));
	box-shadow: 0 14px 30px rgba(26, 32, 44, 0.12);
}

/* Keyboard focus: ring around the whole tile instead of only the title. */
@supports selector(:has(*)) {
	.boho-kafel:has(.boho-kafel__link:focus-visible) {
		outline: 3px solid var(--boho-status-open);
		outline-offset: 3px;
	}

	.boho-kafel__link:focus-visible {
		outline: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boho-kafel {
		transition: none;
	}

	.boho-kafel:hover,
	.boho-kafel:focus-within {
		transform: none;
	}
}

/* Photo: fixed aspect ratio, any image is cropped to fit. No photo = brand colour. */
.boho-kafel__foto {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--boho-zastepczy, #FFD9AC);
}

.boho-kafel__foto .boho-kafel__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

/* No photo: optional brand graphic (e.g. the BOHO leopard), centred and contained. */
.boho-kafel__foto .boho-kafel__zastepczy {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: var(--boho-placeholder-size, 55%);
	max-width: 80%;
	object-fit: contain;
	transform: translate(-50%, -50%);
}

.boho-kafel__plakietka {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: #EAAD17;
	color: #1A202C;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.boho-kafel__plakietka--w-tresci {
	position: static;
	align-self: flex-start;
}

/* Text column: the button sits at the bottom, so tiles in a row line up. */
.boho-kafel__tresc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 24px;
}

.boho-kafel__tresc > * {
	margin: 0;
}

/*
 * Fonts: the site's own families (Elementor global variables), but sizes made for a tile.
 * The site's global sizes are made for page headings (Primary 65px, Text 27px), far too big here.
 */
.boho-kafel__tytul {
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	font-size: 24px;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.boho-kafel__podtytul,
.boho-kafel__prowadzace,
.boho-kafel__zdanie,
.boho-kafel__status,
.boho-status {
	font-family: var(--e-global-typography-text-font-family), serif;
}

@media (max-width: 1024px) {
	.boho-kafel__tytul {
		font-size: 22px;
	}
}

.boho-kafel__link,
.boho-kafel__link:hover,
.boho-kafel__link:visited {
	color: inherit;
	text-decoration: none;
}

/* The title link covers the whole tile. */
.boho-kafel__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.boho-kafel__podtytul {
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8A6230;
}

.boho-kafel__prowadzace {
	font-size: 14px;
	line-height: 1.5;
	color: #4A5568;
}

/* Instagram links stay clickable above the tile link. */
.boho-kafel__prowadzace a {
	position: relative;
	z-index: 2;
	font-weight: 600;
	color: #068268;
	text-decoration: none;
}

.boho-kafel__prowadzace a:hover,
.boho-kafel__prowadzace a:focus-visible {
	text-decoration: underline;
}

.boho-kafel__zdanie {
	font-size: 16px;
	line-height: 1.55;
	color: #4A5568;
}

/* ---------- Enrollment status (tiles and group cards) ---------- */

.boho-kafel__status,
.boho-status {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.boho-kafel__status::before,
.boho-status::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: currentColor;
}

.boho-status--open { color: var(--boho-status-open, #068268); }
.boho-status--soon { color: var(--boho-status-soon, #8A6230); }
.boho-status--waitlist { color: var(--boho-status-waitlist, #9A5B00); }
.boho-status--closed { color: var(--boho-status-closed, #5F6B7A); }

/* ---------- Button ---------- */

.boho-kafel__stopka {
	margin-top: auto;
	padding-top: 12px;
}

.boho-kafel__przycisk {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 37px;
	background-color: #068268;
	color: #fff;
	font-family: var(--e-global-typography-accent-font-family), serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	transition: background-color 0.2s ease;
}

.boho-kafel:hover .boho-kafel__przycisk {
	background-color: #05636A;
}

/* ---------- Empty widgets / editor hints ---------- */

.boho-siatka__pusto,
.boho-grupy__pusto {
	margin: 0;
	font-size: 16px;
}

.boho-uwaga {
	padding: 16px 20px;
	border: 1px dashed #B4803D;
	border-radius: 12px;
	background-color: #FFF8EC;
	color: #5C4A2A;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Group cards ("Boho: Status zapisów") ---------- */

.boho-grupy {
	--boho-karta-min: 240px;
	--boho-status-open: #068268;
	--boho-status-soon: #8A6230;
	--boho-status-waitlist: #9A5B00;
	--boho-status-closed: #5F6B7A;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.boho-grupy__naglowek {
	margin: 0;
	color: var(--boho-naglowek, inherit);
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	font-size: 30px;
	line-height: 1.2;
}

.boho-grupy__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--boho-karta-min), 100%), 1fr));
	gap: 20px;
}

.boho-grupy--lista .boho-grupy__lista {
	grid-template-columns: minmax(0, 1fr);
}

.boho-grupa {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 20px 22px;
	color: #1A202C; /* White card: dark text also inside a colour field. */
	background-color: #fff;
	border: 1px solid #EADFD3;
	border-radius: 16px;
}

.boho-grupa > * {
	margin: 0;
}

/* Closed groups step back, so open ones are found at a glance (text still meets 4.5:1). */
.boho-grupy .boho-grupa--closed {
	background-color: #FAF8F5;
}

.boho-grupy .boho-grupa--closed .boho-grupa__nazwa {
	color: #5F6B7A;
}

.boho-grupa__nazwa {
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	font-size: 20px;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.boho-grupa__termin {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 16px;
	line-height: 1.5;
	color: #4A5568;
}

.boho-grupa__stopka {
	margin-top: auto;
	padding-top: 10px;
}

/* The main action on a course page: at least 44 px high, comfortable for a finger. */
.boho-grupa__przycisk,
.boho-grupa__przycisk:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 24px;
	border-radius: 37px;
	background-color: #068268;
	color: #fff;
	font-family: var(--e-global-typography-accent-font-family), serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease;
}

.boho-grupa__przycisk:hover,
.boho-grupa__przycisk:focus-visible {
	background-color: #05636A;
	color: #fff;
}

.boho-grupa__przycisk:focus-visible {
	outline: 3px solid var(--boho-status-open);
	outline-offset: 3px;
}

/* ---------- Breadcrumbs ("Boho: Okruszki") ---------- */

.boho-okruszki__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--boho-tekst, #4A5568);
}

.boho-okruszki__lista li {
	margin: 0;
	padding: 0;
}

.boho-okruszki__lista li + li::before {
	content: "›";
	margin-right: 6px;
	color: var(--boho-akcent, #8A6230);
}

.boho-okruszki a {
	color: var(--boho-link, #068268);
	text-decoration: none;
}

.boho-okruszki a:hover,
.boho-okruszki a:focus-visible {
	text-decoration: underline;
}

.boho-okruszki [aria-current] {
	color: var(--boho-tekst, #1A202C);
}

/* ---------- Course header ("Boho: Nagłówek kursu") ---------- */

.boho-naglowek {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.boho-naglowek > * {
	margin: 0;
}

.boho-naglowek__tytul {
	color: var(--boho-tytul, var(--boho-naglowek, var(--e-global-color-primary, #000)));
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	font-size: 44px;
	line-height: 1.15;
	overflow-wrap: break-word;
}

.boho-naglowek__podtytul {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--boho-podtytul, #8A6230);
}

/* "Prowadzi Ola, ..." (R2): the name links to the person on the Zespół page, underlined like a link in a sentence. */
.boho-naglowek__prowadzace {
	max-width: 46em;
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 18px;
	line-height: 1.55;
	color: var(--boho-tekst, #4A5568);
}

.boho-naglowek__prowadzace a {
	font-weight: 600;
	color: var(--boho-link, #068268);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.boho-naglowek__prowadzace a:hover,
.boho-naglowek__prowadzace a:focus-visible {
	text-decoration-thickness: 2px;
}

.boho-naglowek__foto {
	position: relative;
	margin-top: 12px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 20px;
	background-color: #FFD9AC;
}

/* Photo-only copy of the widget (course page: the title is in the dark band above). */
.boho-naglowek > .boho-naglowek__foto:first-child {
	margin-top: 0;
}

.boho-naglowek__foto .boho-naglowek__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.boho-naglowek__foto--zastepczy .boho-naglowek__img {
	inset: auto;
	top: 50%;
	left: 50%;
	width: auto;
	height: 55%;
	object-fit: contain;
	transform: translate(-50%, -50%);
}

@media (max-width: 1024px) {
	.boho-naglowek__tytul {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.boho-naglowek__tytul {
		font-size: 30px;
	}
}

/* ---------- Sticky groups column (status widget option) ---------- */

@media (min-width: 768px) {
	.elementor-widget.boho-przyklej-tak {
		position: sticky;
		top: var(--boho-przyklej-top, 24px);
		z-index: 1;
	}
}

/* ---------- Course page template ("Kurs - wzór") ----------
 * Elementor's own widgets take the site's global sizes by default (text 27px, headings 65px), which suit
 * banners, not a long course description. These classes are set on the template's widgets; anything Ola
 * sets in a widget's Style tab still wins (higher specificity). */

.elementor-widget-text-editor.boho-kurs-tekst {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--boho-tekst, #2D3748);
}

.elementor-widget-text-editor.boho-kurs-tekst ul {
	margin: 0 0 1em;
}

.elementor-widget-text-editor.boho-kurs-tekst ul:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor.boho-kurs-tekst p {
	margin: 0 0 1em;
}

.elementor-widget-text-editor.boho-kurs-tekst p:last-child {
	margin-bottom: 0;
}

.elementor-widget-heading.boho-kurs-h2 .elementor-heading-title {
	color: var(--boho-naglowek, var(--e-global-color-primary, #000));
	font-size: 30px;
	line-height: 1.2;
}

.elementor-widget-heading.boho-kurs-h3 .elementor-heading-title {
	color: var(--boho-naglowek, var(--e-global-color-primary, #000));
	font-size: 22px;
	line-height: 1.3;
}

.boho-kurs-lista.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 18px;
	line-height: 1.55;
	color: var(--boho-tekst, #2D3748);
}

/* Check marks: brand green on white, a light accent inside a colour field. */
.elementor-widget.boho-kurs-lista .elementor-icon-list-icon i {
	color: var(--boho-ikona, #068268);
}

.elementor-widget.boho-kurs-lista .elementor-icon-list-icon svg {
	fill: var(--boho-ikona, #068268);
}

@media (max-width: 1024px) {
	.elementor-widget-heading.boho-kurs-h2 .elementor-heading-title {
		font-size: 27px;
	}
}

@media (max-width: 767px) {
	.elementor-widget-text-editor.boho-kurs-tekst,
	.boho-kurs-lista.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text {
		font-size: 17px;
	}

	.elementor-widget-heading.boho-kurs-h2 .elementor-heading-title {
		font-size: 24px;
	}

	.elementor-widget-heading.boho-kurs-h3 .elementor-heading-title {
		font-size: 20px;
	}
}

/* Course facts ("Format", "Grupa") and level facts ("Różnica", "Wymagania"): a salmon field (Ola, 14.10: colour). */
.elementor-widget-text-editor.boho-kurs-fakty {
	padding: 18px 22px;
	border-radius: 20px;
	background-color: #FFD9AC;
	color: #1A202C;
	font-size: 16px;
}

.elementor-widget-text-editor.boho-kurs-fakty p {
	margin: 0 0 0.35em;
}

/* Cycle line on a group card ("5.11-26.11.2026 · 4 spotkania"). */
.boho-grupa__okres {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 15px;
	line-height: 1.45;
	color: #4A5568;
}

/* ---------- Colour fields ("Boho: kolor pola" on a container; Ola, 14.10) ----------
 * The site's palette. Each field sets the background AND the colours used by everything inside (variables below),
 * so text stays readable (WCAG AA 4.5:1; big headings 3:1) whatever is put in. White cards (tiles, group cards) keep
 * their own dark text. Rounding and padding are defaults only: Elementor's own settings of the container still win. */

.e-con.boho-pole {
	--border-radius: 28px;
	--padding-top: 32px;
	--padding-bottom: 32px;
	--padding-left: 36px;
	--padding-right: 36px;
}

.e-con.boho-pole--ciemne {
	--boho-tytul: #FFFFFF;
	--boho-tekst: #FFFFFF;
	--boho-naglowek: #FFD9AC;
	--boho-podtytul: #FFD9AC;
	--boho-link: #FFD9AC;
	--boho-ikona: #FFD9AC;
	--boho-akcent: #FFD9AC;
	background-color: #05636A;
	color: #FFFFFF;
}

.e-con.boho-pole--zielone {
	--boho-tytul: #FFFFFF;
	--boho-tekst: #FFFFFF;
	--boho-naglowek: #FFFFFF;
	--boho-podtytul: #FFFFFF;
	--boho-link: #FFFFFF;
	--boho-ikona: #FFD9AC;
	--boho-akcent: #FFD9AC;
	background-color: #068268;
	color: #FFFFFF;
}

.e-con.boho-pole--zlote {
	--boho-tekst: #1A202C;
	--boho-naglowek: #033F44;
	--boho-podtytul: #033F44;
	--boho-link: #033F44;
	--boho-ikona: #033F44;
	--boho-akcent: #033F44;
	background-color: #EAAD17;
	color: #1A202C;
}

.e-con.boho-pole--lososiowe {
	--boho-zastepczy: #FFFFFF; /* a tile without a photo must not melt into the field */
	--boho-tekst: #1A202C;
	--boho-naglowek: #05636A;
	--boho-podtytul: #05636A;
	--boho-link: #05636A;
	--boho-ikona: #068268;
	--boho-akcent: #05636A;
	background-color: #FFD9AC;
	color: #1A202C;
}

.e-con.boho-pole--rozowe {
	--boho-tekst: #1A202C;
	--boho-naglowek: #033F44;
	--boho-podtytul: #033F44;
	--boho-link: #033F44;
	--boho-ikona: #033F44;
	--boho-akcent: #033F44;
	background-color: #E3AE9E;
	color: #1A202C;
}

/* Elementor's own text and heading widgets inside a field follow the field (their default colours come from the
 * site's global colours, which are black - unreadable on the dark fields). */
.e-con[class*="boho-pole--"] .elementor-widget-text-editor,
.e-con[class*="boho-pole--"] .elementor-widget-text-editor.boho-kurs-tekst {
	color: var(--boho-tekst);
}

.e-con[class*="boho-pole--"] .elementor-widget-text-editor a {
	color: var(--boho-link);
	text-decoration: underline;
}

.e-con[class*="boho-pole--"] .elementor-widget-heading .elementor-heading-title {
	color: var(--boho-naglowek);
}

/* Elementor's editor paints a heading, text, list or button that has no colour of its own with the site's global colour
 * through a rule per element, stronger than the rules above: in the editor Ola saw black headings on the green fields that
 * visitors never see (Oferta, course pages, home page). Elementor's global colours are CSS variables, so inside a field
 * they mean the field's colours - the editor and the page then show the same. A colour picked in the Style tab still wins. */
/* Outside the fields: the course texts, facts boxes and check lists keep their own colours in the editor too
 * (each remap has the same strength as its colour rule above, so inside a field the field still wins). */
.elementor-widget-text-editor.boho-kurs-tekst {
	--e-global-color-text: var(--boho-tekst, #2D3748);
}

.elementor-widget-text-editor.boho-kurs-fakty {
	--e-global-color-text: #1A202C;
}

.elementor-widget.boho-kurs-lista {
	--e-global-color-primary: var(--boho-ikona, #068268);
	--e-global-color-secondary: var(--boho-tekst, #2D3748);
	--e-global-color-text: var(--boho-tekst, #2D3748);
}

.e-con[class*="boho-pole--"] .elementor-widget-heading {
	--e-global-color-primary: var(--boho-naglowek);
}

.e-con[class*="boho-pole--"] .elementor-widget-heading:has(h1.elementor-heading-title) {
	--e-global-color-primary: var(--boho-tytul, var(--boho-naglowek));
}

.e-con[class*="boho-pole--"] .elementor-widget-text-editor {
	--e-global-color-text: var(--boho-tekst);
}

.e-con[class*="boho-pole--"] .elementor-widget-icon-list {
	--e-global-color-primary: var(--boho-ikona);
	--e-global-color-secondary: var(--boho-tekst);
	--e-global-color-text: var(--boho-tekst);
}

/* The page title in a field (e.g. "Oferta" in the dark band) is white like the course titles. */
.e-con[class*="boho-pole--"] .elementor-widget-heading h1.elementor-heading-title {
	color: var(--boho-tytul, var(--boho-naglowek));
}

/* The Oferta page's intro, a little bigger than the course text. */
.elementor-widget-text-editor.boho-oferta-wstep {
	font-size: 20px;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.elementor-widget-text-editor.boho-oferta-wstep {
		font-size: 18px;
	}
}

/* A salmon facts box inside a salmon field would disappear: it gets a white background there. */
.e-con.boho-pole--lososiowe .elementor-widget-text-editor.boho-kurs-fakty {
	background-color: #FFFFFF;
}

@media (max-width: 767px) {
	.e-con.boho-pole {
		--border-radius: 22px;
		--padding-top: 24px;
		--padding-bottom: 24px;
		--padding-left: 20px;
		--padding-right: 20px;
	}
}

/* ---------- Leopards (image widgets with the brand graphics from assets/img) ----------
 * Decoration only: alt="" and no link. Shown smaller on phones. Ola can move, swap or delete them in Elementor. */

.elementor-widget-image.boho-lampart img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

@media (max-width: 767px) {
	.elementor-widget-image.boho-lampart {
		max-width: 150px;
	}
}

/* Leopards are inserted by address (no width/height in the HTML), so their space is reserved here: without it the
 * text below jumps down when a leopard loads (layout shift). Ratios of the files in assets/img. */
.boho-lampart img[src*="/ksiezyc-morski.webp"] { aspect-ratio: 480 / 480; }
.boho-lampart img[src*="/ksiezyc-rozowy.webp"] { aspect-ratio: 478 / 480; }
.boho-lampart img[src*="/ksiezyc-zloty.webp"] { aspect-ratio: 478 / 480; }
.boho-lampart img[src*="/lampart-morski-idzie.webp"] { aspect-ratio: 480 / 279; }
.boho-lampart img[src*="/lampart-morski-krok.webp"] { aspect-ratio: 480 / 380; }
.boho-lampart img[src*="/lampart-morski-ksiezyce.webp"] { aspect-ratio: 480 / 281; }
.boho-lampart img[src*="/lampart-morski-przeciaga.webp"] { aspect-ratio: 480 / 187; }
.boho-lampart img[src*="/lampart-rozowy-idzie.webp"] { aspect-ratio: 480 / 280; }
.boho-lampart img[src*="/lampart-rozowy-krok.webp"] { aspect-ratio: 480 / 380; }
.boho-lampart img[src*="/lampart-rozowy-przeciaga.webp"] { aspect-ratio: 480 / 187; }
.boho-lampart img[src*="/lampart-zloty-idzie.webp"] { aspect-ratio: 480 / 280; }
.boho-lampart img[src*="/lampart-zloty-krok.webp"] { aspect-ratio: 480 / 381; }
.boho-lampart img[src*="/lampart-zloty-przeciaga.webp"] { aspect-ratio: 480 / 187; }
.boho-lampart img[src*="/medalion-morski.webp"] { aspect-ratio: 480 / 480; }
.boho-lampart img[src*="/medalion-rozowy.webp"] { aspect-ratio: 480 / 480; }
.boho-lampart img[src*="/medalion-zloty.webp"] { aspect-ratio: 480 / 480; }

/* ---------- Groups column on the course page: sticky as a whole on a computer ----------
 * The whole right column sticks (not only the group list in it), so the dark field around the groups stays the size
 * of its content and later the sign-up form can open inside it. */

@media (min-width: 1025px) {
	.e-con.boho-kolumna-zapisow {
		position: sticky;
		top: 24px;
		align-self: flex-start;
		z-index: 1;
	}
}

/* ---------- Sign-up form ("Boho: Formularz zapisu", R5) ----------
 * The WPForms form sits on a white card, so its own colours stay readable in the dark groups column.
 * Computer with JavaScript: the column shows the groups first; "Zapisz się" at a group opens the form in their place
 * (assets/zapisy.js adds .boho-zapis-otwarty). Phone/tablet or no JavaScript: the form is always visible. */

.boho-zapis {
	/* WPForms' own look comes from these variables (it sets them on :root; set here they win for this form only):
	 * a white card, dark labels, field borders that can be seen (3.6:1 instead of 1.8:1), the site's pill button. */
	--wpforms-background-color: #FFFFFF;
	--wpforms-container-padding: 22px;
	--wpforms-container-border-radius: 18px;
	--wpforms-container-border-style: none;
	--wpforms-label-color: #1A202C;
	--wpforms-label-sublabel-color: #4A5568;
	--wpforms-field-text-color: #1A202C;
	--wpforms-field-border-color: #8C857B;
	--wpforms-field-border-radius: 10px;
	--wpforms-button-background-color: #068268;
	--wpforms-button-border-color: #068268;
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-button-border-radius: 37px;
	--wpforms-field-size-input-height: 48px; /* at least 44 px for a finger (WPForms: 43 px fields, 41 px button) */
	--wpforms-button-size-height: 48px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.boho-zapis__gora {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
}

.boho-zapis__naglowek {
	margin: 0;
	color: var(--boho-naglowek, inherit);
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	font-size: 30px;
	line-height: 1.2;
}

.boho-zapis__wstep {
	margin: 0;
	color: var(--boho-tekst, #2D3748);
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 17px;
	line-height: 1.55;
}

/* "Wróć do terminów": only where the form opens in place of the groups (computer). */
.boho-zapis__wroc,
.boho-zapis__wroc:hover,
.boho-zapis__wroc:focus {
	display: none;
	min-height: 44px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--boho-link, #068268);
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.boho-zapis__wroc:focus-visible {
	outline: 3px solid var(--boho-link, #068268);
	outline-offset: 2px;
}

.boho-zapis .wpforms-container {
	margin: 0 !important; /* WPForms puts a margin on its container. */
	color: #1A202C;
}

/* Links inside the form (e.g. the privacy policy at the consent): the theme's light orange is unreadable on white. */
.boho-zapis .wpforms-container a {
	color: #05636A;
	text-decoration: underline;
}

.boho-zapis .boho-zapis__pole select {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 767px) {
	.boho-zapis {
		--wpforms-container-padding: 16px;
	}
}

@media (min-width: 1025px) {
	.boho-kolumna-zapisow.boho-zapis-otwarty .boho-zapis__wroc {
		display: inline-flex;
		align-items: center;
	}

	.boho-js .e-con.boho-kolumna-zapisow .elementor-widget-boho-formularz-zapisu {
		display: none;
	}

	.boho-js .e-con.boho-kolumna-zapisow.boho-zapis-otwarty .elementor-widget-boho-formularz-zapisu {
		display: block;
	}

	.boho-js .e-con.boho-kolumna-zapisow.boho-zapis-otwarty .elementor-widget-boho-status-zapisow {
		display: none;
	}

	/* A form taller than the screen scrolls inside the sticky column instead of being cut off. */
	.e-con.boho-kolumna-zapisow {
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}