/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*
 * ─────────────────────────────────────────────────────
 *  DESIGN TOKENS — important.is
 *  Viewport range: 375px → 1440px (diff: 1065px)
 *  Base:           62.5% = 10px (matches Bricks --base-font: 10)
 *  Body target:    18px (mobile) → 20px (desktop)
 *  Type ratio:     old-site proportions
 * ─────────────────────────────────────────────────────
 */
:root {

  /* ── Colors ─────────────────────────────────────── */
  --color-bg:           #ffffff;
  --color-surface:      #f5f5f5;
  --color-surface-warm: #f2efe9;
  --color-text:         #1a1a1a;
  --color-muted:        #6b7280;
  --color-border:       #e5e7eb;
  --color-accent:       #FF3434;
  --color-accent-hover: #e62e2e;
  --color-accent-bg:    rgba(255, 52, 52, 0.08);
  --color-link:         var(--color-accent);
  --color-link-hover:   var(--color-accent-hover);

  /* Dark surfaces */
  --color-dark:         #1b1b1b;
  --color-dark-surface: #252525;
  --color-dark-text:    #ffffff;
  --color-dark-muted:   rgba(255,255,255,0.3);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);

  /* ── Typography ──────────────────────────────────
   *   rem base = 10px  (html: 62.5%)
   *   Formula: clamp(min, Xvw + Yrem, max)
   *   slope    = (maxPx - minPx) / 1065
   *   intercept = (minPx - slope*375) / 10
   *   42px @ 1100px ✓
   * ─────────────────────────────────────────────── */

  /* Display / Hero: 42px → 58px */
  --font-display: clamp(4.2rem, 1.502vw + 3.637rem, 5.8rem);

  /* H1: 34px → 46px  (≈ 42px @ 1100px) */
  --font-h1:  clamp(3.4rem, 1.127vw + 2.978rem, 4.6rem);

  /* H2: 26px → 36px */
  --font-h2:  clamp(2.6rem, 0.939vw + 2.248rem, 3.6rem);

  /* H3: 22px → 30px */
  --font-h3:  clamp(2.2rem, 0.751vw + 1.918rem, 3.0rem);

  /* H4: 18px → 22px */
  --font-h4:  clamp(1.8rem, 0.376vw + 1.659rem, 2.2rem);

  /* H5: 17px → 19px */
  --font-h5:  clamp(1.7rem, 0.188vw + 1.587rem, 1.9rem);

  /* Body: 18px → 20px */
  --font-body: clamp(1.8rem, 0.188vw + 1.686rem, 2.0rem);

  /* Label (nav, eyebrow): 14px → 15px */
  --font-label: clamp(1.4rem, 0.094vw + 1.365rem, 1.5rem);

  /* Caption (meta, footnote): 12px → 13px */
  --font-caption: clamp(1.2rem, 0.094vw + 1.165rem, 1.3rem);

  /* ── Spacing ─────────────────────────────────────
   *   8pt grid, fluid 375 → 1440px, rem base = 10px
   * ─────────────────────────────────────────────── */
  --space-1:  clamp(0.4rem,  0.188vw + 0.288rem,  0.8rem);   /*  4 →  8px */
  --space-2:  clamp(0.8rem,  0.376vw + 0.574rem,  1.6rem);   /*  8 → 16px */
  --space-3:  clamp(1.2rem,  0.563vw + 0.862rem,  2.4rem);   /* 12 → 24px */
  --space-4:  clamp(1.6rem,  0.751vw + 1.149rem,  3.2rem);   /* 16 → 32px */
  --space-5:  clamp(2.4rem,  1.127vw + 1.723rem,  4.8rem);   /* 24 → 48px */
  --space-6:  clamp(3.2rem,  3.005vw + 1.397rem,  6.4rem);   /* 32 → 64px */
  --space-7:  clamp(4.8rem,  4.507vw + 2.096rem,  9.6rem);   /* 48 → 96px */
  --space-8:  clamp(6.4rem,  6.009vw + 2.795rem, 12.8rem);   /* 64 → 128px */
  --space-9:  clamp(9.6rem,  9.014vw + 4.192rem, 19.2rem);   /* 96 → 192px */

  /* Semantic aliases */
  --gap-s:   var(--space-4);   /* 16→32px  element gaps */
  --gap-m:   var(--space-5);   /* 24→48px  component gaps */
  --gap-l:   var(--space-6);   /* 32→64px  section inner */
  --gap-xl:  var(--space-8);   /* 64→128px section outer */

  /* ── Border radius (fluid, 375→1440px) ──────────── */
  --radius-sm:   clamp(0.6rem, 0.188vw + 0.488rem, 0.8rem);   /*  6 →  8px */
  --radius-md:   clamp(0.8rem, 0.563vw + 0.462rem, 1.4rem);   /*  8 → 14px */
  --radius-lg:   clamp(1.2rem, 0.751vw + 0.75rem,  2.0rem);   /* 12 → 20px */
  --radius-xl:   clamp(1.6rem, 1.502vw + 0.699rem, 3.2rem);   /* 16 → 32px */
  --radius-2xl:  clamp(2.4rem, 2.254vw + 1.048rem, 4.8rem);   /* 24 → 48px */
  --radius-card: 55px;                                          /* Feature cards, dark sections */
  --radius-full: 999rem;                                        /* Pills, avatars */

  /* ── Font weights ────────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Line heights ────────────────────────────────── */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ── Semantic Colors ─────────────────────────────── */
  --color-success: #22a559;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;

  /* ── Motion / Animation ────────────────────────── */
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower:  600ms;

  /* ── Z-Index Scale ─────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ── Layout ─────────────────────────────────────── */
  --max-width:     1780px;
  --reading-width: 72ch;
  --page-padding:  clamp(2.0rem, 2.817vw + 0.945rem, 5.0rem);  /* 20→50px fluid */
  --section-px:    var(--page-padding);

  /* ── Breakpoints (reference, not usable in CSS) ── */
  /* --bp-sm:  480px   Mobile landscape */
  /* --bp-md:  768px   Tablet */
  /* --bp-lg:  1024px  Desktop small */
  /* --bp-xl:  1440px  Desktop canonical */
}

