/*
Theme Name:  Laboratoryjnie Child
Description: Odświeżony, nowoczesny wygląd dla laboratoryjnie.pl – child theme dla Perfect Magazine.
Template:    perfect-magazine
Version:     1.5.7
Author:      laboratoryjnie.pl
*/

/* =====================================================================
   1. FOUNDATION — variables, fonts, reset
   ===================================================================== */
:root {
	--font-head: 'Lato', 'Segoe UI', sans-serif;
	--font-body: 'Lato', 'Segoe UI', sans-serif;

	--c-ink:      #14181f;
	--c-text:     #3f4757;
	--c-muted:    #7c8494;
	--c-faint:    #a8afbd;
	--c-line:     #e7e9ee;
	--c-line-2:   #eef0f4;
	--c-bg:       #ffffff;
	--c-bg-soft:  #f6f7fb;
	--c-bg-deep:  #10141d;
	--c-bg-deep-2:#181d29;

	--c-red:      #e0102a;
	--c-red-dark: #b40d22;
	--c-red-soft: #fdecee;
	--c-amber:    #f5a623;
	--c-amber-dark:#c97f0e;
	--c-amber-soft:#fef4e2;

	--radius-sm: 6px;
	--radius:    10px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	--shadow-xs: 0 1px 2px rgba(20,24,31,.06);
	--shadow-sm: 0 4px 14px rgba(20,24,31,.08);
	--shadow-md: 0 10px 30px rgba(20,24,31,.12);
	--shadow-lg: 0 20px 50px rgba(20,24,31,.16);

	--ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.site-title, .entry-title, .widget-title, .item-title,
.slide-title, .full-item-title {
	font-family: var(--font-head);
	color: var(--c-ink);
	letter-spacing: -0.01em;
}

/* Font audit — the parent theme sets 'Source Sans Pro' on plain
   textareas and 'Playfair Display' (a serif) on .primary-font /
   .secondary-font and a decorative entry-content initial. Force Lato
   everywhere text actually renders; code/kbd/pre keep their monospace
   stack and icon-font glyphs (Ionicons etc.) are untouched. */
textarea,
.primary-font {
	font-family: var(--font-body) !important;
}
.secondary-font,
.comment-respond .comment-reply-title {
	font-family: var(--font-head) !important;
}
.single .entry-content:before,
.page .entry-content:before {
	font-family: var(--font-head) !important;
}

/* Perfect Magazine 1.1.9 replaced Bootstrap 3 with Bootstrap 5, whose Reboot
   underlines every bare <a>. The design has never used underlined links
   outside article copy, so turn it back off globally here; the deliberate
   underline for links inside article text is re-applied on .entry-content a
   further down (section 9). */
body a { color: var(--c-ink); text-decoration: none; transition: color .2s var(--ease); }
body a:hover, body a:focus { color: var(--c-red); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }

img { display: block; height: auto; max-width: 100%; }

::selection { background: var(--c-red); color: #fff; }

/* Top accent ribbon tying the two brand colours together */
body::before {
	content: '';
	display: block;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--c-red) 0%, var(--c-red) 55%, var(--c-amber) 100%);
}

#masthead + br { display: none; }

.container, .container-fluid { max-width: 1240px; }

/* Homepage runs ~15% wider than the rest of the site — it was feeling
   cramped with the custom hero/oferta/kalendarz/wideo/opinie sections.
   Bootstrap (loaded by the parent theme) sets a fixed `width` on .container
   at each breakpoint, which a max-width override can't beat — override
   width directly, with !important, so it wins regardless of source order. */
.home .container, .home .container-fluid { max-width: 1420px; }
@media (min-width: 1200px) {
	/* width:100% (not a fixed 1420px) so the container still shrinks with the
	   viewport — a hard width was overflowing the screen and causing a
	   horizontal scrollbar on windows between 1200px and 1420px wide. */
	.home .container, .home .container-fluid {
		width: 100% !important;
		max-width: 1420px !important;
	}
}


/* =====================================================================
   2. HEADER
   ===================================================================== */
#masthead {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: box-shadow .3s var(--ease);
}
#masthead.scrolled { box-shadow: 0 2px 20px rgba(20,24,31,.10); }

.top-bar {
	background: var(--c-bg);
	min-height: 32px;
	border-bottom: 1px solid var(--c-line-2);
}
.top-bar .row { display: flex; align-items: center; }
.top-bar .tm-social-share { display: flex; align-items: center; height: 32px; }

.social-icons ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.social-icons ul li { margin-bottom: 0; }
.social-icons ul li a:after {
	width: 22px; height: 22px; line-height: 22px;
	font-size: 12px; border-radius: 50%;
	background: transparent !important;
	color: var(--c-faint) !important;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.social-icons ul li a:hover:after {
	background: var(--c-red-soft) !important;
	color: var(--c-red) !important;
}

.top-bar .icon-search .search-form { background: transparent; border: none; }
.top-bar .icon-search .search-form input {
	font-size: 12.5px; height: 32px; color: var(--c-text);
	background: transparent;
}
.top-bar .icon-search .search-form input::placeholder { color: var(--c-faint); }
.top-bar .icon-search .search-form:before { font-size: 15px; line-height: 32px; color: var(--c-faint); }

#lbn-nav-utility {
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-line-2);
}
/* Same fix as #lbn-nav-main below: this ID-specificity rule was forcing
   the menu permanently visible on mobile too, which broke the shared
   toggleMenu() JS — it checks ALL ".menu-mobile" elements' display at
   once, so if this one was stuck "flex" (never "block"), the script
   could never detect either menu as "open" and stopped closing them. */
@media (min-width: 992px) {
	#lbn-nav-utility .main-navigation .menu > ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
}
#lbn-nav-utility .main-navigation .menu > ul > li > a {
	line-height: 34px;
	font-size: 10.5px;
	letter-spacing: .07em;
	color: var(--c-muted);
	padding: 0 13px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: var(--font-body);
}
#lbn-nav-utility .main-navigation .menu > ul > li:not(:last-child) > a {
	border-right: 1px solid var(--c-line-2);
}
#lbn-nav-utility .main-navigation .menu > ul > li > a:hover { color: var(--c-red); }
#lbn-nav-utility .main-navigation .menu > ul > li > a:after { display: none; }
#lbn-nav-utility .main-navigation .menu > ul > li.current-menu-item > a { color: var(--c-ink); }

.header-middle { padding: 26px 0 24px; }
.site-branding { display: flex; flex-direction: column; align-items: center; }
.custom-logo-link img, .site-branding img { max-height: 78px; width: auto; margin: 0 auto; }
.site-branding .site-title { font-size: 28px; line-height: 1.15; font-weight: 700; }
.site-branding .site-description { font-size: 11.5px; color: var(--c-faint); margin: 4px 0 0; letter-spacing: .03em; }

#lbn-nav-main {
	background: var(--c-bg);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
/* Only force the horizontal layout on desktop — below the theme's own
   991px JS breakpoint it swaps this same <ul> to class "menu-mobile"
   (hidden, toggled by the hamburger) and this ID-specificity rule was
   overriding that, forcing it permanently visible + unwrapped, which
   is what pushed the whole page wider than the viewport on phones. */
@media (min-width: 992px) {
	#lbn-nav-main .main-navigation .menu > ul {
		display: flex;
		justify-content: center;
	}
}
#lbn-nav-main .main-navigation .menu > ul > li > a {
	line-height: 50px;
	font-size: 12.5px;
	letter-spacing: .02em;
	font-weight: 600;
	color: var(--c-ink);
	padding: 0 18px;
	text-transform: uppercase;
	font-family: var(--font-head);
	position: relative;
}
/* The underline lives on .lbn-nav-label (a tight span wrapping just the
   link text, added via the walker_nav_menu_start_el filter in
   functions.php) rather than on the <a> itself — the <a>'s own padding-box
   only matches the text width by coincidence, and any font-rendering slack
   made the line visibly off-centre under longer labels. Underlining the
   text's own box means it always fits exactly, however it renders. */
#lbn-nav-main .main-navigation .menu > ul > li > a .lbn-nav-label {
	position: relative;
	display: inline-block;
	/* line-height:50px is inherited from the <a> (it sets the whole bar's
	   height) — for a block-ish box like this, that inflates the span's
	   OWN height to 50px too (line-height governs an inline-block's auto
	   height for its one line of text), way past the text's actual ~16px.
	   The underline (`bottom:0` on the pseudo-element below) was landing
	   at the bottom of that phantom 50px box — right at the nav bar's own
	   outer edge, where it visually blended with whatever sits behind the
	   bar's translucent/blurred background instead of sitting under the
	   text. Resetting it here makes the span's box hug the text itself. */
	line-height: normal;
	padding-bottom: 6px;
}
#lbn-nav-main .main-navigation .menu > ul > li > a .lbn-nav-label:after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	/* The logo's own red (#C41719) — darker/less pink than --c-red
	   (#E0102A), which is used site-wide for buttons/accents. Kept as a
	   one-off hex here rather than changing --c-red itself, since that
	   variable now drives dozens of other components built this session. */
	background: #c41719;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s var(--ease);
}
#lbn-nav-main .main-navigation .menu > ul > li:hover > a .lbn-nav-label:after,
#lbn-nav-main .main-navigation .menu > ul > li.current-menu-item > a .lbn-nav-label:after {
	transform: scaleX(1);
}
#lbn-nav-main .main-navigation .menu > ul > li > a:hover,
#lbn-nav-main .main-navigation .menu > ul > li.current-menu-item > a { color: var(--c-red); }
/* The parent theme has its OWN hover/current-item underline on this exact
   selector (perfect-magazine/style.css ~L1313, colour #b79567 — its
   "secondary" brand tan, unrelated to this site's red) that was never
   suppressed here — only on #lbn-nav-utility (a few lines up) got that
   treatment. It was rendering the whole time, sitting lower than the
   .lbn-nav-label one above because it inherits the same 50px line-height
   the label had before that got fixed, reading as a second, badly-placed,
   wrong-coloured bar under the real one. */
#lbn-nav-main .main-navigation .menu > ul > li > a:after { display: none; }

/* Dropdowns */
.main-navigation .menu li:hover > ul {
	background: #fff;
	box-shadow: var(--shadow-lg);
	border-top: 2px solid var(--c-red);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	padding: 6px 0;
}
.main-navigation .menu ul ul li { border-bottom: 1px solid var(--c-line-2); }
.main-navigation .menu ul ul li:last-child { border-bottom: none; }
.main-navigation .menu ul ul a {
	color: var(--c-text) !important;
	font-size: 12.5px;
	font-weight: 500;
	padding: 10px 22px !important;
	text-transform: none;
	letter-spacing: 0;
}
.main-navigation .menu ul ul a:hover { color: var(--c-red) !important; padding-left: 26px !important; }

.ham, .ham:before, .ham:after { background: var(--c-ink); }


/* =====================================================================
   3. HERO / SLIDER
   ===================================================================== */
.data-bg-slide { height: 420px; border-radius: var(--radius-lg); overflow: hidden; }
.mainbanner-jumbotron .data-bg-slide { margin-bottom: 90px; }
.mainbanner-jumbotron .container-fluid { padding-top: 26px; }

.slider-figcaption {
	background: rgba(16,20,29,.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-top: none;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding: 0 !important;
}
.slider-wrapper {
	background: transparent !important;
	text-align: left !important;
	padding: 22px 28px 24px !important;
}
.slider-wrapper, .slider-wrapper a { color: rgba(255,255,255,.85); }
.slide-title { font-size: 24px !important; line-height: 1.3; font-weight: 700; margin-bottom: 8px; }
.slide-title a { color: #fff !important; }
.slide-title a:hover { color: var(--c-amber) !important; }
.slider-wrapper > a {
	font-size: 13px;
	color: rgba(255,255,255,.82) !important;
}
.slider-figcaption .grid-item-metadata { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 8px; }
.slider-figcaption .grid-item-metadata a { color: rgba(255,255,255,.6) !important; }
.slider-figcaption .grid-item-metadata a:hover { color: #fff !important; }
.bg-shadow { background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); }

.mainbanner-thumbs { max-height: 490px; overflow: hidden; }
.slider-aside-item {
	border-bottom: 1px solid var(--c-line);
	padding: 12px 0;
	transition: transform .2s var(--ease);
}
.slider-aside-item:hover { transform: translateX(2px); }
.slider-aside-item:last-child { border-bottom: none; }
.data-bg-1 { height: 76px !important; border-radius: var(--radius-sm); overflow: hidden; }
.slide-nav-title { font-size: 13px !important; line-height: 1.35; font-weight: 600; font-family: var(--font-head); }
.slide-nav-title a:hover { color: var(--c-red) !important; }
.slide-nav-desc { font-size: 11.5px; color: var(--c-muted); }

.slick-prev, .slick-next,
.main-slick-prev, .main-slick-next {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255,255,255,.9) !important;
	box-shadow: var(--shadow-sm);
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.slick-prev:hover, .slick-next:hover { background: var(--c-red) !important; transform: scale(1.06); }
.slick-prev:hover:before, .slick-next:hover:before { color: #fff !important; }


/* =====================================================================
   3b. CONTENT / SIDEBAR WIDTH — give article content more room on
   subpages; parent theme default is a 66.66% / 33.33% split.
   ===================================================================== */
@media only screen and (min-width: 992px) {
	#primary { width: 72%; }
	#secondary { width: 28%; }
}


/* =====================================================================
   4. SECTION HEADERS
   ===================================================================== */
/* ---------------------------------------------------------------------
   Homepage widget-area backgrounds — single source of truth.

   The parent theme ALSO ships its own alternation rule for this area
   (`.homepage-widgetarea .tm-widget:nth-child(even) { background-color:
   #f2f1f2 }`), gated behind the .tm-widget class that only some widgets
   carry (it's a manually-assigned "Widget CSS Class", easy to forget on
   a newly-added widget). Because that selector is MORE specific than a
   plain `.widget-even`/`.widget-odd` rule, it was silently winning on
   some widgets and not others — two different grays fighting for the
   same row, which is exactly the "porozjeżdżały tła" bug reported twice.

   Fix: use ONLY the automatically-assigned .widget-odd/.widget-even
   classes (every widget gets one, no manual tagging required) and force
   them with !important so nothing — present or future, in either
   theme — can override just one widget and break the alternation again.
   ------------------------------------------------------------------ */
.homepage-widgetarea {
	background: var(--c-bg);
	border-top: 1px solid var(--c-line);
}
.homepage-widgetarea .widget { padding-top: 34px; padding-bottom: 34px; }

/* The widget box itself is capped to 1420px and centered (see below), so a
   plain background-color on it only paints a narrow strip with white on
   both sides — against the surrounding white that reads as barely-there,
   nowhere near as visible as the full-bleed hero/oferta/opinie bands above
   this section. box-shadow with a huge spread + clip-path to prevent
   horizontal overflow is the standard trick to make a background bleed
   full-width from a max-width, centered box without extra markup — this
   works for every widget regardless of its own internal HTML structure. */
.homepage-widgetarea .widget-even {
	background-color: var(--c-bg-soft) !important;
	box-shadow: 0 0 0 100vmax var(--c-bg-soft);
	clip-path: inset(0 -100vmax);
	position: relative;
}
.homepage-widgetarea .widget-odd {
	background-color: var(--c-bg) !important;
}

.homepage-widgetarea .widget .widget-header-wrapper {
	background: transparent !important;
	border-left: none;
	border-radius: 0;
	padding: 0 0 14px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--c-line);
	position: relative;
}
.homepage-widgetarea .widget .widget-header-wrapper:after {
	content: '';
	position: absolute; left: 0; bottom: -1px; width: 46px; height: 3px;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}
.homepage-widgetarea .widget .widget-header-wrapper .widget-title {
	font-size: 21px;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0;
	padding: 0;
}
.homepage-widgetarea .widget .widget-header-wrapper .widget-description {
	font-size: 11px;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 4px 0 0;
	font-weight: 600;
}

/* The parent theme caps each widget box itself at max-width:1170px (and,
   for widgets carrying the .tm-widget class, resets it to
   max-width:inherit via a more specific selector) — widen it to match
   the rest of the homepage. Applies to every widget regardless of the
   .tm-widget tag, so a newly-added widget is never the odd one out. */
.homepage-widgetarea .widget {
	max-width: 1420px !important;
}

/* Plain Text/Block widgets (e.g. "Polecamy", "Kalendarium i ciekawostki")
   render their title as a bare <h2>, with no .widget-header-wrapper — give
   it the same bordered + gradient-underline treatment for consistency. */
.homepage-widgetarea .widget > .widget-title {
	position: relative;
	max-width: 1420px;
	box-sizing: border-box;
	font-size: 21px !important;
	font-weight: 700 !important;
	color: var(--c-ink) !important;
	text-transform: uppercase;
	margin: 0 auto 26px !important;
	padding: 0 10px 14px !important;
	border-bottom: 1px solid var(--c-line);
}
.homepage-widgetarea .widget > .widget-title:after {
	content: '';
	position: absolute; left: 10px; bottom: -1px; width: 46px; height: 3px;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}

.site-content .site-main .widget-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--c-line);
	text-transform: none;
	letter-spacing: 0;
	position: relative;
}
.site-content .site-main .widget-title:after {
	content: '';
	position: absolute; left: 0; bottom: -1px; width: 46px; height: 3px;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}
.site-content .site-main .widget-title span {
	font-size: 22px; color: var(--c-ink); background: transparent; padding-right: 0; position: static;
}

.section-title {
	font-size: 19px; font-weight: 700; color: var(--c-ink);
	margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line);
	position: relative;
}
.section-title:after {
	content: '';
	position: absolute; left: 0; bottom: -1px; width: 46px; height: 3px;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}


/* =====================================================================
   5. ARTICLE CARDS
   ===================================================================== */
.homepage-widgetarea a,
.homepage-widgetarea .reveal-enable { color: var(--c-ink); }
.homepage-widgetarea a:hover { color: var(--c-red); }

