/* Kształty zdjęć jak w briefie: organiczne maski, dopiski odręczne, dymki i doodle. */

@font-face {
	font-family: "Speakalo Odrecznie";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonty/caveat-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Speakalo Odrecznie";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonty/caveat-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ten sam krój pod nazwą Caveat: używają go dopiski wpisane w treść stron (klasa .odrecznie). */
@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonty/caveat-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonty/caveat-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--spk-granat: #0b3354;
	--spk-mieta: #cfeee9;
	--spk-zolty: #f5c23a;
}

.sp-hero,
.sp-rez-hero,
.sp-oferta-hero,
.sp-abonament,
.sp-platforma { overflow-x: clip; }

.spk-kadr { position: relative; }
.spk-kadr > img { display: block; }

/* odręczne dopiski */
.spk-dopisek {
	position: absolute;
	z-index: 3;
	margin: 0 !important;
	font-family: "Speakalo Odrecznie", "Segoe Print", "Comic Sans MS", cursive;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.02;
	letter-spacing: .01em;
	text-align: center;
	color: var(--spk-granat);
	pointer-events: none;
}

.spk-dopisek-serce {
	display: block;
	width: 26px;
	height: 26px;
	margin: 4px auto 0;
	color: var(--spk-zolty);
	stroke-width: 2.2;
}

/* =========================================================
 * Nagłówki stron: zdjęcie w organicznym kształcie do krawędzi ekranu
 * ====================================================== */
.spk-kadr-hero {
	align-self: stretch;
	/* od góry zostaje odstęp --spk-odstep, żeby zdjęcie nie dotykało nagłówka strony */
	--spk-odstep: 28px;
	min-height: calc(var(--spk-h, 420px) + var(--spk-gora, 0px) + var(--spk-dol, 0px) - var(--spk-odstep));
	margin-top: calc(-1 * var(--spk-gora, 0px) + var(--spk-odstep));
	margin-bottom: calc(-1 * var(--spk-dol, 0px));
	margin-right: calc(-1 * max(40px, (100vw - 1300px) / 2));
	min-width: 0;
}

/* zdjęcie wypełnia ramkę, a ramka dopasowuje się do wysokości sekcji
   (selektor mocniejszy od reguły motywu .sp-hero img[class*="gb-media-"] na telefonie) */
