/*
Theme Name: BeeClear Live
Theme URI: https://beeclear.pl/
Author: BeeClear
Author URI: https://beeclear.pl/
Description: Motyw blokowy BeeClear — agencja interaktywna SEO/GEO oraz wtyczki WordPress i aplikacje mobilne. Zbudowany na bazie Twenty Twenty-Five.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.0.15
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beeclear-live
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, full-site-editing, rtl-language-support, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, business
*/

/*
 * Nadpisania kaskady dla beeclear-live.
 * Kolejność stylowania: theme.json -> nadpisanie klasy -> nowa klasa -> inline.
 * Wygląd tokenów mieszka w theme.json; tu tylko to, czego theme.json nie wyraża.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* =====================================================================
 * Nagłówek
 * ===================================================================== */
.bcl-header {
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--wp--custom--color--line);
}

.bcl-header__bar {
	gap: 1.5rem;
}

/* Logo: pełny znak marki (pszczoła + wordmark) jako grafika obrazkowa z assets/brand.
   Wariant ciemny (beeclear-logo-dark.svg), bo pasek nagłówka jest jasny. */
.bcl-logo__img {
	margin: 0;
}

.bcl-logo__img img {
	display: block;
	width: auto;
	height: 46px;
}

/* =====================================================================
 * Menu (kontener; szczegóły .asp-menu__* dostrajane w Fazie 6a)
 * ===================================================================== */
.bcl-menu {
	margin-block: 0;
}

/* =====================================================================
 * Stopka
 * ===================================================================== */
.bcl-footer {
	padding-block: var(--wp--custom--space--band);
}

.bcl-footer__bar {
	gap: 2rem;
	align-items: flex-start;
}

/* Ten sam znak marki w stopce jako grafika obrazkowa — wariant biały
   (beeclear-logo-white.svg), bo tło stopki jest ciemne. */
.bcl-footer__logo {
	margin: 0;
}

.bcl-footer__logo img {
	display: block;
	width: auto;
	height: 46px;
}

.bcl-footer__tagline {
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	max-width: 34ch;
	margin-block-start: 0.5rem;
}

.bcl-footer a {
	color: var(--wp--preset--color--base);
}

.bcl-contact {
	gap: 1.25rem;
}

.bcl-footer__legal {
	margin-block-start: var(--wp--custom--space--head);
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
}

/* =====================================================================
 * KIT — sekcje, etykiety, pasy, karty, przyciski
 * ===================================================================== */

/* Globalny kontener sekcji: boks trzyma wideSize jak hero, a treść wspólny
   inset. Dzięki temu sekcje jasne i pasy mają tę samą linię treści. */
.bcl-section {
	padding-block: var(--wp--custom--space--section);
	padding-inline: var(--wp--custom--space--inset);
}

.is-layout-constrained > .bcl-section {
	max-width: var(--wp--style--global--wide-size);
}

/* Powierzchnia będąca bezpośrednim boksem sekcji wystaje do wideSize, lecz
   jej pole treści zostaje na tej samej linii co .bcl-home-split. */
.bcl-section > :where(.is-style-surface, .is-style-band-honey, .is-style-band-dark) {
	max-width: none;
	margin-inline: calc(0px - var(--wp--custom--space--inset)) !important;
	padding-inline: var(--wp--custom--space--inset);
}

.bcl-section__head {
	max-width: 50rem;
	margin-inline: auto;
	text-align: center;
}

/* Lede — większe wprowadzenie */
.is-style-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
}

/* Lista ze znacznikiem — miodowy „check" zamiast punktora (styl checkmark-list) */
.wp-block-list.is-style-checkmark-list {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-checkmark-list > li {
	position: relative;
	padding-inline-start: 1.9rem;
	margin-block-end: 0.35rem;
}

.wp-block-list.is-style-checkmark-list > li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	font-weight: 700;
	color: var(--wp--custom--color--amber-deep);
}