/*
 * 62.5% = 10px rem base — matches Bricks --base-font: 10.
 * All Bricks rem values (calc(1rem * X/10)) now resolve correctly.
 * body { font-size: 1.6rem } resets inherited text to 16px.
 */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden; /* must be on html AND body to prevent horizontal scroll */
}
body {
  font-size: 1.6rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  transition: opacity .2s, transform .15s;
  cursor: pointer;
  border: none;
}
.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
}
.btn--primary:hover { opacity: .85; transform: translateY(-1px); }
.btn--large { padding: 16px 40px; font-size: 18px; }

/* ===== HEADER — BRICKS (actual rendered classes) ===== */
.header__inner  { padding-top: 18px; padding-bottom: 18px; }

.header__logo-dark,
.header__logo-wrapper img,
#brxe-uytxcp img {
  max-height: 70px;
  width: auto;
  height: auto;
}

#brx-header .bricks-button.xl { padding: 10px 20px; font-size: var(--font-label); }
#brx-header .btn-nav           { padding: 8px 14px; font-size: var(--font-label); }

#brx-header .bricks-nav-menu a,
#brx-header .bricks-mobile-menu a { font-size: var(--font-label); }

#brx-header .header__social-link-icon { width: 18px; height: 18px; }

.bricks-nav-menu { gap: var(--gap-m); }

/* ===== SECTION CONTAINERS — consistent horizontal padding =====
 * Bricks theme style sets padding on .brxe-section (via --space-m).
 * We override that at the section level with our --section-px token.
 * The container gets only max-width centering — no extra padding.
 * ============================================================= */
#brx-content .brxe-section {
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}
#brx-content .brxe-section > .brxe-container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ===== HERO ===== */
.hero { padding: calc(var(--gap-xl) + 80px) 0 var(--gap-xl); }
.hero__container { padding-top: 0; padding-bottom: 0; }
.hero__title {
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 20ch;
  margin-bottom: var(--gap-s);
}
.hero__subtitle {
  font-size: clamp(1.76rem, 2vw, 2.24rem);   /* 17.6→22.4px */
  color: var(--color-muted);
  max-width: 50ch;
  margin-bottom: var(--gap-m);
}
.hero__badges { display: flex; gap: var(--gap-m); align-items: center; margin-bottom: var(--gap-l); }
.hero__badges img { height: 40px; width: auto; filter: brightness(.7); transition: filter .2s; }
.hero__badges a:hover img { filter: brightness(1); }

/* ===== ATUTY ===== */
.atuty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}
@media (max-width: 900px) { .atuty { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .atuty { grid-template-columns: 1fr 1fr; } }

.atut {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atut__lottie { width: 64px; height: 64px; }
.atut__text { display: flex; flex-direction: column; gap: 4px; }
.atut__text strong { font-size: var(--font-label); font-weight: 600; color: var(--color-text); }
.atut__text span   { font-size: var(--font-caption); color: var(--color-muted); }

/* ===== SECTION SHARED ===== */
.section-title {
  font-size: var(--font-h2);
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: var(--gap-l);
}
.section-title strong { font-weight: 700; }

/* ===== LOGOS ===== */
/* Logos slider — constrain width + clip cloned slides */
#brxe-qnrmcb,
#brxe-ivpogc .splide {
  overflow: hidden;
  max-width: 100%;
  width: 100% !important;
}
/* Parent container also needs constraining */
#brxe-hrozep {
  max-width: 100%;
  overflow: hidden;
}

.logos-section { padding: var(--gap-l) var(--section-px); border-top: 1px solid var(--color-border); }
.logos-section__container { max-width: var(--max-width); margin: 0 auto; }
.logos-slider__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.logos-slider__slide img {
  max-height: 60px;
  width: auto;
  filter: brightness(.5);
  transition: filter .2s;
}
.logos-slider__slide:hover img { filter: brightness(.9); }

