/*
Theme Name: Extra
Theme URI: https://extraszkolenia.com.pl/
Description: Motyw blokowy OSK Extraszkolenia, Poznań.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: extra
*/

/*
 * Język wizualny „sportowy”: zero zaokrągleń, ścięte narożniki (--cut),
 * równoległoboki (przyciski, etykiety), ukośne krawędzie sekcji (--slant)
 * i jeden powtarzany motyw – skośne kreski ▰▰▰ oraz kropki.
 */
:root {
	--cut: var(--wp--custom--cut, 22px);
	--slant: var(--wp--custom--slant, 48px);
	--skew: -24deg;
	--clip-cut: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
	--clip-cut-2: polygon(0 0, calc(100% - var(--cut) * 2.4) 0, 100% calc(var(--cut) * 2.4), 100% 100%, calc(var(--cut) * 2.4) 100%, 0 calc(100% - var(--cut) * 2.4));
	--clip-para: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	--dots: radial-gradient(var(--wp--preset--color--accent) 2.2px, transparent 2.7px) 0 0 / 16px 16px;
	--dashes: repeating-linear-gradient(90deg, var(--wp--preset--color--accent) 0 26px, transparent 26px 36px);
}

/* ---------- Bazowe ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
img { height: auto; }
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* Sekcje treści (pełnej szerokości tła) stykają się bez blockGap */
.wp-block-post-content > .alignfull,
main > .alignfull { margin-block: 0; }

/* ---------- Przyciski: równoległoboki ---------- */
.wp-element-button,
.wp-block-button__link {
	clip-path: var(--clip-para);
	transition: background-color .2s ease, color .2s ease;
}
.has-ink-background-color .is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
.has-ink-background-color .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
}
.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

/* ---------- Motyw ▰▰▰ ---------- */
.extra-dashes,
.is-style-eyebrow::before {
	background: var(--dashes);
	transform: skewX(var(--skew));
}

/* ---------- Nadtytuł (eyebrow) ---------- */
.is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark);
}
.is-style-eyebrow::before {
	content: "";
	width: 40px; /* 3 kreski: 10+5+10+5+10 */
	height: 6px;
	--dashes: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 15px);
}
@media (max-width: 600px) { .is-style-eyebrow { letter-spacing: .08em; font-size: .75rem; } }
.has-ink-background-color .is-style-eyebrow,
.is-style-eyebrow.on-dark { color: var(--wp--preset--color--accent); }

/* ---------- Znaczek „L” ---------- */
.extra-l {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	--cut: 10px;
	clip-path: var(--clip-cut);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	flex: none;
}

/* ---------- Pasek górny + nagłówek ---------- */
.extra-topbar { font-size: .875rem; }
.extra-topbar a { text-decoration: none; }
.extra-topbar a:hover { color: var(--wp--preset--color--accent); }

/* Sticky musi być na <header> template-parta – to on jest dzieckiem .wp-site-blocks */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
	.extra-topbar { display: none; }
}
.extra-header {
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 90%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
/* backdrop-filter tworzy blok zawierający dla position:fixed – otwarte menu
   mobilne zamykałoby się w wysokości nagłówka zamiast na cały ekran */
.extra-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.extra-header .wp-block-navigation-item__content {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .8125rem;
	font-weight: 600;
}
.extra-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-dark); }
.extra-header .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-top: 3px solid var(--wp--preset--color--accent) !important;
	box-shadow: 0 18px 40px -16px rgba(22, 24, 27, .3);
	padding: .4rem 0;
	min-width: 240px !important;
}
.extra-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.1rem !important; }

/* Otwarte menu mobilne: lista do lewej, duże pola dotyku, podmenu bez desktopowej karty */
.extra-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 4.5rem;
}
.extra-header .is-menu-open .wp-block-navigation__container,
.extra-header .is-menu-open .wp-block-navigation-item { align-items: stretch !important; width: 100%; gap: 0 !important; }
.extra-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.125rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.extra-header .is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: .25rem 0 .75rem 1rem !important;
	min-width: 0 !important;
	border-left: 3px solid var(--wp--preset--color--accent) !important;
	margin: .5rem 0;
}
.extra-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem 0 !important; font-size: .9375rem; }
.extra-header .wp-block-button__link { padding: .7rem 1.5rem; font-size: .8125rem; }
@media (max-width: 900px) { .extra-header .extra-header-cta { display: none; } }