/* Plakietka jest elementem pojedynczej karty, nie nadwierszem sekcji. */
:is(.is-style-card-white, .is-style-card-image) .bcl-badge {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--honey-tint);
	color: var(--wp--custom--color--amber-deep);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Bazowy pas BeeClear odtwarza jasne tło hero z beeclear.pl/en:
   tekstura plastra + pomarańczowo-żółty gradient i ciemny tekst. */
.is-style-band-honey,
.is-style-hero-amber,
.is-style-hero-violet,
.is-style-hero-night,
.is-style-band-dark,
.is-style-surface {
	background-size: cover;
	background-position: center;
	border-radius: var(--wp--custom--radius--lg);
	padding-block: var(--wp--custom--space--band);
	padding-inline: var(--wp--custom--space--inset);
	color: var(--wp--preset--color--contrast);
}

.is-style-band-honey {
	background-color: var(--wp--preset--color--amber);
	background-image:
		var(--wp--preset--gradient--honey-source),
		url('assets/images/bg/beeclear-bg.jpg');
	color: var(--wp--preset--color--contrast);
}

/* Trzy propozycje hero korzystają z tej samej tekstury i kolorów marki,
   ale mają ciemniejsze gradienty, na których biały tekst zachowuje AA. */
.is-style-hero-amber {
	background-color: var(--wp--custom--color--hive-deep);
	background-image:
		var(--wp--preset--gradient--hive-amber),
		url('assets/images/bg/beeclear-bg.jpg');
	color: var(--wp--preset--color--base);
}

.is-style-hero-violet {
	background-color: var(--wp--preset--color--violet-deep);
	background-image:
		var(--wp--preset--gradient--pollen-violet),
		url('assets/images/bg/beeclear-bg.jpg');
	color: var(--wp--preset--color--base);
}

.is-style-hero-night {
	background-color: var(--wp--preset--color--dark);
	background-image:
		var(--wp--preset--gradient--hive-night),
		url('assets/images/bg/beeclear-bg.jpg');
	color: var(--wp--preset--color--base);
}

.is-style-band-honey :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--wp--preset--color--contrast);
}

:where(.is-style-hero-amber, .is-style-hero-violet, .is-style-hero-night) :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--wp--preset--color--base);
}

.is-style-hero-amber .is-style-lede,
.is-style-hero-violet .is-style-lede,
.is-style-hero-night .is-style-lede {
	color: var(--wp--preset--color--base);
}

/* Znaczniki list na ciemnych wariantach idą bielą. */
:where(.is-style-hero-amber, .is-style-hero-violet, .is-style-hero-night) .wp-block-list.is-style-checkmark-list > li::before {
	color: var(--wp--preset--color--base);
}

.is-style-band-honey a:where(:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

:where(.is-style-hero-amber, .is-style-hero-violet, .is-style-hero-night) a:where(:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* Nocny pas korzysta z tej samej głębi i tekstury co wariant hero. */
.is-style-band-dark {
	background-color: var(--wp--preset--color--dark);
	background-image:
		var(--wp--preset--gradient--hive-night),
		url('assets/images/bg/beeclear-bg.jpg');
	color: var(--wp--preset--color--base);
}

.is-style-band-dark :where(h1, h2, h3, h4, h5, h6, p) {
	color: var(--wp--preset--color--base);
}

.is-style-band-dark a:where(:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* Jasny boks korzysta z miękkiego przejścia miód → neutral → fiolet. */
.is-style-surface {
	background-color: var(--wp--preset--color--surface-alt);
	background-image: var(--wp--preset--gradient--mist);
}

/* Karty użytkowe. */
:is(.is-style-card-white, .is-style-card-image) {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	border-radius: var(--wp--custom--radius--md);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	color: var(--wp--preset--color--contrast);
}

/* Neutralne karty użytkowe: biała powierzchnia i spokojny cień. */
.is-style-card-white {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.is-style-card-white :where(h1, h2, h3, h4, h5, h6, p) {
	color: var(--wp--preset--color--contrast);
}

/* Karta zdjęciowa: ilustracja jako tło + kontrastowa warstwa tekstu. */
.is-style-card-image {
	background-color: var(--wp--custom--color--hive-deep);
	background-image:
		linear-gradient(110deg, rgba(17, 17, 17, 0.94) 0%, rgba(17, 17, 17, 0.74) 54%, rgba(17, 17, 17, 0.24) 100%),
		url('assets/images/illustrations/beeclear-flower-bee.png');
	background-position: center, 78% center;
	background-size: cover, cover;
	color: var(--wp--preset--color--base);
}

.is-style-card-image :where(h1, h2, h3, h4, h5, h6, p, a) {
	color: var(--wp--preset--color--base);
}

.is-style-card-image .bcl-badge {
	background: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
	color: var(--wp--preset--color--base);
}

:is(.is-style-card-white, .is-style-card-image):hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-2px);
}

/* Przycisk ghost — obrys */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Przycisk na miodowym — czarna pigułka trzyma kontrast, tu wariant jasny */
.wp-block-button.is-style-on-honey .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-on-honey .wp-block-button__link:hover,
.wp-block-button.is-style-on-honey .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Siatka kart — pomocniczy układ (uzupełnia core Grid) */
.bcl-cards {
	--bcl-card-min: 15rem;
}

.bcl-cards.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--bcl-card-min), 1fr));
	gap: 1.5rem;
}