/* ===== PORTFOLIO ===== */
.portfolio { padding: var(--gap-xl) var(--section-px); }
.portfolio__container { max-width: var(--max-width); margin: 0 auto; }
.portfolio__intro { margin-bottom: var(--gap-l); }
.portfolio__intro p { color: var(--color-muted); margin-bottom: var(--gap-s); }
.portfolio__tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: clamp(19px, 2vw, 26px); font-weight: 500; }
.portfolio__tags .separator { color: var(--color-muted); }

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-m);
}
@media (max-width: 768px) { .portfolio__grid { grid-template-columns: 1fr; } }

.project-card { position: relative; border-radius: 12px; overflow: hidden; background: var(--color-surface); }
.project-card__link {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 48px; height: 48px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.project-card__link:hover { background: rgba(255,255,255,.2); }
.project-card__link svg { width: 16px; height: 16px; fill: white; }
.project-card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.project-card__info { padding: 24px; }
.project-card__title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.project-card__excerpt { font-size: 14px; color: var(--color-muted); }

/* ===== BLOG ===== */
.blog-section { padding: var(--gap-xl) var(--section-px); border-top: 1px solid var(--color-border); }
.blog-section__container { max-width: var(--max-width); margin: 0 auto; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card { display: flex; flex-direction: column; gap: var(--gap-s); }
.blog-card__image-link img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.blog-card__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.blog-card__title a:hover { opacity: .7; }
.blog-card__excerpt { font-size: 14px; color: var(--color-muted); }

/* ===== CTA ===== */
.cta-section { padding: var(--gap-xl) var(--section-px); text-align: center; }
.cta-section__container { max-width: 700px; margin: 0 auto; }
.cta-section__title { font-size: var(--font-h2); font-weight: 400; margin-bottom: var(--gap-s); letter-spacing: -.02em; }
.cta-section__title strong { font-weight: 700; }
.cta-section__subtitle { color: var(--color-muted); margin-bottom: var(--gap-l); font-size: 18px; }

/* Stacking cards */
.stacking_card-container {
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stacking_card {
  display: flex;
  flex-direction: column;
  position: relative;
  transform-origin: top;
  transition: transform 0.1s ease-out;
}

/* Hide stacking cards section */
#brxe-drkogv { display: none !important; }

/* Override Bricks JS inline style="opacity:0" on scroll-animated elements */
.atut-block {
  opacity: 1 !important;
  background: #f2efe9 !important;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* ===== FORMS ===== */
.brxe-form input[type="text"],
.brxe-form input[type="email"],
.brxe-form input[type="tel"],
.brxe-form input[type="number"],
.brxe-form textarea,
.brxe-form select {
  margin-bottom: var(--space-3);
}

/* ===== ARTICLES DATE ===== */
.articles__item-info-date { font-size: var(--font-caption); }

/* ===== LOGO SLIDER — GRAYSCALE + HOVER ===== */
.logos__slider .logo-item img,
.x-slider .splide__slide img[alt*="Logo"] {
  filter: grayscale(100%) opacity(60%);
  transition: filter 0.3s ease;
}
.logos__slider .logo-item img:hover,
.x-slider .splide__slide img[alt*="Logo"]:hover {
  filter: grayscale(0%) opacity(100%);
}

/* ===== SINGLE PROJECT ===== */
.project-hero { padding: calc(var(--gap-xl) + 80px) var(--section-px) var(--gap-m); }
.project-hero__inner { max-width: var(--max-width); margin: 0 auto; }
.project-hero__title {
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: var(--gap-s);
}
.project-hero__tagline { font-size: 19px; color: var(--color-muted); margin-bottom: var(--gap-s); }
.project-hero__meta { display: flex; gap: 5px; align-items: center; color: var(--color-muted); font-size: 14px; }

.project-media { max-width: var(--max-width); margin: 0 auto var(--gap-l); padding: 0 var(--section-px); }
.project-media img, .project-media video {
  width: 100%; border-radius: 12px; max-height: 70vh; object-fit: cover; display: block;
}

.project-layout {
  max-width: var(--max-width); margin: 0 auto;
  padding: 0 var(--section-px) var(--gap-xl);
  display: grid; grid-template-columns: 1fr 300px; gap: var(--gap-l); align-items: start;
}
@media (max-width: 900px) { .project-layout { grid-template-columns: 1fr; } }
.project-content { min-width: 0; }
.project-content img { border-radius: 8px; margin: var(--gap-s) 0; }

.project-sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--gap-m); }
.project-sidebar__author {
  display: flex; align-items: center; gap: var(--gap-s);
  padding: var(--gap-s); background: var(--color-surface); border-radius: 12px;
}
.project-sidebar__author-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.project-sidebar__author-name { display: block; font-weight: 600; font-size: 15px; }
.project-sidebar__author-role { display: block; font-size: 13px; color: var(--color-muted); }
.project-sidebar__cta { width: 100%; justify-content: center; text-align: center; }
.project-sidebar__share p { font-size: 14px; color: var(--color-muted); margin-bottom: 8px; }
.project-sidebar__share-links { display: flex; gap: var(--gap-s); }
.project-sidebar__share-links a {
  width: 40px; height: 40px; background: var(--color-surface); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background .2s;
}
.project-sidebar__share-links a:hover { background: var(--color-border); }

/* ===== SINGLE POST — sp-* layout ===== */
.sp { }

/* ── Breadcrumbs ─────────────────────── */
.sp-breadcrumbs {
  padding-top: var(--space-3);
}
.sp-breadcrumbs + .sp-hero {
  padding-top: var(--space-4);
}
.sp-breadcrumbs .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 11px;
  color: var(--color-muted);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-breadcrumbs .breadcrumb-item a {
  color: var(--color-muted);
  text-decoration: none;
}
.sp-breadcrumbs .breadcrumb-item a:hover { color: var(--color-accent); }
/* Ukryj tytuł posta — jest już w h1 poniżej */
.sp-breadcrumbs .breadcrumb-item.active { display: none; }
.sp-breadcrumbs .breadcrumb-item:nth-last-child(2) + .breadcrumb-item.active { display: none; }

/* ── Hero ────────────────────────────── */
.sp-hero {
  padding-top: var(--gap-xl);
}
.sp-hero__inner { max-width: 860px; margin: 0 auto; }

.sp-hero__cat {
  display: inline-block;
  font-size: var(--font-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent);
  text-decoration: none;
}
.sp-hero__cat:hover { opacity: .75; }

.sp-hero__title {
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: var(--space-2);
}

.sp-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-label);
  color: var(--color-muted);
  flex-wrap: wrap;
  padding: var(--space-2) 0 var(--space-4);
}
.sp-hero__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.sp-hero__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sp-meta-dot { opacity: 0.35; }