/* ---------- Hero ---------- */
.extra-hero { position: relative; overflow: hidden; isolation: isolate; }
.extra-hero > .wp-block-columns { position: relative; }
.extra-hero h1 em { font-style: normal; color: var(--wp--preset--color--accent-dark); }
.extra-hero__media { position: relative; }
.extra-hero__media .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	clip-path: var(--clip-cut-2);
}
.extra-hero__badge {
	position: absolute;
	left: -1.5rem;
	bottom: 2rem;
	max-width: 270px;
	border-radius: 0 !important;
	clip-path: var(--clip-cut);
	--cut: 16px;
}
@media (max-width: 781px) { .extra-hero__badge { left: 1rem; bottom: 1rem; } }
.extra-stats > * { border-left: 3px solid var(--wp--preset--color--accent); padding-left: 1rem; }
.extra-stats p { margin: 0; }
@media (max-width: 600px) {
	.extra-stats > * { padding-left: .6rem; }
	.extra-stats .has-x-large-font-size { font-size: 1.35rem !important; white-space: nowrap; }
	.extra-stats .has-small-font-size { font-size: .78rem !important; line-height: 1.35; }
}

/* Dekoracje hero – stałe miejsca: lewy dół (kliny + kształt), zdjęcie (paski, kropki, kreski) */
.extra-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	bottom: 0;
	width: 80%;
	background: #EEE7DC;
	clip-path: polygon(0 0, 62% 0, 100% 100%, 0 100%);
}
.extra-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -86px;
	top: 60%;
	width: 38px;
	height: 230px;
	background: var(--wp--preset--color--accent);
	transform: skewX(-32deg);
	box-shadow: 58px 0 0 var(--wp--preset--color--accent);
}
.extra-hero__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -64px;
	top: 40%;
	width: 96px;
	height: 64px;
	background: var(--dots);
}
.extra-hero__media::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -10px;
	top: -28px;
	width: 30px;
	height: 190px;
	background: var(--wp--preset--color--ink);
	transform: skewX(-32deg);
	box-shadow: 46px 26px 0 var(--wp--preset--color--ink);
}
.extra-hero > .wp-block-columns::after {
	content: "";
	position: absolute;
	right: 2%;
	bottom: -2.25rem;
	width: 134px; /* 4 kreski: 4×36−10 */
	height: 12px;
	background: var(--dashes);
	transform: skewX(var(--skew));
}
.extra-hero > .wp-block-columns::before {
	content: "";
	position: absolute;
	left: 44%;
	bottom: -3rem;
	width: 176px;
	height: 32px;
	background: var(--dots);
	opacity: .85;
}
@media (max-width: 781px) {
	.extra-hero::after { top: auto; bottom: 8%; height: 150px; }
	.extra-hero__media::before,
	.extra-hero > .wp-block-columns::before { display: none; }
	.extra-hero__media::after { right: 6px; height: 120px; }
}

/* Droga – skośne kreski (stopka) */
.extra-road {
	height: 8px;
	background: var(--dashes);
	--dashes: repeating-linear-gradient(90deg, var(--wp--preset--color--accent) 0 48px, transparent 48px 72px);
	transform: skewX(var(--skew));
}