.reveal-init { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-init.in-view { opacity: 1; transform: translateY(0); }

.homepage-widgetarea .col-sm-4 .post-image,
.homepage-widgetarea .col-md-4 .post-image {
	height: 220px; overflow: hidden; position: relative; border-radius: var(--radius);
}
.homepage-widgetarea .col-sm-4 .post-image img,
.homepage-widgetarea .col-md-4 .post-image img {
	width: 100%; height: 100%; object-fit: cover; max-width: none;
	transition: transform .5s var(--ease);
}
.homepage-widgetarea .col-sm-4 article:hover .post-image img,
.homepage-widgetarea .col-md-4 article:hover .post-image img { transform: scale(1.06); }

.homepage-widgetarea .col-md-3 .post-image { height: 160px; overflow: hidden; position: relative; border-radius: var(--radius); }
.homepage-widgetarea .col-md-3 .post-image img {
	width: 100%; height: 100%; object-fit: cover; max-width: none;
	transition: transform .5s var(--ease);
}
.homepage-widgetarea .col-md-3 article:hover .post-image img { transform: scale(1.06); }

/* Every grid/vertical-list article gets a real card (radius, shadow-on-
   hover, padding around the image) — not just relying on Bootstrap's
   column gutters for separation. Those gutters only exist side-by-side;
   the moment col-md-3/col-sm-4 collapse to full width on mobile, cards
   had zero margin between them and ran straight into each other (image
   bleeding directly into the next card's image, no gap) since nothing
   here ever gave the *article* itself a margin — only its child
   .post-image had a radius. No border (removed on request — the shadow
   on hover already reads as a card without one, and a border added a
   second, redundant edge against the background gradient).

   Bootstrap 5's .row is a flexbox (align-items defaults to stretch), so
   the *columns* in a row are already equal height. A legacy jQuery
   matchHeight plugin (data-mh="list-height"/"grid-height", from this
   theme's Bootstrap-3 days) ALSO pins them to an explicit inline px
   height — that one-shot JS measurement doesn't re-run when this file's
   CSS changes how tall a card's content needs to be, so it went stale:
   cards overflowed it, with the footer/date spilling out past the
   card's visible bottom edge instead of the box growing to fit. The
   data-mh attribute is stripped server-side now (inc/widget-excerpts.php)
   so only the CSS flex-stretch below — which recalculates on every
   render — ever determines row height. height:100% + flex column makes
   the card itself fill that (now purely CSS-driven) height, and pushing
   .entry-footer down with margin-top:auto keeps every card's date on the
   same baseline regardless of how many lines its title/excerpt wrapped
   to or how many rows its category pills took. */
.homepage-widgetarea .col-md-3 article.article-vertical-list,
.homepage-widgetarea .col-md-3 article.article-grid-list,
.homepage-widgetarea .col-sm-4 article.article-vertical-list,
.homepage-widgetarea .col-sm-4 article.article-grid-list,
.homepage-widgetarea .col-md-4 article.article-vertical-list,
.homepage-widgetarea .col-md-4 article.article-grid-list {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: var(--c-bg);
	border-radius: var(--radius-lg);
	padding: 12px 12px 18px;
	transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.homepage-widgetarea .col-md-3 article.article-vertical-list:hover,
.homepage-widgetarea .col-md-3 article.article-grid-list:hover,
.homepage-widgetarea .col-sm-4 article.article-vertical-list:hover,
.homepage-widgetarea .col-sm-4 article.article-grid-list:hover,
.homepage-widgetarea .col-md-4 article.article-vertical-list:hover,
.homepage-widgetarea .col-md-4 article.article-grid-list:hover {
	box-shadow: var(--shadow-md); transform: translateY(-3px);
}
/* FOUND IT — the actual source of the border AND the clipped/overflowing
   card content that kept coming back: the parent theme's OWN
   .article-content-1 rule (style.css, "## Homepage" section), completely
   separate from anything above in this file:
       .article-content-1 { background:#fff; border-left/right/bottom:
       1px solid #deddde; height:212px; display:table; padding:20px; }
   Every card's real markup carries BOTH classes at once — class=
   "article-content article-content-1" — so that hardcoded 212px height
   and 3-sided grey border were ALWAYS there, completely untouched by
   every .article-content-only rule above, because .article-content-1 is
   a different (and, on height/border specifically, undefeated) selector.
   That's the "border" that survived every previous fix attempt, and the
   fixed 212px is what clipped the footer/date outside the card on any
   post whose pills+title+excerpt needed more than 212px to show. */
.homepage-widgetarea .col-md-3 article .article-content,
.homepage-widgetarea .col-sm-4 article .article-content,
.homepage-widgetarea .col-md-4 article .article-content,
.homepage-widgetarea .col-md-3 article .article-content-1,
.homepage-widgetarea .col-sm-4 article .article-content-1,
.homepage-widgetarea .col-md-4 article .article-content-1 {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	border: none;
	padding: 0;
	background: transparent;
}
.homepage-widgetarea .col-md-3 article .entry-footer,
.homepage-widgetarea .col-sm-4 article .entry-footer,
.homepage-widgetarea .col-md-4 article .entry-footer {
	margin-top: auto;
	padding-top: 6px;
}
/* Columns need their own margin-bottom now — it used to live on the
   article, but an article that stretches to height:100% of its column
   can't also push that column down with its own margin (the margin
   would sit outside the 100%-tall box, between the column's bottom edge
   and the *next row*, not between cards in the same row). */
.homepage-widgetarea .col-md-3,
.homepage-widgetarea .col-sm-4,
.homepage-widgetarea .col-md-4 {
	margin-bottom: 24px;
}
/* The padding above insets the image too now, so its own corner radius
   already reads correctly against the card's white background — no
   overflow:hidden needed on the article since nothing bleeds to its edge
   anymore. */

.homepage-widgetarea .entry-title {
	font-size: 15.5px !important;
	line-height: 1.4 !important;
	font-weight: 700;
	color: var(--c-ink);
	display: block !important;
	max-height: 2.8em !important;
	overflow: hidden !important;
	margin-bottom: 8px;
	flex-shrink: 0;
	transition: color .2s var(--ease);
}
.homepage-widgetarea .entry-title a { color: inherit; }
.homepage-widgetarea .entry-title a:hover { color: var(--c-red); }

/* flex-shrink:0 + a guaranteed min-height (not just -webkit-line-clamp,
   which caps the MAX lines but doesn't reserve space) — needed because
   .article-content became a flex column (see the article-card height
   fix above) so it could push .entry-footer to the bottom. Without
   these, the flex algorithm was free to squeeze this paragraph down
   below its 3-line content height whenever a *different* flex sibling
   in the same card needed more room — concretely, .entry-meta wraps to
   two rows of category pills on posts with 4-5 categories vs. one row
   on posts with 2, and that row was eating into the excerpt's space
   card-by-card, leaving the excerpt near-invisible (squashed to a
   sliver) on exactly the cards with more categories. */
.homepage-widgetarea .entry-footer > p,
.homepage-widgetarea .article-content > p {
	font-size: 13.5px; line-height: 1.6; color: var(--c-muted);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	margin-bottom: 10px;
	flex-shrink: 0;
	min-height: 4.8em;
}
.homepage-widgetarea .entry-meta { flex-shrink: 0; }

.homepage-widgetarea .posted-on a { font-size: 11px; color: var(--c-faint) !important; font-weight: 600; letter-spacing: .02em; }
/* Parent theme's `time.updated { display: none; }` (style.css:3668) is
   meant to hide a second, genuinely redundant <time class="updated"> some
   posts get next to their <time class="entry-date published"> — that part
   is correct and left alone. But other posts get ONE <time> with both
   classes combined (class="entry-date published updated"), and that rule
   was blanket-hiding those too, leaving no date at all. The extra
   `.entry-date` qualifier here targets only the combined case. */
.homepage-widgetarea time.entry-date.updated { display: inline !important; }
/* "By : <author>" — inc/widget-excerpts.php already strips this from the
   Musisz wiedzieć/Strefa ekspercka/Praktyka laboratoryjna widget markup,
   but the homepage also has a "row-bg" feature-card layout that isn't
   built through those widget classes and prints its own byline the same
   way. Catching it here in CSS covers that (and any other layout) too,
   without a PHP regex for every render path. The date's amber dot is on
   `.posted-on:before`, not `.byline`, so hiding this leaves no orphaned
   separator. */
.homepage-widgetarea .byline { display: none !important; }
.homepage-widgetarea .posted-on:before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-amber);
	margin-right: 5px;
	vertical-align: middle;
}

.homepage-widgetarea a.readmore {
	font-size: 11.5px !important; font-weight: 700; color: var(--c-red) !important;
	letter-spacing: .06em; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 4px;
}
.homepage-widgetarea a.readmore:hover { color: var(--c-red-dark) !important; gap: 7px; }

/* !important on radius/padding here because the "featured post" card
   layout (.entry-meta.entry-meta-bg) carries a more specific parent-theme
   rule with its own radius/padding, which otherwise wins over this one and
   leaves that one card style with squared 3px corners while every other
   card here uses these — force one consistent look everywhere. */
.categories-list > a, .post-category-label a {
	display: inline-block;
	font-size: 10.5px; letter-spacing: .06em; font-weight: 700;
	padding: 5px 12px !important; border-radius: var(--radius-sm) !important; text-transform: uppercase;
	background: var(--c-red-soft) !important; color: var(--c-red) !important;
	margin: 0 2px 6px 0;
}
.categories-list > a:hover, .post-category-label a:hover { background: var(--c-red) !important; color: #fff !important; }

.row-bg {
	background: var(--c-bg);
	margin-bottom: 24px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--c-line);
	box-shadow: none;
	transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
	overflow: hidden;
}
.row-bg:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }

.article-item-image { overflow: hidden; position: relative; border-radius: var(--radius); }
.article-item-image img { transition: transform .5s var(--ease); width: 100%; }
.tm-article-item:hover .article-item-image img,
.row-bg:hover .article-item-image img { transform: scale(1.06); }

.item-title { font-size: 14.5px; line-height: 1.4; font-weight: 700; color: var(--c-ink); margin: 8px 0; }
.item-title a { color: inherit; }
.item-title a:hover { color: var(--c-red); }
.item-title-small { font-size: 12.5px; line-height: 1.3; font-weight: 600; }

.posted-on a { font-size: 11px; color: var(--c-faint); font-weight: 600; }

.homepage-widgetarea .widget .row + .row { margin-top: 20px; }


/* =====================================================================
   6. BUTTONS & FORMS
   ===================================================================== */
.wp-block-button__link, .wp-block-button a {
	background-color: var(--c-red) !important;
	border-color: var(--c-red) !important;
	color: #fff !important;
	border-radius: var(--radius-pill) !important;
	font-size: 12px !important;
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 12px 26px !important;
	transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wp-block-button__link:hover, .wp-block-button a:hover {
	background-color: var(--c-red-dark) !important; color: #fff !important;
	transform: translateY(-2px); box-shadow: var(--shadow-sm);
}

.tm-widget .btn, .homepage-widgetarea .btn {
	font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	border-radius: var(--radius-pill); padding: 10px 22px; transition: transform .2s var(--ease);
}
.tm-widget .btn:hover, .homepage-widgetarea .btn:hover { transform: translateY(-2px); }

.mailpoet_submit, input[type="submit"], button[type="submit"] {
	background-color: var(--c-red) !important;
	border-color: var(--c-red) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: var(--radius-pill) !important;
	padding: 12px 26px;
	cursor: pointer;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.mailpoet_submit:hover, input[type="submit"]:hover { background-color: var(--c-red-dark) !important; transform: translateY(-2px); }

/* Top-bar search stays an icon-only, invisible-submit control (parent theme pattern) */
.top-bar .icon-search .search-form input[type="submit"] {
	background: transparent !important;
	border: none !important;
	color: transparent !important;
	font-size: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

input[type="text"], input[type="email"], input[type="search"], textarea {
	border-radius: var(--radius-sm);
	border: 1px solid var(--c-line);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, textarea:focus {
	border-color: var(--c-red);
	box-shadow: 0 0 0 3px var(--c-red-soft);
	outline: none;
}

#scroll-up {
	width: 42px; height: 42px; border-radius: 50%;
	bottom: 24px; right: 24px;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-ink) !important;
	box-shadow: var(--shadow-md);
	transition: background .2s var(--ease), transform .2s var(--ease);
}
#scroll-up:hover { background: var(--c-red) !important; transform: translateY(-3px); }
/* The theme's markup is <a id="scroll-up"><i class="ion-ios-arrow-up"></i></a>.
   We dequeue the whole Ionicons pack (see functions.php — 188 KB of font for
   this single glyph), so draw the chevron with two borders instead. */
#scroll-up .ion-ios-arrow-up {
	display: block;
	width: 10px; height: 10px;
	margin-top: 4px;                 /* optically centre the glyph */
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);       /* points up */
	font-size: 0;                    /* hide any fallback glyph box */
}


/* =====================================================================
   7. TESTIMONIALS / PRO BANNER
   ===================================================================== */
.tm-widget .container { padding-top: 6px; padding-bottom: 6px; }
.tm-widget blockquote, .tm-widget p { font-size: 14.5px; line-height: 1.7; color: var(--c-text); font-style: italic; }
.tm-widget .slick-prev, .tm-widget .slick-next { width: 32px; height: 32px; }

.pro-banner { padding: 18px 0; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); }
.pro-banner img { max-height: 90px; margin: 0 auto; border-radius: var(--radius-sm); }

/* Safety net for plain, hand-typed Text widgets dropped straight into the
   homepage widget area (e.g. a bare <img> ad banner with no card wrapper
   at all) — without this, a raw image renders at whatever native/invalid
   size someone typed (e.g. width="900px", which browsers ignore since the
   attribute wants a unitless number) and looks inconsistent next to the
   styled widgets around it. Any future widget of this kind picks this up
   automatically, no special markup/class required. More specific rules
   below (.newsletter-box-inner img etc.) still win where they apply.

   Excludes .lps-tile-main-image — the "Kalendarium / Ciekawostki"
   [latest-selected-content] shortcode absolutely-positions its own
   fixed-width thumbnail via the plugin's own CSS; `revert` was tried
   here first but that resets to the browser default, not "let the more
   specific plugin rule win", which stripped the plugin's positioning
   entirely and collapsed the thumbnail to 0×0. Excluding it from the
   selector outright leaves the plugin's CSS completely untouched. */
.homepage-widgetarea .widget_text img:not(.lps-tile-main-image) {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: var(--radius-sm);
}

/* "Reklama / Biuletyn / Szkolenia" and "Kalendarium / Ciekawostki" —
   boxed mini-widgets using legacy .newsletter-box-header markup. Used to
   be a solid dark-ink bar with white text — a visibly different, heavier
   "block" language than every other section title on the homepage
   (.section-title: light background, dark text, thin red/amber
   underline). Matched to that same light look instead of standing out
   as its own thing. */
.widget-title.newsletter-box-header {
	background: var(--c-bg-soft) !important;
	color: var(--c-ink) !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 14px 18px !important;
	border-bottom: 2px solid var(--c-red);
}
/* The row is flexed by legacy Additional CSS, which already stretches
   each column to equal height — but the visible card inside didn't fill
   that height and each promo image had its own natural size, so the
   three boxes ended up visibly uneven. Fill the column and give every
   image the same fixed-height frame instead of its native size. */
.row.col-sm-equal { align-items: stretch !important; }
.row.col-sm-equal > div { display: flex; }
.rss-widget.widget-header-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.rss-widget.widget-header-wrapper:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rss-widget.widget-header-wrapper .newsletter-box-inner {
	flex: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 26px !important;
	min-height: 320px;
}
.rss-widget.widget-header-wrapper .newsletter-box-inner center { width: 100%; }
.rss-widget.widget-header-wrapper .newsletter-box-inner img {
	max-height: 320px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: var(--radius-sm);
	margin: 0 auto;
}

/* "Zobacz więcej" link under Kalendarium / Ciekawostki mini-lists —
   plain italic text link by default, restyle as a small, unobtrusive
   pill link (not a full-width flex item — this box stays a normal
   block layout, only the Reklama/Biuletyn/Szkolenia boxes above are flex). */
.newsletter-box-inner > div > a:has(> i) {
	display: inline-block;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--c-red);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 12px;
	border: 1px solid var(--c-red-soft);
	border-radius: var(--radius-pill);
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.newsletter-box-inner > div > a:has(> i) i { font-style: normal; }
.newsletter-box-inner > div > a:has(> i):hover {
	background: var(--c-red);
	color: #fff;
	border-color: var(--c-red);
}

/* Kalendarium / Ciekawostki thumbnail — plugin floats it left with no
   counterweight, leaving lopsided empty space beside it. Center it. */
.newsletter-box-inner .lps-tile-main-image {
	float: none !important;
	display: block !important;
	margin: 0 auto 14px !important;
}

/* Kalendarium / Ciekawostki tile (.newsletter-box-inner.bg-white, as
   opposed to the Reklama/Biuletyn/Szkolenia .rss-widget variant above) —
   the Latest Post Shortcode plugin renders its own bare grid with no card
   boundary at all: the title is a plain <strong class="item-title-tag">
   in the body font/size (not the site's heading font used by every real
   .entry-title), and the excerpt <p> runs flush to the column edge with
   none of the ~20px inset every other homepage card gives its text. That
   combination is exactly what read as "different font size" and "edge to
   edge" — bring the whole tile in line with the card language used
   everywhere else on the homepage. */
.newsletter-box.h-100 {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.newsletter-box-inner.bg-white {
	padding: 20px 22px 22px;
}
.newsletter-box-inner.bg-white .latest-post-selection article {
	padding: 0 !important;
}
.newsletter-box-inner.bg-white .lps-tile-main-image {
	border-radius: var(--radius-sm);
}
.newsletter-box-inner.bg-white .item-title-tag {
	display: block;
	font-family: var(--font-head) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--c-ink) !important;
	letter-spacing: -0.01em;
	text-transform: none !important;
	margin: 14px 0 8px !important;
}
.newsletter-box-inner.bg-white .article__text.item-text,
.newsletter-box-inner.bg-white .article__text.item-text p {
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--c-text) !important;
}
/* The "Zobacz więcej" row ships with its own inline padding (admin-typed
   into the widget), which would double up with the tile padding above —
   flatten it so the link lines up with the title/excerpt instead of
   floating further right. */