/* ── Cover image ─────────────────────── */
.sp-cover {
  margin: 0 -24px var(--gap-l);
}
.sp-cover img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ── Single column layout ───────────── */
.sp-page-layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ── Mobile TOC (button-based collapsible) ── */
.sp-mobile-toc {
  display: none; /* hidden by default, shown on mobile */
  margin-bottom: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 1060px) {
  .sp-mobile-toc { display: block; }
}
.sp-mobile-toc__toggle {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: inherit;
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-text);
  transition: background .15s;
}
.sp-mobile-toc__toggle:hover { background: var(--color-surface); filter: brightness(.97); }
.sp-mobile-toc__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sp-mobile-toc__chevron {
  width: 18px;
  height: 18px;
  color: var(--color-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.sp-mobile-toc__toggle[aria-expanded="true"] .sp-mobile-toc__chevron { transform: rotate(180deg); }
.sp-mobile-toc__body {
  display: none;
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.sp-mobile-toc__body.open { display: block; }

/* ── Shared TOC list styles ─────────── */
.sp-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-toc-list li { margin: 0; }
.sp-toc-list a {
  display: block;
  font-size: 14px;
  color: var(--color-muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.45;
  transition: color .15s, background .15s;
}
.sp-toc-list a:hover { color: var(--color-text); background: var(--color-surface); }
.sp-toc-list a.active {
  color: var(--color-accent);
  background: var(--color-surface);
  font-weight: 600;
}
.sp-toc-list .toc-sub a { padding-left: 20px; font-size: 12px; }

/* ── Article footer ─────────────────── */
.sp-article-footer {
  margin-top: var(--gap-m);
}

/* ── Share row ───────────────────────── */
.sp-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--gap-m);
}
.sp-share__label {
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-muted);
}
.sp-share__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: all .15s;
}
.sp-share__btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── Author bio ──────────────────────── */
.sp-author {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
}
.sp-author__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sp-author__name { font-weight: 700; font-size: var(--font-label); margin-bottom: var(--space-1); }
.sp-author__bio  { font-size: var(--font-caption); color: var(--color-muted); line-height: 1.6; }

/* ============================================================
   TOC BOTTOM DRAWER — fixed at bottom of viewport
   ============================================================ */
.sp-toc-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  font-family: inherit;
}