/* ---------- Karty kategorii ---------- */
.extra-cat {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
	clip-path: var(--clip-cut);
	transition: transform .25s ease;
	height: 100%;
}
.extra-cat::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 0;
	background: var(--wp--preset--color--accent);
	transition: width .35s ease;
}
.extra-cat:hover { transform: translateY(-4px); }
.extra-cat:hover::after { width: 100%; }
.extra-cat .wp-block-image { margin: 0; }
.extra-cat .wp-block-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; transition: transform .5s ease; }
.extra-cat:hover .wp-block-image img { transform: scale(1.04); }
.extra-cat__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	margin: 0 !important;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
	padding: .55rem 1rem;
	clip-path: var(--clip-para);
	width: max-content;
}
.extra-cat h3 a { text-decoration: none; }
.extra-cat h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.extra-cat .extra-arrow { transition: transform .25s ease; display: inline-block; color: var(--wp--preset--color--accent-dark); }
.extra-cat:hover .extra-arrow { transform: translateX(4px); }

/* ---------- Ciemna sekcja: ukośna górna krawędź + dekoracje ---------- */
.wp-block-post-content > .has-ink-background-color.alignfull {
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: hidden;
	margin-top: calc(-1 * var(--slant));
	padding-top: calc(var(--wp--preset--spacing--60) + var(--slant)) !important;
	clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}
.has-ink-background-color.alignfull > .wp-block-columns::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: 1.25%;
	top: calc(var(--slant) + 1rem);
	width: 112px;
	height: 48px;
	background: var(--dots);
	opacity: .5;
}
.has-ink-background-color.alignfull::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -30px;
	bottom: -20px;
	width: 34px;
	height: 200px;
	background: var(--wp--preset--color--accent);
	transform: skewX(-32deg);
	box-shadow: 52px 0 0 var(--wp--preset--color--ink-soft);
}
.has-ink-background-color.alignfull .wp-block-image img { clip-path: var(--clip-cut); --cut: 36px; }

/* ---------- Karty cech ---------- */
.extra-feature {
	height: 100%;
	clip-path: var(--clip-cut);
	border-left: 3px solid var(--wp--preset--color--accent);
}
.extra-feature .extra-num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .875rem;
	color: var(--wp--preset--color--accent);
	letter-spacing: .08em;
}

/* ---------- Atuty kursu: jedna karta wyróżniona + dwie mniejsze ---------- */
.extra-why {
	--icon-wheel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 14v7M10 12l-6.75-2M14 12l6.75-2'/%3E%3C/svg%3E");
	--icon-helmet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2D32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a9 9 0 0 1 5.66 16H6.34A9 9 0 0 1 12 4z'/%3E%3Cpath d='M20 9h-8.8a1 1 0 0 0-.97 1.25c.51 2 1.6 3.42 3.27 4.25 2 1 4.33 1.5 7 1.5'/%3E%3C/svg%3E");
	--icon-road: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19 8 5M16 5l4 14M12 8V6M12 13v-2M12 18v-2'/%3E%3C/svg%3E");
	--icon-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7-.7.7M9 16a5 5 0 1 1 6 0 3.5 3.5 0 0 0-1 3 2 2 0 0 1-4 0 3.5 3.5 0 0 0-1-3M9.7 17h4.6'/%3E%3C/svg%3E");
	--icon-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 6-3 6 3 6-3v13l-6 3-6-3-6 3V7M9 4v13M15 7v13'/%3E%3C/svg%3E");
	--icon-moto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='16' r='3'/%3E%3Ccircle cx='19' cy='16' r='3'/%3E%3Cpath d='M7.5 14h5l4-4H6m1.5 4 4-4M13 6h2l1.5 3 2 4'/%3E%3C/svg%3E");
}
.extra-why__grid { align-items: stretch !important; }
.extra-lead {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.75rem, 4vw, 3rem);
	clip-path: var(--clip-cut);
	--cut: 28px;
}
.extra-lead::after {
	content: "";
	position: absolute;
	right: -3.5rem;
	bottom: -4.5rem;
	width: 17rem;
	height: 17rem;
	background: var(--icon-wheel) center / contain no-repeat;
	pointer-events: none;
}
.extra-lead--helmet::after { background-image: var(--icon-helmet); }
.extra-lead > * { position: relative; z-index: 1; }
.extra-lead > .wp-block-heading {
	margin-block: .75rem 1rem;
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
	line-height: 1.08;
}
.extra-lead > p:not(.is-style-eyebrow) { max-width: 30rem; margin: 0; color: #C5C7CB; }
.extra-why__side { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.extra-why__side > * { margin: 0 !important; }
.extra-tile {
	flex: 1;
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: 1.25rem;
	align-content: center;
	padding: 1.75rem;
	clip-path: var(--clip-cut);
}
.extra-tile::before {
	content: "";
	grid-row: 1 / span 2;
	width: 3rem;
	height: 3rem;
	background: var(--wp--preset--color--accent) var(--icon) center / 1.5rem no-repeat;
	clip-path: var(--clip-cut);
	--cut: 10px;
}
.extra-tile.has-accent-soft-background-color::before { background-color: var(--wp--preset--color--ink); }
.extra-tile--road { --icon: var(--icon-road); }
.extra-tile--bulb { --icon: var(--icon-bulb); }
.extra-tile--map { --icon: var(--icon-map); }
.extra-tile--moto { --icon: var(--icon-moto); }
.extra-tile > * { grid-column: 2; margin: 0 !important; }
.extra-tile > .wp-block-heading { font-size: 1.25rem; line-height: 1.25; }
.extra-tile > p { margin-top: .35rem !important; }

/* ---------- Etapy kursu ---------- */
.extra-steps { counter-reset: step; }
.extra-step {
	position: relative;
	padding-left: 4.5rem !important;
	counter-increment: step;
}
.extra-step::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	width: 3rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	clip-path: var(--clip-para);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .9rem;
}
.extra-step::after {
	content: "";
	position: absolute;
	left: calc(1.5rem - 1px);
	top: 3rem;
	bottom: -1.75rem;
	border-left: 2px dashed var(--wp--preset--color--line);
}
.extra-step:last-child::after { display: none; }
.extra-step h4 { margin-top: .25rem; }
.extra-step .extra-pill {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .25rem .7rem;
	clip-path: var(--clip-para);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-dark);
	vertical-align: middle;
	margin-left: .35rem;
}