.newsletter-box-inner.bg-white > div[style*="padding"] {
	padding: 12px 0 0 !important;
}


/* =====================================================================
   8. SIDEBAR
   ===================================================================== */
#secondary .widget {
	margin-bottom: 26px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
#secondary .widget-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	padding: 16px 18px;
	color: var(--c-ink);
	background: var(--c-bg-soft);
	border-bottom: 1px solid var(--c-line);
	border-left: 3px solid var(--c-amber);
	margin: 0;
}
#secondary .widget .article-content { background: none; border: 0; padding: 14px 18px; }
#secondary .widget ul li { border-bottom: 1px solid var(--c-line-2); padding: 9px 0; margin-bottom: 0; }

/* Search widget — the parent theme's default is a 70/30 split with a
   45px-tall pill button; way oversized for a narrow sidebar column. */
#secondary .widget_search .search-form {
	display: flex; align-items: stretch; gap: 8px;
	padding: 18px; padding-top: 18px;
}
#secondary .widget_search .search-form label {
	display: block; width: auto; float: none; flex: 1 1 auto; margin: 0;
}
#secondary .widget_search .search-field {
	width: 100%; height: 38px; padding: 0 14px !important;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	font-size: 13px;
}
#secondary .widget_search .search-submit {
	width: auto; height: 38px; padding: 0 16px !important;
	background: var(--c-red); color: #fff; border: 0;
	border-radius: var(--radius-sm);
	font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
	cursor: pointer; transition: background .2s ease;
}
#secondary .widget_search .search-submit:hover { background: var(--c-red-dark); }
#secondary .widget ul li:last-child { border-bottom: none; }

/* "Ostatnie wpisy" (Recent Posts widget) — plain link list by default;
   give each item its own line, a hover accent, and the post date its own
   small caption line (enabled via the widget's "show date" option). */
#secondary .widget_recent_entries ul li {
	position: relative;
	display: flex; flex-direction: column; gap: 5px;
	padding: 14px 0 14px 14px;
	transition: padding-left .2s ease;
}
#secondary .widget_recent_entries ul li:before {
	content: '';
	position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
	background: var(--c-line); border-radius: 2px;
	transition: background .2s ease;
}
#secondary .widget_recent_entries ul li:hover { padding-left: 18px; }
#secondary .widget_recent_entries ul li:hover:before { background: var(--c-amber); }
#secondary .widget_recent_entries ul li a {
	font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--c-ink);
}
#secondary .widget_recent_entries ul li a:hover { color: var(--c-red); }
#secondary .widget_recent_entries ul li .post-date {
	font-size: 11px; color: var(--c-muted);
}

/* "Popularne wpisy" / related-posts widget (tm-recent-widget) — this markup
   ships with no CSS at all in the parent theme (.col-four/.col-six/.full-item*
   are undefined classes), so text sat flush against the card edges. */
#secondary .tm-recent-widget { padding: 4px 18px 6px; }
#secondary .recent-widget-list { list-style: none; margin: 0; padding: 0; }
#secondary .full-item { padding: 16px 0; border-bottom: 1px solid var(--c-line-2); }
#secondary .full-item:first-child { padding-top: 2px; }
#secondary .full-item:last-child { border-bottom: none; padding-bottom: 2px; }
#secondary .full-item-image { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px; }
#secondary .full-item-image img { width: 100%; height: auto; display: block; }
#secondary .full-item-content { padding: 0; }
#secondary .full-item-title { font-size: 14.5px; line-height: 1.4; font-weight: 700; margin: 0 0 8px; }
#secondary .full-item-title a { color: var(--c-ink); }
#secondary .full-item-title a:hover { color: var(--c-red); }
#secondary .tm-article-meta {
	display: flex; flex-wrap: wrap; gap: 4px 10px;
	font-size: 11px; color: var(--c-muted); margin-bottom: 8px;
}
#secondary .tm-article-meta a { color: var(--c-muted); }
#secondary .tm-article-meta a:hover { color: var(--c-red); }
#secondary .item-metadata > span:first-child { display: none; }
#secondary .full-item-discription p {
	font-size: 12.5px; line-height: 1.55; color: var(--c-muted);
	font-style: italic; margin: 0;
}


/* =====================================================================
   9. SINGLE POST / PAGE
   ===================================================================== */
.site-content { margin: 0 auto 56px; }

.inner-banner {
	padding: 64px 0;
	background: linear-gradient(180deg, var(--c-bg-soft), var(--c-bg));
	border-bottom: 1px solid var(--c-line);
}
.page-inner-title .entry-header .entry-title {
	font-size: 38px; line-height: 1.2; font-weight: 800;
	color: #fff !important;
	text-shadow: 0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.45);
}

.entry-title { font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--c-ink); }
@media (min-width: 768px) { .entry-title { font-size: 36px; } }

.entry-content { font-size: 16.5px; line-height: 1.85; color: var(--c-text); }
.entry-content p { margin-bottom: 22px; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 40px; margin-bottom: 16px; color: var(--c-ink); font-weight: 700; }
.entry-content h2 { font-size: 24px; }
.entry-content h3 { font-size: 19px; }
.entry-content blockquote {
	border-left: 3px solid var(--c-amber);
	background: var(--c-bg-soft);
	padding: 18px 24px;
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--c-ink);
	margin: 28px 0;
}
.entry-content img { border-radius: var(--radius); }
.entry-content a { color: var(--c-red); text-decoration: underline; text-decoration-color: var(--c-red-soft); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--c-red-dark); }

/* Ordered/unordered lists — the parent theme's fixed 3em indent eats
   nearly a quarter of a phone screen's width; scale it down on mobile
   so wrapped lines don't get crammed into a narrow sliver. */
.entry-content ul, .entry-content ol { margin: 0 0 1.5em 1.6em; }
.entry-content li { margin-bottom: 8px; padding-left: 4px; }
.entry-content li > ul, .entry-content li > ol { margin-left: 1.3em; margin-top: 8px; }
.entry-content ul li::marker { color: var(--c-amber-dark); }
.entry-content ol li::marker { color: var(--c-amber-dark); font-weight: 700; }
@media (max-width: 767px) {
	.entry-content ul, .entry-content ol { margin-left: 1.15em; }
	.entry-content li > ul, .entry-content li > ol { margin-left: 1em; }
}

.site-main .post-navigation, .site-main .posts-navigation {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	margin: 32px 0;
}
.nav-previous a, .nav-next a { font-size: 13.5px; font-weight: 600; color: var(--c-ink); font-family: var(--font-head); }
.nav-previous a:hover, .nav-next a:hover { color: var(--c-red); }

.breadcrumb-wrapper { background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); }
.breadcrumbs { padding: 10px 0; font-size: 12px; color: var(--c-muted); }
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-red); }


/* =====================================================================
   10. FOOTER
   ===================================================================== */
.site-footer { background: var(--c-bg-deep) !important; color: rgba(255,255,255,.65); position: relative; }
.site-footer:before {
	content: '';
	display: block; height: 3px; width: 100%;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}
.footer-widget { padding: 56px 0; }

.site-footer .widget-title, .footer-widget .widget-title {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;
	padding: 0 0 10px;
	margin: 0 auto 20px;
	border-bottom: 2px solid var(--c-red);
	background: transparent;
	display: inline-block;
}

.site-footer a { color: rgba(255,255,255,.65); }
.site-footer a:hover { color: var(--c-amber); }

.site-footer .widget ul li { border-bottom: 1px solid rgba(255,255,255,.07); padding: 8px 0; margin-bottom: 0; font-size: 13.5px; }
.site-footer .widget ul li:last-child { border-bottom: none; }

.footer-bottom { background: rgba(0,0,0,.3); border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.footer-bottom .site-title a { color: #fff; font-size: 18px; font-weight: 700; font-family: var(--font-head); }
.footer-bottom .site-description { color: rgba(255,255,255,.4); font-size: 11px; margin-bottom: 0; }
.site-copyright { color: rgba(255,255,255,.45); font-size: 11.5px; }

.footer-bottom .social-icons ul li a:after { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.65) !important; }
.footer-bottom .social-icons ul li:hover a:after { background: var(--c-red) !important; color: #fff !important; }

.site-footer input[type="email"], .site-footer input[type="text"] {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.16);
	color: #fff;
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	font-size: 13.5px;
	width: 100%;
}
.site-footer input[type="email"]::placeholder, .site-footer input[type="text"]::placeholder { color: rgba(255,255,255,.35); }
.site-footer input[type="email"]:focus, .site-footer input[type="text"]:focus { border-color: var(--c-red); outline: none; box-shadow: 0 0 0 3px rgba(224,16,42,.18); }



/* =====================================================================
   12. PAGE-CONTENT CTA BUTTONS & COURSE SCHEDULE TABLE
   (used on hand-authored pages such as /kalendarz-wydarzen/)
   ===================================================================== */
.entry-content .btn.btn-danger,
.entry-content .btn.btn-default {
	display: inline-block;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-head);
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: none;
	text-decoration: none !important;
	text-align: center;
	padding: 14px 26px !important;
	border: none !important;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important;
}
.entry-content .btn.btn-danger {
	background: var(--c-red) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.entry-content .btn.btn-danger:hover {
	background: var(--c-red-dark) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm) !important;
}
.entry-content .btn.btn-default {
	background: #fff !important;
	color: var(--c-ink) !important;
	border: 1px solid var(--c-line) !important;
}
.entry-content .btn.btn-default:hover {
	border-color: var(--c-red) !important;
	color: var(--c-red) !important;
	transform: translateY(-2px);
}
.entry-content .btn strong { font-weight: 700; }

/* Bootstrap 5 dropped `.btn-block` (it became the .d-grid utility), so the
   full-width CTA buttons written into page content shrank to their text
   width and the two-column grid looked ragged. Restore the old behaviour
   for content buttons rather than rewriting every page's markup. */
.entry-content .btn.btn-block {
	display: block;
	width: 100%;
	text-align: center;
}
/* BS5's .row is a flex grid with a gutter custom property the theme doesn't
   set; without it the columns lose their spacing. Give it the theme's own
   10px gutter so button rows line up evenly. */
.entry-content .row { --bs-gutter-x: 20px; }

.entry-content .table-courses {
	width: 100% !important;
	border: none !important;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}
/* Bootstrap 5 (shipped by the parent theme since 1.1.9) tints every table
   cell with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)` and
   paints `background-color: var(--bs-table-bg)` on top of the row colour.
   That is what turned the schedule table a muddy grey — the row striping we
   define lives on <tr>, and BS5 was covering it at cell level. Clear both so
   the row background shows through again. */
.entry-content .table-courses > :not(caption) > * > * {
	background-color: transparent !important;
	box-shadow: none !important;
	border-bottom-width: 0 !important;
}
.entry-content .table-courses thead th {
	background: var(--c-ink) !important;
	color: #fff !important;
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: none !important;
	padding: 14px 16px !important;
}
.entry-content .table-courses thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.entry-content .table-courses thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.entry-content .table-courses tbody tr {
	background: var(--c-bg) !important;
	border-bottom: 1px solid var(--c-line);
}
.entry-content .table-courses tbody tr:nth-child(even) { background: var(--c-bg-soft) !important; }
.entry-content .table-courses td {
	border: none !important;
	padding: 16px !important;
	vertical-align: middle !important;
	color: var(--c-text);
}
.entry-content .table-courses td:first-child {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--c-muted);
	text-align: center;
}
.entry-content .table-courses td:nth-child(2) {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--c-ink);
	text-align: center;
	max-width: 110px;
	white-space: normal;
	position: relative;
	padding-bottom: 16px !important;
}
.entry-content .table-courses td:nth-child(2)::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--c-amber);
	transform: translateX(-50%);
}
.entry-content .table-courses td:nth-child(3) h3 {
	display: block;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0 0 4px;
	line-height: 1.35;
}
.entry-content .table-courses td:nth-child(3) a {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--c-muted) !important;
	text-decoration: none !important;
	line-height: 1.5;
}
.entry-content .table-courses td:nth-child(3) a:hover { color: var(--c-red) !important; }
.entry-content .table-courses td:nth-child(3) h3 a {
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	color: var(--c-ink) !important;
}
.entry-content .table-courses td:nth-child(3) h3 a:hover { color: var(--c-red) !important; }
.entry-content .table-courses td:nth-child(4) {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--c-text);
	text-align: center;
	max-width: 140px;
	white-space: normal;
	word-break: break-word;
}
.entry-content .table-courses td:nth-child(5) {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--c-red);
	text-align: center !important;
	white-space: nowrap;
}

/* Wide tables scroll horizontally on small screens instead of squashing —
   generic fallback for any other/future table in post content. */
.entry-content { overflow-x: visible; }
@media (max-width: 899px) {
	.entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* The 5-column szkolenia table (Miejsce/Typ, Termin, Nazwa szkolenia,
   Prowadzący, Cena) doesn't fit a phone screen even with the horizontal
   scroll above — the training title, the whole point of the row, ends up
   scrolled off-screen and most people never realize they need to swipe
   sideways to see it. Convert each row into a stacked card instead: the
   standard "responsive table" pattern — hide the header row, turn each
   <td> into its own line with the column name (from its data-label
   attribute, set in inc/szkolenia-shortcode.php) as an inline label.
   899px rather than 767px on purpose — iPad portrait (768px) and similar
   tablet widths were landing just above the old breakpoint, squeezed into
   the real table instead: the Termin column (max-width:110px) wrapped
   dates onto 3 lines with its decorative underline crammed right below,
   reading as cramped/broken. */
@media (max-width: 899px) {
	.entry-content .table-courses,
	.entry-content .table-courses thead,
	.entry-content .table-courses tbody,
	.entry-content .table-courses tr,
	.entry-content .table-courses td {
		display: block;
		width: 100% !important;
		max-width: none !important;
		white-space: normal !important;
	}
	.entry-content .table-courses { overflow-x: visible; }
	.entry-content .table-courses thead { position: absolute; left: -9999px; }
	.entry-content .table-courses tbody tr {
		margin-bottom: 14px;
		border: 1px solid var(--c-line);
		border-radius: var(--radius-sm);
		overflow: hidden;
		background: var(--c-bg) !important;
	}
	.entry-content .table-courses tbody tr:nth-child(even) { background: var(--c-bg) !important; }
	.entry-content .table-courses td {
		padding: 10px 14px !important;
		text-align: left !important;
		border-bottom: 1px solid var(--c-line) !important;
	}
	.entry-content .table-courses td:last-child { border-bottom: none !important; }
	.entry-content .table-courses td[data-label]:before {
		content: attr(data-label);
		display: block;
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--c-muted);
		margin-bottom: 4px;
	}
	/* Title cell: no ::before label (the h3 makes it self-evident), full
	   width, slightly emphasized as the "header" of the card. */
	.entry-content .table-courses td[data-label="Nazwa szkolenia"] {
		background: var(--c-bg-soft);
	}
	.entry-content .table-courses td[data-label="Nazwa szkolenia"]:before { display: none; }
	.entry-content .table-courses td:nth-child(2)::after { display: none; }
}

/* "Prowadzący" hover card — table-responsive is the positioning context
   for the absolutely-placed card, same fix as the calendar tooltip bug. */
.table-responsive { position: relative; }
.szk-prow-chip {
	display: inline-block;
	border-bottom: 1px dotted var(--c-muted);
	cursor: pointer;
}
.szk-prow-chip:hover, .szk-prow-chip:focus {
	color: var(--c-red); border-bottom-color: var(--c-red); outline: none;
}
.szk-prow-card {
	display: none;
	position: absolute;
	z-index: 40;
	width: 300px;
	gap: 12px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 14px;
}
.szk-prow-card-photo {
	flex: 0 0 64px; width: 64px; height: 64px;
	border-radius: 50%; background-size: cover; background-position: center top;
	background-color: var(--c-bg-soft);
}
.szk-prow-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.szk-prow-card-body strong { font-size: 13.5px; color: var(--c-ink); }
.szk-prow-card-body span { font-size: 12px; line-height: 1.5; color: var(--c-muted); }
@media (max-width: 480px) {
	.szk-prow-card { width: calc(100% - 20px); }
}

/* [prowadzacy_lista] — full "our experts" card grid */
.szk-prow-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
	margin: 24px 0;
}
.szk-prow-card-full {
	background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	padding: 26px 24px; text-align: center;
	box-shadow: var(--shadow-xs);
	transition: box-shadow .25s ease, transform .25s ease;
}
.szk-prow-card-full:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.szk-prow-card-full-photo {
	display: block; width: 96px; height: 96px; margin: 0 auto 16px;
	border-radius: 50%; background-size: cover; background-position: center top;
	background-color: var(--c-bg-soft);
	box-shadow: 0 0 0 4px var(--c-bg-soft);
}
.szk-prow-card-full-photo--placeholder {
	display: flex; align-items: center; justify-content: center; color: var(--c-faint);
}
.szk-prow-card-full-name {
	font-size: 16px; font-weight: 800; color: var(--c-ink); margin: 0 0 10px;
	text-transform: uppercase; letter-spacing: .02em;
}
.szk-prow-card-full-bio { font-size: 13px; line-height: 1.6; color: var(--c-muted); text-align: left; }
.szk-prow-card-full-bio p { margin: 0 0 10px; }
.szk-prow-card-full-bio p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.szk-prow-grid { grid-template-columns: 1fr; }
}