/* Panel — slides up above the right zone */
.sp-toc-bar-right {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.sp-toc-drawer-panel {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 20px rgb(0 0 0 / .08);
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-toc-drawer[aria-expanded="true"] .sp-toc-drawer-panel {
  max-height: 55vh;
}

.sp-toc-drawer-inner {
  padding: var(--space-4) var(--space-4) var(--space-2);
  overflow-y: auto;
  max-height: 55vh;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* Drawer-specific TOC list overrides */
.sp-toc-list--drawer { list-style: none; }
.sp-toc-list--drawer a {
  font-size: 15px;
  padding: 9px 12px;
  line-height: 1.5;
}

/* Always-visible bar */
.sp-toc-drawer-bar {
  background: color-mix(in srgb, var(--color-surface, #fff) 97%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 24px rgb(0 0 0 / .08);
  height: 60px;
}

.sp-toc-drawer-bar-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Left zone — author + CTA */
.sp-toc-bar-expert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.sp-toc-bar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.sp-toc-bar-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sp-toc-bar-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-toc-bar-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.sp-toc-bar-role {
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
}

.sp-toc-bar-book {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--color-accent);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s;
  display: flex;
  align-items: center;
}
.sp-toc-bar-book:hover { background: var(--color-accent-hover, #1d4ed8); }

/* Separator */
.sp-toc-bar-sep {
  width: 1px;
  background: var(--color-border);
  margin: var(--space-3) var(--space-4);
  flex-shrink: 0;
}

/* TOC toggle button */
.sp-toc-bar-toc {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: background .15s;
  font-family: inherit;
}
.sp-toc-bar-toc:hover { background: var(--color-accent-bg, #eff6ff); }

.sp-toc-bar-toc-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-toc-bar-toc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
}
.sp-toc-bar-toc-active {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-toc-drawer-chevron {
  width: 18px;
  height: 18px;
  color: var(--color-muted);
  flex-shrink: 0;
  transition: transform .25s;
}
.sp-toc-drawer[aria-expanded="true"] .sp-toc-drawer-chevron {
  transform: rotate(180deg);
}

/* Mobile: compact drawer bar */
@media (max-width: 640px) {
  .sp-toc-bar-info { display: none; }
  .sp-toc-bar-sep  { margin: var(--space-3) var(--space-2); }
}

/* ===== PORTFOLIO HERO IMAGES ===== */
.hero__project {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
}
.hero__project-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__project-image img,
.hero__project-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__project-image figure {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* ===== REVIEWS — EDITORIAL TITLE ===== */
.reviews__title--editorial {
  font-style: italic;
  font-size: var(--font-h1);
  font-weight: 300;
  letter-spacing: -0.04em;
}

/* ===== REVIEWS — SLIDER ===== */
.reviews__list.splide {
  overflow: hidden;
  max-width: 100%;
}

/* Phone proportions 9:15 */
#reviews .splide__slide {
  width: min(340px, 80vw) !important;
  aspect-ratio: 9/15;
}
#reviews .splide__slide:has(.reviews__list-item-video) {
  width: min(340px, 80vw) !important;
  aspect-ratio: 9/15;
}

/* ===== REVIEWS — CARDS ===== */
.reviews__list-item {
  background: #f2efe9 !important;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.reviews__list-item-text { font-size: var(--font-body); line-height: 1.6; color: var(--color-text); }
.reviews__list-item-name { font-size: var(--font-label); font-weight: 600; color: var(--color-muted); margin-top: auto; }
.reviews__list-item-cite { color: var(--color-accent); flex-shrink: 0; }

/* Video card — fills full slide height via absolute positioning */
#reviews .splide__slide:has(.reviews__list-item-video) {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.reviews__list-item-video {
  position: absolute;
  inset: 0;
}
/* Override Plyr's inline style="object-fit: contain" */
.reviews__list-item-video video {
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* ===== BLOG ARCHIVE — index.php ===== */

/* Shared container width for blog pages */
body.blog-page {
  --blog-max: 1200px;
}
.blog-archive {
  --blog-px: clamp(2rem, 5vw, 8rem);
}

/* ─── Featured Article ─────────────────────────────── */
.blog-featured {
  padding: calc(var(--gap-xl) + 80px) var(--blog-px, var(--space-6)) var(--gap-l);
  border-bottom: 1px solid var(--color-border);
}
.blog-featured__inner {
  max-width: var(--blog-max);
  margin: 0 auto;
}
.blog-featured__link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 768px) {
  .blog-featured__link { grid-template-columns: 1fr; }
}
.blog-featured__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  background: var(--color-surface);
}
.blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.blog-featured__link:hover .blog-featured__image img {
  transform: scale(1.03);
}

/* Brak zdjęcia — pełna szerokość + tło z zaokrągleniami */
.blog-featured__link--no-image {
  grid-template-columns: 1fr;
}
.blog-featured__link--no-image .blog-featured__body {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8);
  border: 1px solid var(--color-border);
}
.blog-featured__link--no-image .blog-featured__title {
  font-size: var(--font-h1);
}
.blog-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.blog-featured__cat {
  font-size: var(--font-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-accent);
}
.blog-featured__title {
  font-size: var(--font-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  transition: opacity 0.2s;
}
.blog-featured__link:hover .blog-featured__title { opacity: 0.75; }
.blog-featured__excerpt {
  font-size: var(--font-body);
  color: var(--color-muted);
  line-height: 1.65;
}
.blog-featured__meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-caption);
  color: var(--color-muted);
}
.blog-featured__meta-sep { opacity: 0.4; }
.blog-featured__cta {
  display: inline-block;
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-accent);
  margin-top: var(--space-1);
  transition: gap 0.2s;
}

/* ─── Posts Grid ───────────────────────────────────── */
.blog-grid-section {
  padding: var(--gap-l) var(--blog-px, var(--space-6)) var(--gap-xl);
}
.blog-grid-section__inner {
  max-width: var(--blog-max);
  margin: 0 auto;
}
.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-m);
  margin-bottom: var(--gap-l);
}
@media (max-width: 640px) {
  .blog-posts-grid { grid-template-columns: 1fr; }
}

/* ─── Post Card ────────────────────────────────────── */
.blog-post-card { }
.blog-post-card__link {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  height: 100%;
}
.blog-post-card__link:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.blog-post-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}
.blog-post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.blog-post-card__link:hover .blog-post-card__image img {
  transform: scale(1.04);
}
/* Brak zdjęcia — body fills the whole card */
.blog-post-card--no-image .blog-post-card__body {
  padding-top: var(--space-6);
}
.blog-post-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.blog-post-card__cat {
  font-size: var(--font-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-accent);
}
.blog-post-card__title {
  font-size: var(--font-h4);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.blog-post-card__excerpt {
  font-size: var(--font-caption);
  color: var(--color-muted);
  line-height: 1.6;
  flex: 1;
}
.blog-post-card__meta {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--font-caption);
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* ─── Pagination ───────────────────────────────────── */
.blog-pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: all 0.15s;
}
.blog-pagination .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.blog-pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ─── Empty state ──────────────────────────────────── */
.blog-empty {
  padding: calc(var(--gap-xl) + 80px) var(--blog-px, var(--space-6)) var(--gap-xl);
}
.blog-empty__inner {
  max-width: var(--blog-max);
  margin: 0 auto;
  color: var(--color-muted);
}