/* ---------- Opinie ---------- */
.extra-review { height: 100%; clip-path: var(--clip-cut); }
.extra-stars { color: var(--wp--preset--color--accent); letter-spacing: .15em; font-size: 1.1rem; }

/* ---------- Lokalizacje ---------- */
.extra-loc { height: 100%; clip-path: var(--clip-cut); border: 0 !important; }
.extra-loc dl { margin: 0; display: grid; gap: .85rem; }
.extra-loc dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.extra-loc dd { margin: .15rem 0 0; }

/* ---------- Pas CTA ---------- */
.extra-rounded {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	--cut: 40px;
	clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.extra-rounded.has-accent-background-color::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 22%;
	top: -20px;
	width: 32px;
	height: 160%;
	background: var(--wp--preset--color--ink);
	opacity: .1;
	transform: skewX(-32deg);
	box-shadow: 50px 0 0 rgba(22, 24, 27, 1), 100px 0 0 rgba(22, 24, 27, 1);
}

/* ---------- Stopka: ukośna górna krawędź ---------- */
.wp-site-blocks > footer.wp-block-template-part { position: relative; z-index: 1; margin-top: calc(-1 * var(--slant)); }
.extra-footer {
	clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
	padding-top: calc(var(--wp--preset--spacing--60) + var(--slant)) !important;
}
.extra-footer a { text-decoration: none; }
.extra-footer a:hover { color: var(--wp--preset--color--accent); }
.extra-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.extra-footer a[href^="mailto:"] { overflow-wrap: anywhere; font-size: .875rem; }
/* zapas na ukos, żeby stopka nie zjadała końca treści */
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group:has(+ footer) { padding-bottom: var(--slant); }
.home .wp-site-blocks > main { padding-bottom: 0; }

/* ---------- Baner podstron ---------- */
/* Grafitowy pas z ukośną dolną krawędzią (lustro stopki) i pomarańczową linią wzdłuż ukosu. */
.extra-banner {
	position: relative;
	z-index: 1;
	overflow: hidden;
	isolation: isolate;
	margin-bottom: calc(-1 * var(--slant)) !important;
	padding-bottom: calc(var(--wp--preset--spacing--50) + var(--slant)) !important;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.extra-banner .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); margin: 0; max-width: 22ch; }
