/* =========================================================
   BLOG TOKENS (category tints — used only for thumbnails/tags)
========================================================= */
:root{
  --sage:  #4f7062;
  --sage-light: #6c9481;
  --steel: #3d5872;
  --steel-light: #6f93ac;
}

/* =========================================================
   BLOG HERO
========================================================= */
.blog-hero{ padding-top:calc(var(--header-h) + 76px); padding-bottom:56px; position:relative; overflow:hidden; }
.blog-hero .hero-glow{
  position:absolute; top:-15%; left:50%; transform:translateX(-50%);
  width:820px; height:520px;
  background:radial-gradient(circle, rgba(242,212,137,.10), transparent 68%);
  z-index:0; pointer-events:none;
}
.blog-title{
  font-size:clamp(34px,4.6vw,54px); line-height:1.08; max-width:760px; margin-bottom:18px;
}
.blog-sub{ font-size:16px; color:var(--parchment-dim); max-width:560px; margin-bottom:40px; }

.blog-controls{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }

.blog-search{
  display:flex; align-items:center; gap:10px;
  background:rgba(244,238,224,.03); border:1px solid var(--surface-brd-soft);
  border-radius:100px; padding:12px 18px; min-width:240px; flex:1 1 260px; max-width:340px;
  transition:border-color .3s, box-shadow .3s;
}
.blog-search:focus-within{ border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(207,159,67,.14); }
.blog-search svg{ color:var(--parchment-faint); flex:none; }
.blog-search input{
  background:none; border:none; outline:none; color:var(--parchment); font-size:14px; width:100%; min-width:0;
}
.blog-search input::placeholder{ color:var(--parchment-faint); }

.blog-filters{
  position:relative; display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto;
  padding:5px; border:1px solid var(--surface-brd-soft); border-radius:100px;
  background:rgba(244,238,224,.02); -ms-overflow-style:none; scrollbar-width:none;
}
.blog-filters::-webkit-scrollbar{ display:none; }
.filter-pill{
  position:absolute; top:5px; left:0; height:calc(100% - 10px);
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  border-radius:100px; transition:transform .4s var(--ease), width .4s var(--ease);
  z-index:0;
}
.filter-btn{
  position:relative; z-index:1; white-space:nowrap; padding:9px 16px;
  font-size:13px; font-weight:600; border-radius:100px; color:var(--parchment-dim);
  transition:color .35s;
}
.filter-btn.active{ color:#221a09; }

/* =========================================================
   THUMBNAILS (category illustration, no stock photos)
========================================================= */
.thumb{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius-md);
  background:radial-gradient(circle at 30% 20%, var(--tint,var(--gold-2)) 0%, transparent 62%), var(--ink-soft);
}
.thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,9,8,.55) 100%);
}
.thumb-icon{ width:34%; max-width:96px; color:var(--tint-strong,var(--gold-1)); opacity:.6; position:relative; z-index:1; transition:transform .5s var(--ease); }
.blog-card:hover .thumb-icon, .blog-featured:hover .thumb-icon{ transform:scale(1.08) rotate(-4deg); }

.thumb-zycie{ --tint:rgba(242,212,137,.35); --tint-strong:var(--gold-1); }
.thumb-zdrowie{ --tint:rgba(111,148,129,.4); --tint-strong:var(--sage-light); }
.thumb-majatek{ --tint:rgba(168,72,63,.38); --tint-strong:var(--seal-light); }
.thumb-firmy{ --tint:rgba(111,147,172,.38); --tint-strong:var(--steel-light); }
.thumb-poradniki{ --tint:rgba(183,173,152,.3); --tint-strong:var(--parchment-dim); }

.blog-tag{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-1); border:1px solid var(--surface-brd); border-radius:100px; padding:4px 11px; margin-bottom:14px;
}
.blog-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--parchment-faint); margin-bottom:14px; }

/* =========================================================
   FEATURED ARTICLE
========================================================= */
.blog-featured-wrap{ padding-top:0; padding-bottom:20px; }
.blog-featured{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--surface-brd); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-2);
}
.blog-featured .thumb{ border-radius:0; aspect-ratio:auto; height:100%; min-height:280px; }
.blog-featured .thumb-icon{ max-width:130px; }
.featured-body{ padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }
.featured-body h2{ font-size:clamp(22px,2.4vw,30px); line-height:1.25; margin-bottom:14px; }
.featured-body p{ font-size:14.5px; color:var(--parchment-dim); margin-bottom:18px; }