/* ===== BLOG NAV — minimal header for blog pages ===== */
.blog-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.blog-nav__inner {
  max-width: var(--blog-max, var(--max-width));
  margin: 0 auto;
  padding: 0 var(--page-padding);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.blog-nav__logo img {
  height: 28px;
  width: auto;
  display: block;
}
.blog-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.blog-nav__link {
  font-size: var(--font-label);
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.blog-nav__link:hover { color: var(--color-text); }
.blog-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--font-label);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.blog-nav__cta:hover { opacity: 0.85; }

/* ===== BLOG FOOTER — minimal ===== */
.blog-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) var(--page-padding);
  margin-top: var(--gap-xl);
}
.blog-footer__inner {
  max-width: var(--blog-max, var(--max-width));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.blog-footer__logo img { height: 20px; width: auto; opacity: 0.6; }
.blog-footer__copy { font-size: var(--font-caption); color: var(--color-muted); }

/* ===== READING PROGRESS BAR ===== */
#reading-progress-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-toast);
  background: transparent;
}
#reading-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.1s linear;
}

/* ===== SINGLE POST — Enhanced ===== */

/* Back link */
.single-post-hero__back {
  margin-bottom: var(--space-4);
}
.single-post-hero__back a {
  font-size: var(--font-label);
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.single-post-hero__back a:hover { color: var(--color-text); }

/* Author inline in hero meta */
.single-post-hero__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.single-post-hero__author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.single-post-hero__meta-sep { opacity: 0.35; }

/* Content prose styles */
.prose.sp-content {
  font-size: var(--font-body);
  line-height: 1.75;
  color: var(--color-text);
}
.prose.sp-content h2 {
  font-size: var(--font-h2);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: var(--gap-m) 0 var(--gap-s);
  position: relative;
}
.prose.sp-content h2::before {
  content: '';
  display: block;
  position: absolute;
  left: -20px;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
}
.prose.sp-content h3 {
  font-size: var(--font-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: var(--gap-s) 0 var(--space-3);
}
.prose.sp-content h4 {
  font-size: var(--font-h4);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
.prose.sp-content p { margin-bottom: var(--gap-s); }
.prose.sp-content ul,
.prose.sp-content ol {
  margin: 0 0 var(--gap-s) var(--space-5);
}
.prose.sp-content li {
  margin-bottom: var(--space-2);
  line-height: 1.65;
}
.prose.sp-content ul li::marker { color: var(--color-accent); }
.prose.sp-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose.sp-content strong { font-weight: 700; }
.prose.sp-content blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--gap-m) 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--font-h5);
  font-style: italic;
  color: var(--color-muted);
  line-height: 1.7;
}
.prose.sp-content img {
  border-radius: var(--radius-md);
  margin: var(--gap-s) 0;
}
.prose.sp-content figure { margin: var(--gap-m) 0; }
.prose.sp-content figcaption {
  font-size: var(--font-caption);
  color: var(--color-muted);
  text-align: center;
  margin-top: var(--space-2);
  font-style: italic;
}
.prose.sp-content code {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 14px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  padding: 2px 6px;
  border-radius: 4px;
  color: #24292f;
}
.prose.sp-content pre {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  overflow: hidden;
  margin: var(--gap-m) 0;
  position: relative;
}
/* Toolbar: language badge + copy button */
.sp-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}
.sp-code-lang {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.sp-code-copy {
  font-family: inherit;
  font-size: 12px;
  color: #8b949e;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sp-code-copy:hover { color: #e6edf3; border-color: #8b949e; }
/* highlight.js dodaje .hljs do <code> wewnątrz <pre> */
.prose.sp-content pre code,
.prose.sp-content pre code.hljs {
  display: block;
  background: #0d1117;
  border: none;
  border-radius: 0;
  padding: 20px 24px;
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.75;
  overflow-x: auto;
  color: #e6edf3;
  tab-size: 2;
}
.prose.sp-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--gap-l) 0;
}