.bcl-cards > .wp-block-group {
	height: 100%;
}

/* Katalog wariantów pokazuje powierzchnie w czytelnej siatce 2×2. */
.bcl-cards--showcase {
	--bcl-card-min: 24rem;
}

.bcl-cards--showcase > .wp-block-group {
	min-height: 12rem;
}

.bcl-cards--utility > .wp-block-group {
	min-height: 14rem;
}

/* =====================================================================
 * Układy redakcyjne — zróżnicowana prezentacja treści
 * ===================================================================== */

/* Wprowadzenie z numerowaną listą zagadnień zamiast kolejnej siatki kart. */
.bcl-home-split.wp-block-group {
	display: block;
}

.bcl-feature-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-start: var(--wp--custom--space--inner);
}

/* Grupy wewnątrz siatek nie dziedziczą odstępu stosu — ich rytm wyznacza
   obramowanie i padding wiersza. Dzięki temu kolumny startują równo. */
:is(
	.bcl-feature-list > .bcl-feature-list__item,
	.bcl-home-paths__grid > *,
	.bcl-product-showcase > *,
	.bcl-product-list > .bcl-product-list__item,
	.bcl-directory > .bcl-directory__item,
	.bcl-process > .bcl-process__item
) {
	margin-block-start: 0 !important;
}

.bcl-feature-list__item.wp-block-group {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--custom--color--line);
}

.bcl-feature-list__item:nth-child(odd) {
	padding-inline-end: var(--wp--preset--spacing--40);
}

.bcl-feature-list__item:nth-child(even) {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 1px solid var(--wp--custom--color--line);
}

.bcl-feature-list__item:nth-last-child(-n + 2) {
	border-block-end: 1px solid var(--wp--custom--color--line);
}

.bcl-feature-list__index,
.bcl-directory__number,
.bcl-process__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--fira-code);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--custom--color--amber-deep);
}

.bcl-feature-list__index {
	font-size: var(--wp--preset--font-size--small);
}

.bcl-feature-list__content > :first-child,
.bcl-directory__content > :first-child,
.bcl-process__item > :first-child {
	margin-block-start: 0;
}

.bcl-feature-list__content > :last-child,
.bcl-directory__content > :last-child,
.bcl-process__item > :last-child {
	margin-block-end: 0;
}

/* Dwie równorzędne ścieżki oferty w tym samym układzie. */
.bcl-home-paths__grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(3.5rem, 8vw, 7rem);
	align-items: stretch;
	margin-block-start: var(--wp--custom--space--inner);
}

.bcl-home-paths__path {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bcl-home-paths__path .wp-block-list.is-style-checkmark-list > li::before {
	color: var(--wp--preset--color--amber);
}

/* Produkt główny z lekką listą produktów uzupełniających. */
.bcl-product-showcase.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--wp--custom--space--head);
	align-items: stretch;
	margin-block-start: var(--wp--custom--space--inner);
}