/* [szkolenia_filtrowane] interactive month calendar */
.szk-kalendarz {
	position: relative;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 20px 22px 18px;
	margin: 20px 0;
	box-shadow: var(--shadow-xs);
}
.szk-kal-head {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	margin-bottom: 14px;
}
.szk-kal-label {
	font-size: 16px; font-weight: 800; color: var(--c-ink); margin: 0;
	min-width: 170px; text-align: center; text-transform: capitalize;
}
.szk-kal-nav {
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid var(--c-line); background: var(--c-bg-soft);
	color: var(--c-ink); font-size: 16px; line-height: 1; cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.szk-kal-nav:hover { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.szk-kal-weekdays {
	display: grid; grid-template-columns: repeat(7, 1fr);
	margin-bottom: 6px;
}
.szk-kal-weekdays span {
	text-align: center; font-size: 11px; font-weight: 700; color: var(--c-muted);
	text-transform: uppercase; letter-spacing: .04em;
}
.szk-kal-grid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.szk-kal-day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 600; color: var(--c-text);
	border-radius: var(--radius-sm);
	background: var(--c-bg-soft);
}
.szk-kal-day--empty { background: none; }
.szk-kal-day--has-event {
	background: var(--c-amber-soft);
	color: var(--c-amber-dark);
	font-weight: 800;
	cursor: pointer;
	box-shadow: inset 0 0 0 1.5px var(--c-amber);
	transition: transform .15s ease, box-shadow .15s ease;
}
.szk-kal-day--has-event:after {
	content: '';
	position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
	width: 4px; height: 4px; border-radius: 50%; background: var(--c-red);
}
.szk-kal-day--has-event:hover,
.szk-kal-day--has-event:focus {
	background: var(--c-red); color: #fff; outline: none;
	box-shadow: var(--shadow-md); transform: translateY(-1px);
}
.szk-kal-day--has-event:hover:after,
.szk-kal-day--has-event:focus:after { background: #fff; }

/* Hovering a training in the list next to the calendar lights up its day */
.szk-kal-day--linked {
	background: var(--c-red) !important; color: #fff !important;
	box-shadow: var(--shadow-md) !important; transform: translateY(-1px);
}
.szk-kal-day--linked:after { background: #fff !important; }

/* Ambient "the calendar is alive" pulse, cycled randomly on a training day */
@keyframes szkKalPulse {
	0%   { box-shadow: inset 0 0 0 1.5px var(--c-amber), 0 0 0 0 rgba(224,16,42,.45); }
	60%  { box-shadow: inset 0 0 0 1.5px var(--c-amber), 0 0 0 8px rgba(224,16,42,0); }
	100% { box-shadow: inset 0 0 0 1.5px var(--c-amber), 0 0 0 0 rgba(224,16,42,0); }
}
.szk-kal-day--pulse {
	animation: szkKalPulse 1.1s ease-out;
}
.szk-kal-legend {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; color: var(--c-muted); margin: 14px 0 0;
}
.szk-kal-legend .szk-kal-dot {
	width: 12px; height: 12px; border-radius: var(--radius-sm);
	background: var(--c-amber-soft); box-shadow: inset 0 0 0 1.5px var(--c-amber);
	flex: 0 0 auto;
}
.szk-kal-tooltip {
	display: none;
	position: absolute;
	z-index: 40;
	width: 260px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 4px;
}
.szk-kal-tip-item { padding: 12px 14px; }
.szk-kal-tip-item + .szk-kal-tip-item { border-top: 1px solid var(--c-line-2); }
.szk-kal-tip-item strong {
	display: block; font-size: 13.5px; color: var(--c-ink); margin-bottom: 4px; line-height: 1.3;
}
.szk-kal-tip-meta {
	display: block; font-size: 11px; font-weight: 700; color: var(--c-amber-dark);
	text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px;
}
.szk-kal-tip-desc {
	display: block; font-size: 12px; color: var(--c-muted); line-height: 1.5; margin-bottom: 8px;
}
.szk-kal-tip-link {
	display: inline-block; font-size: 12px; font-weight: 700; color: var(--c-red) !important;
}
@media (max-width: 480px) {
	.szk-kal-day { font-size: 11.5px; }
	.szk-kal-tooltip { width: calc(100% - 20px); }
}

/* Shared section title — matches .homepage-widgetarea's native
   .widget-header-wrapper .widget-title look, so every homepage section
   (mine and the theme's own widgets) reads as one consistent system. */
.lab-section-title {
	font-size: 21px; font-weight: 700; color: var(--c-ink);
	text-transform: uppercase; letter-spacing: 2px;
	margin: 0; padding: 0 0 14px;
	border-bottom: 1px solid var(--c-line);
	position: relative;
}
.lab-section-title:after {
	content: '';
	position: absolute; left: 0; bottom: -1px; width: 46px; height: 3px;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}

/* "Kalendarz szkoleń" homepage section */
/* padding-top matches .lab-oferta-block / .lab-wideo-block / .lab-opinie-block
   (40px) — it was 8px, which made this title sit noticeably closer to the top
   edge of its section than every other one on the homepage. */
.lab-kalendarz-block { padding: 40px 0 46px; }
.lab-kalendarz-head {
	display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	margin-bottom: 26px;
}
.lab-kalendarz-link { font-size: 13px; font-weight: 700; color: var(--c-red); white-space: nowrap; }
.lab-kalendarz-link:hover { text-decoration: underline; }

.lab-kalendarz-columns { display: flex; gap: 28px; align-items: flex-start; }
.lab-kalendarz-upcoming {
	flex: 1 1 38%;
	list-style: none; margin: 0; padding: 0;
}
.lab-kalendarz-upcoming li { border-bottom: 1px solid var(--c-line); transition: background .2s ease; }
/* No top border on the first row: it landed a few pixels under the section
   title's own bottom rule and read as a doubled line, which made "Kalendarz
   szkoleń" look like it had different title spacing to every other section.
   The li bottom borders already separate the rows. */
.lab-kalendarz-upcoming li a {
	display: flex; flex-direction: column; gap: 3px;
	padding: 14px 4px; text-decoration: none;
}
.lab-kalendarz-upcoming--linked { background: var(--c-amber-soft); }
.lab-kalendarz-upcoming--linked .lab-kalendarz-upcoming-title { color: var(--c-red); }
.lab-kalendarz-upcoming-date {
	font-size: 11px; font-weight: 800; color: var(--c-amber-dark);
	text-transform: uppercase; letter-spacing: .03em;
}
.lab-kalendarz-upcoming-title {
	font-size: 14.5px; font-weight: 700; color: var(--c-ink); line-height: 1.35;
}
.lab-kalendarz-upcoming li a:hover .lab-kalendarz-upcoming-title { color: var(--c-red); }
.lab-kalendarz-upcoming-prowadzacy { font-size: 12px; color: var(--c-muted); }
.lab-kalendarz-cal { flex: 1 1 62%; min-width: 0; }
.lab-kalendarz-cal .szk-kalendarz { margin: 0; max-width: 100%; padding: 16px 18px 12px; }
.lab-kalendarz-cal .szk-kal-head { margin-bottom: 10px; }
.lab-kalendarz-cal .szk-kal-weekdays { margin-bottom: 4px; }
.lab-kalendarz-cal .szk-kal-grid { gap: 3px; }
.lab-kalendarz-cal .szk-kal-day { aspect-ratio: auto; height: 58px; font-size: 13px; }
.lab-kalendarz-cal .szk-kal-legend { margin-top: 8px; font-size: 11px; }

@media (max-width: 767px) {
	.lab-kalendarz-columns { flex-direction: column; }
	.lab-kalendarz-upcoming { width: 100%; }
	.lab-kalendarz-cal { width: 100%; }
}

/* "Wideo" homepage section — replaces the Automatic YouTube Gallery
   widget; reuses .lab-hero-tile / .lab-hero-list for a consistent look. */
#ayg-widget-2 { display: none !important; }

.lab-wideo-block { padding: 40px 0 46px; background: var(--c-bg); border-top: 1px solid var(--c-line); }
.lab-opinie-block { padding: 40px 0 46px; background: var(--c-bg-soft); border-top: 1px solid var(--c-line); }
.lab-wideo-columns { display: flex; gap: 20px; align-items: flex-start; }
.lab-wideo-list { flex: 1 1 38%; }

.lab-wideo-embed-card { flex: 1 1 62%; min-width: 0; }
.lab-wideo-embed {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg); overflow: hidden;
	background: var(--c-bg-deep-2);
	box-shadow: var(--shadow-sm);
}
.lab-wideo-embed iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.lab-wideo-embed-caption {
	display: block; padding: 12px 2px 0;
}
.lab-wideo-embed-caption .lab-hero-tile-title {
	color: var(--c-ink); text-shadow: none; font-size: 17px;
}
.lab-wideo-embed-caption:hover .lab-hero-tile-title { color: var(--c-red); text-decoration: underline; }
.lab-wideo-embed-caption .lab-hero-tile-meta { color: var(--c-muted); }

.lab-wideo-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(255,255,255,.92); color: var(--c-red);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; padding-left: 4px;
	box-shadow: var(--shadow-md);
	transition: transform .2s ease, background .2s ease;
}

.lab-wideo-list-thumb { position: relative; }
.lab-wideo-play--sm {
	width: 26px; height: 26px; font-size: 10px; padding-left: 2px;
	background: rgba(255,255,255,.88); box-shadow: none;
}

@media (max-width: 767px) {
	.lab-wideo-columns { flex-direction: column; }
}

/* [szkolenia_filtrowane] filter bar */
.szkolenia-filtry {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 18px 20px;
	margin: 20px 0 22px;
}
.szkolenia-filtr-pole { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.szkolenia-filtr-pole--szukaj { min-width: 220px; flex: 1 1 220px; }
.szkolenia-filtr-pole label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--c-muted);
}
.szkolenia-filtr-pole select,
.szkolenia-filtr-pole input[type="date"],
.szkolenia-filtr-pole input[type="search"] {
	box-sizing: border-box;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: #fff;
	padding: 9px 12px;
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--c-ink);
	width: 100%;
	height: 40px;
	line-height: 1.2;
}
.szkolenia-filtr-pole select:focus,
.szkolenia-filtr-pole input[type="date"]:focus,
.szkolenia-filtr-pole input[type="search"]:focus {
	outline: none;
	border-color: var(--c-red);
	box-shadow: 0 0 0 3px var(--c-red-soft);
}
.szkolenia-filtr-reset {
	/* inline-flex + justify-content:center, not line-height-based centering
	   — see the matching note on .lab-portal-btn in the PANEL UCZESTNIKA
	   section: the parent theme's generic button height:45px/line-height:45px
	   reset left this text rendering off-centre inside the pill. */
	display: inline-flex; align-items: center; justify-content: center;
	height: auto; line-height: normal;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	color: var(--c-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 10px 18px;
	cursor: pointer;
	transition: border-color .2s var(--ease), color .2s var(--ease);
	margin-left: auto;
}
.szkolenia-filtr-reset:hover { border-color: var(--c-red); color: var(--c-red); }

.szkolenia-brak-wynikow {
	text-align: center;
	padding: 40px 20px;
	color: var(--c-muted);
	font-style: italic;
	background: var(--c-bg-soft);
	border-radius: var(--radius-lg);
}

@media (max-width: 600px) {
	.szkolenia-filtry { flex-direction: column; align-items: stretch; }
	.szkolenia-filtr-pole { min-width: 0; }
	/* In the row layout flex-grow stretches this field wider; in this
	   column layout the same flex-grow stretches it TALLER instead,
	   leaving a big empty gap under the input. */
	.szkolenia-filtr-pole--szukaj { flex: none; }
	.szkolenia-filtr-reset { margin-left: 0; }
}


/* =====================================================================
   13. RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
	.data-bg-slide { height: 300px; }
	.mainbanner-jumbotron .data-bg-slide { margin-bottom: 60px; }
	.mainbanner-thumbs { max-height: 360px; }
	.homepage-widgetarea .widget { padding-top: 26px; padding-bottom: 26px; }
	.homepage-widgetarea .entry-title { font-size: 14.5px !important; }
	.entry-title { font-size: 27px; }
	.page-inner-title .entry-header .entry-title { font-size: 30px; }
}

@media (max-width: 767px) {
	body::before { height: 2px; }
	#masthead { position: relative; box-shadow: none !important; }
	.header-middle { padding: 14px 0; }
	.custom-logo-link img, .site-branding img { max-height: 56px; }
	.site-branding .site-title { font-size: 24px; }

	.data-bg-slide { height: 220px; border-radius: var(--radius); }
	.mainbanner-jumbotron .data-bg-slide { margin-bottom: 44px; }
	.mainbanner-thumbs { max-height: none; }
	.slide-title { font-size: 17px !important; }
	.slider-wrapper { padding: 16px 18px 18px; }

	.homepage-widgetarea .widget { padding-top: 22px; padding-bottom: 22px; }
	.homepage-widgetarea .entry-title { font-size: 14px !important; }
	.section-title, .site-content .site-main .widget-title,
	.homepage-widgetarea .widget .widget-header-wrapper .widget-title { font-size: 17px; }

	.footer-widget { padding: 36px 0; }
	.footer-bottom .row-table [class*="col-"] { display: block; text-align: center !important; margin-bottom: 14px; }

	.inner-banner { padding: 40px 0; }
	.entry-title { font-size: 23px; }
	.page-inner-title .entry-header .entry-title { font-size: 25px; }
	.entry-content { font-size: 15.5px; }
	.site-content { margin-bottom: 40px; }
}

@media (max-width: 480px) {
	.entry-title { font-size: 21px; }
	.header-middle { padding: 10px 0; }
	.data-bg-slide { height: 180px; }
}

/* =====================================================================
   HERO — replaces the parent theme's slick.js banner slider
   ===================================================================== */
.lab-hero-block { padding: 22px 0 6px; }
.lab-hero {
	display: flex;
	gap: 18px;
	align-items: stretch;
}
.lab-hero-left {
	flex: 1 1 74%;
	min-width: 0;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(190px, 1fr));
	gap: 16px;
}
.lab-hero-tile {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	background-color: var(--c-bg-deep-2);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .25s ease;
	animation: labHeroFadeIn .6s ease-out backwards;
}
.lab-hero-tile:before {
	content: '';
	position: absolute; inset: -4%;
	background-image: var(--tile-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	animation: labHeroKenBurns 16s ease-in-out infinite alternate;
	will-change: transform;
}
.lab-hero-tile:hover { box-shadow: var(--shadow-lg); }
.lab-hero-tile:hover:before { animation-play-state: paused; }
.lab-hero-tile:hover .lab-hero-tile-title { text-decoration: underline; }
.lab-hero-left > a:nth-child(1) { animation-delay: 0s; }
.lab-hero-left > a:nth-child(2) { animation-delay: .12s; }
.lab-hero-left > a:nth-child(3) { animation-delay: .24s; }
.lab-hero-left > a:nth-child(4) { animation-delay: .36s; }
.lab-hero-left > a:nth-child(1):before { animation-delay: 0s; }
.lab-hero-left > a:nth-child(2):before { animation-delay: 1.5s; }
.lab-hero-left > a:nth-child(3):before { animation-delay: 3s; }
.lab-hero-left > a:nth-child(4):before { animation-delay: 4.5s; }

@keyframes labHeroKenBurns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
@keyframes labHeroFadeIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.lab-hero-list { animation: labHeroFadeIn .6s ease-out .3s backwards; }
.lab-hero-list li { animation: labHeroFadeIn .5s ease-out backwards; }
.lab-hero-list li:nth-child(1) { animation-delay: .4s; }
.lab-hero-list li:nth-child(2) { animation-delay: .48s; }
.lab-hero-list li:nth-child(3) { animation-delay: .56s; }
.lab-hero-list li:nth-child(4) { animation-delay: .64s; }
.lab-hero-list li:nth-child(5) { animation-delay: .72s; }
.lab-hero-list li:nth-child(6) { animation-delay: .8s; }
.lab-hero-list li:nth-child(7) { animation-delay: .88s; }

@media (prefers-reduced-motion: reduce) {
	.lab-hero-tile, .lab-hero-tile:before, .lab-hero-list, .lab-hero-list li { animation: none !important; }
}
/* Four tiles in fixed DOM order: main, secondary, small, small — positioned
   by child index rather than shared modifier classes, so the two visually
   identical "small" tiles don't collide in the same grid cell. */
.lab-hero-left > a:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.lab-hero-left > a:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.lab-hero-left > a:nth-child(3) { grid-column: 2; grid-row: 2; }
.lab-hero-left > a:nth-child(4) { grid-column: 3; grid-row: 2; }
.lab-hero-tile-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16,20,29,0) 35%, rgba(16,20,29,.92) 100%);
}
.lab-hero-tile-body {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 18px 20px;
	display: flex; flex-direction: column; gap: 6px;
}
.lab-hero-tag {
	align-self: flex-start;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
	color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 4px 10px; border-radius: var(--radius-pill);
	margin-bottom: 2px;
}
.lab-hero-tile-title {
	color: #fff; font-family: var(--font-head); font-weight: 900;
	font-size: 25px; line-height: 1.25;
	text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.lab-hero-tile--secondary .lab-hero-tile-title,
.lab-hero-tile--small .lab-hero-tile-title { font-size: 16px; line-height: 1.3; }
.lab-hero-tile-meta { color: rgba(255,255,255,.75); font-size: 12px; }

.lab-hero-list {
	flex: 1 1 26%;
	min-width: 220px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 18px 18px 8px;
	display: flex; flex-direction: column;
}
.lab-hero-list-title {
	font-size: 15px; font-weight: 800; color: var(--c-ink);
	text-transform: uppercase; letter-spacing: .03em;
	margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--c-ink);
}
.lab-hero-list ul { list-style: none; margin: 0; padding: 0; }
.lab-hero-list li { border-bottom: 1px solid var(--c-line); }
.lab-hero-list li:last-child { border-bottom: none; }
.lab-hero-list li a {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 0; text-decoration: none;
}
.lab-hero-list-thumb {
	flex: 0 0 52px; width: 52px; height: 52px;
	border-radius: var(--radius-sm);
	background-size: cover; background-position: center;
}
.lab-hero-list-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lab-hero-list-headline {
	font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--c-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lab-hero-list li a:hover .lab-hero-list-headline { color: var(--c-red); }
.lab-hero-list-date { font-size: 11.5px; color: var(--c-muted); }

@media (max-width: 991px) {
	.lab-hero { flex-direction: column; }
	.lab-hero-left { grid-template-rows: repeat(2, minmax(220px, auto)); }
	.lab-hero-list { min-width: 0; }
}
@media (max-width: 600px) {
	.lab-hero-left { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(200px, auto)); }
	.lab-hero-left > a:nth-child(1) { grid-column: 1; grid-row: 1; }
	.lab-hero-left > a:nth-child(2) { grid-column: 1; grid-row: 2; }
	.lab-hero-left > a:nth-child(3) { grid-column: 1; grid-row: 3; }
	.lab-hero-left > a:nth-child(4) { grid-column: 1; grid-row: 4; }
	.lab-hero-tile-title { font-size: 20px; }
}