.extra-banner::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	top: 0;
	bottom: 0;
	width: 34%;
	background: var(--wp--preset--color--ink-soft);
	clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
.extra-banner.alignfull::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: calc(var(--slant) + 6px);
	transform: none;
	box-shadow: none;
	background: var(--wp--preset--color--accent);
	clip-path: polygon(0 calc(100% - 6px), 100% 0, 100% 6px, 0 100%);
}
/* pierwsza sekcja treści zaczyna się pod ukosem */
.extra-banner + .wp-block-post-content > .alignfull:first-child { padding-top: calc(var(--wp--preset--spacing--60) + var(--slant)) !important; }

.extra-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.extra-breadcrumb a { color: inherit; text-decoration: none; }
.extra-breadcrumb a:hover { color: var(--wp--preset--color--accent); }
.extra-breadcrumb > * + *::before { content: "/"; margin-right: .6rem; color: var(--wp--preset--color--accent); }
.extra-breadcrumb [aria-current] { color: var(--wp--preset--color--accent); }
@media (max-width: 781px) { .extra-banner::before { width: 22%; } }

/* Karta w kolorze sekcji by zniknęła – biała karta na białej sekcji robi się beżowa. */
.alignfull.has-white-background-color .has-white-background-color:not(.alignfull) { background-color: var(--wp--preset--color--paper) !important; }

/* ---------- Szybkie fakty (hero kursu) ---------- */
.extra-facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.extra-facts li {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .45rem .95rem;
	background: var(--wp--preset--color--white);
	clip-path: var(--clip-para);
}
.extra-facts li strong { color: var(--wp--preset--color--accent-dark); }

/* ---------- Lista „Dlaczego warto” ---------- */
ul.extra-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 1rem 2.5rem;
}
ul.extra-checks li { position: relative; padding-left: 2.1rem; }
ul.extra-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 18px;
	height: 10px;
	background: var(--wp--preset--color--accent);
	transform: skewX(var(--skew));
}
.has-ink-background-color ul.extra-checks li { color: #ffffffd9; }
.has-ink-background-color ul.extra-checks strong { color: var(--wp--preset--color--white); }

/* Listy w kartach – ten sam skośny znacznik co w pakietach */
.extra-card ul.wp-block-list:not(.extra-schedule):not(.extra-checks) { list-style: none; padding: 0; display: grid; gap: .45rem; }
.extra-card ul.wp-block-list:not(.extra-schedule):not(.extra-checks) li { padding-left: 1.4rem; position: relative; }
.extra-card ul.wp-block-list:not(.extra-schedule):not(.extra-checks) li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 6px; background: var(--wp--preset--color--accent); transform: skewX(var(--skew)); }

/* Siatki z „columnCount” – WP 6.7 wypisuje sztywne repeat(N, …) i ignoruje
   minimalną szerokość, więc na węższych ekranach przechodzimy na auto-fill */
@media (max-width: 959px) {
	.is-layout-grid[class*="wp-container-"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
}

/* ---------- Karty pakietów (cennik) ---------- */
.extra-prices { align-items: stretch; }
.extra-price {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	clip-path: var(--clip-cut);
	border-top: 4px solid var(--wp--preset--color--accent);
}
.extra-price > * { margin-block: 0; }
.extra-price .extra-price__tag {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .3rem .8rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	clip-path: var(--clip-para);
}
.extra-price .extra-price__old { color: var(--wp--preset--color--muted); font-size: .9375rem; }
.extra-price .extra-price__old s { text-decoration-thickness: 2px; text-decoration-color: var(--wp--preset--color--accent-dark); }
.extra-price .extra-price__now {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: -.01em;
}
.extra-price .extra-price__now small { display: block; margin-top: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--accent-dark); }
.extra-price ul { list-style: none; padding: 0; display: grid; gap: .4rem; font-size: .9375rem; }
.extra-price ul li { padding-left: 1.4rem; position: relative; }
.extra-price ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 6px; background: var(--wp--preset--color--accent); transform: skewX(var(--skew)); }
.extra-price .wp-block-buttons { margin-top: auto; padding-top: .5rem; }
.extra-price.has-ink-background-color .extra-price__old { color: #ffffff99; }
.extra-price.has-ink-background-color .extra-price__now small { color: var(--wp--preset--color--accent); }
.extra-price.has-ink-background-color .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); }
.extra-price .extra-price__tag { white-space: nowrap; }