.bcl-product-showcase.is-style-surface {
	padding-block: var(--wp--custom--space--head);
	padding-inline: var(--wp--custom--space--inset);
}

.bcl-product-showcase__lead {
	padding-block: clamp(0rem, 2vw, var(--wp--preset--spacing--40));
	padding-inline: 0;
}

.bcl-product-list {
	padding-inline-start: var(--wp--custom--space--head);
	border-inline-start: 1px solid var(--wp--custom--color--line);
}

.bcl-product-list__item {
	padding-block: var(--wp--preset--spacing--40);
}

.bcl-product-list__item + .bcl-product-list__item {
	border-block-start: 1px solid var(--wp--custom--color--line);
}

.bcl-product-list__item > :first-child {
	margin-block-start: 0;
}

.bcl-product-list__item > :last-child {
	margin-block-end: 0;
}

/* Ikony z BeeClear Blog Tools jako lekkie kotwice w kartach oferty SEO/GEO.
   Treść dostarcza blok beeclear/icon, a motyw odpowiada wyłącznie za oprawę. */
.bcl-seogeo-icon.beeclear-icon__wrap {
	width: fit-content;
	margin-block: 0;
}

.bcl-seogeo-icon .beeclear-icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--color--honey-tint);
	color: var(--wp--custom--color--hive-deep);
}

.bcl-seogeo-ai__area:nth-child(3n + 2) .bcl-seogeo-icon .beeclear-icon,
.bcl-seogeo-service:nth-child(2) .bcl-seogeo-icon .beeclear-icon {
	background: var(--wp--custom--color--violet-tint);
	color: var(--wp--preset--color--violet-deep);
}

.bcl-seogeo-ai__area:nth-child(3n) .bcl-seogeo-icon .beeclear-icon,
.bcl-seogeo-service:nth-child(3) .bcl-seogeo-icon .beeclear-icon {
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--violet-deep);
}

/* W katalogu usług sześć ikon otrzymuje sześć różnych akcentów. */
.bcl-seogeo-service:nth-child(4) .bcl-seogeo-icon .beeclear-icon {
	background: color-mix(in srgb, var(--wp--preset--color--amber) 32%, var(--wp--preset--color--base));
	color: var(--wp--custom--color--hive-deep);
}

.bcl-seogeo-service:nth-child(5) .bcl-seogeo-icon .beeclear-icon {
	background: color-mix(in srgb, var(--wp--preset--color--violet) 30%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--violet-deep);
}

.bcl-seogeo-service:nth-child(6) .bcl-seogeo-icon .beeclear-icon {
	background: color-mix(in srgb, var(--wp--preset--color--amber) 18%, var(--wp--preset--color--pink));
	color: var(--wp--custom--color--hive-deep);
}

.is-style-band-dark .bcl-seogeo-icon .beeclear-icon {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--amber);
}

.is-style-band-dark .bcl-seogeo-path:nth-child(even) .bcl-seogeo-icon .beeclear-icon {
	background: rgba(246, 207, 244, 0.14);
	color: var(--wp--preset--color--pink);
}

.bcl-seogeo-icon + .wp-block-heading {
	margin-block-start: 0.65rem;
}

/* Lista katalogowa: mniej pudełek, więcej rytmu typograficznego. */
.bcl-home-apps.is-style-surface {
	padding-block: var(--wp--custom--space--section);
}

.bcl-directory {
	border-block-end: 1px solid var(--wp--custom--color--line);
	margin-block-start: var(--wp--custom--space--inner);
}

.bcl-directory__item.wp-block-group {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr) minmax(9rem, 0.32fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding-block: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--custom--color--line);
}

.bcl-directory__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* Trzyetapowy proces bez kart: kolumny oddzielone włosową linią. */
.bcl-process.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-block-start: var(--wp--custom--space--inner);
}

/* Akcje po rozbudowanych modułach nie mogą przyklejać się do ich treści. */
.bcl-home-products > .wp-block-buttons,
.bcl-home-apps > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