/* =====================================================================
   NINJA FORMS — registration forms on training pages get plain, unstyled
   browser-default inputs and raw <h1>/<h2> "HTML" fields used as section
   dividers; give the whole thing one consistent, branded look.
   ===================================================================== */
.nf-form-cont {
	max-width: 780px;
	margin: 28px auto;
	padding: 32px 40px;
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow-x: hidden;
}
/* Some field descriptions are pasted straight from Word (MsoNormal spans
   with inline widths/fonts) — neutralise anything that could force the
   card wider than its column. */
.nf-form-cont * { font-family: var(--font-body) !important; }
.nf-form-cont .nf-field-element p,
.nf-form-cont .nf-field-element span {
	max-width: 100% !important;
	width: auto !important;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.nf-form-cont .nf-field-element p { font-size: 13px !important; line-height: 1.6 !important; color: var(--c-text) !important; }
.nf-form-cont h1, .nf-form-cont h2, .nf-form-cont h3 {
	font-family: var(--font-head) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--c-ink) !important;
	margin: 30px 0 18px !important;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-line);
	position: relative;
}
.nf-form-cont h1:first-child, .nf-form-cont h2:first-child, .nf-form-cont h3:first-child { margin-top: 0 !important; }
.nf-form-cont h1:after, .nf-form-cont h2:after, .nf-form-cont h3:after {
	content: '';
	position: absolute; left: 0; bottom: -1px; width: 36px; height: 3px;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
}
.nf-form-cont .nf-field-label label {
	font-size: 13px; font-weight: 700; color: var(--c-ink);
	margin-bottom: 6px; display: inline-block;
}
.nf-form-cont .nf-field-label label .ninja-forms-req-symbol { color: var(--c-red); }
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="number"],
.nf-form-cont textarea,
.nf-form-cont select {
	width: 100%;
	max-width: 360px;
	height: 42px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: 0 14px;
	font-size: 13.5px;
	color: var(--c-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.nf-form-cont textarea { height: auto; padding: 10px 14px; max-width: 100%; }
.nf-form-cont select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f4757' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}
.nf-form-cont input:focus,
.nf-form-cont textarea:focus,
.nf-form-cont select:focus {
	outline: none;
	border-color: var(--c-red);
	box-shadow: 0 0 0 3px var(--c-red-soft);
}
.nf-form-cont .list-radio-wrap .nf-field-element,
.nf-form-cont .list-checkbox-wrap .nf-field-element { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nf-form-cont .list-radio-wrap label,
.nf-form-cont .list-checkbox-wrap label { font-size: 13.5px; color: var(--c-text); font-weight: 400; }
.nf-form-cont input[type="radio"],
.nf-form-cont input[type="checkbox"] { accent-color: var(--c-red); width: 15px; height: 15px; margin-right: 6px; }
.nf-form-cont .nf-field-container { margin-bottom: 20px; }
.nf-form-cont .nf-input-limit { font-size: 11px; color: var(--c-muted); }
.nf-form-cont .nf-error-wrap .nf-error-msg { font-size: 12px; color: var(--c-red); margin-top: 4px; }
.nf-form-cont .field-wrap.submit-wrap { margin-top: 4px; }
.nf-form-cont input[type="submit"],
.nf-form-cont .submit-wrap button {
	background: var(--c-red); color: #fff !important; border: none;
	border-radius: var(--radius-sm);
	padding: 12px 28px;
	font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
	cursor: pointer; transition: background .2s ease;
}
.nf-form-cont input[type="submit"]:hover,
.nf-form-cont .submit-wrap button:hover { background: var(--c-red-dark); }
.nf-form-cont .nf-response-msg { font-size: 14px; color: var(--c-text); }

@media (max-width: 480px) {
	.nf-form-cont { padding: 22px 18px; }
}

/* =====================================================================
   TESTIMONIALS — modest reskin of the Strong Testimonials slider
   (plugin's own JS/slider logic untouched, just recoloured/retyped)
   ===================================================================== */
.szk-testimonials-wrap { max-width: 1040px; margin: 0 auto; }
.szk-testimonials-wrap .strong-view.wpmtst-modern { padding: 4px 0; }
.szk-testimonials-wrap .wpmtst-testimonial-inner {
	background: var(--c-bg-soft) !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: none !important;
	padding: 20px 56px 48px !important;
}
.szk-testimonials-wrap .wpmtst-testimonial-content,
.szk-testimonials-wrap .wpmtst-testimonial-content p {
	font-size: 14px !important;
	font-style: italic;
	line-height: 1.55 !important;
	color: var(--c-text) !important;
}
.szk-testimonials-wrap .wpmtst-testimonial-content p {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
}
.szk-testimonials-wrap .wpmtst-testimonial-content:before,
.szk-testimonials-wrap .wpmtst-testimonial-content:after {
	color: var(--c-amber) !important;
	opacity: .6;
}
.szk-testimonials-wrap .testimonial-name {
	font-family: var(--font-head);
	font-weight: 700 !important;
	font-style: normal !important;
	color: var(--c-ink) !important;
	font-size: 13px !important;
	margin-top: 8px !important;
}
.szk-testimonials-wrap .testimonial-company {
	font-style: normal !important;
	font-size: 12px !important;
	color: var(--c-muted) !important;
}
.szk-testimonials-wrap .wpmslider-prev,
.szk-testimonials-wrap .wpmslider-next,
.szk-testimonials-wrap .wpmslider-stop,
.szk-testimonials-wrap .wpmslider-start {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
}
.szk-testimonials-wrap .wpmslider-prev:before,
.szk-testimonials-wrap .wpmslider-next:before,
.szk-testimonials-wrap .wpmslider-stop:before,
.szk-testimonials-wrap .wpmslider-start:before {
	background-color: var(--c-faint) !important;
	transition: background-color .2s ease;
}
.szk-testimonials-wrap .wpmslider-prev:hover:before,
.szk-testimonials-wrap .wpmslider-next:hover:before {
	background-color: var(--c-red) !important;
}
.szk-testimonials-wrap .wpmslider-stop:hover:before,
.szk-testimonials-wrap .wpmslider-start:hover:before {
	background-color: var(--c-amber-dark) !important;
}
.szk-testimonials-wrap .slider-pager { margin-top: 18px !important; }
.szk-testimonials-wrap .slider-pager .wpmslider-pager-bullet.active,
.szk-testimonials-wrap .slider-pager .wpmslider-pager-bullet:hover {
	background: var(--c-red) !important;
}

/* Intro section on the training calendar page — text + autoplay video
   side by side instead of stacked full-width blocks. */
.lab-intro-columns {
	display: flex; align-items: center; gap: 36px;
	margin: 8px 0 28px;
}
.lab-intro-text { flex: 1 1 54%; min-width: 0; }
.lab-intro-text h2 { margin-top: 0; }
.lab-intro-video { flex: 1 1 46%; min-width: 0; }
.lab-centered-video {
	display: block; margin: 0 auto; max-width: 100%; width: 100%;
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.lab-intro-video-caption {
	text-align: center; font-size: 12.5px; color: var(--c-muted);
	margin: 10px 0 0 !important;
}
@media (max-width: 860px) {
	.lab-intro-columns { flex-direction: column; }
	.lab-intro-text, .lab-intro-video { flex: 1 1 100%; width: 100%; }
}

/* =====================================================================
   OFERTA — homepage services showcase
   ===================================================================== */
.lab-oferta-block { padding: 40px 0 46px; background: var(--c-bg-soft); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.lab-oferta-head { max-width: 640px; margin: 0 0 26px; }
.lab-oferta-head p { font-size: 14.5px; color: var(--c-muted); margin: 12px 0 0; }

.lab-oferta-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.lab-oferta-card {
	position: relative;
	background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	padding: 26px 20px 22px; text-align: left; text-decoration: none;
	box-shadow: var(--shadow-xs);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	overflow: hidden;
}
.lab-oferta-card:before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-red), var(--c-amber));
	transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.lab-oferta-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.lab-oferta-card:hover:before { transform: scaleX(1); }
.lab-oferta-icon {
	width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-amber-soft); color: var(--c-amber-dark);
	margin-bottom: 16px;
}
.lab-oferta-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.lab-oferta-card:nth-child(4n+2) .lab-oferta-icon { background: var(--c-red-soft); color: var(--c-red-dark); }
.lab-oferta-card:nth-child(4n+3) .lab-oferta-icon { background: var(--c-line-2); color: var(--c-text); }
.lab-oferta-card:nth-child(4n+4) .lab-oferta-icon { background: var(--c-amber-soft); color: var(--c-amber-dark); }
.lab-oferta-card h3 { font-size: 16px; font-weight: 800; color: var(--c-ink); margin: 0 0 8px; }
.lab-oferta-card p { font-size: 13px; line-height: 1.5; color: var(--c-muted); margin: 0 0 14px; }
.lab-oferta-cta { font-size: 12.5px; font-weight: 700; color: var(--c-red); }
.lab-oferta-card:hover .lab-oferta-cta { text-decoration: underline; }

/* --- "Nasza oferta" — rotating spotlight -------------------------------
   A soft highlight walks from card to card so the block feels alive
   without anything moving on the page (no layout shift: the lift is a
   transform, the ring is a box-shadow). Driven by JS adding .is-spotlight,
   which pauses on hover, when the tab is hidden, and off-screen. */
.lab-oferta-card.is-spotlight {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: 0 0 0 2px var(--c-amber), var(--shadow-md);
}
.lab-oferta-card.is-spotlight:before { transform: scaleX(1); }
.lab-oferta-card.is-spotlight .lab-oferta-icon { animation: labOfertaIconPop .55s var(--ease); }

/* One-off light sweep across the card as the spotlight lands on it. */
.lab-oferta-card.is-spotlight:after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
	transform: translateX(-120%);
	animation: labOfertaSheen 1.05s var(--ease);
	pointer-events: none;
}
@keyframes labOfertaSheen { to { transform: translateX(120%); } }
@keyframes labOfertaIconPop {
	0%   { transform: scale(1)    rotate(0deg); }
	45%  { transform: scale(1.14) rotate(-7deg); }
	100% { transform: scale(1)    rotate(0deg); }
}

/* Staggered entrance for the card grid (JS adds .is-in when scrolled to). */
.lab-oferta-grid.is-in .lab-oferta-card {
	animation: labOfertaCardIn .5s var(--ease) backwards;
}
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(1) { animation-delay: .00s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(2) { animation-delay: .06s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(3) { animation-delay: .12s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(4) { animation-delay: .18s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(5) { animation-delay: .24s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(6) { animation-delay: .30s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(7) { animation-delay: .36s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(8) { animation-delay: .42s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(9) { animation-delay: .48s; }
.lab-oferta-grid.is-in .lab-oferta-card:nth-child(10) { animation-delay: .54s; }
@keyframes labOfertaCardIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
	.lab-oferta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.lab-oferta-grid { grid-template-columns: 1fr; }
}

/* Konferencja + Biuletyn — an event and a publication, not a service like
   the rest of the grid, so they get a wider "featured" card (fills the
   otherwise-half-empty last row of the 4-col grid exactly: 2 cards × 2
   columns = 4) and a small corner badge to read as editorial, not sales. */
.lab-oferta-card--featured {
	grid-column: span 2;
	background: linear-gradient(135deg, var(--c-bg) 55%, var(--c-amber-soft) 160%);
}
.lab-oferta-card--featured .lab-oferta-icon {
	background: var(--c-red-soft); color: var(--c-red-dark);
}
.lab-oferta-badge {
	position: absolute; top: 16px; right: 18px;
	background: var(--c-ink); color: #fff;
	font-family: var(--font-head); font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	padding: 4px 10px; border-radius: var(--radius-pill);
}
@media (max-width: 991px) {
	.lab-oferta-card--featured { grid-column: span 2; }
}
@media (max-width: 480px) {
	.lab-oferta-card--featured { grid-column: span 1; }
}


/* =====================================================================
   14. STICKY "NEXT TRAINING" BAR  (inc/sticky-szkolenie.php)
   ===================================================================== */
.lab-next-szk {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1200;
	transform: translateY(110%);
	transition: transform .35s var(--ease);
	will-change: transform;
}
.lab-next-szk.is-visible { transform: translateY(0); }

.lab-next-szk-inner {
	max-width: 1420px;
	margin: 0 auto 14px;
	display: flex; align-items: center; gap: 14px;
	background: var(--c-bg-deep);
	color: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 12px 14px 12px 18px;
	border-top: 3px solid var(--c-amber);
}
.lab-next-szk-badge {
	flex: none;
	font-size: 10.5px; font-weight: 800;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--c-bg-deep);
	background: var(--c-amber);
	border-radius: var(--radius-pill);
	padding: 5px 12px;
	white-space: nowrap;
}
.lab-next-szk-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.lab-next-szk-text strong {
	display: block;
	font-size: 14.5px; font-weight: 700; color: #fff;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lab-next-szk-meta { font-size: 12px; color: rgba(255,255,255,.66); }
.lab-next-szk-cta {
	flex: none;
	background: var(--c-red); color: #fff !important;
	font-size: 12.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	text-decoration: none !important;
	border-radius: var(--radius-pill);
	padding: 10px 20px;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.lab-next-szk-cta:hover { background: var(--c-red-dark); transform: translateY(-2px); }
.lab-next-szk-close {
	flex: none;
	background: transparent; border: 0; cursor: pointer;
	color: rgba(255,255,255,.55);
	font-size: 24px; line-height: 1;
	padding: 0 6px;
	transition: color .2s var(--ease);
}
.lab-next-szk-close:hover { color: #fff; }

@media (max-width: 640px) {
	.lab-next-szk-inner {
		margin: 0 8px 8px;
		gap: 10px; padding: 10px 8px 10px 12px;
		flex-wrap: wrap;
	}
	/* On a phone the badge + close sit on their own row so the title
	   keeps a full line and the CTA stays comfortably tappable. */
	.lab-next-szk-badge { order: 1; }
	.lab-next-szk-close { order: 2; margin-left: auto; }
	.lab-next-szk-text  { order: 3; flex: 1 0 100%; }
	.lab-next-szk-text strong { white-space: normal; font-size: 13.5px; }
	.lab-next-szk-cta   { order: 4; flex: 1 0 100%; text-align: center; padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.lab-next-szk { transition: none; }
	.lab-next-szk-cta:hover { transform: none; }
}

/* The scroll-to-top button lives at bottom:24px and would sit on top of the
   sticky bar's close button. Lift it clear while the bar is showing. The bar
   wraps to several rows on narrow screens, so its height is measured in JS
   and published as --lab-next-szk-h rather than guessed here. */
body.has-next-szk #scroll-up {
	bottom: calc(var(--lab-next-szk-h, 86px) + 30px);
	transition: bottom .35s var(--ease);
}

/* Bootstrap's `.row` carries margin-left/right:-10px, which its `.container`
   normally cancels out with matching padding. Rows written directly into page
   content have no such parent, so on phones the columns stuck ~2px past the
   viewport and gave the page a horizontal scroll. The columns stack full
   width at this size anyway, so the gutters are simply not needed here. */
@media (max-width: 767px) {
	.entry-content .row { margin-left: 0; margin-right: 0; }
	.entry-content .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
}


/* =====================================================================
   15. FOOTER — featured "Strefa ekspercka" card + newsletter tidy-up
   ===================================================================== */
.lab-footer-feat { text-align: left; }
.lab-footer-feat-label {
	display: block;
	font-size: 10px; font-weight: 800;
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--c-amber);
	margin-bottom: 10px;
}

/* Big, image-led card — a stacked layout (photo full-width on top, text
   below) reads as much more substantial than the old small side-by-side
   thumbnail, even constrained to one footer column's width. */
.lab-footer-feat--big .lab-footer-feat-card {
	display: block;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none !important;
	transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.lab-footer-feat--big .lab-footer-feat-card:hover {
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.18);
	transform: translateY(-3px);
}
.lab-footer-feat--big .lab-footer-feat-thumb {
	display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
}
.lab-footer-feat--big .lab-footer-feat-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .3s var(--ease);
}
.lab-footer-feat--big .lab-footer-feat-card:hover .lab-footer-feat-thumb img { transform: scale(1.05); }
.lab-footer-feat--big .lab-footer-feat-body { display: block; padding: 16px 18px 18px; }
.lab-footer-feat--big .lab-footer-feat-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 16px; font-weight: 800; line-height: 1.35;
	color: #fff;
}
.lab-footer-feat--big .lab-footer-feat-card:hover .lab-footer-feat-title { color: var(--c-amber); }
.lab-footer-feat--big .lab-footer-feat-date { display: block; font-size: 11px; color: rgba(255,255,255,.45); margin-top: 6px; }
.lab-footer-feat--big .lab-footer-feat-excerpt {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.65);
	margin-top: 10px;
}
.lab-footer-feat--big .lab-footer-feat-link {
	display: inline-block; margin-top: 12px;
	font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--c-amber);
}

/* The MailPoet signup in the footer rendered with browser-default checkboxes
   and an oversized "Wybierz tematykę:" heading, which is what made the
   footer look unfinished. Bring it in line with the rest of the footer. */
.site-footer .mailpoet_form { max-width: 360px; }
.site-footer .mailpoet_paragraph { margin-bottom: 12px; }
.site-footer .mailpoet_form h1,
.site-footer .mailpoet_form h2,
.site-footer .mailpoet_form h3,
.site-footer .mailpoet_segment_label,
.site-footer .mailpoet_checkbox_label {
	font-size: 13px !important;
	font-weight: 600;
	color: rgba(255,255,255,.8) !important;
	line-height: 1.5;
	margin: 0 0 6px;
}
.site-footer .mailpoet_form h1,
.site-footer .mailpoet_form h2,
.site-footer .mailpoet_form h3 {
	font-size: 11px !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(255,255,255,.55) !important;
	margin-bottom: 8px;
}
.site-footer .mailpoet_checkbox_label,
.site-footer .mailpoet_segment_label {
	display: flex; align-items: flex-start; gap: 8px;
	font-weight: 400;
	margin-bottom: 4px;
	cursor: pointer;
}
.site-footer .mailpoet_form input[type="checkbox"] {
	flex: none;
	width: 15px; height: 15px;
	margin: 3px 0 0;
	accent-color: var(--c-red);
}
.site-footer .mailpoet_text,
.site-footer .mailpoet_email {
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
}
.site-footer .mailpoet_text::placeholder,
.site-footer .mailpoet_email::placeholder { color: rgba(255,255,255,.4); }

/* Teaser restored into the theme's list widgets (see inc/widget-excerpts.php) */
.lab-widget-excerpt {
	font-size: 13px;
	line-height: 1.55;
	color: var(--c-muted);
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* When a post's modified date differs from its publish date the theme prints
   two <time> elements, which read as a duplicated date ("20 lipca 202620
   lipca 2026") in the card footers. When the dates match it prints a single
   element carrying BOTH classes — so target only the standalone modified
   one, otherwise the date would disappear entirely on unedited posts. */
.homepage-widgetarea .entry-footer time.updated:not(.published),
.article-vertical-list time.updated:not(.published),
.article-grid-list time.updated:not(.published) { display: none; }

/* The "Oferta" menu item now jumps to the homepage block (#oferta) instead of
   a separate page. The header is sticky, so offset the scroll target or the
   section title ends up hidden underneath it. */
#oferta { scroll-margin-top: 110px; }


/* =====================================================================
   16. KATALOG FIRM — companies carousel + product-inquiry form
   (inc/firma-cpt.php, inc/katalog-firm-form.php)
   ===================================================================== */

/* --- Logo carousel: pure CSS marquee, no JS/library needed. The track's
   content is duplicated once in PHP so the loop is seamless. --- */
.lab-karuzela {
	overflow: hidden;
	margin: 28px 0 40px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lab-karuzela-track {
	display: flex;
	align-items: center;
	gap: 48px;
	width: max-content;
	animation: labKaruzelaScroll 38s linear infinite;
}
.lab-karuzela:hover .lab-karuzela-track { animation-play-state: paused; }
.lab-karuzela-logo {
	flex: none;
	height: 56px;
	display: flex; align-items: center;
	filter: grayscale(1) opacity(.6);
	transition: filter .2s var(--ease);
	text-decoration: none; /* logos with a dedicated subpage/website render as <a>, not <span> */
	cursor: pointer;
}
.lab-karuzela-logo:hover { filter: grayscale(0) opacity(1); }
.lab-karuzela-logo img { max-height: 100%; max-width: 140px; width: auto; object-fit: contain; }
@keyframes labKaruzelaScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.lab-karuzela-track { animation: none; overflow-x: auto; }
}

/* --- Form shell --- */
.lab-zap { max-width: 900px; margin: 0 auto 50px; }
.lab-zap-step { margin-bottom: 34px; }
.lab-zap-step-title {
	display: flex; align-items: center; gap: 10px;
	font-size: 17px; font-weight: 800; color: var(--c-ink);
	margin: 0 0 16px;
}
.lab-zap-step-title span {
	display: flex; align-items: center; justify-content: center;
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	background: var(--c-red); color: #fff;
	font-size: 13px; font-weight: 800;
}

/* Step 1 — category chips */
.lab-zap-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-zap-cat { position: relative; cursor: pointer; }
.lab-zap-cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lab-zap-cat span {
	display: inline-block;
	padding: 9px 18px;
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 600; color: var(--c-text);
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lab-zap-cat:hover span { border-color: var(--c-red-soft); }
.lab-zap-cat input:checked + span {
	background: var(--c-red); border-color: var(--c-red); color: #fff;
}
.lab-zap-cat input:focus-visible + span { outline: 2px solid var(--c-amber); outline-offset: 2px; }

/* Step 2 — matching companies */
.lab-zap-hint { font-size: 13.5px; color: var(--c-muted); font-style: italic; margin: 0 0 14px; }
.lab-zap-companies {
	position: relative;
	display: flex; flex-wrap: wrap; gap: 14px;
	min-height: 2px;
}
.lab-zap-firm {
	position: relative;
	flex: none;
	width: 92px; height: 66px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 10px;
	cursor: default;
	transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
	animation: labZapFirmIn .3s var(--ease);
}
.lab-zap-firm:hover, .lab-zap-firm:focus { box-shadow: var(--shadow-sm); border-color: var(--c-red-soft); transform: translateY(-2px); outline: none; }
.lab-zap-firm img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* "Wyróżniona firma" — bought a dedicated subpage; small amber ring +
   corner star, echoed by the identical treatment in the browse popup. */
.lab-zap-firm--featured { border-color: var(--c-amber); box-shadow: 0 0 0 1px var(--c-amber) inset; }
.lab-zap-firm--featured:after {
	content: '★';
	position: absolute; top: -7px; left: -7px;
	width: 16px; height: 16px;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-amber); color: #fff;
	border-radius: 50%; font-size: 9px;
}

/* Per-company "don't send my inquiry here" toggle — a small always-visible
   ✕ badge in the corner of each logo; clicking dims the tile and flips the
   icon to an undo arrow. Exclusion is independent of the hover/focus
   preview card, so it needs its own stacking context above the logo. */
.lab-zap-firm-exclude {
	position: absolute; top: -8px; right: -8px;
	z-index: 3;
	width: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1.5px solid var(--c-line); border-radius: 50%;
	font-size: 12px; line-height: 1; color: var(--c-muted); cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lab-zap-firm-exclude:hover { border-color: var(--c-red); color: var(--c-red); }
.lab-zap-firm.is-excluded { opacity: .4; }
.lab-zap-firm.is-excluded img { filter: grayscale(1); }
.lab-zap-firm.is-excluded .lab-zap-firm-exclude { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.lab-zap-firm-fallback {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: var(--c-bg-soft); border-radius: var(--radius-sm);
	font-size: 13px; font-weight: 800; color: var(--c-muted); text-transform: uppercase;
}
@keyframes labZapFirmIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

.lab-zap-firm-card {
	position: absolute;
	z-index: 20;
	width: 260px;
	background: var(--c-ink); color: #fff;
	border-radius: var(--radius);
	padding: 14px 16px;
	box-shadow: var(--shadow-lg);
	font-size: 13px; line-height: 1.5;
}
.lab-zap-firm-card strong { display: block; font-size: 14px; margin-bottom: 4px; }
.lab-zap-firm-card p { margin: 0 0 8px; color: rgba(255,255,255,.75); }
.lab-zap-firm-card a { color: var(--c-amber); font-weight: 700; text-decoration: none; display: block; }
.lab-zap-firm-card a:hover { text-decoration: underline; }
.lab-zap-firm-card a.lab-zap-firm-card-more { margin-top: 4px; }

/* Step 3 — the form itself */
.lab-zap-field { display: block; margin-bottom: 18px; }
.lab-zap-field span { display: block; font-size: 13px; font-weight: 700; color: var(--c-ink); margin-bottom: 6px; }
.lab-zap-field em { color: var(--c-red); font-style: normal; }
.lab-zap-field textarea,
.lab-zap-field input[type="text"],
.lab-zap-field input[type="email"],
.lab-zap-field input[type="tel"] {
	width: 100%;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--c-ink);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lab-zap-field textarea:focus,
.lab-zap-field input:focus {
	border-color: var(--c-red); box-shadow: 0 0 0 3px var(--c-red-soft); outline: none;
}
.lab-zap-field textarea { resize: vertical; }

/* Custom file field: browsers won't let the native "Choose file" control
   be restyled, and letting it inherit the same padding/border as a text
   input left a lot of dead space around the browser's own button — see
   the <input type="file"> markup in katalog-firm-form.php for the
   structure this styles (a visible button + filename pair, with the real
   file input stretched invisibly on top so it still receives clicks). */
.lab-zap-file {
	/* .lab-zap-field span { display: block } (above) also matches these
	   spans and otherwise wins on specificity — force the flex layout. */
	display: flex !important;
	position: relative;
	align-items: stretch;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #fff;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lab-zap-file-btn {
	display: flex !important;
	flex: none;
	align-items: center;
	padding: 0 16px;
	background: var(--c-bg-soft);
	border-right: 1px solid var(--c-line);
	font-size: 13px; font-weight: 700; color: var(--c-ink);
	white-space: nowrap;
}
.lab-zap-file-name {
	display: flex !important;
	flex: 1; min-width: 0;
	align-items: center;
	padding: 0 14px;
	font-size: 13.5px; color: var(--c-muted);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lab-zap-file-btn, .lab-zap-file-name { min-height: 44px; }
.lab-zap-file-input {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0;
	cursor: pointer;
}
.lab-zap-file:has(.lab-zap-file-input:focus-visible) {
	border-color: var(--c-red); box-shadow: 0 0 0 3px var(--c-red-soft);
}
.lab-zap-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 800px) {
	.lab-zap-row { grid-template-columns: repeat(2, 1fr); }
}
.lab-zap-field--website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lab-zap-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--c-muted); margin-bottom: 20px; cursor: pointer; }
.lab-zap-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--c-red); }
.lab-zap-consent em { color: var(--c-red); font-style: normal; }

.lab-zap-submit {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--c-red); color: #fff;
	border: none; border-radius: var(--radius-pill);
	font-family: var(--font-head); font-size: 13px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	padding: 14px 30px;
	cursor: pointer;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.lab-zap-submit:hover { background: var(--c-red-dark); transform: translateY(-2px); }
.lab-zap-submit:disabled { opacity: .6; cursor: default; transform: none; }

.lab-zap-msg { margin: 14px 0 0; font-size: 13.5px; font-weight: 600; }
.lab-zap-msg.is-success { color: #1e7e34; }
.lab-zap-msg.is-error { color: var(--c-red); }

@media (max-width: 640px) {
	.lab-zap-row { grid-template-columns: 1fr; }
	.lab-zap-firm { width: 78px; height: 58px; }
	.lab-zap-firm-card { width: 220px; }
}


/* =====================================================================
   17. HOMEPAGE "KATALOG FIRM" TEASER  (inc/katalog-firm-homepage.php)
   ===================================================================== */
.lab-katalog-teaser-block { padding: 40px 0 46px; background: var(--c-bg); border-top: 1px solid var(--c-line); }
.lab-katalog-teaser {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
}
/* Grid items default to min-width:auto, which sizes them to fit their
   content's intrinsic width — and the carousel track's children are wide
   enough (many logos, width:max-content) that without this the "firms"
   column would blow out past its 1fr share and crush the text column next
   to it, even though .lab-karuzela itself clips overflow. */
.lab-katalog-teaser-text,
.lab-katalog-teaser-firms { min-width: 0; }
.lab-katalog-teaser-text p { font-size: 14.5px; color: var(--c-muted); line-height: 1.6; margin: 14px 0 20px; }
.lab-katalog-teaser-cta {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--c-red); color: #fff !important;
	border-radius: var(--radius-pill);
	font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	text-decoration: none !important;
	padding: 13px 26px;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.lab-katalog-teaser-cta:hover { background: var(--c-red-dark); transform: translateY(-2px); color: #fff !important; }

.lab-katalog-teaser-firms {
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 26px 22px 14px;
}
.lab-katalog-teaser-firms-title {
	display: block;
	font-family: var(--font-head); font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--c-muted);
	margin-bottom: 10px;
}
.lab-katalog-teaser-firms .lab-karuzela { margin: 0; }
/* Same track/animation as the full-width [firmy_karuzela] on /katalog/, but
   this column is much narrower, so the same px/sec speed crosses the
   visible window a lot faster — slow the animation down to compensate. */
.lab-katalog-teaser-firms .lab-karuzela-track { gap: 40px; animation-duration: 90s; }
.lab-katalog-teaser-firms .lab-karuzela-logo { height: 64px; }
.lab-katalog-teaser-firms .lab-karuzela-logo img { max-width: 140px; }

@media (max-width: 900px) {
	.lab-katalog-teaser { grid-template-columns: 1fr; }
}


/* =====================================================================
   SOCIAL MENU — FACEBOOK ICON  (header .top-bar + .footer-bottom)
   Ionicons removal (see #scroll-up above) also blanked out this glyph —
   it's the same icon font, just a different character. Redraw it as a
   masked SVG shape instead, so it needs no font file. !important because
   the parent theme's original rule bundles this selector into several
   large shared groups (buttons, nav hovers, etc.) whose specificity isn't
   worth untangling for one icon.
   ===================================================================== */
.social-icons ul a[href*="facebook.com"]:after,
.widget .social-widget-menu ul a[href*="facebook.com"]:before {
	content: '' !important;
	font-size: 0 !important;
	background-color: var(--c-muted) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E") !important;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 15px auto; mask-size: 15px auto;
	transition: background-color .2s var(--ease);
}
.social-icons ul li:hover a[href*="facebook.com"]:after,
.social-icons ul li:focus a[href*="facebook.com"]:after {
	background-color: var(--c-red) !important;
}
.footer-bottom .social-icons ul a[href*="facebook.com"]:after {
	background-color: rgba(255, 255, 255, .75) !important;
}
.footer-bottom .social-icons ul li:hover a[href*="facebook.com"]:after {
	background-color: #fff !important;
}

/* Same masked-SVG treatment for LinkedIn and Instagram, added to the same
   "Social menu" alongside Facebook. */
.social-icons ul a[href*="linkedin.com"]:after,
.widget .social-widget-menu ul a[href*="linkedin.com"]:before {
	content: '' !important;
	font-size: 0 !important;
	background-color: var(--c-muted) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E") !important;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 15px auto; mask-size: 15px auto;
	transition: background-color .2s var(--ease);
}
.social-icons ul li:hover a[href*="linkedin.com"]:after,
.social-icons ul li:focus a[href*="linkedin.com"]:after {
	background-color: var(--c-red) !important;
}
.footer-bottom .social-icons ul a[href*="linkedin.com"]:after {
	background-color: rgba(255, 255, 255, .75) !important;
}
.footer-bottom .social-icons ul li:hover a[href*="linkedin.com"]:after {
	background-color: #fff !important;
}

.social-icons ul a[href*="instagram.com"]:after,
.widget .social-widget-menu ul a[href*="instagram.com"]:before {
	content: '' !important;
	font-size: 0 !important;
	background-color: var(--c-muted) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E") !important;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 15px auto; mask-size: 15px auto;
	transition: background-color .2s var(--ease);
}
.social-icons ul li:hover a[href*="instagram.com"]:after,
.social-icons ul li:focus a[href*="instagram.com"]:after {
	background-color: var(--c-red) !important;
}
.footer-bottom .social-icons ul a[href*="instagram.com"]:after {
	background-color: rgba(255, 255, 255, .75) !important;
}
.footer-bottom .social-icons ul li:hover a[href*="instagram.com"]:after {
	background-color: #fff !important;
}


/* =====================================================================
   BREADCRUMB SEPARATOR + POST-NAV PREV/NEXT ARROWS
   Same Ionicons removal (see #scroll-up above) also blanked out: the
   ">" between breadcrumb trail items, and the arrows on the "previous
   post / next post" cards at the bottom of single posts. Same fix —
   draw a small chevron with two rotated borders instead of a glyph.
   ===================================================================== */
.breadcrumbs ul li span:before {
	content: '' !important;
	font-family: initial !important;
	width: 5px; height: 5px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	top: 5px;
	opacity: .55;
}
/* The parent theme suppresses this separator for the first breadcrumb
   item ("Home") via `content: none` on a higher-specificity selector —
   but the drawn-chevron rule above needed `!important` (to beat the
   original Ionicons glyph rule), and `!important` wins over specificity,
   so it was clobbering that suppression too: a stray little chevron
   was rendering glued onto "Home" itself instead of only appearing
   *between* items. Needs its own `!important` at higher specificity to
   actually win back over the rule above. */
.breadcrumbs ul .trail-item.trail-begin span:before {
	content: none !important;
}

.nav-previous:before,
.nav-next:after {
	content: '' !important;
	font-family: initial !important;
	display: inline-block !important;
	width: 7px; height: 7px;
	border-top: 2px solid currentColor;
	opacity: .6;
}
.nav-previous:before {
	border-left: 2px solid currentColor;
	transform: rotate(-45deg);
}
.nav-next:after {
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}


/* =====================================================================
   18. "PRZEGLĄDAJ CAŁY KATALOG FIRM" — search/browse popup
   (inc/katalog-firm-form.php — [katalog_przegladaj])
   ===================================================================== */
.lab-katalog-browse-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent; color: var(--c-ink);
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
	padding: 11px 22px;
	cursor: pointer;
	transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.lab-katalog-browse-btn:hover { border-color: var(--c-red); color: var(--c-red); background: var(--c-red-soft); }

.lab-katalog-browse-modal { position: fixed; inset: 0; z-index: 2000; }
.lab-katalog-browse-backdrop { position: absolute; inset: 0; background: rgba(16,20,29,.65); }
.lab-katalog-browse-panel {
	position: relative;
	max-width: 760px;
	margin: 4vh auto;
	max-height: 92vh;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	display: flex; flex-direction: column;
	overflow: hidden;
}
.lab-katalog-browse-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--c-line);
	flex: none;
}
.lab-katalog-browse-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--c-ink); }
.lab-katalog-browse-close {
	background: none; border: none; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--c-muted);
	padding: 0 4px;
}
.lab-katalog-browse-close:hover { color: var(--c-red); }
.lab-katalog-browse-filters {
	display: flex; gap: 10px; padding: 16px 22px;
	border-bottom: 1px solid var(--c-line);
	flex: none;
}
.lab-katalog-browse-filters input,
.lab-katalog-browse-filters select {
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	padding: 9px 12px; font-size: 13.5px; font-family: var(--font-body);
}
.lab-katalog-browse-filters input { flex: 1; }
.lab-katalog-browse-empty { padding: 30px 22px; text-align: center; color: var(--c-muted); }
.lab-katalog-browse-list { overflow-y: auto; padding: 10px 22px 20px; }
.lab-katalog-browse-item {
	display: flex; gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--c-line);
}
.lab-katalog-browse-item:last-child { border-bottom: none; }