/* =========================================================
   BLOG GRID / CARDS
========================================================= */
.blog-grid-section{ padding-top:20px; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card{
  display:flex; flex-direction:column;
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--surface-brd); border-radius:var(--radius-lg);
  overflow:hidden; transition:border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.blog-card:hover{ border-color:var(--gold-3); box-shadow:var(--shadow-2); transform:translateY(-4px); }
.blog-card .thumb{ border-radius:0; }
.blog-card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.blog-card-body h3{ font-size:17.5px; line-height:1.32; margin-bottom:12px; }
.blog-card-body p{ font-size:13.5px; color:var(--parchment-dim); margin-bottom:20px; flex:1; }

.blog-empty{ text-align:center; color:var(--parchment-faint); font-size:14px; padding:40px 0; }

/* =========================================================
   NEWSLETTER
========================================================= */
.newsletter-section{ padding-top:30px; }
.newsletter-card{
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
  background:linear-gradient(120deg,var(--surface),var(--surface-2));
  border:1px solid var(--surface-brd); border-radius:var(--radius-lg);
  padding:44px 48px; position:relative; overflow:hidden;
}
.newsletter-card::before{
  content:""; position:absolute; top:-40%; right:-10%; width:340px; height:340px;
  background:radial-gradient(circle, rgba(242,212,137,.12), transparent 70%); pointer-events:none;
}
.newsletter-copy h2{ font-size:clamp(22px,2.4vw,28px); margin:8px 0 10px; }
.newsletter-copy p{ font-size:14px; color:var(--parchment-dim); max-width:420px; }
.newsletter-form{ display:flex; gap:10px; position:relative; z-index:1; }
.newsletter-form input{
  flex:1; background:rgba(244,238,224,.04); border:1px solid var(--surface-brd-soft); border-radius:100px;
  padding:14px 20px; color:var(--parchment); font-size:14px; outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.newsletter-form input:focus{ border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(207,159,67,.14); }
.newsletter-form input::placeholder{ color:var(--parchment-faint); }
.newsletter-form .btn{ flex:none; }

/* =========================================================
   NAV BACK LINK (blog header)
========================================================= */
.nav-back{ display:flex; align-items:center; gap:7px; }
.nav-back svg{ transition:transform .3s var(--ease); }
.nav-back:hover svg{ transform:translateX(-3px); }
.main-nav a.active{ color:var(--gold-1); }
.main-nav a.active::after{ transform:scaleX(1); }

/* =========================================================
   ARTICLE READER MODAL
========================================================= */
.reader{
  position:fixed; inset:0; z-index:980;
  background:rgba(8,7,6,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.reader.open{ opacity:1; visibility:visible; }
.reader-progress{
  position:absolute; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold-3),var(--gold-1)); z-index:2;
  transition:width .1s linear;
}
.reader-scroll{ position:absolute; inset:0; overflow-y:auto; padding:70px 24px 100px; }
.reader-inner{
  max-width:680px; margin:0 auto; position:relative;
  transform:translateY(24px); opacity:0; transition:transform .5s var(--ease-soft) .05s, opacity .5s var(--ease-soft) .05s;
}
.reader.open .reader-inner{ transform:none; opacity:1; }
.reader-close{
  position:sticky; top:0; float:right; margin-bottom:10px;
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--surface-brd); color:var(--parchment);
  transition:border-color .3s, transform .3s var(--ease);
}
.reader-close:hover{ border-color:var(--gold-2); color:var(--gold-1); transform:rotate(90deg); }
#readerContent h1{ font-size:clamp(26px,4vw,40px); line-height:1.16; margin:6px 0 16px; clear:both; }
.reader-meta{ margin-bottom:30px; }
.reader-body p{ font-size:16px; line-height:1.85; color:var(--parchment-dim); margin-bottom:22px; }
.reader-cta{
  margin-top:40px; padding:28px; border-top:1px solid var(--surface-brd-soft);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.reader-cta p{ font-family:'Fraunces',serif; font-size:17px; color:var(--parchment); }

/* =========================================================
   TEAM PAGE (reuses .blog-hero + global .team-grid/.team-card)
========================================================= */
.team-page-hero{ padding-bottom:30px; }
.team-page-grid{ padding-top:10px; }
@media (max-width:980px){
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured .thumb{ min-height:200px; }
  .newsletter-card{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .blog-grid{ grid-template-columns:1fr; }
  .blog-controls{ flex-direction:column; align-items:stretch; }
  .blog-search{ max-width:none; flex:none; width:100%; height:auto; }
  .featured-body{ padding:30px 26px; }
  .newsletter-card{ padding:32px 26px; }
  .newsletter-form{ flex-direction:column; }
  .reader-scroll{ padding:64px 18px 80px; }
  .reader-cta{ flex-direction:column; align-items:flex-start; }
}