.bcl-process__item {
	padding-inline: var(--wp--preset--spacing--40);
}

.bcl-process__item:first-child {
	padding-inline-start: 0;
}

.bcl-process__item + .bcl-process__item {
	border-inline-start: 1px solid var(--wp--custom--color--line);
}

.bcl-process__number {
	font-size: var(--wp--preset--font-size--large);
	margin-block-end: var(--wp--preset--spacing--30);
}

/* Końcowe CTA ma tę samą skórę z kitu, lecz horyzontalny układ. */
.bcl-home-cta.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--custom--space--head);
	align-items: end;
	margin-block-end: var(--wp--custom--space--section) !important;
}

.bcl-home-cta__copy {
	max-width: 46rem;
}

.bcl-home-cta__copy > :first-child {
	margin-block-start: 0;
}

.bcl-home-cta__copy > :last-child {
	margin-block-end: 0;
}

@media (max-width: 900px) {
	.bcl-home-paths__grid.wp-block-group,
	.bcl-product-showcase.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.bcl-feature-list {
		display: block;
		border-block-end: 1px solid var(--wp--custom--color--line);
	}

	.bcl-feature-list__item:nth-child(odd),
	.bcl-feature-list__item:nth-child(even) {
		padding-inline: 0;
		border-inline-start: 0;
	}

	.bcl-feature-list__item:nth-last-child(-n + 2) {
		border-block-end: 0;
	}

	.bcl-product-list {
		padding-block-start: var(--wp--preset--spacing--30);
		padding-inline-start: 0;
		border-block-start: 1px solid var(--wp--custom--color--line);
		border-inline-start: 0;
	}

	.bcl-home-cta.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 600px) {
	.bcl-feature-list__item.wp-block-group {
		grid-template-columns: 2.75rem minmax(0, 1fr);
	}

	.bcl-product-showcase.is-style-surface {
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--custom--space--inset);
	}

	.bcl-product-showcase__lead {
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: 0;
	}

	.bcl-directory__item.wp-block-group {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	.bcl-directory__meta {
		grid-column: 2;
	}

	.bcl-process.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}

	.bcl-process__item,
	.bcl-process__item:first-child {
		padding: var(--wp--preset--spacing--40) 0;
	}

	.bcl-process__item + .bcl-process__item {
		border-block-start: 1px solid var(--wp--custom--color--line);
		border-inline-start: 0;
	}
}

@media (max-width: 600px) {
	.bcl-cards--showcase.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.is-style-card-white, .is-style-card-image),
	.bcl-loop .wp-block-post {
		transition: none;
	}

	:is(.is-style-card-white, .is-style-card-image):hover,
	.bcl-loop .wp-block-post:hover {
		transform: none;
	}
}

/* =====================================================================
 * Blog / archiwum / wyszukiwanie / 404
 * ===================================================================== */
.bcl-blog__head,
.bcl-404 {
	margin-block-end: 0;
}

.bcl-404-page {
	padding-block-start: 0;
}

.bcl-search {
	width: 100%;
}

.bcl-search .wp-block-search__inside-wrapper {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--shadow--card);
	padding: 0.35rem;
}

.bcl-search .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	min-height: 3.25rem;
	min-width: 0;
	padding-inline: 1.1rem;
}

.bcl-search .wp-block-search__input:focus {
	outline: 0;
}

.bcl-search .wp-block-search__inside-wrapper:focus-within {
	outline: 3px solid var(--wp--preset--color--violet);
	outline-offset: 3px;
}

.bcl-search .wp-block-search__button {
	background: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	margin: 0;
	min-height: 3rem;
	padding-inline: 1.5rem;
}

.bcl-search .wp-block-search__button:hover,
.bcl-search .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--violet);
}

.bcl-404__actions {
	justify-content: flex-start;
	width: 100%;
}

.bcl-404__latest-head {
	margin-block-end: var(--wp--custom--space--head);
	margin-inline: auto;
	max-width: 46rem;
	text-align: center;
}

.bcl-404__latest-head .wp-block-heading {
	margin-block-end: var(--wp--custom--space--tight);
}

