/*
Theme Name:  Laboratoryjnie Child
Description: Odświeżony, nowoczesny wygląd dla laboratoryjnie.pl – child theme dla Perfect Magazine.
Template:    perfect-magazine
Version:     1.0.19
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;
}

body a { color: var(--c-ink); 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; }


/* =====================================================================
   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);
}
#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: 50px; 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);
}
#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;
}
#lbn-nav-main .main-navigation .menu > ul > li > a:after {
	content: '';
	position: absolute;
	left: 18px; right: 18px; bottom: 11px;
	height: 2px;
	background: var(--c-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s var(--ease);
}
#lbn-nav-main .main-navigation .menu > ul > li:hover > a:after,
#lbn-nav-main .main-navigation .menu > ul > li.current-menu-item > a: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); }

/* 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; }


/* =====================================================================
   4. SECTION HEADERS
   ===================================================================== */
.homepage-widgetarea .widget { padding-top: 34px; padding-bottom: 34px; }
.homepage-widgetarea .widget-even { background-color: var(--c-bg-soft); }
.homepage-widgetarea .widget-even .widget-header-wrapper { background: transparent !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-even .widget-header-wrapper { border-bottom-color: var(--c-line); }
.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;
}

.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); }

.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;
	transition: color .2s var(--ease);
}
.homepage-widgetarea .entry-title a { color: inherit; }
.homepage-widgetarea .entry-title a:hover { color: var(--c-red); }

.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;
}

.homepage-widgetarea .posted-on a,
.homepage-widgetarea .byline a { font-size: 11px; color: var(--c-faint) !important; font-weight: 600; letter-spacing: .02em; }
.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; }

.categories-list > a, .post-category-label a {
	font-size: 10px; letter-spacing: .06em; font-weight: 700;
	padding: 4px 11px; border-radius: var(--radius-pill); text-transform: uppercase;
	background: var(--c-red-soft) !important; color: var(--c-red) !important;
}
.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); }


/* =====================================================================
   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); }

/* "Reklama / Biuletyn / Szkolenia" and similar boxed mini-widgets
   (legacy .newsletter-box-header markup: dark bg set in Additional CSS
   used to pair with dark text from our own heading rule — fix contrast
   and restyle to match the card system instead of the old flat block). */
.widget-title.newsletter-box-header {
	background: var(--c-ink) !important;
	color: #fff !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;
}


/* =====================================================================
   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; }
#secondary .widget ul li:last-child { border-bottom: none; }


/* =====================================================================
   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; }

.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); }

.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); }


/* =====================================================================
   11. YOUTUBE GALLERY (Automatic YouTube Gallery plugin)
   ===================================================================== */
.ayg-widget { padding-top: 8px; }
/* This widget renders without the .container wrapper every other homepage
   section uses, so it stretched full-bleed while its neighbours stayed
   at the normal content width — match that width here explicitly. */
.ayg-widget > .automatic-youtube-gallery.ayg {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.ayg-widget > .automatic-youtube-gallery.ayg { max-width: 100%; }
}

/* The plugin's own CSS forces .ayg-player into a column flex layout
   (video, then caption) — we keep that direction but cap the player's
   width and center it, instead of letting it stretch full-bleed. Many
   source clips are vertical (Shorts), so a full-width 16:9 box is mostly
   blurred filler either side; capping it keeps the block a sane, fixed
   size regardless of a given clip's own aspect ratio. */
/* Force the player row to sit side-by-side with its caption instead of
   the plugin's default stacked column — a small centred player left a lot
   of dead space either side; filling the row is a better use of it. */
/* Unwrap the plugin's two top-level sections (.ayg-player and the
   .ayg-videos gallery) so the featured player, the second video's
   thumbnail (promoted to hero size) and every remaining thumbnail all
   become direct children of one grid — two big videos on top instead of
   one small player with empty space beside it, smaller "container" cards
   below regardless of how short the description text is. */
.ayg-theme.ayg-theme-classic {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 20px;
}
.ayg-player,
.ayg-videos.ayg-gallery { display: contents !important; }