/* Cennik: pakiety jako wiersze (opis | co w cenie | cena | przycisk) */
@media (min-width: 900px) {
	.extra-prices--list .extra-price {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 11rem 10rem;
		column-gap: 2.5rem;
		row-gap: .4rem;
		align-items: center;
		height: auto;
		padding-block: 1.75rem !important;
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.extra-prices--list .extra-price:hover { transform: translateX(6px); }
	.extra-prices--list .extra-price > * { grid-column: 1; }
	.extra-prices--list .extra-price > .extra-price__tag { justify-self: start; }
	.extra-prices--list .extra-price > .extra-price__now { white-space: nowrap; }
	.extra-prices--list .extra-price > h3 { margin-top: .35rem; }
	.extra-prices--list .extra-price > ul {
		grid-column: 2;
		grid-row: 1 / span 3;
		padding-left: 2rem;
		border-left: 1px dashed var(--wp--preset--color--line);
	}
	.extra-prices--list .extra-price.has-ink-background-color > ul { border-left-color: #ffffff33; }
	.extra-prices--list .extra-price > .extra-price__old { grid-column: 3; grid-row: 1; align-self: end; }
	.extra-prices--list .extra-price > .extra-price__now { grid-column: 3; grid-row: 2 / span 2; align-self: start; }
	.extra-prices--list .extra-price:not(:has(.extra-price__old)) > .extra-price__now { grid-row: 1 / span 3; align-self: center; }
	.extra-prices--list .extra-price > .wp-block-buttons {
		grid-column: 4;
		grid-row: 1 / span 3;
		margin: 0;
		padding: 0;
		justify-content: flex-end;
	}
}

/* ---------- Terminarz ---------- */
ul.extra-schedule { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
ul.extra-schedule li {
	display: grid;
	grid-template-columns: minmax(4.5rem, max-content) 1fr;
	gap: 1rem;
	align-items: baseline;
	padding: .7rem 0;
	border-bottom: 1px dashed var(--wp--preset--color--line);
}
ul.extra-schedule li:last-child { border-bottom: 0; }
ul.extra-schedule li strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
}
ul.extra-schedule li.is-special,
ul.extra-schedule li mark { background: none; color: var(--wp--preset--color--accent-dark); font-weight: 700; }

/* ---------- Karty (kontakt, pliki, dokumenty) ---------- */
.extra-card { height: 100%; clip-path: var(--clip-cut); }
.extra-card > * { margin-block-start: 0; }
.extra-card .extra-card__big {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.extra-card .extra-card__big a { text-decoration: none; }
.extra-map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(.35); clip-path: var(--clip-cut); --cut: 36px; }

/* ---------- Obraz w treści: ścięty róg ---------- */
.extra-cut-img img { clip-path: var(--clip-cut); --cut: 36px; width: 100%; object-fit: cover; }

/* ---------- Pływający telefon (mobile) ---------- */
.extra-callfab { display: none; }
@media (max-width: 781px) {
	.extra-callfab {
		display: flex;
		position: fixed;
		right: 1rem;
		bottom: 1rem;
		z-index: 60;
		align-items: center;
		gap: .5rem;
		padding: .9rem 1.5rem;
		clip-path: var(--clip-para);
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--ink);
		font-weight: 700;
		text-decoration: none;
		filter: drop-shadow(0 10px 18px rgba(22, 24, 27, .35));
	}
	.has-modal-open .extra-callfab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}