.bcl-404__latest-head p {
	color: var(--wp--preset--color--ink-muted);
}

.bcl-loop .wp-block-post-template {
	gap: 1.5rem;
	margin-block-end: var(--wp--custom--space--head);
}

.bcl-loop .wp-block-post {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.75rem;
	box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	list-style: none;
}

.bcl-loop .wp-block-post:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-4px);
}

.bcl-loop .wp-block-post-title {
	margin-block: 0.3rem 0.55rem;
}

.bcl-loop .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.bcl-loop .wp-block-post-title a:hover {
	color: var(--wp--preset--color--violet);
}

.bcl-loop .wp-block-post-excerpt {
	color: var(--wp--preset--color--ink-muted);
}

/* Data karty wpisu jest zwykłą metadaną, bez kroju mono, wersalików i nadwiersza. */
.bcl-loop .bcl-card-meta {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

/* Kolumna czytania pojedynczego wpisu */
.bcl-single__head {
	margin-block-end: 0;
}

.bcl-single__head .wp-block-post-title {
	margin: 0;
}

.bcl-single .wp-block-post-content {
	max-width: 46rem;
}

/* =====================================================================
 * Hero strony głównej — miodowy pas z ilustracją pszczoły
 * ===================================================================== */
.bcl-hero {
	position: relative;
	overflow: hidden;
}

.bcl-hero__body {
	position: relative;
	z-index: 1;
	max-width: 36rem;
}

.bcl-hero > .bcl-hero__body {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Hero — nieco spokojniejsza skala nagłówka i wprowadzenia */
.bcl-hero .wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Główny nagłówek hero — powiększony, płynnie skalowany. */
.bcl-hero h1.wp-block-heading {
	font-size: clamp(2.25rem, 1.7rem + 3vw, 3.9rem);
	line-height: 1.08;
}

.bcl-hero .is-style-lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

/* Jasny, półprzezroczysty przycisk w hero. */
.bcl-hero .wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.58);
	color: #000;
	border-color: #000;
}

.bcl-hero .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.bcl-hero .wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: #000;
	border-color: #000;
}

.bcl-hero-options.wp-block-group {
	display: grid;
	gap: var(--wp--custom--space--head);
	margin-block-start: var(--wp--custom--space--head);
}

.bcl-hero-options > .bcl-hero {
	max-width: none;
}

.bcl-hero::after {
	content: "";
	position: absolute;
	right: clamp(-3rem, -1vw, 0rem);
	top: 50%;
	transform: translateY(-50%);
	width: 40%;
	max-width: 400px;
	aspect-ratio: 1017 / 1197;
	background-image: url('assets/images/illustrations/beeclear-flower-bee.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center right;
	pointer-events: none;
}

@media (max-width: 900px) {
	.bcl-hero::after {
		opacity: 0.16;
		width: 62%;
		right: -8%;
	}
}

/* =====================================================================
 * Hero podstron aplikacji — dwie kolumny: tekst po lewej, miejsce na
 * grafikę gry po prawej. Bez firmowej ilustracji pszczoły (::after).
 * ===================================================================== */
.bcl-app-hero::after {
	content: none;
}

.bcl-app-hero__inner.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: var(--wp--custom--space--head);
	align-items: center;
}

.bcl-app-hero .bcl-hero__body {
	max-width: none;
}

.bcl-app-hero__media {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	padding: var(--wp--custom--space--inner);
	border: 2px dashed var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background-color: rgba(255, 255, 255, 0.42);
}

.bcl-app-hero__media .bcl-app-hero__note {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Po wstawieniu własnej grafiki ramka-placeholder znika. */
.bcl-app-hero__media:has(img) {
	border: 0;
	padding: 0;
	background-color: transparent;
}

.bcl-app-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--md);
}

@media (max-width: 900px) {
	.bcl-app-hero__inner.wp-block-group {
		grid-template-columns: 1fr;
	}

	.bcl-app-hero .bcl-hero__body {
		max-width: 36rem;
	}
}