/* ── TABLES ─────────────────────────────────────────── */
.prose.sp-content .wp-block-table,
.prose.sp-content figure.wp-block-table,
.prose.sp-content > table {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--gap-m) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.prose.sp-content table {
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  width: auto;
}
.prose.sp-content thead {
  background: var(--color-text);
  color: #fff;
}
.prose.sp-content thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
}
.prose.sp-content tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background .12s;
}
.prose.sp-content tbody tr:last-child { border-bottom: none; }
.prose.sp-content tbody tr:hover { background: var(--color-surface); }
.prose.sp-content tbody tr:nth-child(even) { background: rgba(0,0,0,.025); }
.prose.sp-content tbody tr:nth-child(even):hover { background: var(--color-surface); }
.prose.sp-content td {
  padding: 11px 16px;
  vertical-align: middle;
  color: var(--color-text);
  border: none;
}
.prose.sp-content td:first-child {
  font-weight: 600;
}

/* TOC */
.single-post-toc {
  max-width: 860px;
  margin: 0 auto var(--gap-m);
  padding: 0 var(--space-6, 3.2rem);
}
.toc-inner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.toc-label {
  font-size: var(--font-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.toc-list li { margin: 0; }
.toc-list a {
  display: block;
  font-size: var(--font-label);
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  line-height: 1.45;
  transition: all 0.15s;
  border-left: 2px solid transparent;
}
.toc-list a:hover { color: var(--color-text); background: rgba(0,0,0,.04); }
.toc-list a.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: 600;
}
.toc-list .toc-h3 a { padding-left: var(--space-4); font-size: var(--font-caption); }

/* Calendar CTA */
.single-post-calendar-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  flex-wrap: wrap;
}
.single-post-calendar-cta__text strong {
  display: block;
  font-size: var(--font-h5);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.single-post-calendar-cta__text p {
  font-size: var(--font-label);
  color: var(--color-muted);
  margin: 0;
}
.single-post-calendar-cta__btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--font-label);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.single-post-calendar-cta__btn:hover { opacity: 0.88; }

/* Single post footer (share + author) */
.single-post-footer {
  padding: var(--gap-m) var(--section-px, var(--space-6)) var(--gap-xl);
}
.single-post-footer__inner {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

/* Share row */
.single-post-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.single-post-share__label {
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-muted);
}
.single-post-share__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-surface);
  text-decoration: none;
  transition: all 0.15s;
}
.single-post-share__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: #fff;
}

/* ===== TEAM SECTION ===== */
/* Clip loop clones, prevent horizontal scroll */
#brxe-tletpp {
  overflow: hidden;
  max-width: 100%;
}

/* 3 cards per view handled via JS perPage: 3 */

/* Remove double gap — Bricks inline margin-right already handles spacing */
.members-box .splide__list,
.team .splide__list {
  gap: 0;
}

/* Image: 9:16 portrait, fill with cover */
.members-box-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 9/16;
}
.members-box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.team .splide__arrow,
.members-box .splide__arrow {
  display: none;
}


/* Author link in blog cards and single hero */
.blog-meta-author {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-out);
}
.blog-meta-author:hover {
  color: var(--color-accent);
}
.sp-hero__author {
  text-decoration: none;
  color: inherit;
}
.sp-hero__author:hover span {
  color: var(--color-accent);
}

/* ============================================================
   AUTHOR PAGE
   ============================================================ */
