@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Playfair+Display:wght@400;600;700;800;900&display=swap');

:root{--ink:#102a31;--muted:#5c7177;--bg:#f7fbfb;--card:#fff;--c1:#FF6D4A;--c2:#19E5D9;--c3:#266E7B;--c4:#799FA5}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
a{color:#0f5a63;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:clamp(16px,3vw,28px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img.logo{width:40px;height:40px;border-radius:50%}
nav.primary ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
nav.primary a{display:inline-flex;gap:8px;align-items:center;background:#fff;border:2px solid #cfe6e9;padding:9px 14px;border-radius:999px;font-weight:800}
nav.primary a.c1{border-color:var(--c1);color:#8b2f1f}
nav.primary a.c2{border-color:var(--c2);color:#0b5e63}
nav.primary a.c3{border-color:var(--c3);color:#15424a}
nav.primary a.c4{border-color:var(--c4);color:#203b42}
/* hero */
.hero{}
.hero .intro{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center}
.hero .intro img{width:220px;height:220px;border-radius:18px;object-fit:cover;border:3px solid #bfeff0;box-shadow:0 10px 30px rgba(0,0,0,.08)}
h1{font-size:clamp(26px,3.2vw,36px);margin:.2rem 0 0;font-weight:900}
.lead{color:var(--muted);margin:6px 0 0;font-size:clamp(16px,2.2vw,19px)}
/* toc */
.toc{background:#fff;border:1px solid #cfe6e9;border-radius:18px;padding:14px 16px;margin:20px 0;box-shadow:0 10px 24px rgba(0,0,0,.04)}
.toc h2{margin:0 0 10px;font-size:1.1rem}
.toc-list{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.toc-link{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid #e3f0f3;background:#fff;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.toc-link img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.toc-link .l1{font-weight:600;color:#0c5660}
.toc-link .l1 strong{font-weight:900}
.toc-link .l2{color:#55767d;font-size:.92rem}
/* info cards */
.infogrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:840px){.infogrid{grid-template-columns:1fr}}
.info{background:#fff;border:1px solid #cfe6e9;border-radius:16px;padding:14px 16px;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.info h3{margin:0 0 8px;font-size:1.05rem}
/* cycles */
.cycle{margin:22px 0 32px}


.banner h2{position:absolute;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35);font-weight:900;font-size:clamp(20px,2.4vw,28px);text-align:center;line-height:1.2;padding:0 10px}
.banner .l1{display:block;font-weight:900}
.banner img{width:100%;height:100%;object-fit:cover}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.card{background:#fff;border:1px solid #cfe6e9;border-radius:16px;padding:14px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 8px 20px rgba(0,0,0,.04)}
.card h3{margin:0 0 6px;font-size:1.14rem;color:#2b6d79}
.card p{margin:0;color:#385e66;font-size:0.89rem}
.pubdate{font-size:.85rem;color:#6b7f85;margin-bottom:4px}
.nav-articles .btn{background:#fff;border:1px solid #cfe6e9;padding:8px 12px;border-radius:12px}
footer{margin:44px 0 24px;color:#5f7177;font-size:.9rem;text-align:center}
.backline{display:flex;gap:.5rem;align-items:center;justify-content:center}
.backline img{width:18px;height:18px;border-radius:4px}
.disclaimer{margin-top:8px;font-size:.82rem;color:#6b7f85}

.banner h2 .l2{font-weight:500}


.badge-new{display:inline-block;background:#19E5D9;color:#fff;padding:2px 10px;border-radius:999px;font-weight:900;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.card .badge-new{margin-right:8px}
.prevnext,.triple-nav{display:flex;justify-content:space-between;gap:12px;margin:26px 0 0;align-items:center}
.prevnext a,.triple-nav a.btn-cyan{background:#19E5D9;color:#fff;padding:10px 14px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;gap:8px;border:1px solid #bfeff0;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.prevnext a:hover,.triple-nav a.btn-cyan:hover{text-decoration:none;filter:brightness(1.05)}
.backline{display:inline-flex;gap:.5rem;align-items:center;justify-content:center;background:#fff;border:1px solid #cfe6e9;padding:10px 14px;border-radius:999px}
.backline a{color:#0b5e63;font-weight:800}
.backline img{width:18px;height:18px;border-radius:4px}
/* Hamburger */
.hamburger{display:none;align-items:center;gap:8px;border:1px solid #cfe6e9;background:#fff;padding:8px 12px;border-radius:12px;font-weight:800}
.hamburger .bars{width:18px;height:12px;position:relative}
.hamburger .bars::before,.hamburger .bars::after,.hamburger .bars span{content:"";position:absolute;left:0;right:0;height:2px;background:#15424a;border-radius:2px}
.hamburger .bars span{top:5px}
.hamburger .bars::before{top:0}
.hamburger .bars::after{bottom:0}
@media(max-width:840px){
  nav.primary ul{display:none}
  nav.primary.open ul{display:flex;flex-direction:column;gap:8px;position:absolute;left:16px;right:16px;top:56px;background:#fff;border:1px solid #cfe6e9;border-radius:12px;padding:12px;z-index:50}
  .hamburger{display:inline-flex}
}

.banner{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #cfe6e9;
  height:clamp(120px,16vh,180px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero{background:none !important;}
.hero::before,.hero::after{content:none !important; display:none !important;}

.banner::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
  pointer-events:none;
}

.banner h2 .l2{font-weight:500}

/* Emphasize and align the 'Blog • Galini Psyche' label without affecting other layout */
.blog-label{font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #cfe6e9;border-radius:999px;padding:12px 16px;
  box-shadow:0 8px 18px rgba(0,0,0,.05); margin-bottom:10px}
.blog-label img{width:20px;height:20px;border-radius:4px}
/* Align with photo on the left column of hero */
.hero .intro{grid-template-columns:220px 1fr;align-items:start}
.hero .intro .blog-label{grid-column:1;justify-self:start;margin-left:0}
@media(max-width:840px){
  .hero .intro{grid-template-columns:120px 1fr}
  .hero .intro .blog-label{font-size:1rem;padding:10px 14px}
}

/* === Galini Psyche font overrides (global) === */
body{font-family:'Lato',Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
h1,h2,h3,h4,h5,h6,.hero-title{font-family:'Playfair Display','Times New Roman',serif}

/* === Intro/hero heading fine-tune === */
.intro h1{line-height:1.12}
.intro h1 strong{font-size:0.94em}

/* === Spacing between intro photo and info cards (DBT / 3-10-30) === */
.infogrid{margin-top:16px}
@media(min-width:841px){
  .infogrid{margin-left:12px}
}


.intro h1{
  color: var(--c2);         /* brand turquoise */
  font-weight: 400;         /* remove bold */
}
.intro h1 strong{
  font-weight: 400;         /* neutralize <strong> */
  display: block;           /* ensure clear line break spacing */
  margin-bottom: 6px;       /* a bit of air between lines */
}


.intro h1{
  color: #2b6d79;     /* requested brand tone */
}
.intro h1 strong{
  margin-bottom: 12px; /* a bit more air between the two parts */
}


.infogrid .info,
.infogrid .info h2,
.infogrid .info h3,
.infogrid .info h4,
.infogrid .info p,
.infogrid .info li{
  font-family: 'Lato',Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:#2b6d79;
}


.toc .l1{
  font-family:'Playfair Display','Times New Roman',serif;
  color:#2b6d79;
}
.toc .l2{
  font-family:'Lato',Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color: var(--muted);
  border-top: 1px solid #19e5d9; /* subtle separator */
  padding-top: 8px;
  margin-top: 10px;
}


.toc .l2{
  border-top: none; /* ensure no previous rule overrides the pseudo-line */
  padding-top: 0;
  margin-top: 0;
  position: relative;
}
.toc .l2::before{content:"";display:block;height:1px;background:#19e5d9;margin:10px 0}

/* Make all carousel cards the same height */
.toc .toc-link{
  display: grid;
  grid-template-rows: auto 1fr;
  height: 320px;
}
.toc .toc-link img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px;
}
.toc .toc-txt{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 840px){
  .toc .toc-link{
    height: 300px;
  }
  .toc .toc-link img{
    height: 150px;
  }
}



/* === Thin turquoise separator in carousel cards & ToC === */
.card h3{
  position: relative;
  padding-bottom: 10px; /* light space above the line */
}
.card h3::after{
  content: "";
  display: block;
  height: 1px;
  background: #19e5d9; /* Galini Psyche turquoise */
  margin-top: 8px;   /* space above the line */
  margin-bottom: 8px;/* space below the line */
  border-radius: 1px;
  opacity: .95;
}

/* If ToC items have a .title inside, apply the same separator */
.toc-link .title{
  position: relative;
  padding-bottom: 10px;
}
.toc-link .title::after{
  content: "";
  display: block;
  height: 1px;
  background: #19e5d9;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 1px;
  opacity: .95;
}



/* === Disable separators in carousel & ToC cards === */
.card h3::after, .toc-link .title::after { display: none !important; }


/* === Title/subtitle size adjustments for carousel cards === */
.card h3 { font-size: 1.22rem !important; line-height: 1.2; }
.card p { font-size: 0.90rem !important; line-height: 1.35; }

/* Also adjust ToC variants if present */
.toc-link .title { font-size: 1.18rem !important; line-height: 1.2; }
.toc-link .desc, .toc-link p { font-size: 0.90rem !important; line-height: 1.35; }




/* === "Cykl artykułów" deluxe badge for cards & ToC === */
.toc-link { position: relative; }
.toc-link::before{
  content: "Cykl artykułów";
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  padding: 4px 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: .2px;
  color: #ffffff;
  background: #19e5d9;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 9999px; /* pill */
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transform: translateZ(0); /* crisp text */
  pointer-events: none; /* don't block clicks */
}
/* Slightly larger on big screens */
@media (min-width: 1200px){
  .toc-link::before{ font-size: 0.82rem; padding: 5px 14px; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: no-preference){
  .toc-link::before{ transition: transform .25s ease, box-shadow .25s ease; }
  .card:hover::before, .toc-link:hover::before{ transform: translateZ(0) scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
}
/* Ensure badge remains inside rounded corners visually */
.card, .toc, .toc-link{ overflow: hidden; }

/* --- Defensive rules: keep "Cykl artykułów" badge ONLY in the ToC carousel --- */
.card::before { content: unset !important; }
/* Scope any future badge pseudo-element to the ToC block only (id or class 'toc') */
#toc .toc-link::before, .toc .toc-link::before { content: attr(data-badge, string) !important; }

/* === Cycle pages: smooth carousel === */
.cycle-carousel { position: relative; max-width: 1100px; margin: 12px auto 0; }
.cycle-carousel .cycle-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 44px;  /* room for nav buttons */
  scroll-behavior: smooth;
}
.cycle-carousel .cycle-item { flex: 0 0 calc((100% - 2*16px - 2*44px)/3); scroll-snap-align: start; }
.cycle-carousel .cycle-item a { display: block; height: 100%; }
.cycle-carousel .toc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 9999px; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); background: white;
  display: inline-flex; align-items: center; justify-content: center;
}
.cycle-carousel .toc-nav.prev { left: 4px; }
.cycle-carousel .toc-nav.next { right: 4px; }

/* Mobile: 1 per view */
@media (max-width: 768px) {
  .cycle-carousel .cycle-track { padding: 4px 40px; }
  .cycle-carousel .cycle-item { flex-basis: calc(100% - 2*40px); }
}

/* === Cycle pages: smooth carousel === */
.cycle-carousel { position: relative; max-width: 1100px; margin: 12px auto 0; }
.cycle-carousel .cycle-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 44px;
  scroll-behavior: smooth;
}
.cycle-carousel .cycle-item { flex: 0 0 calc((100% - 2*16px - 2*44px)/3); scroll-snap-align: start; }
.cycle-carousel .cycle-item a { display: block; height: 100%; }
.cycle-carousel .toc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 9999px; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); background: white;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 10;
}
.cycle-carousel .toc-nav.prev { left: 4px; }
.cycle-carousel .toc-nav.next { right: 4px; }
@media (max-width: 768px) {
  .cycle-carousel .cycle-track { padding: 4px 40px; }
  .cycle-carousel .cycle-item { flex-basis: calc(100% - 2*40px); }
}

/* === Cycle pages: smooth carousel (3-up desktop, 1-up mobile) === */
.cycle-carousel { position: relative; max-width: 1100px; margin: 12px auto 0; }
.cycle-carousel .cycle-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 44px;  /* room for nav buttons */
  scroll-behavior: smooth;
}
.cycle-carousel .cycle-item { flex: 0 0 calc((100% - 2*16px - 2*44px)/3); scroll-snap-align: start; }
.cycle-carousel .cycle-item a { display: block; height: 100%; }
.cycle-carousel .toc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 9999px; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); background: white;
  display: inline-flex; align-items: center; justify-content: center;
}
.cycle-carousel .toc-nav.prev { left: 4px; }
.cycle-carousel .toc-nav.next { right: 4px; }

@media (max-width: 768px) {
  .cycle-carousel .cycle-track { padding: 4px 40px; }
  .cycle-carousel .cycle-item { flex-basis: calc(100% - 2*40px); }
}

/* === Cards with top image and overlay title === */
a.card{ display:flex; flex-direction:column; overflow:hidden; }
a.card .card-media{
  position:relative; background-size:cover; background-position:center;
  min-height: 120px;
}
@media (max-width: 768px){
  a.card .card-media{ min-height: 140px; }
}
a.card .card-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%);
}
a.card .card-media-title{
  position:absolute; left:12px; right:12px; bottom:10px; z-index:1;
  color:#fff; font-weight:800; line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,0.6);
  font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.25rem);
}
a.card .card-body{ padding: 10px 12px; background:#fff; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); white-space:nowrap; border:0; }

/* === Ensure whole cards fit: 3 per view on desktop, 1 on mobile === */
.toc .carousel-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding: 4px 44px; scroll-behavior:smooth;
}
.toc .carousel-track > li{ flex: 0 0 calc((100% - 2*16px - 2*44px)/3); scroll-snap-align: start; }

/* Hide overflow and avoid partial clipping by rounding pixel math */
@supports (scroll-snap-type: x mandatory){
  .toc .carousel-track, .cycle-carousel .cycle-track{
    scrollbar-width: thin;
  }
}

/* Tight box model so borders/padding don't break calc() */
.toc .carousel-track > li > a.card,
.cycle-carousel .cycle-item > a.card{ box-sizing: border-box; }

/* On narrower screens, 1 per view */
@media (max-width: 900px){
  .toc .carousel-track{ padding: 4px 40px; }
  .toc .carousel-track > li{ flex-basis: calc(100% - 2*40px); }
}

/* === Article breadcrumb & navigation === */
.article-breadcrumb a.btn{
  display:inline-block;margin-right:10px;
  background:#fff;border:1px solid #cfe6e9;padding:8px 14px;border-radius:999px;
  font-weight:600;color:#0b5e63;text-decoration:none;
}
.article-breadcrumb a.btn:hover{background:#19e5d9;color:#fff;}
.article-nav a.btn{
  background:#19e5d9;color:#fff;padding:10px 16px;border-radius:12px;
  font-weight:700;text-decoration:none;
}
.article-nav a.btn:hover{filter:brightness(1.08);}

/* === Article hero with OG background === */
.article-hero{ position:relative; border-radius:22px; overflow:hidden; margin:10px auto 18px; max-width:1100px; }
.article-hero .hero-wrap{ position:relative; width:100%; height: clamp(220px, 38vw, 380px); background-size:cover; background-position:center; }
.article-hero .hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.40) 100%); }
.article-hero .hero-title{ position:absolute; left:6%; right:6%; bottom:10%; color:#fff; text-align:left; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.article-hero .hero-title .l1{ display:block; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); font-weight:800; line-height:1.12; }

/* Remove legacy banner SVG ('patyczak') if left anywhere */
.article-hero svg, .article-hero .boundary{ display:none !important; }

/* Constrain main container spacing after hero */
main.container{ margin-top: 0; }

/* === Article crumbs & CTA row (subtle) === */
.crumb{max-width:1100px;margin:10px auto 0;padding:0 12px;display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #cfe6e9;border-radius:9999px;background:#fff;text-decoration:none;font-weight:700;color:#0f5a63}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-ghost{padding:10px 14px;border:1px solid #cfe6e9;border-radius:9999px;font-weight:600;color:#0f5a63;background:#fff}
.btn-primary{padding:10px 14px;border-radius:9999px;font-weight:700;background:#19e5d9;color:#0f5a63;border:1px solid #19e5d9}
.btn-primary:hover{filter:brightness(0.95)}
.btn-primary-outline{padding:10px 14px;border-radius:9999px;font-weight:700;border:1px solid #19e5d9;color:#0f5a63;background:#fff}
.post-cta-row{max-width:1100px;margin:24px auto 10px;padding:0 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* Ensure only ONE hero shows */
.article-hero + img, .article-hero + figure{ display:none !important; }

/* === Visible article H1 (intermediate, before new hero) === */
.post-title{
  max-width:1100px; margin:14px auto 10px; padding:0 12px;
  font-weight:800; line-height:1.2;
  font-size: clamp(22px, 1.2rem + 0.9vw, 34px);
}

/* === Narrow banner strip above H1 (stable) === */
.article-strip{ max-width:1100px; margin:8px auto 6px; padding:0 12px; }
.article-strip .article-strip-img{
  width:100%; height: 110px; border-radius: 16px;
  background-size: cover; background-position: center;
}
@media (max-width: 768px){
  .article-strip .article-strip-img{ height: 90px; }
}
.post-title{ margin-top: 16px; } /* a bit of "air" below the strip */

/* === Consistent left alignment across homepage sections === */
.page-container{ max-width:1100px; margin-left:auto; margin-right:auto; padding-left:12px; padding-right:12px; }

/* === HARD ALIGNMENT OVERRIDES === */
:root{ --page-max:1100px; --page-pad:12px; }
.container, header.container, main.container, footer.container, .page-container, .toc, .hero{
  max-width: var(--page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
  box-sizing: border-box !important;
}

.toc .toc-txt .l2{ opacity:0.85; }

/* === Sticky transparent site bar === */
:root{ --sitebar-h:56px; }
#sitebar{ position:fixed; top:0; left:0; right:0; height:var(--sitebar-h);
  background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border-bottom:1px solid rgba(0,0,0,0.06); z-index:99999; }
#sitebar .sitebar-inner{ max-width:1100px; margin:0 auto; padding:0 12px; height:100%; display:flex; align-items:center; }
#sitebar .brand{ font-weight:800; color:#0f5a63; text-decoration:none; letter-spacing:0.2px; }
body{ padding-top:var(--sitebar-h) !important; }

/* === Clean bottom navigation row on article pages === */
.post-nav-row{ max-width:1100px; margin:28px auto 20px; padding:0 12px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.post-nav-row .nav-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:9999px; text-decoration:none; font-weight:700; }
.post-nav-row .nav-ghost{ border:1px solid #cfe6e9; color:#0f5a63; background:#fff; }
.post-nav-row .nav-primary{ border:1px solid #19e5d9; background:#19e5d9; color:#0f5a63; }
.post-nav-row > div:nth-child(1){ justify-self:start; }
.post-nav-row > div:nth-child(2){ justify-self:center; }
.post-nav-row > div:nth-child(3){ justify-self:end; }

/* Sticky transparent sitebar — single source of truth */
:root{ --sitebar-h:56px; }
#sitebar{ position:fixed; top:0; left:0; right:0; height:var(--sitebar-h);
  background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border-bottom:1px solid rgba(0,0,0,0.06); z-index:99999; font-family: inherit; }
#sitebar .sitebar-inner{ max-width:1100px; margin:0 auto; padding:0 12px; height:100%; display:flex; align-items:center; }
#sitebar .brand{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#0f5a63; text-decoration:none; letter-spacing:0.2px; font-size: clamp(15px, 0.9rem, 18px); }
#sitebar .brand img{ display:block; width:18px; height:18px; }
body{ padding-top:var(--sitebar-h) !important; }

/* === ToC cards: separator + resilient layout === */
.toc .toc-txt{ display:flex; flex-direction:column; }
.toc .toc-txt .l1{ font-size: clamp(1.0rem, 0.92rem + 0.5vw, 1.25rem); line-height:1.2; overflow-wrap:anywhere; hyphens:auto; }
.toc .toc-txt .sep{ height:2px; margin:8px 0 6px; border-radius:2px; background:linear-gradient(90deg,#cfe6e9,rgba(207,230,233,.0)); }
.toc .toc-txt .l2{ color:#55767d; font-size:0.95rem; }
.toc .carousel-track > li > a.toc-link{ min-height: 320px; display:flex; flex-direction:column; }




.toc .sep{height:0.5px;background:#19e5d9;margin:6px 0;opacity:1}
.toc .l2{font-size:0.85rem;line-height:1.35;color:#55767d}


.toc-link{min-height:120px;align-items:flex-start}


.toc, .toc-link, .toc-list > li { overflow: visible; }
.toc-link{ align-items: start; height: auto; }
/* keep at least previous baseline height, but allow growth */
.toc-link{ min-height: 70px; }


.toc-link {
  min-height: 140px !important;
  height: auto !important;
  align-items: start !important;
  overflow: visible !important;
}
.toc, .toc-list > li { overflow: visible !important; }


.toc, .toc-list > li, .toc-link { overflow: visible; }
.toc-link { align-items: start; height: auto; min-height: 160px; } /* was 70px */
.toc .toc-txt { display:flex; flex-direction:column; }


}


.toc .thumb{ position: relative; }
.toc .thumb img{ display:block; width:100%; height:auto; border-radius:12px; }
.toc .badge-cycle{
  position:absolute; top:8px; left:8px;
  display:inline-block;
  padding:6px 10px;
  font-size:0.78rem;
  font-weight:800;
  color:#0c5660;
  background:rgba(255,255,255,.96);
  border:1px solid #19e5d9;
  border-radius:9999px;
  letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  pointer-events:none;
}


.nav-cta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-left:auto; }
.btn-contact, .btn-visit{ color:#FFFFFF; 
  display:inline-block; padding:8px 14px; border-radius:9999px; font-weight:800; text-decoration:none;
  border:1px solid #19e5d9; box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.btn-contact{ background:#ffffff; color:#0c5660; }
.btn-contact:hover{ filter:brightness(0.98); }
.btn-visit{ color:#FFFFFF;  background:#FF6D4A; color:#07373e; border-color:#FFFFFF; }
.btn-visit:hover{ filter:brightness(0.95); }
@media(max-width: 720px){
  .nav-cta{ width:100%; justify-content:flex-start; margin-top:8px; }
}



.related-links{ margin-top: 18px; padding: 12px 14px; background:#fff; border:1px solid #cfe6e9; border-radius:12px; }
.related-links .label{ font-weight:900; color:#0c5660; margin-bottom:8px; display:block; }
.related-links a{ display:inline-block; margin-right:10px; margin-bottom:6px; padding:6px 10px; border-radius:9999px; text-decoration:none;
  background:#effefe; border:1px solid #19e5d9; color:#0c5660; font-weight:700; }
.related-links a:hover{ filter:brightness(0.98); }


.toc-link{ height:auto; } /* base */
@media (max-width: 480px){ .toc-link{ height: 168px; } }     /* phone */
@media (min-width: 768px){ .toc-link{ height: 188px; } }     /* tablet */
@media (min-width: 1024px){ .toc-link{ height: 204px; } }    /* desktop */
.toc, .toc-list > li, .toc-link{ overflow: visible; } 
.toc .toc-txt{ display:flex; flex-direction:column; }


.related-links{ margin-top: 12px; padding: 8px 0; background:transparent; border:0; }
.related-links .label{ font-weight:900; color:#0c5660; margin-right:8px; display:inline-block; }
.related-links a{ display:inline-block; margin-right:10px; margin-bottom:4px; padding:6px 10px; border-radius:9999px; text-decoration:none;
  background:#effefe; border:1px solid #19e5d9; color:#0c5660; font-weight:700; }

/* cito: final related placement */
.related-links{ margin: 12px 0 10px; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.related-links .label{ margin-right:4px; font-weight:900; color:#0c5660; }
.related-links a{ display:inline-block; padding:6px 10px; border-radius:9999px; background:#effefe; border:1px solid #19e5d9; color:#0c5660; text-decoration:none; font-weight:700; }
.related-links a:hover{ filter:brightness(0.98); }

/* cito: toc arrows positioning */
.toc{ position: relative; }
.toc .toc-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:9999px; border:none; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18); background:#fff; display:inline-flex; align-items:center; justify-content:center;
}
.toc .toc-nav.prev{ left:6px; } .toc .toc-nav.next{ right:6px; }
@media (max-width: 900px){ .toc .carousel-track > li{ flex: 0 0 calc(100% - 2*40px); } }

/* cito: harden carousel */
.toc{ position: relative; }
.toc .carousel-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 44px; }
.toc .carousel-track > li{ flex:0 0 calc((100% - 2*16px - 2*44px)/3); scroll-snap-align:start; }
.toc .toc-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:9999px; border:none; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18); background:#fff; display:inline-flex; align-items:center; justify-content:center; }
.toc .toc-nav.prev{ left:6px; } .toc .toc-nav.next{ right:6px; }
@media (max-width: 900px){
  .toc .carousel-track{ padding:4px 40px; }
  .toc .carousel-track > li{ flex-basis: calc(100% - 2*40px); }
}
/* Cycle pages */
.cycle-carousel{ position:relative; max-width:1100px; margin:12px auto 0; }
.cycle-carousel .cycle-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 44px; scroll-behavior:smooth; }
.cycle-carousel .cycle-item{ flex:0 0 calc((100% - 2*16px - 2*44px)/3); scroll-snap-align:start; }
@media (max-width: 900px){
  .cycle-carousel .cycle-track{ padding:4px 40px; }
  .cycle-carousel .cycle-item{ flex-basis: calc(100% - 2*40px); }
}

/* cito: mobile hero fix */
@media (max-width: 720px){
  .hero .intro{ grid-template-columns: 1fr; align-items: start; }
  .hero .intro img{ width:140px; height:140px; margin: 0 0 8px 0; }
}

/* cito: card-media image as real <img> background-fallback */
.card-media{ position:relative; overflow:hidden; }
.card-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* cito: floating arrows + carousels hardened */
.toc, .cycle-carousel{ position:relative; }
.toc .carousel-track, .cycle-carousel .cycle-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 48px; -webkit-overflow-scrolling: touch;
}
.toc .carousel-track > li, .cycle-carousel .cycle-item{
  flex:0 0 calc((100% - 2*16px - 2*48px)/3);
  scroll-snap-align:start;
}
@media (max-width: 900px){
  .toc .carousel-track > li, .cycle-carousel .cycle-item{ flex-basis: calc(100% - 2*48px); }
}

/* Floating round arrows */
.toc .toc-nav, .cycle-carousel .toc-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:9999px; border:none; cursor:pointer;
  background:#ffffff; box-shadow:0 8px 22px rgba(0,0,0,.16);
  display:inline-flex; align-items:center; justify-content:center;
}
.toc .toc-nav.prev, .cycle-carousel .toc-nav.prev{ left:8px; }
.toc .toc-nav.next, .cycle-carousel .toc-nav.next{ right:8px; }
.toc .toc-nav:after, .cycle-carousel .toc-nav:after{
  content: attr(data-arrow); font-weight:900; font-size:20px; line-height:1; color:#0c5660;
}

/* Media sizing in cards so images are not gigantic */
.card, .article-card{ display:flex; flex-direction:column; }
.card-media{ position:relative; border-radius:12px; overflow:hidden; }
.card-media{ aspect-ratio: 16/9; }
@media (max-width: 720px){ .card-media{ aspect-ratio: 4/3; } }
.card-media > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

/* v0904 teaser italic tweak */
.cycle-carousel .card-body p:not(.pubdate){font-style:italic}


/* v0904-badges: number badges on cycle carousels */
.cycle-carousel .card .card-media{position:relative}
.cycle-carousel .card .card-badge{
  position:absolute; top:.5rem; left:.5rem;
  background:#19e5d9; color:#0a0a0a; font-weight:700; 
  border-radius:9999px; padding:.15rem .5rem; font-size:.9rem; 
  line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.15)
}
@media (max-width:600px){
  .cycle-carousel .card .card-badge{ top:.4rem; left:.4rem; font-size:.85rem; padding:.12rem .45rem; }
}



/* v0904-article-badge: number bubble next to H1 */
h1 .article-badge{
  display:inline-block; vertical-align:middle;
  background:#19e5d9; color:#0a0a0a; font-weight:700;
  border-radius:9999px; padding:.15rem .55rem; font-size:.9rem; line-height:1;
  margin-right:.5rem; box-shadow:0 1px 2px rgba(0,0,0,.12);
}
@media (max-width:600px){
  h1 .article-badge{ font-size:.85rem; padding:.12rem .5rem; margin-right:.4rem; }
}


/* === Desktop-only pill navigation for article pages === */
@media (min-width: 992px) {
  .article-nav{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    align-items:center;
    max-width:980px;
    margin:40px auto 64px;
  }
  .article-nav .pill{
    display:flex; align-items:center; justify-content:center;
    padding:14px 22px;
    border-radius:9999px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    text-decoration:none;
    font-family:Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    color: inherit;
  }
  .article-nav .pill:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
  .article-nav .pill:focus-visible{ outline:2px solid #19e5d9; outline-offset:2px; }
  .article-nav .pill.toc{
    background:#19e5d9; border-color:#19e5d9; color:#0b0f10;
  }
  .article-nav .prev{ justify-self:start; }
  .article-nav .toc{  justify-self:center; }
  .article-nav .next{ justify-self:end; }

  /* Hide any floating TOC button on desktop if present */
  .floating-toc, .toc-fab, .fab-toc, .btn-fab{ display:none !important; }
}
@media (max-width: 991.98px){
  .article-nav{ display:none; }
}
.article-nav:has(.prev):not(:has(.next)){ grid-template-columns:1fr 1fr; }
.article-nav:not(:has(.prev)):has(.next){ grid-template-columns:1fr 1fr; }
.article-nav:not(:has(.prev)):not(:has(.next)){ grid-template-columns:1fr; }
.article-nav:not(:has(.prev)) .prev{ display:none; }
.article-nav:not(:has(.next)) .next{ display:none; }


/* === Auto-number badges for carousel items (matches "Nowe" pill styling) === */
.toc .carousel-track { counter-reset: artnum; }
.toc .carousel-track > li { position: relative; counter-increment: artnum; }
.toc .carousel-track > li .toc-link { position: relative; }
.toc .carousel-track > li .toc-link::before {
  content: counter(artnum);
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--accent-cyan, #19e5d9);
  color: #fff !important; font-weight: 700; font-family: inherit; font-size: 16px; line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  z-index: 3;
}
@media (max-width: 520px) {
  .toc .carousel-track > li .toc-link::before { top: 8px; left: 8px; width: 28px; height: 28px; font-size: 14px; }
}