/* =====================================================================
 * Zrzuty ekranu aplikacji — pasek ramek 9:16 (placeholdery do podmiany).
 * ===================================================================== */
.bcl-shots.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--wp--custom--space--inner);
}

.bcl-shot {
	position: relative;
	aspect-ratio: 9 / 16;
	display: grid;
	place-items: center;
	padding: var(--wp--custom--space--inset);
	border: 2px dashed var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-alt);
}

.bcl-shot .bcl-shot__note {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.bcl-shot:has(img) {
	border: 0;
	padding: 0;
	background-color: transparent;
}

.bcl-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

/* =====================================================================
 * Nagłówki podstron — wspólny miodowy hero, typografia i wyrównanie
 * Podtytuł pod tytułem pochodzi z pola „Custom text and title"
 * (beeclear-blog-tools, blok beeclear/custom-text-title).
 * ===================================================================== */

/* Dynamiczny podtytuł nagłówka korzysta z tej samej skali co lede hero. */
.is-style-band-honey .wp-block-beeclear-custom-text-title {
	margin-block-start: 0.6rem;
}

.is-style-band-honey .wp-block-beeclear-custom-text-title :where(p, h1, h2, h3) {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	margin: 0;
}

/* Data wpisu pod tytułem — zwykła meta zamiast kickera (zasada: bez kickerów) */
.bcl-single__head .bcl-postmeta,
.bcl-single__head .bcl-postmeta a {
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, currentColor 78%, transparent);
	text-decoration: none;
}

.bcl-single__head .bcl-postmeta {
	margin-block-start: 0.5rem;
}

/* Tekst pasów CTA bez wewnętrznego kontenera nadal ma czytelną szerokość. */
.is-style-band-honey.bcl-section > :where(*) {
	max-width: 46rem;
}

/*
 * Rytm pionowy treści i głównych szablonów.
 * Wyraźny odstęp obowiązuje między sekcjami oraz na styku akapitu i sekcji.
 * Nagłówek rozpoczynający nowy wątek ma jeszcze więcej światła nad sobą.
 * Zwykłe akapity jeden po drugim zachowują zwarty globalny blockGap.
 */
.bcl-blog > * + *,
.bcl-single > * + * {
	margin-block-start: var(--wp--custom--space--flow);
}

:is(.bcl-flow, .bcl-page .wp-block-post-content, .bcl-single .wp-block-post-content) > :is(.wp-block-group, .wp-block-cover) + :is(.wp-block-group, .wp-block-cover),
:is(.bcl-flow, .bcl-page .wp-block-post-content, .bcl-single .wp-block-post-content) > p + :is(.wp-block-group, .wp-block-cover),
:is(.bcl-flow, .bcl-page .wp-block-post-content, .bcl-single .wp-block-post-content) > :is(.wp-block-group, .wp-block-cover) + p {
	margin-block-start: var(--wp--custom--space--flow);
}

:is(.bcl-flow, .bcl-page .wp-block-post-content, .bcl-single .wp-block-post-content) > p + :is(h1, h2, h3, h4, h5, h6, .wp-block-heading),
:is(.bcl-flow, .bcl-page .wp-block-post-content, .bcl-single .wp-block-post-content) > :is(.wp-block-group, .wp-block-cover) + :is(h1, h2, h3, h4, h5, h6, .wp-block-heading),
.bcl-single > .bcl-single__head + .wp-block-post-content:has(> :is(h1, h2, h3, h4, h5, h6, .wp-block-heading):first-child),
.bcl-404 + .bcl-404__latest-head {
	margin-block-start: var(--wp--custom--space--flow-heading);
}

/* Menu [asp-menu] (asari-website-tools) — marka BeeClear przez nadpisanie zmiennych */
.asp-menu {
	--asp-menu-color: var(--wp--preset--color--contrast);
	--asp-menu-color-hover: var(--wp--preset--color--contrast);
	--asp-menu-color-bg-hover: rgba(244, 165, 11, 0.14);
	--asp-menu-accent: var(--wp--preset--color--contrast);
	--asp-menu-accent-contrast: var(--wp--preset--color--base);
	--asp-menu-font-size: 1rem;
	--asp-menu-font-weight: 600;
	--asp-menu-radius: 999px;
	--asp-menu-panel-radius: var(--wp--custom--radius--lg);
	--asp-menu-panel-shadow: var(--wp--custom--shadow--card-hover);
}