/* "Wyróżniona firma" — bought a dedicated subpage: a light amber wash +
   left accent bar, matching the ring/star treatment on the same company's
   logo in the inquiry form (step 2) above. */
.lab-katalog-browse-item--featured {
	background: var(--c-amber-soft);
	border-left: 3px solid var(--c-amber);
	border-bottom-color: transparent;
	padding-left: 12px;
	margin-left: -12px;
	border-radius: var(--radius-sm);
}
.lab-katalog-browse-item-badge {
	align-self: flex-start;
	background: var(--c-amber); color: #fff;
	font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
	padding: 2px 8px; border-radius: var(--radius-pill);
}
.lab-katalog-browse-item-title-link { color: inherit; text-decoration: none; }
.lab-katalog-browse-item-title-link:hover { color: var(--c-red); text-decoration: underline; }
.lab-katalog-browse-item-logo {
	flex: none; width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: var(--c-bg-soft); border-radius: var(--radius-sm);
	overflow: hidden; padding: 6px;
}
.lab-katalog-browse-item-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lab-katalog-browse-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lab-katalog-browse-item-body strong { font-size: 14.5px; color: var(--c-ink); }
.lab-katalog-browse-item-cats {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	color: var(--c-amber-dark);
}
.lab-katalog-browse-item-desc { font-size: 12.5px; color: var(--c-muted); line-height: 1.5; }
.lab-katalog-browse-item-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 2px; }
.lab-katalog-browse-item-link { font-size: 12px; font-weight: 700; color: var(--c-red); text-decoration: none; }
.lab-katalog-browse-item-link:hover { text-decoration: underline; }
.lab-katalog-browse-item-more {
	font-size: 11.5px; font-weight: 800; color: #fff !important;
	background: var(--c-red); padding: 4px 12px; border-radius: var(--radius-pill);
	text-decoration: none !important;
	transition: background .2s var(--ease);
}
.lab-katalog-browse-item-more:hover { background: var(--c-red-dark); }

