/*
 * bppc-blocks.css — style bloków plugin catalog.
 * Layout (padding, container) zapewnia motyw buddypilot (layout.css).
 * Tu tylko style specyficzne dla bloków katalogowych.
 *
 * Aliasy zmiennych: kit.css uzywa --fg1, --fg2, --bg itd.
 * Motyw WP ma te same wartosci pod --bp-*. Mapujemy ponizej.
 */

/* ── Design System variable aliases ────────────────────────────────────────── */

:root {
	--fg1:          var( --bp-tx-pri,       #0F1F3D );
	--fg2:          var( --bp-tx-sec,       #374151 );
	--bg:           var( --bp-white,        #FFFFFF );
	--bg-tinted:    var( --bp-ice,          #EFF6FF );
	--bg-dark:      var( --bp-navy,         #0A0F1E );
	--border-light: var( --bp-border,       #DBEAFE );
	--radius:       var( --bp-r,            12px    );
	--radius-lg:    var( --bp-r-lg,         20px    );
	--shadow:       var( --bp-sh,           0 4px 16px rgba( 10,15,30,.10 ), 0 2px 6px rgba( 10,15,30,.06 ) );
	--shadow-lg:    var( --bp-sh-lg,        0 12px 40px rgba( 10,15,30,.18 ), 0 4px 12px rgba( 10,15,30,.10 ) );
	--font-display: var( --bp-font,         'Geist', system-ui, -apple-system, sans-serif );
	--font-body:    var( --bp-font-body,    'Nunito', system-ui, -apple-system, sans-serif );
	--font-mono:    var( --bp-font-mono,    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace );
	--fg-on-dark-1: #F1F5F9;
	--fg-on-dark-2: #CBD5E1;
	--fg-on-dark-3: #A0AEC0;
	--fg-on-dark-accent: #93C5FD;
	--bp-cobalt:    #1944CB;
	--bp-orange:    #FD9045;
}

/* ── Tier color schemes (hero) ──────────────────────────────────────────────── */

.bppc-hero--free {
	--tier-accent:     #93C5FD;
	--tier-accent-rgb: 147, 197, 253;
	--tier-deep:       #1944CB;
	--tier-deep-rgb:   25, 68, 203;
	--tier-tint:       #EFF6FF;
}

.bppc-hero--pro {
	--tier-accent:     #FD9045;
	--tier-accent-rgb: 253, 144, 69;
	--tier-deep:       #C05621;
	--tier-deep-rgb:   192, 86, 33;
	--tier-tint:       #FFF7ED;
}

/* ── Plugin page: brak gornego paddingu .site-main (hero zaczyna od krawedzi nav) ── */

.site-main.site-main--plugin-page {
	padding-top: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   PLUGIN HERO — bpp-hero (wzorzec plugin-page/kit.css)
   ════════════════════════════════════════════════════════════════════════════ */

.bpp-hero {
	background: var( --bg-dark );
	padding:    clamp( 48px, 8vw, 88px ) 0 clamp( 36px, 6vw, 64px );
	position:   relative;
	overflow:   hidden;
}

.bpp-hero::before {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     radial-gradient( ellipse 70% 60% at 90% 50%, rgba( var( --tier-deep-rgb, 25, 68, 203 ), .22 ) 0%, transparent 65% );
	pointer-events: none;
}

.bpp-hero__grid {
	display:               grid;
	grid-template-columns: 1.05fr 1fr;
	gap:                   clamp( 1.5rem, 4vw, 4rem );
	align-items:           center;
	position:              relative;
}

.bpp-hero__badges {
	display:     flex;
	gap:         .5rem;
	align-items: center;
	flex-wrap:   wrap;
	margin-bottom: 1rem;
}

.bpp-tier-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            .5rem;
	font-family:    var( --font-mono );
	font-size:      .7rem;
	font-weight:    700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color:          var( --bg-dark );
	background:     var( --tier-accent, #93C5FD );
	padding:        .4rem .85rem;
	border-radius:  999px;
	line-height:    1;
}

.bpp-cat-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            .5rem;
	font-family:    var( --font-mono );
	font-size:      .7rem;
	font-weight:    500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color:          var( --fg-on-dark-accent );
	padding:        .4rem .85rem;
	border-radius:  999px;
	line-height:    1;
	background:     rgba( 147, 197, 253, .08 );
	border:         1px solid rgba( 147, 197, 253, .20 );
}

.bpp-hero__h1 {
	font-family:    var( --font-display );
	font-size:      clamp( 2rem, 5vw, 3.5rem );
	font-weight:    800;
	line-height:    1.1;
	letter-spacing: -.03em;
	color:          var( --fg-on-dark-1 );
	margin:         0 0 1rem;
}

.bpp-hero__h1 em {
	color:       var( --tier-accent, #93C5FD );
	font-style:  normal;
	font-weight: 700;
}

.bpp-hero__sub {
	font-family: var( --font-body );
	font-size:   1.0625rem;
	color:       var( --fg-on-dark-2 );
	line-height: 1.7;
	margin:      0 0 1.5rem;
	max-width:   56ch;
}

.bpp-hero__meta {
	display:       flex;
	gap:           1.25rem;
	flex-wrap:     wrap;
	padding:       1rem 1.25rem;
	background:    rgba( 255, 255, 255, .04 );
	border:        1px solid rgba( 255, 255, 255, .10 );
	border-radius: var( --radius );
	margin-bottom: 1.5rem;
}

.bpp-meta-item {
	display:        flex;
	flex-direction: column;
	gap:            .15rem;
	min-width:      0;
}

.bpp-meta-item__label {
	font-family:    var( --font-mono );
	font-size:      10px;
	font-weight:    500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var( --fg-on-dark-3 );
	line-height:    1;
}

.bpp-meta-item__value {
	font-family: var( --font-display );
	font-size:   .875rem;
	font-weight: 600;
	color:       var( --fg-on-dark-1 );
	line-height: 1.3;
}

.bpp-hero__actions {
	display:       flex;
	gap:           .85rem;
	flex-wrap:     wrap;
	margin-bottom: 1.25rem;
}

.bpp-cta-fill {
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	padding:         .9rem 1.5rem;
	border-radius:   10px;
	font-family:     var( --font-display );
	font-size:       1rem;
	font-weight:     700;
	text-decoration: none;
	min-height:      44px;
	transition:      filter 150ms, transform 150ms;
	background:      var( --tier-accent, #93C5FD );
	color:           var( --bg-dark );
	border:          none;
	cursor:          pointer;
}

.bpp-cta-fill:hover {
	filter:    brightness( 1.06 );
	transform: translateY( -1px );
	color:     var( --bg-dark );
}

.bpp-cta-outline {
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	padding:         .9rem 1.5rem;
	border-radius:   10px;
	font-family:     var( --font-display );
	font-size:       1rem;
	font-weight:     600;
	text-decoration: none;
	min-height:      44px;
	background:      transparent;
	color:           var( --fg-on-dark-1 );
	border:          2px solid var( --fg-on-dark-2 );
	transition:      border-color 150ms, background 150ms;
}

.bpp-cta-outline:hover {
	border-color: var( --fg-on-dark-1 );
	background:   rgba( 255, 255, 255, .06 );
	color:        var( --fg-on-dark-1 );
}

.bpp-hero__trust {
	font-family: var( --font-body );
	font-size:   .875rem;
	color:       var( --fg-on-dark-2 );
	display:     flex;
	align-items: center;
	gap:         .5rem;
}

.bpp-hero__trust i {
	color: var( --tier-accent, #93C5FD );
}

/* Hero mockup (prawa kolumna) */
.bpp-mockup {
	background:    linear-gradient( 180deg, rgba( 255,255,255,.06 ), rgba( 255,255,255,.02 ) );
	border:        1px solid rgba( 255,255,255,.15 );
	border-radius: var( --radius-lg );
	padding:       12px;
	box-shadow:    0 20px 60px rgba( 0,0,0,.5 ), 0 4px 16px rgba( 0,0,0,.3 );
	position:      relative;
}

.bpp-mockup__chrome {
	display:       flex;
	align-items:   center;
	gap:           .5rem;
	padding:       6px 8px 12px;
	border-bottom: 1px solid rgba( 255,255,255,.10 );
	margin-bottom: 12px;
}

.bpp-mockup__dots {
	display: flex;
	gap:     6px;
}

.bpp-mockup__dots span {
	width:         11px;
	height:        11px;
	border-radius: 50%;
}

.bpp-mockup__dots span:nth-child(1) { background: #ff5f56; }
.bpp-mockup__dots span:nth-child(2) { background: #ffbd2e; }
.bpp-mockup__dots span:nth-child(3) { background: #27c93f; }

.bpp-mockup__url {
	flex:          1;
	padding:       4px 12px;
	background:    rgba( 255,255,255,.06 );
	border-radius: 6px;
	font-family:   var( --font-mono );
	font-size:     11px;
	color:         var( --fg-on-dark-2 );
	display:       flex;
	align-items:   center;
	gap:           .35rem;
}

.bpp-mockup__url i {
	font-size: 10px;
	color:     var( --fg-on-dark-3 );
}

.bpp-mockup__body {
	background:    #FFFFFF;
	border-radius: 8px;
	padding:       14px 16px;
	height:        360px;
	overflow:      hidden;
	font-family:   var( --font-display );
}

.bpp-mockup__fallback {
	width:           100%;
	height:          360px;
	border-radius:   8px;
	background:      linear-gradient( 135deg, var( --cat-from, #0F1F3D ) 0%, var( --cat-to, #1944CB ) 100% );
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       60px;
	color:           rgba( 255,255,255,.5 );
}

@media ( max-width: 980px ) {
	.bpp-hero__grid { grid-template-columns: 1fr; }
	.bpp-mockup { max-width: 600px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PLUGIN ARCHIVE — bpp-archive (wzorzec plugin-archive/kit.css)
   ════════════════════════════════════════════════════════════════════════════ */

.bpp-archive {
	padding:    clamp( 2.5rem, 6vw, 4rem ) 0 clamp( 4rem, 8vw, 6rem );
	background: var( --bg-tinted );
	min-height: 70vh;
}

/* Header */

.bpp-archive__head {
	margin-bottom: 2rem;
	max-width:     760px;
}

.bpp-archive__label {
	font-family:    var( --font-mono );
	font-size:      11px;
	font-weight:    500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var( --fg2 );
	line-height:    1;
	padding-top:    1.25rem;
	margin-bottom:  1rem;
	border-top:     1px solid rgba( 0,0,0,.12 );
	display:        inline-block;
}

.bpp-archive__head h1 {
	font-family:    var( --font-display );
	font-size:      clamp( 2rem, 4.5vw, 3.25rem );
	font-weight:    800;
	letter-spacing: -.03em;
	line-height:    1.15;
	color:          var( --fg1 );
	margin:         0 0 1rem;
}

.bpp-archive__head p {
	font-family: var( --font-body );
	font-size:   1.0625rem;
	color:       var( --fg2 );
	line-height: 1.7;
	margin:      0;
	max-width:   60ch;
}

.bpp-archive__meta {
	display:     flex;
	gap:         1rem;
	align-items: center;
	flex-wrap:   wrap;
	margin-top:  1.25rem;
}

.bpp-archive__count {
	font-family: var( --font-mono );
	font-size:   12px;
	color:       var( --fg2 );
}

.bpp-archive__count strong {
	color:       var( --fg1 );
	font-weight: 700;
}

/* Filter bar */

.bpp-filter {
	background:    var( --bg );
	border:        1.5px solid var( --border-light );
	border-radius: var( --radius-lg );
	padding:       1rem 1.25rem;
	margin-bottom: 2rem;
	display:       flex;
	gap:           1rem;
	align-items:   center;
	flex-wrap:     wrap;
	position:      sticky;
	top:           84px;
	z-index:       50;
	box-shadow:    0 2px 10px rgba( 10,15,30,.05 );
}

.bpp-filter__group {
	display:     flex;
	gap:         .35rem;
	align-items: center;
	flex-wrap:   wrap;
}

.bpp-filter__label {
	font-family:    var( --font-mono );
	font-size:      10px;
	font-weight:    600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var( --fg2 );
	padding-right:  .5rem;
	flex-shrink:    0;
}

.bpp-filter__sep {
	width:      1px;
	align-self: stretch;
	background: var( --border-light );
	margin:     0 .25rem;
}

.bpp-chip {
	font-family:     var( --font-display );
	font-size:       13px;
	font-weight:     600;
	padding:         7px 14px;
	border-radius:   999px;
	border:          1.5px solid var( --border-light );
	background:      transparent;
	color:           var( --fg2 );
	cursor:          pointer;
	transition:      background 150ms, color 150ms, border-color 150ms;
	display:         inline-flex;
	align-items:     center;
	gap:             .4rem;
	line-height:     1;
	min-height:      32px;
	text-decoration: none;
}

.bpp-chip:hover {
	background:   var( --bg-tinted );
	color:        var( --fg1 );
	border-color: var( --fg2 );
}

.bpp-chip i {
	font-size: 11px;
	opacity:   .8;
}

.bpp-chip__count {
	font-family:  var( --font-mono );
	font-size:    10.5px;
	font-weight:  500;
	color:        var( --fg2 );
	margin-left:  .15rem;
}

.bpp-chip.is-active {
	background:   var( --bp-cobalt );
	border-color: var( --bp-cobalt );
	color:        #fff;
}

.bpp-chip.is-active .bpp-chip__count {
	color: rgba( 255,255,255,.75 );
}

.bpp-chip.is-active i {
	opacity: 1;
}

.bpp-tier-chip {
	font-family:     var( --font-mono );
	font-size:       11px;
	font-weight:     600;
	letter-spacing:  .08em;
	text-transform:  uppercase;
	padding:         6px 12px;
	border-radius:   999px;
	border:          1.5px solid var( --border-light );
	background:      transparent;
	color:           var( --fg2 );
	cursor:          pointer;
	transition:      all 150ms;
	min-height:      30px;
	line-height:     1;
	text-decoration: none;
	display:         inline-flex;
	align-items:     center;
}

.bpp-tier-chip:hover {
	color:        var( --fg1 );
	border-color: var( --fg2 );
}

.bpp-tier-chip.is-active--free {
	background:   var( --bp-cobalt );
	border-color: var( --bp-cobalt );
	color:        #fff;
}

.bpp-tier-chip.is-active--pro {
	background:   var( --bp-orange );
	border-color: var( --bp-orange );
	color:        #0F1F3D;
}

.bpp-tier-chip.is-active--all {
	background:   var( --fg1 );
	border-color: var( --fg1 );
	color:        #fff;
}

/* Category hero card (widoczny tylko w widoku kategorii) */

.bpp-cat-hero {
	background:    linear-gradient( 135deg, var( --cat-from, #0F1F3D ) 0%, var( --cat-to, #1944CB ) 100% );
	border-radius: var( --radius-lg );
	padding:       2rem 2.25rem;
	margin-bottom: 2rem;
	color:         var( --fg-on-dark-1 );
	position:      relative;
	overflow:      hidden;
}

.bpp-cat-hero::after {
	content:       '';
	position:      absolute;
	top:           -40%;
	right:         -10%;
	width:         320px;
	height:        320px;
	border-radius: 50%;
	background:    radial-gradient( circle, rgba( 255,255,255,.10 ), transparent 60% );
	pointer-events: none;
}

.bpp-cat-hero__icon {
	display:         inline-flex;
	width:           44px;
	height:          44px;
	border-radius:   12px;
	background:      rgba( 255,255,255,.12 );
	align-items:     center;
	justify-content: center;
	font-size:       20px;
	color:           var( --fg-on-dark-1 );
	margin-bottom:   1rem;
}

.bpp-cat-hero h2 {
	font-family:    var( --font-display );
	font-size:      clamp( 1.5rem, 3vw, 2rem );
	font-weight:    800;
	letter-spacing: -.02em;
	line-height:    1.15;
	margin:         0 0 .5rem;
	color:          inherit;
}

.bpp-cat-hero p {
	font-family: var( --font-body );
	font-size:   1rem;
	color:       rgba( 255,255,255,.85 );
	line-height: 1.6;
	margin:      0;
	max-width:   56ch;
}

/* Grid + karty */

.bpp-grid {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 320px ), 1fr ) );
	gap:                   1.25rem;
}

.bpp-card {
	display:        flex;
	flex-direction: column;
	background:     var( --bg );
	border:         1.5px solid var( --border-light );
	border-radius:  var( --radius-lg );
	overflow:       hidden;
	transition:     transform 200ms, box-shadow 200ms, border-color 200ms;
	position:       relative;
}

.bpp-card:hover {
	transform:    translateY( -3px );
	box-shadow:   var( --shadow-lg );
	border-color: var( --bp-cobalt );
}

.bpp-card__cover {
	aspect-ratio:    16 / 9;
	background:      linear-gradient( 135deg, var( --cat-from, #0F1F3D ) 0%, var( --cat-to, #1944CB ) 100% );
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           rgba( 255,255,255,.85 );
	font-size:       44px;
}

.bpp-card__cover::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: radial-gradient( circle at 30% 30%, rgba( 255,255,255,.18 ), transparent 60% );
}

.bpp-card__cover i {
	position: relative;
	z-index:  1;
}

.bpp-card__cat-badge {
	position:       absolute;
	top:            12px;
	left:           12px;
	z-index:        2;
	font-family:    var( --font-mono );
	font-size:      10px;
	font-weight:    600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding:        4px 10px;
	border-radius:  999px;
	background:     rgba( 0,0,0,.45 );
	color:          #fff;
	backdrop-filter: blur( 8px );
}

.bpp-card__tier {
	position: absolute;
	top:      12px;
	right:    12px;
	z-index:  2;
	display:  flex;
	gap:      4px;
}

.bpp-card__tier-pill {
	font-family:    var( --font-mono );
	font-size:      10px;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding:        4px 9px;
	border-radius:  999px;
	line-height:    1;
	display:        inline-flex;
	align-items:    center;
	gap:            3px;
}

.bpp-card__tier-pill--free {
	background: rgba( 255,255,255,.92 );
	color:      #1944CB;
}

.bpp-card__tier-pill--pro {
	background: #FD9045;
	color:      #0F1F3D;
}

.bpp-card__body {
	flex:           1;
	padding:        1.25rem;
	display:        flex;
	flex-direction: column;
	gap:            .6rem;
}

.bpp-card__title {
	font-family: var( --font-display );
	font-size:   1.0625rem;
	font-weight: 700;
	color:       var( --fg1 );
	margin:      0;
	line-height: 1.3;
}

.bpp-card__title a {
	color:           var( --fg1 );
	text-decoration: none;
}

.bpp-card__title a::after {
	content:  '';
	position: absolute;
	inset:    0;
	z-index:  0;
}

.bpp-card:hover .bpp-card__title a {
	color: var( --bp-cobalt );
}

.bpp-card__tagline {
	font-family:           var( --font-body );
	font-size:             .9375rem;
	color:                 var( --fg2 );
	line-height:           1.5;
	margin:                0;
	max-width:             none;
	display:               -webkit-box;
	-webkit-line-clamp:    2;
	-webkit-box-orient:    vertical;
	overflow:              hidden;
}

.bpp-card__meta {
	display:     flex;
	gap:         1rem;
	padding-top: .75rem;
	margin-top:  auto;
	border-top:  1px solid var( --border-light );
	align-items: center;
	font-family: var( --font-body );
	font-size:   .8125rem;
	color:       var( --fg2 );
	flex-wrap:   wrap;
}

.bpp-card__meta-item {
	display:     inline-flex;
	align-items: center;
	gap:         .35rem;
}

.bpp-card__meta-item i {
	font-size: 10px;
	color:     var( --bp-cobalt );
}

.bpp-card__meta-item i.fa-star {
	color: #f59e0b;
}

/* Empty state */

.bpp-empty {
	text-align:    center;
	padding:       4rem 2rem;
	background:    var( --bg );
	border:        1.5px dashed var( --border-light );
	border-radius: var( --radius-lg );
}

.bpp-empty i {
	font-size:     36px;
	color:         var( --bp-cobalt );
	margin-bottom: 1rem;
}

.bpp-empty h3 {
	font-family:  var( --font-display );
	font-size:    1.25rem;
	font-weight:  700;
	color:        var( --fg1 );
	margin:       0 0 .5rem;
}

.bpp-empty p {
	font-family:  var( --font-body );
	color:        var( --fg2 );
	margin:       0 auto;
	max-width:    42ch;
}

/* CTA strip */

.bpp-archive__cta {
	margin-top:      3rem;
	background:      var( --bg-dark );
	border-radius:   var( --radius-lg );
	padding:         2rem 2.25rem;
	display:         flex;
	flex-wrap:       wrap;
	gap:             1.5rem;
	align-items:     center;
	justify-content: space-between;
	color:           var( --fg-on-dark-1 );
	position:        relative;
	overflow:        hidden;
}

.bpp-archive__cta::before {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     radial-gradient( ellipse 60% 100% at 90% 50%, rgba( 25,68,203,.25 ), transparent 70% );
	pointer-events: none;
}

.bpp-archive__cta > * {
	position: relative;
	z-index:  1;
}

.bpp-archive__cta-text h3 {
	font-family:  var( --font-display );
	font-size:    1.25rem;
	font-weight:  700;
	color:        var( --fg-on-dark-1 );
	margin:       0 0 .35rem;
}

.bpp-archive__cta-text p {
	font-family: var( --font-body );
	font-size:   .9375rem;
	color:       var( --fg-on-dark-2 );
	margin:      0;
	max-width:   56ch;
}

.bpp-archive__cta-links {
	display:   flex;
	gap:       .85rem;
	flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   ZACHOWANE STYLE (uzywane przez inne bloki / stare szablony)
   ════════════════════════════════════════════════════════════════════════════ */

/* plugin-hero dark variant (legacy) */

.bppc-hero--dark {
	background: var( --bp-navy, #0A0F1E );
	color:      var( --bp-tx-l1, #F1F5F9 );
	padding:    clamp( 72px, 10vw, 140px ) 0;
}

.bppc-hero--dark::before {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     radial-gradient( ellipse 80% 60% at 60% 50%, rgba( 25, 68, 203, .22 ) 0%, transparent 70% );
	pointer-events: none;
}

.bppc-hero--dark .section-header .section-label {
	color:            var( --bp-tx-sky, #93C5FD );
	border-top-color: rgba( 255, 255, 255, .12 );
}

.bppc-hero--dark h1,
.bppc-hero--dark .bppc-hero__heading {
	color: var( --bp-tx-l1, #F1F5F9 );
}

.bppc-hero--dark .section-header p,
.bppc-hero--dark .bppc-hero__tagline {
	color: var( --bp-tx-l2, #CBD5E1 );
}

.bppc-hero__heading {
	font-size:      clamp( 2rem, 4.5vw, 3.25rem );
	font-weight:    800;
	letter-spacing: -.03em;
	line-height:    1.15;
	margin-bottom:  1.25rem;
}

.bppc-hero__tagline {
	font-size:     1.125rem;
	max-width:     640px;
	margin-bottom: 2rem;
	line-height:   1.7;
}

.bppc-hero__actions {
	display:     flex;
	flex-wrap:   wrap;
	gap:         1rem;
	align-items: center;
}

.bppc-hero--dark .section-header {
	margin-bottom: 1.5rem;
}

/* plugin-meta-bar */

.bppc-meta-bar-wrap {
	background:    var( --bp-ice, #EFF6FF );
	border-top:    1px solid var( --bp-border, #DBEAFE );
	border-bottom: 1px solid var( --bp-border, #DBEAFE );
}

.bppc-meta-bar {
	display:     flex;
	flex-wrap:   wrap;
	gap:         .25rem .75rem;
	align-items: center;
	font-size:   .8125rem;
	color:       var( --bp-tx-sec, #374151 );
	padding:     .75rem 0;
}

.bppc-meta-bar__sep {
	color: var( --bp-border, #DBEAFE );
}

.bppc-meta-bar__item a {
	color:           var( --bp-cobalt, #1944CB );
	text-decoration: none;
}

.bppc-meta-bar__item a:hover {
	text-decoration: underline;
}

/* plugin-cta */

.bppc-cta--band {
	text-align: center;
}

.bppc-cta--card {
	background:    var( --wp--preset--color--ice, #EFF6FF );
	border:        1px solid var( --wp--preset--color--border, #DBEAFE );
	border-radius: var( --wp--custom--radius--lg, 20px );
	text-align:    center;
}

.bppc-cta__inner {
	max-width:  640px;
	margin:     0 auto;
	text-align: center;
}

.bppc-cta__headline {
	font-size:     clamp( 1.75rem, 3vw, 2.5rem );
	font-weight:   800;
	margin-bottom: var( --wp--preset--spacing--4, 1rem );
}

.bppc-cta__sub {
	font-size:     var( --wp--preset--font-size--lg, 1.125rem );
	margin-bottom: var( --wp--preset--spacing--8, 2rem );
}

.bppc-cta--band .bppc-cta__btn {
	background: var( --wp--preset--color--orange, #FD9045 );
}

/* plugin-single content */

.bppc-single > :not( section ):not( .bppc-meta-bar-wrap ):not( ul ):not( ol ) {
	max-width:     var( --bp-container, 1140px );
	margin-left:   auto;
	margin-right:  auto;
	padding-left:  clamp( 1rem, 4vw, 2rem );
	padding-right: clamp( 1rem, 4vw, 2rem );
	box-sizing:    border-box;
	font-family:   var( --bp-font-body );
	font-size:     1.0625rem;
	line-height:   1.75;
	color:         var( --bp-tx-pri );
}

.bppc-single > h2 {
	counter-increment: bp-section;
	font-size:         clamp( 1.75rem, 3vw, 2.25rem );
	font-weight:       800;
	letter-spacing:    -.02em;
	color:             var( --bp-tx-pri );
	margin:            clamp( 3rem, 6vw, 5rem ) 0 1.5rem;
	padding-top:       1.25rem;
	border-top:        1px solid rgba( 0, 0, 0, .12 );
}

.bppc-single > h2::before {
	content:        counter( bp-section, decimal-leading-zero ) " · ";
	display:        block;
	font-family:    var( --bp-font-mono );
	font-size:      .6875rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: .12em;
	color:          var( --bp-tx-sec );
	line-height:    1;
	margin-bottom:  1rem;
}

.bppc-single > h2[data-bp-label]::before {
	content: counter( bp-section, decimal-leading-zero ) " · " attr( data-bp-label );
}

.bppc-single > h3 {
	font-size:   1.25rem;
	font-weight: 700;
	color:       var( --bp-tx-pri );
	margin:      2rem 0 .5rem;
}

.bppc-single > h4 {
	font-size:   1.0625rem;
	font-weight: 700;
	color:       var( --bp-tx-pri );
	margin:      1.5rem 0 .5rem;
}

.bppc-single > p {
	margin-bottom: 1.25rem;
}

.bppc-single > p a,
.bppc-single > ul a,
.bppc-single > ol a {
	color:                 var( --bp-tx-link, #1944CB );
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.bppc-single > ul,
.bppc-single > ol {
	max-width:     var( --bp-container, 1140px );
	margin-left:   auto;
	margin-right:  auto;
	box-sizing:    border-box;
	padding-left:  calc( clamp( 1rem, 4vw, 2rem ) + 1.5rem );
	padding-right: clamp( 1rem, 4vw, 2rem );
	list-style:    revert;
	margin-bottom: 1.25rem;
	font-family:   var( --bp-font-body );
	font-size:     1.0625rem;
	line-height:   1.75;
	color:         var( --bp-tx-pri );
}

.bppc-single > ul li,
.bppc-single > ol li {
	margin-bottom: .4rem;
}

.bppc-single > p code,
.bppc-single > ul li code,
.bppc-single > ol li code {
	font-family:   var( --bp-font-mono );
	font-size:     .875em;
	background:    var( --bp-ice, #EFF6FF );
	color:         var( --bp-navy, #0A0F1E );
	padding:       .15em .4em;
	border-radius: 4px;
	border:        1px solid var( --bp-border, #DBEAFE );
}

.bppc-single > blockquote {
	border-left:   4px solid var( --bp-cobalt, #1944CB );
	padding:       1rem 1.5rem;
	margin:        1.5rem 0;
	background:    var( --bp-ice, #EFF6FF );
	border-radius: 0 var( --bp-r, 12px ) var( --bp-r, 12px ) 0;
	font-style:    italic;
	color:         var( --bp-tx-sec, #374151 );
}

.bppc-single > hr {
	border:     none;
	border-top: 1px solid var( --bp-border, #DBEAFE );
	margin:     2rem 0;
}

/* Tier pill badges (uzywane przez stare bloki) */

.bppc-pill {
	display:        inline-flex;
	align-items:    center;
	font-size:      .6875rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding:        .2rem .65rem;
	border-radius:  1rem;
	margin-bottom:  .75rem;
}

.bppc-pill--free {
	background: rgba( 25, 68, 203, .12 );
	color:      var( --wp--preset--color--cobalt, #1944CB );
}

.bppc-pill--pro {
	background: rgba( 253, 144, 69, .15 );
	color:      #c05b00;
}

.bppc-pill--standalone {
	background: rgba( 10, 15, 30, .08 );
	color:      var( --wp--preset--color--navy, #0A0F1E );
}

.bppc-hero--dark .bppc-pill--free {
	background: rgba( 147, 197, 253, .2 );
	color:      var( --wp--preset--color--sky, #93C5FD );
}

.bppc-hero--dark .bppc-pill--pro {
	background: rgba( 253, 144, 69, .25 );
	color:      #FD9045;
}

/* ════════════════════════════════════════════════════════════════════════════
   PLUGIN PAGE — sekcje plugin-page/kit.css
   ════════════════════════════════════════════════════════════════════════════ */

/* Section counter + naglowki */

body {
	counter-reset: bpp-sec;
}

.bpp-section {
	padding: clamp( 3.5rem, 7vw, 5.5rem ) 0;
}

.bpp-section__head {
	margin-bottom: 3rem;
	max-width:     760px;
}

.bpp-section__label {
	font-family:     var( --font-mono );
	font-size:       11px;
	font-weight:     500;
	letter-spacing:  .12em;
	text-transform:  uppercase;
	color:           var( --fg2 );
	line-height:     1;
	padding-top:     1.25rem;
	margin-bottom:   1rem;
	border-top:      1px solid rgba( 0,0,0,.12 );
	display:         inline-block;
	counter-increment: bpp-sec;
}

.bpp-section__label::before {
	content: counter( bpp-sec, decimal-leading-zero ) " \00B7 ";
}

.bpp-section__head h2 {
	font-family:    var( --font-display );
	font-size:      clamp( 1.75rem, 3.5vw, 2.5rem );
	font-weight:    800;
	letter-spacing: -.03em;
	line-height:    1.2;
	color:          var( --fg1 );
	margin:         0 0 .75rem;
}

.bpp-section__head p {
	font-family: var( --font-body );
	font-size:   1.0625rem;
	color:       var( --fg2 );
	margin:      0;
	line-height: 1.65;
	max-width:   60ch;
}

/* Stats strip */

.bpp-stats {
	background: var( --bg-dark );
	padding:    0 0 clamp( 3rem, 5vw, 4rem );
}

.bpp-stats__grid {
	display:               grid;
	grid-template-columns: repeat( 4, 1fr );
	gap:                   1px;
	background:            rgba( 255,255,255,.07 );
	border-radius:         var( --radius-lg );
	overflow:              hidden;
}

.bpp-stat {
	background: var( --bg-dark );
	padding:    1.5rem;
}

.bpp-stat__num {
	font-family:    var( --font-display );
	font-size:      clamp( 1.5rem, 3vw, 2rem );
	font-weight:    800;
	color:          var( --tier-accent, #93C5FD );
	line-height:    1;
	letter-spacing: -.02em;
	margin-bottom:  .35rem;
	display:        flex;
	align-items:    baseline;
	gap:            .25rem;
}

.bpp-stat__num i {
	color:     #fbbf24;
	font-size: .9em;
}

.bpp-stat__label {
	font-family: var( --font-body );
	font-size:   .8125rem;
	color:       var( --fg-on-dark-2 );
	line-height: 1.3;
}

@media ( max-width: 720px ) {
	.bpp-stats__grid { grid-template-columns: repeat( 2, 1fr ); }
}

/* Features */

.bpp-feat {
	background: var( --bg-tinted );
}

.bpp-feat__grid {
	display:               grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 320px ), 1fr ) );
	gap:                   1.25rem;
}

.bpp-feat-card {
	background:     var( --bg );
	border:         1.5px solid var( --border-light );
	border-radius:  var( --radius-lg );
	padding:        1.75rem;
	position:       relative;
	overflow:       hidden;
	transition:     border-color 200ms, box-shadow 200ms, transform 200ms;
}

.bpp-feat-card:hover {
	border-color: var( --tier-deep, #1944CB );
	box-shadow:   var( --shadow );
	transform:    translateY( -3px );
}

.bpp-feat-card__deco {
	position:      absolute;
	top:           -0.15em;
	right:         -0.05em;
	line-height:   1;
	pointer-events: none;
	user-select:   none;
	font-family:   var( --font-display );
	font-size:     7rem;
	font-weight:   800;
	color:         color-mix( in srgb, var( --tier-deep, #1944CB ) 8%, var( --bg-tinted ) );
}

.bpp-feat-card__icon {
	font-size:     1.5rem;
	color:         var( --tier-deep, #1944CB );
	margin-bottom: .75rem;
}

.bpp-feat-card__body {
	position: relative;
	z-index:  1;
}

.bpp-feat-card h3 {
	font-family: var( --font-display );
	font-size:   1.0625rem;
	font-weight: 700;
	margin:      0 0 .4rem;
	color:       var( --fg1 );
}

.bpp-feat-card p {
	font-family: var( --font-body );
	font-size:   .9375rem;
	color:       var( --fg2 );
	line-height: 1.65;
	margin:      0;
}

/* Comparison table */

.bpp-compare {
	background: var( --bg-tinted );
}

.bpp-compare__wrap {
	overflow-x:    auto;
	border-radius: var( --radius-lg );
	box-shadow:    var( --shadow );
	background:    var( --bg );
}

.bpp-compare__table {
	width:           100%;
	border-collapse: collapse;
	font-family:     var( --font-display );
	font-size:       .9375rem;
}

.bpp-compare__table th,
.bpp-compare__table td {
	padding:       .85rem 1.25rem;
	text-align:    left;
	border-bottom: 1px solid var( --border-light );
}

.bpp-compare__table thead th {
	background:     var( --bg-dark );
	color:          var( --fg-on-dark-2 );
	font-weight:    700;
	font-size:      .8125rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* Free column: nowy motyw = .col-free, stary motyw = 2. th bez .col-bp */
.bpp-compare__table thead th.col-free,
.bpp-compare__table thead th:nth-child(2):not(.col-bp),
.bp-compare__table  thead th.col-free,
.bp-compare__table  thead th:nth-child(2):not(.col-bp) {
	background: linear-gradient( 135deg, #0F2D9E 0%, #1944CB 100% );
	color:      #fff;
	text-align: center;
}

/* Pro column: nowy motyw = .col-pro, stary motyw = .col-bp */
.bpp-compare__table thead th.col-pro,
.bpp-compare__table thead th.col-bp,
.bp-compare__table  thead th.col-pro,
.bp-compare__table  thead th.col-bp {
	background: linear-gradient( 135deg, #C05621 0%, #FD9045 100% );
	color:      #fff;
	text-align: center;
}

.bpp-compare__table thead th i {
	margin-right: .4rem;
}

.bpp-compare__table tbody tr:last-child td {
	border-bottom: none;
}

.bpp-compare__table tbody tr:hover {
	background: rgba( 10,15,30,.02 );
}

.bpp-compare__table tbody td:first-child {
	font-weight: 500;
	color:       var( --fg1 );
	width:       40%;
}

.bpp-compare__cell-yes {
	color:       #047857;
	font-weight: 600;
}

.bpp-compare__cell-no {
	color: #B91C1C;
}

.bpp-compare__cell-partial {
	color: #92400E;
}

.bpp-compare__cell-yes i,
.bpp-compare__cell-no i,
.bpp-compare__cell-partial i {
	margin-right: .4rem;
}

/* FAQ */

.bpp-faq {
	background: var( --bg );
}

.bpp-faq__list {
	max-width: 760px;
}

.bpp-faq__q {
	background:     var( --bg );
	border:         1.5px solid var( --border-light );
	border-radius:  var( --radius );
	margin-bottom:  .75rem;
	overflow:       hidden;
	transition:     border-color 200ms, box-shadow 200ms;
}

.bpp-faq__q:hover {
	border-color: var( --tier-deep, #1944CB );
}

.bpp-faq__q.is-open {
	border-color: var( --tier-deep, #1944CB );
	box-shadow:   var( --shadow );
}

.bpp-faq__btn {
	width:           100%;
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             1rem;
	padding:         1rem 1.25rem;
	font-family:     var( --font-display );
	font-size:       1rem;
	font-weight:     600;
	color:           var( --fg1 );
	background:      transparent;
	border:          none;
	text-align:      left;
	cursor:          pointer;
}

.bpp-faq__chev {
	color:      var( --tier-deep, #1944CB );
	font-size:  .75rem;
	transition: transform 200ms;
	flex-shrink: 0;
}

.bpp-faq__q.is-open .bpp-faq__chev {
	transform: rotate( 180deg );
}

.bpp-faq__a {
	padding:     0 1.25rem 1.25rem;
	font-family: var( --font-body );
	font-size:   .9375rem;
	color:       var( --fg2 );
	line-height: 1.65;
	max-width:   70ch;
}

/* Changelog */

.bpp-log {
	background: var( --bg-tinted );
}

.bpp-log__list {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	max-width:      760px;
}

.bpp-log__entry {
	background:    var( --bg );
	border:        1.5px solid var( --border-light );
	border-radius: var( --radius );
	overflow:      hidden;
}

.bpp-log__head {
	display:     flex;
	align-items: center;
	gap:         1rem;
	padding:     1rem 1.25rem;
	cursor:      pointer;
}

.bpp-log__head:focus-visible {
	outline:        2px solid var( --tier-deep, #1944CB );
	outline-offset: -2px;
}

.bpp-log__ver {
	font-family:   var( --font-display );
	font-size:     1rem;
	font-weight:   800;
	color:         var( --fg1 );
	padding:       .3rem .75rem;
	border-radius: 999px;
	background:    var( --bg-tinted );
	flex-shrink:   0;
}

.bpp-log__entry.is-latest .bpp-log__ver {
	background: var( --tier-deep, #1944CB );
	color:      #fff;
}

.bpp-log__date {
	font-family: var( --font-body );
	font-size:   .875rem;
	color:       var( --fg2 );
	flex:        1;
}

.bpp-log__chev {
	color:       var( --tier-deep, #1944CB );
	font-size:   .75rem;
	transition:  transform 200ms;
	flex-shrink: 0;
}

.bpp-log__entry.is-open .bpp-log__chev {
	transform: rotate( 180deg );
}

.bpp-log__body {
	padding: 0 1.25rem 1.25rem;
}

.bpp-log__body ul {
	list-style: none;
	padding:    0;
	margin:     0;
}

.bpp-log__body li {
	display:               grid;
	grid-template-columns: 72px 1fr;
	gap:                   .65rem;
	padding:               .35rem 0;
	font-family:           var( --font-body );
	font-size:             .9375rem;
	color:                 var( --fg2 );
	line-height:           1.5;
}

.bpp-log__body .tag {
	font-family:    var( --font-mono );
	font-size:      10px;
	font-weight:    600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding:        2px 8px;
	border-radius:  999px;
	align-self:     start;
	line-height:    1.5;
}

.bpp-log__body .tag-new { color: #047857; background: rgba( 74,222,128,.15 ); }
.bpp-log__body .tag-fix { color: #1944CB; background: rgba( 25,68,203,.10 ); }
.bpp-log__body .tag-sec { color: #B91C1C; background: rgba( 220,38,38,.10 ); }
.bpp-log__body .tag-doc { color: #92400E; background: rgba( 251,191,36,.18 ); }

/* CTA band */

.bpp-cta-band {
	background: var( --bg-dark );
	padding:    clamp( 3.5rem, 8vw, 6rem ) 0;
	border-top: 1px solid rgba( 147,197,253,.10 );
	position:   relative;
	overflow:   hidden;
}

.bpp-cta-band::before {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     radial-gradient( ellipse 60% 50% at 80% 50%, rgba( var( --tier-deep-rgb, 25,68,203 ), .18 ) 0%, transparent 65% );
	pointer-events: none;
}

.bpp-cta-band > .container {
	position:   relative;
	z-index:    1;
	text-align: center;
	max-width:  720px;
	margin:     0 auto;
}

.bpp-cta-band h2 {
	font-family:    var( --font-display );
	font-size:      clamp( 1.75rem, 4vw, 2.75rem );
	font-weight:    800;
	line-height:    1.2;
	letter-spacing: -.03em;
	color:          var( --fg-on-dark-1 );
	margin:         0 0 1rem;
}

.bpp-cta-band h2 em {
	color:      var( --tier-accent, #93C5FD );
	font-style: normal;
}

.bpp-cta-band p {
	font-family: var( --font-body );
	font-size:   1.125rem;
	color:       var( --fg-on-dark-2 );
	line-height: 1.7;
	margin:      0 auto 2rem;
	max-width:   58ch;
}

.bpp-cta-band__actions {
	display:         flex;
	gap:             1rem;
	justify-content: center;
	flex-wrap:       wrap;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */

/* ── Screenshots (plugin-shots) ────────────────────────────────────────────── */

.bpp-shots {
	background: var( --bg );
	counter-increment: bpp-sec;
}

.bpp-shots__main {
	background: var( --bg );
	border: 1.5px solid var( --border-light );
	border-radius: var( --radius-lg );
	padding: 12px;
	box-shadow: var( --shadow-lg );
	margin-bottom: 1.25rem;
	overflow: hidden;
	transition: opacity 200ms;
	text-align: center;
}

.bpp-shots__img {
	width: 100%;
	height: auto;
	border-radius: calc( var( --radius-lg ) - 6px );
	display: block;
}

.bpp-shots__caption {
	font-family: var( --font-body );
	font-size: .9375rem;
	color: var( --fg2 );
	text-align: center;
	margin: 0 0 1.5rem;
	line-height: 1.6;
	min-height: 1.5em;
}

.bpp-shots__caption strong {
	color: var( --fg1 );
	font-weight: 600;
}

.bpp-shots__thumbs {
	display: flex;
	gap: .75rem;
	justify-content: center;
	flex-wrap: wrap;
}

.bpp-shots__thumb {
	width: 80px;
	height: 56px;
	border-radius: 8px;
	border: 1.5px solid var( --border-light );
	overflow: hidden;
	padding: 4px;
	background: var( --bg );
	cursor: pointer;
	transition: border-color 150ms, transform 150ms;
}

.bpp-shots__thumb-inner {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	background-color: var( --bg-tinted );
}

.bpp-shots__thumb:hover {
	border-color: var( --tier-deep, var( --bp-cobalt ) );
	transform: translateY( -2px );
}

.bpp-shots__thumb.is-active {
	border-color: var( --tier-deep, var( --bp-cobalt ) );
	box-shadow: 0 0 0 3px rgba( 25, 68, 203, .15 );
}

.bppc-hero--pro .bpp-shots__thumb.is-active {
	box-shadow: 0 0 0 3px rgba( 253, 144, 69, .20 );
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.bpp-card,
	.bpp-cta-fill,
	.bpp-cta-outline,
	.bpp-chip,
	.bpp-tier-chip {
		transition: none;
	}
	.bpp-card:hover {
		transform: none;
	}
	.bpp-cta-fill:hover {
		transform: none;
	}
}