/*
 * Boho Kursy - the home page's styles (update 2, Ola's spec of 15.10): loaded only where the home page widgets are
 * ("Najbliższe starty", "Kafelki wyboru", "Zespół", "Ocena Google") and in the Elementor editor - the Oferta and the
 * course pages do not download them. Builds on front.css (colour fields, leopards), which loads first.
 */

/* ==================== Home page (update 2, the spec of 15.10) ====================
 * Widgets "Najbliższe starty", "Kafelki wyboru", "Zespół", "Ocena Google" and the classes the home page script sets on
 * Elementor's own widgets. Every selector here is new (boho-start, boho-wybor, boho-osoba-karta, boho-ocena, boho-glowna,
 * boho-przycisk, boho-krok, boho-pasek), so the Oferta and the course pages do not change. */

:where(.e-con, .e-con-inner) > :where(.elementor-widget-boho-najblizsze-starty, .elementor-widget-boho-kafelki-wyboru, .elementor-widget-boho-zespol) {
	width: 100%;
}

/* ---------- "Najbliższe starty": one white row per start ---------- */

.boho-starty {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boho-start {
	margin: 0;
	padding: 0;
}

.boho-start__link,
.boho-start__link:visited {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 18px;
	padding: 14px 20px;
	border-radius: 16px;
	background-color: #FFFFFF;
	color: #1A202C;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boho-start__link:hover,
.boho-start__link:focus-visible {
	color: #1A202C;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(26, 32, 44, 0.16);
}

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

.boho-start__data {
	min-width: 4.4em;
	padding: 8px 10px;
	border-radius: 12px;
	background-color: #EAAD17;
	color: #1A202C;
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.boho-start__opis {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

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

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

.boho-start__status {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.boho-start__akcja {
	padding: 9px 18px;
	border-radius: 37px;
	background-color: #068268;
	color: #FFFFFF;
	font-family: var(--e-global-typography-accent-font-family), serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.boho-start__link:hover .boho-start__akcja {
	background-color: #05636A;
}

.boho-starty__pusto {
	margin: 0;
	color: var(--boho-tekst, #1A202C);
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 18px;
}

@media (max-width: 767px) {
	.boho-start__link,
	.boho-start__link:visited {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 8px 12px;
		padding: 12px 14px;
	}

	.boho-start__data {
		align-self: start;
		min-width: 3.6em;
		font-size: 17px;
	}

	.boho-start__akcja {
		grid-column: 2;
		justify-self: start;
		padding: 7px 14px;
		font-size: 14px;
	}
}

/* ---------- "Kafelki wyboru": white tiles with a brand graphic ---------- */

.boho-wybor {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

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

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

.boho-wybor__kafel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 22px 22px 24px;
	border: 1px solid #EADFD3;
	border-radius: 20px;
	background-color: #FFFFFF;
	color: #1A202C;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boho-wybor__kafel--link:hover,
.boho-wybor__kafel--link:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(26, 32, 44, 0.14);
}

@supports selector(:has(*)) {
	.boho-wybor__kafel:has(.boho-wybor__link:focus-visible) {
		outline: 3px solid var(--boho-link, #068268);
		outline-offset: 3px;
	}

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

/* Two classes: Elementor's ".elementor img" (height: auto; max-width: 100%) must not blow the graphic up to the tile's width. */
.boho-wybor .boho-wybor__grafika {
	display: block;
	align-self: flex-start;
	width: auto;
	max-width: 132px;
	height: 66px;
	object-fit: contain;
	pointer-events: none;
}

.boho-wybor__tresc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

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

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

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

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

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

.boho-wybor__start {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

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

.boho-wybor__start--brak {
	color: #5F6B7A;
}

.boho-wybor__przycisk {
	align-self: flex-start;
	margin-top: auto;
	padding: 10px 22px;
	border-radius: 37px;
	background-color: #068268;
	color: #FFFFFF;
	font-family: var(--e-global-typography-accent-font-family), serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s ease;
}

.boho-wybor__kafel:hover .boho-wybor__przycisk {
	background-color: #05636A;
}

/* Phone: graphic on the left, text on the right - six tiles without a long scroll; the title is the link. */
@media (max-width: 767px) {
	.boho-wybor__kafel {
		flex-direction: row;
		align-items: flex-start;
		gap: 14px;
		padding: 16px;
	}

	.boho-wybor .boho-wybor__grafika {
		flex: 0 0 56px;
		width: 56px;
		max-width: 56px;
		height: 56px;
	}

	.boho-wybor__tytul {
		font-size: 21px;
	}

	.boho-wybor__zdanie {
		font-size: 15px;
	}

	.boho-wybor__przycisk {
		display: none;
	}
}

/* ---------- "Zespół": person cards ---------- */

.boho-zespol {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
}

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

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

.boho-osoba-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: 20px;
	background-color: #FFFFFF;
	color: #1A202C;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boho-osoba-karta:hover,
.boho-osoba-karta:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(26, 32, 44, 0.14);
}

.boho-osoba-karta__foto {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: #FFD9AC;
}

.boho-osoba-karta__foto .boho-osoba-karta__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 20%; /* faces are in the upper part of the photos */
	border-radius: 0;
}

/* A photo wider than the card: as tall as the card, its own width, centred. The image is then as wide as it is drawn, so
   the browser ("sizes: auto") fetches a file big enough - with width 100% the photos came out blurry (Michał 19.10). */
.boho-osoba-karta__foto .boho-osoba-karta__img--szerokie {
	right: auto;
	left: 50%;
	width: auto;
	transform: translateX(-50%);
}

.boho-osoba-karta__foto .boho-osoba-karta__zastepczy {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: auto;
	transform: translate(-50%, -50%);
}

.boho-osoba-karta__tresc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 18px;
}

.boho-osoba-karta__tresc > * {
	margin: 0;
}

.boho-osoba-karta__imie {
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-size: 22px;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	line-height: 1.2;
}

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

/* The name links to the person on the Zespół page and covers the card; the course links stay clickable above it. */
.boho-osoba-karta__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.boho-osoba-karta__kim,
.boho-osoba-karta__kursy {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 14px;
	line-height: 1.5;
}

.boho-osoba-karta__kim {
	color: #4A5568;
}

.boho-osoba-karta__kursy a {
	position: relative;
	z-index: 2;
	color: #05636A;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The person's Instagram (Michał 19.10): clickable above the card's link, like the course links. */
.boho-osoba-karta__instagram {
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.boho-osoba-karta__ig,
.boho-osoba-karta__ig:hover,
.boho-osoba-karta__ig:visited {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	vertical-align: top;
	color: #05636A;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The icon stays next to the handle; a long handle breaks inside itself on a narrow card. */
.boho-osoba-karta__ig > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.boho-osoba-karta__ig-ikona {
	flex: 0 0 auto;
}

@supports selector(:has(*)) {
	.boho-osoba-karta:has(.boho-osoba-karta__link:focus-visible) {
		outline: 3px solid var(--boho-link, #068268);
		outline-offset: 3px;
	}

	.boho-osoba-karta__link:focus-visible {
		outline: none;
	}
}

@media (max-width: 767px) {
	.boho-osoba-karta__tresc {
		padding: 12px 12px 14px;
	}

	.boho-osoba-karta__imie {
		font-size: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boho-wybor__kafel,
	.boho-start__link,
	.boho-osoba-karta {
		transition: none;
	}

	.boho-wybor__kafel--link:hover,
	.boho-wybor__kafel--link:focus-within,
	.boho-start__link:hover,
	.boho-start__link:focus-visible,
	.boho-osoba-karta:hover,
	.boho-osoba-karta:focus-within {
		transform: none;
	}
}

/* ---------- "Ocena Google": stars + "5,0 · 104 opinie Google" ---------- */

.boho-ocena {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	color: var(--boho-tekst, #1A202C);
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 16px;
	line-height: 1.4;
}

.boho-ocena__gwiazdki {
	display: inline-flex;
	gap: 2px;
	color: var(--boho-gwiazdki, #D39C1A);
}

.boho-ocena__gwiazdka {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.boho-ocena__gwiazdka--pusta {
	opacity: 0.35;
}

a.boho-ocena__tekst,
.boho-ocena__link {
	color: var(--boho-link, #05636A);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a.boho-ocena__tekst:hover,
.boho-ocena__link:hover {
	text-decoration-thickness: 2px;
}

.e-con[class*="boho-pole--"] .boho-ocena {
	--boho-gwiazdki: #EAAD17;
}

/* ---------- Home page sections (classes set on Elementor's own widgets by kod/tresc/strona-glowna.php) ---------- */

/* The home page's headings and texts carry no Elementor "global" font (see strona-glowna-uklad.php), so the brand fonts
 * are named here. */
.elementor-widget-heading.boho-glowna-h1 .elementor-heading-title,
.elementor-widget-heading.boho-glowna-h2 .elementor-heading-title {
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
}

.elementor-widget-heading.boho-glowna-h1 .elementor-heading-title {
	font-size: 54px;
	line-height: 1.12;
}

.elementor-widget-heading.boho-glowna-h2 .elementor-heading-title {
	color: var(--boho-naglowek, #05636A);
	font-size: 36px;
	line-height: 1.2;
}

.elementor-widget-text-editor.boho-glowna-podtytul {
	font-size: 20px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.elementor-widget-heading.boho-glowna-h1 .elementor-heading-title {
		font-size: 44px;
	}

	.elementor-widget-heading.boho-glowna-h2 .elementor-heading-title {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.elementor-widget-heading.boho-glowna-h1 .elementor-heading-title {
		font-size: 34px;
	}

	.elementor-widget-heading.boho-glowna-h2 .elementor-heading-title {
		font-size: 26px;
	}

	.elementor-widget-text-editor.boho-glowna-podtytul {
		font-size: 18px;
	}
}

/* The same for the home page's headings outside fields and its buttons (see the note at the colour fields). */
.elementor-widget-heading.boho-glowna-h2 {
	--e-global-color-primary: var(--boho-naglowek, #05636A);
}

.elementor-widget-button.boho-przycisk {
	--e-global-color-accent: var(--boho-przycisk-tlo, #068268);
}

.elementor-widget-button.boho-przycisk--obrys {
	--e-global-color-accent: transparent;
}

/* Buttons: one look everywhere, at least 48 px high. Inside a dark or green field: gold; elsewhere: green. */
.elementor-widget-button.boho-przycisk .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 28px;
	border: 0;
	border-radius: 37px;
	background-color: var(--boho-przycisk-tlo, #068268);
	color: var(--boho-przycisk-tekst, #FFFFFF);
	font-family: var(--e-global-typography-accent-font-family), serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-widget-button.boho-przycisk .elementor-button:hover,
.elementor-widget-button.boho-przycisk .elementor-button:focus-visible {
	background-color: var(--boho-przycisk-tlo-hover, #05636A);
	color: var(--boho-przycisk-tekst-hover, #FFFFFF);
}

.elementor-widget-button.boho-przycisk .elementor-button:focus-visible {
	outline: 3px solid var(--boho-link, #068268);
	outline-offset: 3px;
}

.e-con.boho-pole--ciemne,
.e-con.boho-pole--zielone {
	--boho-przycisk-tlo: #EAAD17;
	--boho-przycisk-tekst: #1A202C;
	--boho-przycisk-tlo-hover: #FFD9AC;
	--boho-przycisk-tekst-hover: #1A202C;
}

.e-con.boho-pole--zlote {
	--boho-przycisk-tlo: #05636A;
	--boho-przycisk-tlo-hover: #033F44;
}

/* The second button: an outline in the colour of the text around it. */
.elementor-widget-button.boho-przycisk--obrys .elementor-button,
.elementor-widget-button.boho-przycisk--obrys .elementor-button:hover,
.elementor-widget-button.boho-przycisk--obrys .elementor-button:focus-visible {
	background-color: transparent;
	color: var(--boho-tekst, #1A202C);
	box-shadow: inset 0 0 0 2px currentColor;
}

.elementor-widget-button.boho-przycisk--obrys .elementor-button:hover,
.elementor-widget-button.boho-przycisk--obrys .elementor-button:focus-visible {
	box-shadow: inset 0 0 0 3px currentColor;
}

/* The first screen's bar: the rating, below it "address | for whom" with a thin line between (tablet and phone: one under
 * another, no line). */
.e-con.boho-pasek__linia > .elementor-element + .elementor-element {
	padding-left: 20px;
	border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.e-con.boho-pasek .elementor-widget-text-editor {
	font-size: 15px;
	line-height: 1.4;
}

.e-con.boho-pasek .elementor-widget-text-editor p {
	margin: 0;
}

.e-con.boho-pasek .boho-ocena {
	font-size: 15px;
}

@media (max-width: 1024px) {
	.e-con.boho-pasek__linia > .elementor-element + .elementor-element {
		padding-left: 0;
		border-left: 0;
	}
}

/* "Jak działają zajęcia": the step number in a gold circle. */
.elementor-widget-heading.boho-krok-nr .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: #EAAD17;
	color: #1A202C;
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.elementor-widget-text-editor.boho-krok-tekst {
	color: #1A202C;
	font-family: var(--e-global-typography-text-font-family), serif;
	font-size: 17px;
	line-height: 1.55;
}

.elementor-widget-text-editor.boho-krok-tekst p {
	margin: 0;
}

/* The contact section's form (the site's own WPForms form, on the section's green): its labels were near-black (4.4:1) and the
 * required "*" red (1:1) - now white, readable (4.8:1). Only in the home page's contact section (.boho-kontakt). */
.e-con.boho-kontakt .wpforms-container {
	--wpforms-label-color: #FFFFFF;
	--wpforms-label-sublabel-color: rgba(255, 255, 255, 0.85);
	--wpforms-label-error-color: #FFFFFF;
}

.e-con.boho-kontakt .wpforms-container .wpforms-field-label {
	color: #FFFFFF;
}

.e-con.boho-kontakt .wpforms-container .wpforms-field-sublabel {
	color: rgba(255, 255, 255, 0.85);
}

.e-con.boho-kontakt .wpforms-container .wpforms-required-label {
	color: #FFFFFF;
}