@media (max-width: 640px) {
	.lab-katalog-browse-panel { margin: 0; max-height: 100vh; border-radius: 0; }
	.lab-katalog-browse-filters { flex-direction: column; }
}


/* =====================================================================
   20. SINGLE SZKOLENIE  (single-szkolenie.php)
   ===================================================================== */
/* The parent theme's own header.php unconditionally renders a
   ".page-inner-title" hero (photo + the_title()) for every singular post,
   above the breadcrumbs — single-szkolenie.php has its own, more useful
   hero right below (with date/format/price badges), so this one just
   duplicated the title on posts that have a featured image. Hidden here
   rather than by un-hooking the parent's PHP, since the breadcrumb output
   further down in that same function still needs to render. */
body.single-szkolenie .page-inner-title { display: none; }

.szk-single-hero {
	background: var(--c-ink) center/cover no-repeat;
	padding: 56px 0 40px;
	color: #fff;
}
.szk-single-title {
	font-family: var(--font-head); font-size: 30px; font-weight: 800;
	color: #fff; margin: 0 0 18px; max-width: 780px;
}
.szk-single-subtitle {
	font-size: 15.5px; font-weight: 500; line-height: 1.5;
	color: rgba(255,255,255,.8);
	margin: -8px 0 18px; max-width: 720px;
}
.szk-single-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.szk-single-badge {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.3);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	font-size: 13.5px; font-weight: 600;
	backdrop-filter: blur(2px);
}
.szk-single-badge--cena { background: var(--c-red); border-color: var(--c-red); font-weight: 700; }
.szk-single-badge svg { flex: none; vertical-align: -2px; }
.szk-single-po-terminie {
	margin: 18px 0 0; padding: 10px 16px;
	background: rgba(255,255,255,.12); border-radius: var(--radius-sm);
	font-size: 14px; max-width: 640px;
}
.szk-single-po-terminie a { color: #fff; text-decoration: underline; }

.szk-single-body {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 44px;
	padding: 44px 0 60px;
	align-items: start;
}
.szk-single-main { min-width: 0; }
.szk-single-section { margin-bottom: 40px; }
.szk-single-section h2 { font-size: 19px; margin-bottom: 18px; }
.szk-single-content { font-size: 15px; line-height: 1.75; color: var(--c-text); }
.szk-single-content p { margin: 0 0 14px; }
.szk-single-content ol, .szk-single-content ul { padding-left: 22px; margin: 0 0 14px; }
.szk-single-content li { margin-bottom: 6px; }
.szk-single-content h3 { font-size: 16px; margin: 20px 0 10px; color: var(--c-ink); }
.szk-single-content strong { color: var(--c-ink); }

.szk-single-info-card {
	background: var(--c-bg-soft); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); padding: 20px 22px;
}
.szk-single-info-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-red); margin: 0 0 8px; }
.szk-single-info-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-text); }

.szk-single-godziny-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.5; color: var(--c-text); }
.szk-single-godziny-list strong { color: var(--c-ink); margin-right: 6px; }
.szk-single-downloads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.szk-single-downloads li a {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 600; color: var(--c-ink);
	text-decoration: none; padding: 10px 14px;
	background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.szk-single-downloads li a:before {
	content: '';
	width: 13px; height: 13px;
	background-color: var(--c-red);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13'/%3E%3Cpath d='M6 11l6 6 6-6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13'/%3E%3Cpath d='M6 11l6 6 6-6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}
.szk-single-downloads li a:hover { border-color: var(--c-red); color: var(--c-red); }

.szk-single-cta {
	background: var(--c-bg-soft); border: 1px dashed var(--c-line);
	border-radius: var(--radius-lg); padding: 24px 26px;
	text-align: center;
}
.szk-single-cta + .szk-single-cta { margin-top: 20px; }
.szk-single-cta p { margin: 0 0 14px; font-size: 14.5px; color: var(--c-text); }
.szk-single-cta-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--c-red); color: #fff !important;
	border-radius: var(--radius-pill); padding: 11px 24px;
	font-family: var(--font-head); font-size: 13px; font-weight: 700; text-transform: uppercase;
	text-decoration: none !important;
	transition: background .2s var(--ease);
}
.szk-single-cta-btn:hover { background: var(--c-red-dark); color: #fff !important; }

/* Not sticky: this sidebar (prowadzący + cena + wymagania + do pobrania +
   kontakt) is often taller than the viewport, so sticking it to the top
   left "Do pobrania" stuck out of view with no way to scroll to it — it
   now just scrolls normally along with the main column. */
.szk-single-sidebar { display: flex; flex-direction: column; gap: 22px; }
.szk-single-kontakt-card {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	padding: 22px;
}
.szk-single-kontakt-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin: 0 0 10px; }
.szk-single-kontakt-card p { margin: 0; font-size: 14px; line-height: 1.8; }
.szk-single-kontakt-card a { color: var(--c-red); font-weight: 700; text-decoration: none; }

/* Prowadzący lives in the sticky sidebar as one bordered block — several
   presenters (co-led trainings) each get their own entry inside it,
   separated by a divider, rather than one card per presenter. */
.szk-single-prowadzacy-block {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	padding: 22px;
}
.szk-single-prowadzacy-block > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin: 0 0 14px; }
.szk-single-prowadzacy-entry { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--c-line); }
.szk-single-prowadzacy-entry:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.szk-single-prowadzacy-entry img {
	width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
	float: left; margin: 0 14px 10px 0;
}
.szk-single-prowadzacy-entry strong { display: block; font-size: 15px; margin: 4px 0 8px; color: var(--c-ink); }
.szk-single-prowadzacy-bio { clear: both; font-size: 13px; line-height: 1.6; color: var(--c-muted); }
.szk-single-prowadzacy-bio p { margin: 0 0 8px; }

/* "Do pobrania" moved into the sidebar's soft-bg info-card — the download
   links' own background otherwise blends into that card's background. */
.szk-single-info-card .szk-single-downloads li a { background: #fff; }

.szk-single-zgloszenie-info { font-size: 14px; line-height: 1.6; color: var(--c-text); margin: 0 0 18px; }
.szk-single-zgloszenie-info a { color: var(--c-red); font-weight: 700; text-decoration: none; }
.szk-single-zgloszenie-info a:hover { text-decoration: underline; }

.szk-single-archiwalne-info { font-size: 14.5px; line-height: 1.6; color: var(--c-text); margin: 0 0 10px; }
.szk-single-archiwalne-info:first-of-type strong {
	display: inline-block; color: var(--c-red); background: var(--c-red-soft);
	padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12.5px;
	text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}

@media (max-width: 900px) {
	.szk-single-body { grid-template-columns: 1fr; }
	.szk-single-title { font-size: 24px; }

	/* The parent theme's own .container only gives 10px of side padding —
	   fine on desktop where the content column is narrow relative to the
	   page, but on a phone it reads as text running edge to edge. Widen it
	   for this page specifically rather than touching .container globally,
	   which plenty of other layouts also rely on. */
	.szk-single-body { padding-left: 18px; padding-right: 18px; }
	.szk-single-hero .container { padding-left: 18px; padding-right: 18px; }

	/* Stacked to one column, "prowadzący" should read before the sign-up
	   form (not after it, where it landed by simply following the desktop
	   main/sidebar source order) — display:contents lifts both wrapper's
	   children into .szk-single-body's own grid so `order` can place them
	   directly, without pulling in JS just to move a DOM node. */
	.szk-single-main, .szk-single-sidebar { display: contents; }
	.szk-single-prowadzacy-block { order: 1; }
	.szk-single-section-zgloszenie { order: 2; }
	.szk-single-cta { order: 3; }
	.szk-single-info-card { order: 4; }
	.szk-single-kontakt-card { order: 5; }
}
@media (max-width: 500px) {
	.szk-single-prowadzacy-entry img { width: 76px; height: 76px; }
}


/* =====================================================================
   21. SZKOLENIE ZGŁOSZENIE FORM  (inc/szkolenie-zgloszenie-form.php)
   Deliberately mirrors .lab-zap-field's visual language (same field/label/
   input styling as the Katalog firm inquiry form) so both native forms
   built in this theme read as one system.
   ===================================================================== */
.szk-single-form-card {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	padding: 24px 22px;
}
.szk-zgl-title { font-size: 16px; margin: 0 0 18px; }
.szk-zgl-section {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--c-muted); margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--c-line);
}
.szk-zgl-field { display: block; margin-bottom: 14px; }
.szk-zgl-field span { display: block; font-size: 12.5px; font-weight: 700; color: var(--c-ink); margin-bottom: 5px; }
.szk-zgl-field em { color: var(--c-red); font-style: normal; }
.szk-zgl-field input, .szk-zgl-field select, .szk-zgl-field textarea {
	width: 100%; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	padding: 9px 12px; font-family: var(--font-body); font-size: 13.5px; color: var(--c-ink);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* Native file inputs render their own "choose file" button + label — the
   padded/bordered box above works for text-like fields but leaves an
   oddly tall, mostly-empty box around a file input (same issue already
   fixed for the katalog-firm-form.php upload field). Simpler here since
   this field is optional/secondary: drop the padding, keep a light border. */
.szk-zgl-field input[type="file"] { padding: 6px 4px; border-color: transparent; font-size: 12.5px; }
.szk-zgl-field textarea { resize: vertical; }
.szk-zgl-field input:focus, .szk-zgl-field select:focus, .szk-zgl-field textarea:focus {
	border-color: var(--c-red); box-shadow: 0 0 0 3px var(--c-red-soft); outline: none;
}
.szk-zgl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.szk-zgl-row.szk-zgl-odbiorca { grid-template-columns: 1.3fr 1fr 1.3fr; }
.szk-zgl-field--website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.szk-zgl-uczestnik { border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; }
.szk-zgl-uczestnik-head {
	display: flex; align-items: center; justify-content: space-between;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--c-muted); margin-bottom: 10px;
}
.szk-zgl-usun-uczestnika {
	background: none; border: none; color: var(--c-red); font-size: 12px; font-weight: 700;
	cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0;
}
.szk-zgl-dodaj-uczestnika {
	display: inline-flex; align-items: center; gap: 4px;
	background: none; border: 1px dashed var(--c-line); border-radius: var(--radius-pill);
	padding: 8px 16px; font-size: 12.5px; font-weight: 700; color: var(--c-muted);
	cursor: pointer; margin-bottom: 6px;
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.szk-zgl-dodaj-uczestnika:hover { border-color: var(--c-red); color: var(--c-red); }

.szk-zgl-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--c-muted); margin-bottom: 14px; cursor: pointer; }
.szk-zgl-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--c-red); }

.szk-zgl-submit {
	display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
	background: var(--c-red); color: #fff;
	border: none; border-radius: var(--radius-pill);
	font-family: var(--font-head); font-size: 13px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	padding: 13px 20px; cursor: pointer;
	transition: background .2s var(--ease);
}
.szk-zgl-submit:hover { background: var(--c-red-dark); }
.szk-zgl-submit:disabled { opacity: .6; cursor: default; }
.szk-zgl-msg { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.szk-zgl-msg.is-success { color: #1e7e34; }
.szk-zgl-msg.is-error { color: var(--c-red); }

/* Replaces the form entirely on success — swapping in a blank space (or a
   lone message stranded inside a hidden <form>) read as "did this even
   work?", so this takes over the same slot with an explicit confirmation. */
.szk-zgl-success {
	text-align: center;
	padding: 40px 24px;
}
.szk-zgl-success-icon {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: 0 auto 18px;
	border-radius: 50%; background: #e6f4ea; color: #1e7e34;
}
.szk-zgl-success h3 { font-size: 18px; margin: 0 0 10px; color: var(--c-ink); }
.szk-zgl-success p { font-size: 14.5px; color: var(--c-text); max-width: 420px; margin: 0 auto; }

@media (max-width: 500px) {
	.szk-zgl-row, .szk-zgl-row.szk-zgl-odbiorca { grid-template-columns: 1fr; }
}

.szkolenia-archiwum-rok {
	font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--c-ink);
	margin: 34px 0 14px;
}
.szkolenia-archiwum-rok:first-child { margin-top: 0; }


/* =====================================================================
   22. AKADEMIA PROFESJONALISTY  (page content — /akademia/)
   The old content here was a stack of manually-styled inline HTML (two
   <h1>s, a single link split across three <a> tags, ad-hoc inline
   colours) — replaced with plain semantic markup styled from here, same
   design tokens as the rest of the theme. No scripts involved.
   ===================================================================== */
.lab-akademia { padding: 46px 0 60px; }
.lab-akademia-title {
	font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--c-ink);
	text-align: center; margin: 0 0 22px;
}
.lab-akademia-lead {
	font-size: 15px; line-height: 1.75; color: var(--c-text);
	max-width: 720px; margin: 0 auto 14px; text-align: center;
}

.lab-akademia-current {
	background: var(--c-ink); color: #fff;
	border-radius: var(--radius-lg);
	padding: 40px 30px;
	text-align: center;
	max-width: 620px;
	margin: 40px auto 0;
}
.lab-akademia-current-badge {
	display: inline-block;
	background: var(--c-red); color: #fff;
	border-radius: var(--radius-pill);
	padding: 6px 18px;
	font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	margin-bottom: 18px;
}
.lab-akademia-current-title { font-size: 22px; margin: 0 0 8px; color: #fff !important; }
.lab-akademia-current-date { color: rgba(255,255,255,.7); font-size: 14.5px; margin: 0 0 24px; }
.lab-akademia-current-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--c-red); color: #fff !important;
	border-radius: var(--radius-pill);
	font-family: var(--font-head); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: 13px 28px;
	text-decoration: none !important;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.lab-akademia-current-btn:hover { background: var(--c-red-dark); transform: translateY(-2px); color: #fff !important; }

.lab-akademia-archiwum { text-align: center; margin-top: 46px; }
.lab-akademia-archiwum-title {
	font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--c-muted);
	text-transform: uppercase; letter-spacing: .05em;
	margin: 0 0 16px;
}
.lab-akademia-archiwum-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lab-akademia-archiwum-list a {
	display: inline-block;
	background: var(--c-bg-soft); border: 1px solid var(--c-line); color: var(--c-ink) !important;
	border-radius: var(--radius-pill);
	padding: 9px 20px;
	font-size: 13.5px; font-weight: 600;
	text-decoration: none !important;
	transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.lab-akademia-archiwum-list a:hover { border-color: var(--c-red); color: var(--c-red) !important; background: var(--c-red-soft); }

@media (max-width: 600px) {
	.lab-akademia-title { font-size: 23px; }
	.lab-akademia-current { padding: 30px 22px; }
}



/* =====================================================================
   23. SZKOLENIE — WYRÓŻNIENIE NA LIŚCIE
   Three highlight styles an admin can pick per training (inc/szkolenia.php
   meta box), applied to the row in [szkolenia_filtrowane]/table-courses.
   Colour is admin-chosen (poświata/ramka) via a `--szk-wyr-color` custom
   property set inline on the <tr>, so one set of rules covers any colour
   without generating a class per colour.
   ===================================================================== */
/* Title text is already font-weight 700 by default (and marked !important
   two rules up), so 800 would be indistinguishable — 900 is the next
   weight actually loaded (functions.php only pulls 300/400/700/900) and
   the colour makes the highlight unmistakable even before you register
   the weight difference. */
.entry-content .table-courses tbody tr.szk-wyr-pogrubienie td h3,
.entry-content .table-courses tbody tr.szk-wyr-pogrubienie td h3 a {
	font-weight: 900 !important;
	color: var(--szk-wyr-color, var(--c-red)) !important;
}

/* Specificity/`!important` here has to beat the table-courses reset above
   (`> :not(caption) > * > * { box-shadow: none !important }`, added to fix
   a Bootstrap 5 striping bug) — hence the fully-qualified selector. */
.entry-content .table-courses tbody tr.szk-wyr-poswiata td {
	box-shadow: inset 0 0 0 1px var(--szk-wyr-color, var(--c-red)), 0 0 16px -3px var(--szk-wyr-color, var(--c-red)) !important;
}

.entry-content .table-courses tbody tr.szk-wyr-ramka td {
	box-shadow: inset 0 0 0 2px var(--szk-wyr-color, var(--c-red)) !important;
}


/* =====================================================================
   24. BIULETYN INFORMACYJNY  (page ID 36467, /biuletyn/)
   ===================================================================== */
.lab-biuletyn { padding: 46px 0 60px; }
.lab-biuletyn-title {
	font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--c-ink);
	text-align: center; margin: 0 0 16px;
}
.lab-biuletyn-lead {
	font-size: 15.5px; line-height: 1.75; color: var(--c-text);
	max-width: 680px; margin: 0 auto; text-align: center;
}