/* Pozycje menu w jednej linii: pozycje z megapanelem (przycisk <button>) miały
   wyższą skrzynkę <li> niż zwykłe linki/przyciski przez odstęp bazowy buttona,
   więc dwie listy (główna i „end") nie dzieliły wspólnego środka. Zwężamy każde
   <li> do jego przełącznika, żeby wszystkie pozycje wypadły na tej samej linii. */
.asp-menu__list .asp-menu__item {
	display: flex;
	align-items: center;
}

.asp-menu__top--button {
	padding-inline: 1.25rem;
}

/* Menu mobilne — czytelna szuflada zamiast wąskiego paska przy krawędzi */
.asp-menu[data-mode="mobile"] .asp-menu__bar {
	left: auto;
	right: 0;
	width: min(86vw, 340px);
}

/* W szufladzie pozycje nie mogą być wierszami flex (to reguła dla paska na
   desktopie) — inaczej przełącznik i megapanel stają obok siebie. Wracamy do
   bloku, żeby przełącznik i rozwinięty panel układały się jeden pod drugim. */
.asp-menu[data-mode="mobile"] .asp-menu__list .asp-menu__item {
	display: block;
}

/* Zawartość mega panelu — krótkie wprowadzenie, siatka kart „nazwa + wyjaśnienie"
   i wspólny pasek CTA. Panel przykleja się do pozycji menu i dostaje szerokość
   swojej treści, więc trzymamy stałą, wygodną szerokość. */
.bcl-menu-panel {
	width: min(88vw, 660px);
}

/* Wprowadzenie: jedno zdanie, po co ta grupa — zwykły lede. */
.bcl-menu-panel__lede {
	margin-block: 0 1.1rem;
	max-width: 54ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

/* Karty produktów w panelu — zwarte, z lekkim cieniem i delikatnym uniesieniem
   pod kursorem. Bazowa karta ma duży padding sekcyjny, tu ściągamy go do menu. */
.bcl-menu-panel .bcl-cards {
	--bcl-card-min: 14rem;
}

.bcl-menu-panel .bcl-cards.wp-block-group {
	gap: 0.75rem;
}

.bcl-menu-panel .is-style-card-white.wp-block-group {
	padding: 1rem 1.15rem;
}

.bcl-menu-panel .is-style-card-white h4 {
	margin-block: 0 0.3rem;
	font-size: 1rem;
	line-height: 1.3;
}

.bcl-menu-panel .is-style-card-white h4 a {
	text-decoration: none;
}

.bcl-menu-panel .is-style-card-white:hover h4 a,
.bcl-menu-panel .is-style-card-white:focus-within h4 a {
	text-decoration: underline;
}

.bcl-menu-panel .is-style-card-white p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

.bcl-menu-panel .is-style-card-white:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

/* Wspólny pasek CTA na dole panelu */
.bcl-menu-panel__cta.wp-block-group {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--custom--color--line);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.bcl-menu-panel__cta .wp-block-buttons {
	margin: 0;
}

.bcl-menu-panel__cta .wp-block-button__link {
	white-space: nowrap;
}

.bcl-menu-panel__cta p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Widok mobilny w szufladzie: panel i pasek CTA na pełną szerokość, w pionie.
   Wtyczka trzyma megapanel na width:auto, więc bez tego zwija się w prawo;
   siatka kart sama schodzi do jednej kolumny (auto-fit). */
.asp-menu[data-mode="mobile"] .asp-menu__item--panel > .asp-menu__panel {
	width: 100%;
	box-sizing: border-box;
}

.asp-menu[data-mode="mobile"] .bcl-menu-panel {
	width: 100%;
}

.asp-menu[data-mode="mobile"] .bcl-menu-panel__cta.wp-block-group {
	flex-direction: column;
	align-items: flex-start;
}