.ayg-player-container {
	grid-column: 1 / 3;
	grid-row: 1;
	margin: 0 !important;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.ayg-player-caption {
	grid-column: 1 / 3;
	grid-row: 2;
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
	text-align: left !important;
}
.ayg-video:nth-child(1) { display: none; } /* duplicates the video already loaded in the player */
.ayg-video:nth-child(2) {
	grid-column: 3 / 5;
	grid-row: 1 / 3;
	width: auto;
	flex-basis: auto;
}
.ayg-video:nth-child(2) .ayg-thumbnail { height: 100%; display: flex; flex-direction: column; }
.ayg-video:nth-child(2) .ayg-thumbnail-media { flex: 1; }
.ayg-video:nth-child(2) .ayg-thumbnail-title { font-size: 16px; -webkit-line-clamp: 3; }
.ayg-video:nth-child(n+3) { grid-column: span 1; }
.ayg-player-title {
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--c-ink);
	line-height: 1.35;
	margin: 0 0 10px;
}
.ayg-player-description,
.ayg-player-description * { font-size: 14px; line-height: 1.7; color: var(--c-muted); }
.ayg-player-description br + br { display: none; }
.ayg-player-description-toggle-btn {
	display: inline-block;
	margin-left: 4px;
	font-size: 11.5px !important;
	font-weight: 700;
	color: var(--c-red) !important;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.ayg-player-description-toggle-btn:hover { color: var(--c-red-dark) !important; }

/* Plugin ships English-only "Show More"/"Show Less" — the string never
   changes but it does toggle an inline display:inline on the expanded
   text span, so :has() can tell the two states apart to swap in Polish. */
.ayg-player-description-toggle-btn { font-size: 0 !important; }
.ayg-player-description-toggle-btn::before { content: 'Pokaż więcej'; font-size: 11.5px; }
.ayg-player-description:has(.ayg-player-description-more[style*="display: inline"]) .ayg-player-description-toggle-btn::before {
	content: 'Zwiń';
}

.ayg-video { width: auto; }
.ayg-thumbnail {
	cursor: pointer;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--c-line);
	transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.ayg-thumbnail:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.ayg-video.ayg-active .ayg-thumbnail { border-color: var(--c-red); box-shadow: 0 0 0 1px var(--c-red); }
.ayg-thumbnail-media { position: relative; overflow: hidden; }
.ayg-thumbnail-image { transition: transform .5s var(--ease); }
.ayg-thumbnail:hover .ayg-thumbnail-image { transform: scale(1.06); }
.ayg-thumbnail-caption { padding: 12px 4px 4px; }
.ayg-thumbnail-title {
	font-family: var(--font-head);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ayg-thumbnail-now-playing {
	background: var(--c-red) !important;
	border-radius: var(--radius-pill);
	font-size: 10px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ayg-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 8px;
}
.ayg-pagination-info { font-size: 12px; color: var(--c-muted); }
.ayg-btn.ayg-pagination-next-btn,
.ayg-btn.ayg-pagination-prev-btn {
	background: transparent !important;
	color: var(--c-ink) !important;
	border: 1px solid var(--c-line) !important;
	box-shadow: none !important;
	border-radius: var(--radius-pill) !important;
	font-size: 11.5px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 8px 20px !important;
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.ayg-btn.ayg-pagination-next-btn:hover,
.ayg-btn.ayg-pagination-prev-btn:hover {
	border-color: var(--c-red) !important;
	color: var(--c-red) !important;
}
/* "Next" / "Previous" — plugin ships English-only, same font-size:0 swap. */
.ayg-btn.ayg-pagination-next-btn,
.ayg-btn.ayg-pagination-prev-btn { font-size: 0 !important; }
.ayg-btn.ayg-pagination-next-btn::before,
.ayg-btn.ayg-pagination-prev-btn::before { font-size: 11.5px; }
.ayg-btn.ayg-pagination-next-btn::before { content: 'Dalej'; }
.ayg-btn.ayg-pagination-prev-btn::before { content: 'Wstecz'; }


/* =====================================================================
   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; }

.entry-content .table-courses {
	width: 100% !important;
	border: none !important;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}
.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;
	white-space: nowrap;
}
.entry-content .table-courses td:nth-child(2)::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-amber);
	margin-right: 6px;
	vertical-align: middle;
}
.entry-content .table-courses td:nth-child(3) strong {
	display: block;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 4px;
}
.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(4) {
	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 */
.entry-content { overflow-x: visible; }
@media (max-width: 767px) {
	.entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* [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 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"] {
	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);
}
.szkolenia-filtr-pole select:focus,
.szkolenia-filtr-pole input[type="date"]:focus {
	outline: none;
	border-color: var(--c-red);
	box-shadow: 0 0 0 3px var(--c-red-soft);
}
.szkolenia-filtr-reset {
	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);
}

.szkolenie-prowadzacy-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--c-amber-dark);
	background: var(--c-amber-soft);
	border-radius: var(--radius-pill);
	padding: 2px 10px;
	margin: 2px 0 6px;
}

@media (max-width: 600px) {
	.szkolenia-filtry { flex-direction: column; align-items: stretch; }
	.szkolenia-filtr-pole { min-width: 0; }
	.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; }

	.ayg-theme.ayg-theme-classic { grid-template-columns: repeat(2, 1fr) !important; }
	.ayg-player-container { grid-column: 1 / 2 !important; grid-row: 1 !important; }
	.ayg-video:nth-child(2) { grid-column: 2 / 3 !important; grid-row: 1 !important; }
	.ayg-player-caption { grid-column: 1 / 3 !important; grid-row: 2 !important; }
	.ayg-video:nth-child(n+3) { grid-column: span 1 !important; }
	.ayg-player-title { font-size: 18px; }
}

@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: 42px; }
	.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; }

	.ayg-theme.ayg-theme-classic { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
	.ayg-player-container { grid-column: 1 / 3 !important; grid-row: 1 !important; }
	.ayg-video:nth-child(2) { grid-column: 1 / 3 !important; grid-row: 2 !important; }
	.ayg-video:nth-child(2) .ayg-thumbnail { height: auto; }
	.ayg-player-caption { grid-column: 1 / 3 !important; grid-row: 3 !important; text-align: left !important; }
	.ayg-video:nth-child(n+3) { grid-column: span 1 !important; }
}

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