.spk-kadr.spk-kadr-hero > img[class] {
	position: absolute;
	inset: 0;
	aspect-ratio: auto !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	border-radius: 0 !important;
	object-fit: cover;
	object-position: 62% 32%;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M22 0H100V100H15C7 93 3 82 4.5 69C6 56 13 50 11 36C9.5 24 10 10 22 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M22 0H100V100H15C7 93 3 82 4.5 69C6 56 13 50 11 36C9.5 24 10 10 22 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.spk-fala {
	position: absolute;
	z-index: 2;
	left: 4%;
	bottom: 0;
	width: 72%;
	height: 22%;
	fill: var(--spk-mieta);
	opacity: .9;
	pointer-events: none;
}

.spk-kadr-hero .spk-dopisek {
	left: 17%;
	top: 11%;
	transform: rotate(-10deg);
}

.spk-dymek {
	position: absolute;
	z-index: 3;
	right: 4%;
	top: 32%;
	margin: 0 !important;
	padding: 20px 24px 22px;
	background: #fff;
	border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
	box-shadow: 0 16px 34px rgba(0, 42, 82, .14);
	font-family: "Speakalo Odrecznie", "Segoe Print", "Comic Sans MS", cursive;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.05;
	text-align: center;
	color: var(--spk-granat);
	pointer-events: none;
}

.spk-dymek-strzalka {
	position: absolute;
	right: 6px;
	bottom: -8px;
	width: 34px;
	height: 34px;
	color: var(--spk-zolty);
	stroke-width: 2.2;
}

/* =========================================================
 * Karty „Dla kogo”: zdjęcie na całą szerokość karty i doodle
 * ====================================================== */
.spk-kadr-karta {
	margin: -18px -18px 0;
	border-radius: 18px 18px 0 0;
	overflow: hidden;
}

.spk-kadr-karta > img {
	width: 100% !important;
	max-width: none !important;
	height: 238px !important;
	border-radius: 0 !important;
	object-fit: cover;
	object-position: center 20%;
}

.spk-doodle {
	position: absolute;
	z-index: 2;
	width: 30px;
	height: 30px;
	pointer-events: none;
}

.spk-doodle-1 { top: 14px; left: 14px; color: var(--spk-granat); opacity: .75; transform: rotate(-12deg); }
.spk-doodle-2 { top: 16px; right: 14px; color: #e0a800; transform: rotate(10deg); }

/* żółta karta w Ofercie */
.spk-kadr-oferta {
	margin: -22px -22px 0;
	border-radius: 18px 18px 0 0;
	overflow: hidden;
}

.spk-kadr-oferta > img {
	width: 100% !important;
	max-width: none !important;
	height: 200px !important;
	border-radius: 0 !important;
	object-fit: cover;
	object-position: 30% 30%;
	-webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}

/* =========================================================
 * Abonament: zdjęcie przechodzi w tło karty, plamy koloru i dopisek
 * ====================================================== */
.spk-kadr-abonament {
	align-self: stretch;
	margin: -46px -46px -46px 0;
	border-radius: 0 24px 24px 0;
	overflow: hidden;
	min-width: 0;
}

.spk-kadr-abonament > img {
	position: relative;
	z-index: 1;
	width: 100% !important;
	max-width: none !important;
	height: calc(260px + 92px) !important;
	border-radius: 0 !important;
	object-fit: cover;
	object-position: 30% 30%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.spk-plama {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.spk-plama-zolta {
	z-index: 0;
	left: 4%;
	bottom: -70px;
	width: 190px;
	height: 190px;
	background: #fed65a;
	opacity: .85;
}

.spk-plama-mietowa {
	z-index: 2;
	right: -60px;
	bottom: -80px;
	width: 220px;
	height: 200px;
	background: #7fd3cc;
	opacity: .55;
	border-radius: 55% 45% 50% 50%;
}

.spk-abonament-gwiazdka {
	position: absolute;
	z-index: 3;
	/* przy dopisku, a nie na twarzy osoby ze zdjęcia */
	right: 5%;
	top: 52%;
	width: 32px;
	height: 32px;
	color: var(--spk-zolty);
	stroke-width: 2;
}

.spk-dopisek-abonament {
	right: 8%;
	top: 9%;
	font-size: 26px;
	transform: rotate(-12deg);
}

/* =========================================================
 * Platforma: zdjęcie na miękkiej plamie tła i dopiski
 * ====================================================== */
.spk-kadr-platforma { isolation: isolate; }

.spk-plama-tlo {
	z-index: -1;
	inset: -34px -10px -30px -46px;
	background: linear-gradient(135deg, #e6f6fb 0%, #eefaf8 100%);
	border-radius: 46% 54% 42% 58% / 55% 42% 58% 45%;
}

.spk-kadr-platforma > img {
	border-radius: 0 !important;
	-webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 50%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 52% at 50% 50%, #000 58%, transparent 100%);
}

.spk-dopisek-platforma {
	left: -18px;
	top: 14%;
	font-size: 28px;
	transform: rotate(-10deg);
}

.spk-dopisek-platforma-2 {
	right: 2%;
	bottom: -4%;
	font-size: 26px;
	transform: rotate(-8deg);
}

/* =========================================================
 * Tablet i telefon: bez wychodzenia poza kolumnę
 * ====================================================== */
@media (max-width: 1024px) {
	.spk-kadr-hero {
		margin: 0;
		min-height: 380px;
	}

	.spk-kadr.spk-kadr-hero > img[class] {
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0H92C97 0 100 3 100 8V92C100 97 97 100 92 100H10C4 96 1 88 2 78C3 66 8 58 6 44C4 30 5 8 14 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0H92C97 0 100 3 100 8V92C100 97 97 100 92 100H10C4 96 1 88 2 78C3 66 8 58 6 44C4 30 5 8 14 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	.spk-dymek { right: 4%; top: auto; bottom: 16%; font-size: 21px; padding: 14px 18px 16px; }
	.spk-kadr-hero .spk-dopisek { font-size: 24px; left: 14%; top: 8%; }

	.spk-kadr-abonament { margin: 20px -46px -46px -46px; border-radius: 0 0 24px 24px; }
	.spk-kadr-abonament > img {
		height: 280px !important;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
	}

	/* WordPress daje leniwym zdjęciom contain:size, a motyw na telefonie zdejmuje proporcje:
	   bez tego zdjęcie platformy robi się bardzo wysokie */
	.spk-kadr.spk-kadr-platforma > img[class] { aspect-ratio: 16 / 10 !important; height: auto !important; }

	.spk-dopisek-platforma { left: 0; }
	.spk-dopisek-platforma-2 { right: 0; }
}

@media (max-width: 600px) {
	.spk-kadr-hero { min-height: 320px; }
	.spk-dymek { font-size: 18px; }
	.spk-kadr-hero .spk-dopisek { font-size: 21px; }
	.spk-dopisek-platforma,
	.spk-dopisek-platforma-2 { font-size: 21px; }
	.spk-kadr-abonament { margin-left: -24px; margin-right: -24px; margin-bottom: -24px; }
	/* karta abonamentu na telefonie: mniejsze wcięcie, żeby zdjęcie sięgało jej krawędzi */
	.spk-siatka:has(> .spk-kadr-abonament) { padding: 28px 24px 24px !important; }
}

/* Stary, mały wycinek z makiety (dymek i dopiski są w samym obrazku): pokazujemy go w całości,
   bez przycinania i bez organicznej maski, żeby napisy nie były ucięte. Zniknie po wgraniu nowego zdjęcia. */
.spk-kadr.spk-kadr-hero.spk-kadr-makieta {
	align-self: center;
	min-height: 0;
	margin: 0;
	aspect-ratio: 374 / 212;
}

.spk-kadr.spk-kadr-hero.spk-kadr-makieta > img[class] {
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 24px !important;
	-webkit-mask: none;
	mask: none;
}

.spk-kadr-makieta .spk-fala { display: none; }