.author-hero {
  padding: var(--space-7) 0 var(--space-5);
}
.author-hero__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Avatar */
.author-hero__avatar-wrap {
  margin-bottom: var(--space-4);
}
.author-hero__avatar {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
  border: 4px solid var(--color-surface);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.author-hero__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 4px solid var(--color-bg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  font-size: var(--font-h1);
  font-weight: 800;
  color: var(--color-muted);
}

/* Name */
.author-hero__name {
  font-size: var(--font-h1);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}

/* Role */
.author-hero__role {
  font-size: var(--font-label);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

/* Bio */
.author-hero__bio {
  font-size: var(--font-body);
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: var(--space-4);
  max-width: 540px;
}
.author-hero__bio p { margin-bottom: var(--space-2); }
.author-hero__bio p:last-child { margin-bottom: 0; }

/* Meta row — stats + tags */
.author-hero__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.author-hero__stat {
  font-size: var(--font-caption);
  color: var(--color-text);
}
.author-hero__stat strong {
  font-weight: 700;
}
.author-hero__meta-sep {
  color: var(--color-border);
  margin: 0 var(--space-1);
}
.author-hero__tag {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  line-height: 1;
}

/* CTA */
.author-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 1.2rem 2.8rem;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--font-label);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.author-hero__cta:hover {
  background: var(--color-accent);
  transform: translateY(-1px);
}

/* Section heading */
.author-posts__heading {
  font-size: var(--font-h3);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

/* Divider before posts */
.blog-archive .author-hero + .blog-grid-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

@media (max-width: 600px) {
  .author-hero { padding: var(--space-5) 0 var(--space-4); }
  .author-hero__avatar,
  .author-hero__initials { width: 100px; height: 100px; }
  .author-hero__cta { width: 100%; justify-content: center; }
}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.cat-hero {
  padding: var(--space-7) 0 var(--space-5);
}
.cat-hero__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  text-align: center;
}
.cat-hero__label {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.cat-hero__name {
  font-size: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.cat-hero__desc {
  font-size: var(--font-body);
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: var(--space-3);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.cat-hero__desc p { margin-bottom: var(--space-2); }
.cat-hero__desc p:last-child { margin-bottom: 0; }
.cat-hero__count {
  font-size: var(--font-caption);
  color: var(--color-muted);
}
.cat-hero__sibling {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
/* ===== FOOTER ===== */
.site-footer {
  background: var(--color-text);
  color: #fff;
  padding: var(--gap-xl) var(--page-padding);
  font-family: "Rubik", sans-serif;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__top {
  display: flex;
  gap: var(--gap-l);
  align-items: flex-start;
}

@media (max-width: 960px) {
  .site-footer__top { flex-direction: column; }
}

/* Left side */
.site-footer__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__brand {
  background: #252525;
  border-radius: var(--radius-card, 55px);
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__logo img { height: 40px; width: auto; }

.site-footer__desc {
  font-size: var(--font-body);
  color: rgba(255,255,255,0.3);
  line-height: 1.5;
  max-width: 600px;
}

.site-footer__social {
  display: flex;
  gap: var(--gap-m);
  align-items: center;
}

.site-footer__social a {
  color: #fff;
  transition: opacity 0.2s;
  display: flex;
}

.site-footer__social a:hover { opacity: 0.7; }

.site-footer__columns {
  display: flex;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .site-footer__columns { flex-direction: column; }
}

.site-footer__col {
  background: #252525;
  border-radius: var(--radius-card, 55px);
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.site-footer__col-title {
  font-size: var(--font-h4);
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin: 0;
}

.site-footer__link {
  font-size: var(--font-body);
  color: #fff;
  text-decoration: none;
  line-height: 1.5;
}

.site-footer__link:hover { text-decoration: underline; }

/* Right side — CTA form */
.site-footer__cta {
  flex: 1;
  border: 4px solid #252525;
  border-radius: var(--radius-card, 55px);
  padding: var(--gap-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.site-footer__cta-title {
  font-size: var(--font-h3);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  margin: 0;
  max-width: 670px;
}

.site-footer__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__form input {
  width: 100%;
  background: #252525;
  border: none;
  border-radius: var(--radius-l, 18px);
  padding: var(--space-4) var(--space-3);
  font-size: var(--font-h3);
  color: #fff;
  font-family: "Rubik", sans-serif;
  outline: none;
  box-sizing: border-box;
  transition: background 0.2s;
}

.site-footer__form input::placeholder { color: rgba(255,255,255,0.2); }
.site-footer__form input:focus { background: #303030; }

.site-footer__form button {
  width: 100%;
  background: var(--color-accent);
  border: none;
  border-radius: 100px;
  padding: var(--space-4) var(--gap-m);
  font-size: var(--font-h3);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  font-family: "Rubik", sans-serif;
  transition: background 0.2s;
  letter-spacing: 0.6px;
}

.site-footer__form button:hover { background: #e62e2e; }

.site-footer__consent {
  font-size: var(--font-caption);
  color: rgba(255,255,255,0.3);
  text-align: center;
}

.site-footer__consent a { color: rgba(255,255,255,0.3); text-decoration: underline; }

/* Bottom bar */
.site-footer__bottom {
  background: #252525;
  border-radius: var(--radius-card, 55px);
  padding: var(--gap-m);
  font-size: var(--font-body);
  font-weight: 300;
  color: rgba(255,255,255,0.3);
}

/* ===== GLOBAL PAGE PADDING ===== */
.blog-nav__inner,
#brx-content .brxe-section > .brxe-container,
.logos-section__container,
.portfolio__container,
.blog-section__container {
  padding-inline: var(--page-padding);
}