.lab-biuletyn-facts {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
	max-width: 780px; margin: 30px auto 0;
}
.lab-biuletyn-fact {
	flex: 1 1 150px; max-width: 180px;
	background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: 16px 14px; text-align: center;
}
.lab-biuletyn-fact-num {
	display: block; font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--c-red);
}
.lab-biuletyn-fact-label {
	display: block; font-size: 12px; color: var(--c-muted); margin-top: 4px;
}

.lab-biuletyn-section-title {
	font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--c-muted);
	text-transform: uppercase; letter-spacing: .06em;
	text-align: center; margin: 52px 0 24px;
}

.lab-biuletyn-shelf {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
	max-width: 780px; margin: 0 auto;
}
.lab-biuletyn-issue {
	background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: var(--shadow-xs);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lab-biuletyn-issue:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* The real PDF cover, page 1, rendered via pdftoppm — real cover art, not
   a generated placeholder. */
.lab-biuletyn-cover {
	display: block; line-height: 0; overflow: hidden;
}
.lab-biuletyn-cover img {
	display: block; width: 100%; height: auto;
	transition: transform .3s var(--ease);
}
.lab-biuletyn-issue:hover .lab-biuletyn-cover img { transform: scale(1.03); }

.lab-biuletyn-issue-body { padding: 18px 20px 20px; }
.lab-biuletyn-issue-body p { font-size: 13.5px; line-height: 1.6; color: var(--c-muted); margin: 0 0 16px; }
.lab-biuletyn-download {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--c-bg-soft); border: 1px solid var(--c-line); color: var(--c-ink) !important;
	border-radius: var(--radius-pill);
	font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
	padding: 10px 18px;
	text-decoration: none !important;
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lab-biuletyn-download:hover { background: var(--c-red); border-color: var(--c-red); color: #fff !important; }

.lab-biuletyn-cta {
	max-width: 780px; margin: 52px auto 0;
	background: var(--c-ink); border-radius: var(--radius-lg);
	padding: 34px 34px 8px;
	display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.lab-biuletyn-cta-text { flex: 1 1 260px; color: #fff; padding-bottom: 26px; }
.lab-biuletyn-cta-text strong { display: block; font-family: var(--font-head); font-size: 18px; margin-bottom: 6px; }
.lab-biuletyn-cta-text span { display: block; font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.55; }
.lab-biuletyn-cta-form { flex: 1 1 280px; color: #fff; }
.lab-biuletyn-cta-form .mailpoet_form { padding: 0 !important; margin: 0 !important; }
.lab-biuletyn-cta-form .mailpoet_paragraph { margin: 0 0 12px !important; }
.lab-biuletyn-cta-form label,
.lab-biuletyn-cta-form .mailpoet_text_label,
.lab-biuletyn-cta-form .mailpoet_form_paragraph label { color: #fff !important; }
/* Bootstrap 5's reboot styles a bare <legend> like a heading
   (font-size: calc(1.275rem + .3vw)) — MailPoet's "Wybierz tematykę"
   segment field renders as a real <fieldset><legend>, so it inherited
   that instead of reading as a small form label. */
.lab-biuletyn-cta-form legend,
.lab-biuletyn-cta-form .mailpoet_segment_label {
	font-size: 13.5px !important; font-weight: 700 !important;
	margin: 0 0 8px !important; padding: 0 !important; float: none !important; width: auto !important;
}
.lab-biuletyn-cta-form .mailpoet_checkbox_label {
	display: flex !important; align-items: center; gap: 7px;
	font-size: 13.5px !important; font-weight: 400 !important;
	color: rgba(255,255,255,.85) !important; margin: 0 0 8px !important;
}
.lab-biuletyn-cta-form input[type="checkbox"] {
	width: 15px !important; height: 15px !important; margin: 0 !important; flex: none;
}
.lab-biuletyn-cta-form p { font-size: 13px !important; color: rgba(255,255,255,.6) !important; margin: 0 0 12px !important; }
.lab-biuletyn-cta-form a { color: var(--c-red) !important; }
.lab-biuletyn-cta-form input[type="text"],
.lab-biuletyn-cta-form input[type="email"] {
	width: 100% !important; box-sizing: border-box;
	background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.25) !important;
	border-radius: var(--radius-sm) !important; color: #fff !important;
	padding: 10px 12px !important;
}
.lab-biuletyn-cta-form input::placeholder { color: rgba(255,255,255,.5) !important; }
.lab-biuletyn-cta-form .mailpoet_submit input,
.lab-biuletyn-cta-form button[type="submit"] {
	background: var(--c-red) !important; color: #fff !important; border: none !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-head) !important; font-size: 13px !important; font-weight: 700 !important;
	text-transform: uppercase; letter-spacing: .04em;
	padding: 11px 26px !important; cursor: pointer;
}

@media (max-width: 600px) {
	.lab-biuletyn-title { font-size: 24px; }
	.lab-biuletyn-shelf { grid-template-columns: 1fr; max-width: 340px; }
	.lab-biuletyn-cta { padding: 28px 22px 6px; }
}


/* =====================================================================
   25. LABORATORYJNE FORUM  (page ID 36484, /forum-laboratoryjnie-pl/)
   Same visual language as the Akademia/Biuletyn pages — colour set
   directly on <a> elements needs !important, since .entry-content a
   (parent theme) otherwise wins on specificity for anything inheriting
   from an anchor.
   ===================================================================== */
.lab-forum { padding: 46px 0 60px; }
.lab-forum-title {
	font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--c-ink);
	text-align: center; margin: 0 0 16px;
}
.lab-forum-lead {
	font-size: 15px; line-height: 1.75; color: var(--c-text);
	max-width: 720px; margin: 0 auto 14px; text-align: center;
}

.lab-forum-current {
	background: var(--c-ink); color: #fff;
	border-radius: var(--radius-lg);
	padding: 40px 30px;
	text-align: center;
	max-width: 620px;
	margin: 40px auto 0;
}
.lab-forum-current-badge {
	display: inline-block;
	background: var(--c-red); color: #fff;
	border-radius: var(--radius-pill);
	padding: 6px 18px;
	font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	margin-bottom: 18px;
}
.lab-forum-current-title { font-size: 22px; margin: 0 0 8px; color: #fff !important; }
.lab-forum-current-date { color: rgba(255,255,255,.7); font-size: 14.5px; margin: 0; }

.lab-forum-archiwum { margin-top: 52px; }
.lab-forum-archiwum-title {
	font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--c-muted);
	text-transform: uppercase; letter-spacing: .05em;
	text-align: center; margin: 0 0 24px;
}
.lab-forum-archiwum-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
	max-width: 980px; margin: 0 auto;
}
.lab-forum-ed {
	display: flex; flex-direction: column; gap: 6px;
	background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: 18px 20px;
	text-decoration: none !important;
	transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lab-forum-ed:hover { border-color: var(--c-red); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.lab-forum-ed-nr {
	font-family: var(--font-head); font-size: 11px; font-weight: 700; color: var(--c-red) !important;
	text-transform: uppercase; letter-spacing: .05em;
}
.lab-forum-ed-temat { font-size: 14.5px; font-weight: 700; color: var(--c-ink) !important; line-height: 1.4; }
.lab-forum-ed-data { font-size: 12.5px; color: var(--c-muted) !important; }

@media (max-width: 780px) {
	.lab-forum-archiwum-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lab-forum-title { font-size: 24px; }
	.lab-forum-current { padding: 30px 22px; }
	.lab-forum-archiwum-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   26. PANEL UCZESTNIKA  (inc/portal-auth.php, inc/portal-uczestnika.php)
   ===================================================================== */
.lab-portal {
	font-family: var(--font-body);
}
.lab-portal-title {
	font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--c-ink);
	margin: 0 0 10px;
}
.lab-portal-lead, .lab-portal-compact-lead {
	color: var(--c-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px;
}

.lab-portal-icon {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--c-red-soft); color: var(--c-red); margin-bottom: 12px;
}
.lab-portal-icon--sm { width: 34px; height: 34px; margin-bottom: 0; }

.lab-portal-back {
	display: inline-block; font-size: 13px; font-weight: 600; color: var(--c-muted) !important;
	text-decoration: none; margin-bottom: 16px;
}
.lab-portal-back:hover { color: var(--c-red) !important; }

/* Full login card — used on /panel-uczestnika/ */
.lab-portal--login:not(.lab-portal--compact) {
	max-width: 460px; margin: 0 auto; background: var(--c-bg); border: 1px solid var(--c-line);
	border-top: 3px solid var(--c-red); border-radius: var(--radius-lg); padding: 32px 36px; box-shadow: var(--shadow-sm);
}

/* Full-width login bar — used on the training calendar page. A tight
   max-width box floating in the middle of a wide content column read as
   randomly stuck-on, so this spans the full column and lays out as a row
   on larger screens instead: blurb on the left, form inline on the right. */
.lab-portal--compact.lab-portal--login {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
	width: 100%; max-width: none;
	background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-red-soft) 145%);
	border: 1px solid var(--c-line); border-left: 4px solid var(--c-red);
	border-radius: var(--radius-lg); padding: 20px 26px; margin: 0 0 28px;
}
.lab-portal-compact-text { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.lab-portal-compact-title { display: block; font-family: var(--font-head); font-size: 15px; color: var(--c-ink); }
.lab-portal--compact .lab-portal-compact-lead { display: block; font-size: 13px; margin: 2px 0 0; }
.lab-portal--compact .lab-portal-form { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1 1 340px; }
.lab-portal--compact .lab-portal-field { flex: 1 1 220px; margin-bottom: 0; }
.lab-portal--compact .lab-portal-field span { position: absolute !important; left: -9999px; }
.lab-portal--compact .lab-portal-field input { background: var(--c-bg); }
.lab-portal--compact .lab-portal-btn { font-size: 13.5px; padding: 11px 20px; flex: none; white-space: nowrap; }
.lab-portal--compact .lab-portal-msg { flex-basis: 100%; margin: 0; }
.lab-portal--compact .lab-portal-step-code { display: flex; align-items: center; gap: 10px; flex: 1 1 340px; flex-wrap: wrap; }
.lab-portal--compact .lab-portal-step-code .lab-portal-field { flex: 1 1 160px; }
.lab-portal--compact .lab-portal-resend { flex: none; }

.lab-portal-field { display: block; margin-bottom: 12px; }
.lab-portal-field span { display: block; font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 5px; }
.lab-portal-field input {
	width: 100%; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	font-family: var(--font-body); font-size: 14.5px; color: var(--c-ink); background: var(--c-bg);
	transition: border-color .2s var(--ease);
}
.lab-portal-field input:focus { outline: none; border-color: var(--c-red); }
.lab-portal-field--website { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* display:inline-flex + justify-content:center — NOT line-height-based
   centering — because the parent theme's generic
   `button, input[type=submit] { height:45px; line-height:45px; }` reset
   (perfect-magazine/style.css) clashes with any custom-padded <button> that
   doesn't opt out, leaving text rendered off-centre inside the pill. Flex
   alignment sidesteps that inherited sizing entirely (same fix already
   used by .lab-zap-submit / .szk-zgl-submit elsewhere in this file). */
.lab-portal-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: auto; line-height: normal;
	background: var(--c-red); color: #fff !important; border: none; cursor: pointer;
	font-family: var(--font-head); font-weight: 700; font-size: 14.5px; letter-spacing: .01em;
	padding: 11px 22px; border-radius: var(--radius-pill); text-decoration: none;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.lab-portal-btn:hover { background: var(--c-red-dark); transform: translateY(-1px); }
.lab-portal-btn:disabled { opacity: .6; cursor: default; transform: none; }

.lab-portal-link {
	display: inline-flex; align-items: center; height: auto; line-height: normal;
	background: none; border: none; padding: 0; margin-top: 4px;
	color: var(--c-muted); font-size: 13px; text-decoration: underline; cursor: pointer;
}
.lab-portal-link:hover { color: var(--c-red); }

.lab-portal-msg { font-size: 13.5px; color: var(--c-muted); margin: 12px 0 0; min-height: 1.2em; }
.lab-portal-msg.is-error { color: var(--c-red); }

/* Compact "already logged in" bar */
.lab-portal--bar {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
	width: 100%;
	background: var(--c-bg-soft); border: 1px solid var(--c-line); border-left: 4px solid var(--c-red);
	border-radius: var(--radius-lg); padding: 16px 26px; margin: 0 0 28px; font-size: 14px;
}
.lab-portal--bar p { margin: 0; }
.lab-portal--bar a { color: var(--c-red); font-weight: 600; text-decoration: none; }
.lab-portal--bar a:hover { text-decoration: underline; }

/* Full dashboard */
.lab-portal--dashboard { max-width: 900px; margin: 0 auto; }
.lab-portal-dash-head {
	margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line);
}
.lab-portal-dash-head p { margin: 0 0 6px; color: var(--c-text); }
.lab-portal-logout { color: var(--c-muted); font-size: 13px; text-decoration: underline; }
.lab-portal-logout:hover { color: var(--c-red); }
.lab-portal-empty { color: var(--c-muted); font-size: 14.5px; }

.lab-portal-section-title {
	font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--c-ink);
	text-transform: uppercase; letter-spacing: .04em; margin: 28px 0 14px;
}
.lab-portal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lab-portal-card {
	background: var(--c-bg); border: 1px solid var(--c-line); border-left: 3px solid var(--c-line);
	border-radius: var(--radius); padding: 18px 20px;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lab-portal-card--upcoming { border-left-color: var(--c-amber); }
.lab-portal-card--historia { border-left-color: var(--c-red); }
.lab-portal-card:hover { box-shadow: var(--shadow-xs); }
.lab-portal-card-title { font-weight: 700; color: var(--c-ink); margin-bottom: 4px; }
.lab-portal-card-termin { font-size: 13px; color: var(--c-muted); margin-bottom: 10px; }
.lab-portal-card-note { font-size: 13px; color: var(--c-muted); margin: 0; }
.lab-portal-card-files { display: flex; flex-direction: column; gap: 8px; }
.lab-portal-download {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	background: var(--c-red-soft); color: var(--c-red); border-radius: var(--radius-pill);
	padding: 7px 14px 7px 10px; font-size: 13px; font-weight: 700; text-decoration: none;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.lab-portal-download:hover { background: var(--c-red); color: #fff; }
.lab-portal-download--pending {
	background: none; color: var(--c-faint); font-weight: 400; cursor: default; padding-left: 0;
}

@media (max-width: 480px) {
	.lab-portal--login:not(.lab-portal--compact) { padding: 24px 20px; }
	.lab-portal-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	/* justify-content:space-between (set on the base rule for the desktop
	   side-by-side layout) still applies once flex-direction flips to
	   column, where "space-between" is a MAIN-axis property — so it pushes
	   the first child to the top and the last to the bottom of whatever
	   height the container ends up with, leaving a large dead gap in
	   between instead of a normal stacked layout. Override it explicitly
	   rather than relying on flex-wrap's row behavior to degrade gracefully. */
	.lab-portal--compact.lab-portal--login {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}
	.lab-portal--compact .lab-portal-compact-text,
	.lab-portal--compact .lab-portal-form,
	.lab-portal--compact .lab-portal-step-code {
		flex: none;
		width: 100%;
	}
}

/* Both columns sat almost flush against the breadcrumb bar above them —
   on the archive/category page specifically, the first .lab-archive-card
   has its own border but no real top offset either. Give #primary and
   #secondary the same top margin so both start level, with real
   breathing room under the breadcrumb bar. (#primary/#secondary are only
   used by archive.php/single.php/page.php/search.php — the homepage
   doesn't render through them, so this doesn't touch it.) */
#primary, #secondary { margin-top: 28px; }

/* =====================================================================
   27. ARCHIWUM / LISTA WPISÓW  (template-parts/content.php)
   Category/tag/date archives + blog index + search results — the parent
   theme's own template rendered a raw 50/50 image+text zigzag row per
   post with no excerpt and a "By : Author" byline. Overridden in the
   child theme (template-parts/content.php) with a compact card: smaller
   fixed-size thumbnail, a short excerpt, no byline.
   ===================================================================== */
.lab-archive-card {
	display: flex;
	gap: 24px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 22px;
	transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.lab-archive-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.lab-archive-card-thumb {
	flex: 0 0 240px;
	display: block;
	overflow: hidden;
}
.lab-archive-card-thumb img {
	width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block;
	transition: transform .5s var(--ease);
}
.lab-archive-card:hover .lab-archive-card-thumb img { transform: scale(1.05); }
.lab-archive-card-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 22px 24px 22px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lab-archive-card-cats { margin-bottom: 8px; }
.lab-archive-card-title {
	font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--c-ink);
	margin: 0 0 10px;
}
.lab-archive-card-title a { color: inherit; }
.lab-archive-card-title a:hover { color: var(--c-red); }
.lab-archive-card-excerpt {
	font-size: 14.5px; line-height: 1.6; color: var(--c-muted);
	margin: 0 0 12px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lab-archive-card-footer { font-size: 12.5px; color: var(--c-faint); }
.lab-archive-card-footer .posted-on a { color: var(--c-faint); font-weight: 600; }
.lab-archive-card-footer .posted-on:before {
	content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
	background: var(--c-amber); margin-right: 6px; vertical-align: middle;
}
/* Same combined-vs-separate <time> quirk as the homepage widgets (see the
   PANEL UCZESTNIKA-adjacent note higher up this file) — the parent's
   blanket `time.updated { display:none }` also hides posts whose single
   <time> carries both classes together. */
.lab-archive-card-footer time.entry-date.updated { display: inline !important; }

@media (max-width: 767px) {
	.lab-archive-card { flex-direction: column; }
	.lab-archive-card-thumb { flex-basis: auto; }
	.lab-archive-card-thumb img { min-height: 200px; }
	.lab-archive-card-body { padding: 18px 20px; }
	.lab-archive-card-title { font-size: 18.5px; }
}