
.tudastar-hero{position:relative;overflow:hidden;padding:88px 0 68px;background:
 radial-gradient(circle at 80% 10%,rgba(31,102,112,.34),transparent 28%),
 linear-gradient(125deg,#071f2d,#0d3544);color:#fff}
.tudastar-hero::after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(203,166,99,.24);border-radius:50%;right:-130px;top:-255px}
.tudastar-hero h1{position:relative;z-index:2;margin:0 0 16px;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(54px,7vw,84px);font-weight:500;line-height:1}
.tudastar-hero>div>p:not(.section-kicker){position:relative;z-index:2;max-width:840px;color:rgba(255,255,255,.7);font-size:18px}
.audience-intro{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:32px}
.audience-chip{padding:14px 15px;border:1px solid rgba(203,166,99,.26);background:rgba(255,255,255,.045);border-radius:10px}
.audience-chip strong{display:block;color:var(--gold-soft);font-family:Georgia,serif;font-size:15px;font-weight:500}
.audience-chip span{display:block;margin-top:5px;color:rgba(255,255,255,.5);font-size:10px;line-height:1.45}
.library-tools{position:sticky;top:76px;z-index:20;padding:18px 0;background:rgba(251,250,247,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.library-search input{width:100%;min-height:50px;padding:0 16px;border:1px solid #ccd6d4;border-radius:10px;background:#fff;color:var(--ink);outline:none}
.library-search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(203,166,99,.12)}
.filter-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.filter-btn{padding:8px 11px;border:1px solid #d3dcda;border-radius:999px;background:#fff;color:#40545c;cursor:pointer;font-size:12px;font-weight:700}
.filter-btn.active,.filter-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.library-shell{padding:42px 0 88px}
.library-count{margin-bottom:17px;color:#728087;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.library-card{display:flex;flex-direction:column;min-height:305px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(6,31,44,.04);transition:.2s}
.library-card:hover{transform:translateY(-3px);border-color:rgba(203,166,99,.6);box-shadow:var(--shadow-sm)}
.card-meta{color:#916e3d;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.library-card h2{font-family:Georgia,"Times New Roman",serif;font-size:25px;font-weight:500;line-height:1.14;margin:14px 0 11px}
.library-card p{color:var(--text);font-size:13px}
.library-card a{margin-top:auto;color:#8d6836;text-decoration:none;font-size:13px;font-weight:800}
.fiction-badge{display:inline-flex;width:max-content;margin-bottom:10px;padding:5px 8px;border:1px solid #e0c99e;border-radius:999px;background:#fbf5e9;color:#7b5a2d;font-size:9px;font-weight:800;letter-spacing:.08em}
.no-results{display:none;padding:40px;border:1px dashed #bdc8c6;text-align:center;color:#708087}

/* Article */
.article-hero{position:relative;overflow:hidden;padding:88px 0 64px;background:
 radial-gradient(circle at 82% 15%,rgba(31,102,112,.32),transparent 27%),
 linear-gradient(125deg,#071f2d,#0c3342);color:#fff}
.article-hero::after{content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(203,166,99,.22);border-radius:50%;right:-110px;top:-250px}
.article-wrap{position:relative;z-index:2;max-width:950px}
.article-badges{display:flex;flex-wrap:wrap;gap:7px}
.article-badges span{padding:6px 9px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:rgba(255,255,255,.68);font-size:10px;font-weight:700}
.article-hero h1{max-width:1050px;margin:18px 0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(43px,6vw,72px);font-weight:500;line-height:1.04}
.article-lead{max-width:900px;color:rgba(255,255,255,.72);font-size:18px;line-height:1.7}
.article-byline{margin-top:23px;color:rgba(255,255,255,.45);font-size:11px}
.article-layout{max-width:930px;padding-top:54px;padding-bottom:90px}
.article-main{font-size:18px;line-height:1.85;color:#314a55}
.article-section{margin-bottom:42px}
.article-section h2,.expert-note h2,.sources-box h2{font-family:Georgia,"Times New Roman",serif;font-size:34px;font-weight:500;line-height:1.15;margin:0 0 14px;color:var(--ink)}
.article-section p{margin:0 0 15px}
.article-section ul{padding-left:22px}
.expert-note,.sources-box{margin:38px 0;padding:27px;border-radius:18px}
.expert-note{background:#edf3f2;border-left:3px solid var(--petrol-2)}
.sources-box{background:#f7f2e9;border:1px solid #e7ddcb}
.sources-box a{color:#17606b;overflow-wrap:anywhere}
.source-note{font-size:12px;color:#718086}
.article-cta{display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center;margin-top:42px;padding:28px;background:var(--navy);color:#fff;border-radius:22px 5px 22px 5px}
.article-cta strong{font-family:Georgia,serif;font-size:21px;font-weight:500}
.article-cta p{margin:6px 0 0;color:rgba(255,255,255,.58);font-size:13px}
.back-link{margin-top:28px}
.back-link a{color:#8d6836;text-decoration:none;font-weight:800}

@media(max-width:1000px){
 .audience-intro{grid-template-columns:1fr 1fr}
 .library-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .tudastar-hero{padding:64px 0 50px}
 .audience-intro{grid-template-columns:1fr}
 .library-tools{position:relative;top:auto}
 .library-grid{grid-template-columns:1fr}
 .library-card{min-height:auto}
 .article-hero{padding:64px 0 48px}
 .article-main{font-size:17px}
 .article-section h2,.expert-note h2,.sources-box h2{font-size:29px}
 .article-cta{grid-template-columns:1fr}
}


/* Stabil Tudástár-szűrés */
.library-card.is-filtered-out{
  display:none !important;
}
.filter-group-label{
  margin-top:14px;
  margin-bottom:7px;
  color:#6f7d82;
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.theme-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.theme-filter-btn{
  padding:8px 11px;
  border:1px solid #d9c9aa;
  border-radius:999px;
  background:#fffaf1;
  color:#6e542f;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.theme-filter-btn.active,
.theme-filter-btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#12232b;
}


/* Felső célcsoport-kártyák: valódi szűrőgombok */
.audience-filter-wrap{
  position:relative;
  z-index:2;
  margin-top:30px;
}
.audience-reset{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:9px 13px;
  border:1px solid rgba(203,166,99,.45);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--gold-soft);
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:800;
  transition:.18s ease;
}
.audience-reset:hover,
.audience-reset.active{
  background:var(--gold);
  color:#12232b;
  border-color:var(--gold);
}
.audience-intro{
  margin-top:0;
}
button.audience-chip{
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
button.audience-chip:hover{
  transform:translateY(-2px);
  border-color:rgba(203,166,99,.72);
  background:rgba(255,255,255,.085);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
button.audience-chip.active{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(203,166,99,.20),rgba(255,255,255,.08));
  box-shadow:0 0 0 2px rgba(203,166,99,.12),0 14px 30px rgba(0,0,0,.12);
}
button.audience-chip.active strong{
  color:#fff;
}
button.audience-chip:focus-visible,
.audience-reset:focus-visible{
  outline:3px solid rgba(234,215,175,.65);
  outline-offset:3px;
}
.chip-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:20px;
  margin-left:5px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(203,166,99,.16);
  color:var(--gold-soft);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:10px;
  font-weight:800;
}
.audience-chip.active .chip-count,
.audience-reset.active .chip-count,
.audience-reset:hover .chip-count{
  background:rgba(7,31,45,.13);
  color:inherit;
}
.library-card.is-filtered-out{
  display:none !important;
}


/* 8 felső kategóriagomb: 2 sor × 4 oszlop asztali nézetben */
.audience-intro{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
@media(max-width:1000px){
  .audience-intro{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:700px){
  .audience-intro{
    grid-template-columns:1fr !important;
  }
}

/* 2026-08-26 forrásalapú szakmai újraellenőrzés */
.professional-audit{
  margin:42px 0;
  padding:28px;
  border:1px solid rgba(203,166,99,.42);
  border-radius:18px;
  background:linear-gradient(145deg,#fffaf0,#f7f3ea);
}
.professional-audit>h2{
  margin:0 0 20px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  font-weight:500;
  color:var(--ink);
}
.audit-point{
  padding:17px 0;
  border-top:1px solid rgba(7,31,45,.10);
}
.audit-point:first-of-type{border-top:0;padding-top:0}
.audit-point:last-child{padding-bottom:0}
.audit-point h3{
  margin:0 0 7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:500;
  color:#6f5129;
}
.audit-point p{margin:0;color:#425963}


/* =========================================================
   TUDÁSTÁR MOBIL OLVASÁSI NÉZET – 2026-08-27
   ========================================================= */
@media(max-width:700px){

  .tudastar-hero{
    padding:50px 0 42px;
  }
  .tudastar-hero h1{
    font-size:clamp(42px,12vw,54px);
    line-height:1.02;
  }
  .tudastar-hero>div>p:not(.section-kicker){
    font-size:15.5px;
    line-height:1.65;
  }

  /* 8 célcsoport: mobilon kompakt 2 oszlop */
  .audience-filter-wrap{
    margin-top:24px;
  }
  .audience-intro{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px;
  }
  button.audience-chip{
    min-height:104px;
    padding:12px;
    border-radius:12px;
  }
  .audience-chip strong{
    font-size:14px;
    line-height:1.2;
  }
  .audience-chip span{
    font-size:9.5px;
    line-height:1.35;
  }

  /* Keresés és további szűrők: ne foglalják el a teljes képernyőt */
  .library-tools{
    position:relative;
    top:auto;
    padding:14px 0 12px;
    background:#f7f3ec;
    border-top:1px solid #ded6c9;
    border-bottom:1px solid #ded6c9;
  }
  .library-search input{
    min-height:48px;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(5,28,41,.035);
  }
  .filter-row,
  .theme-filter-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:1px 1px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filter-row::-webkit-scrollbar,
  .theme-filter-row::-webkit-scrollbar{
    display:none;
  }
  .filter-btn,
  .theme-filter-btn{
    flex:0 0 auto;
    scroll-snap-align:start;
    white-space:nowrap;
  }

  .library-shell{
    padding:28px 0 60px;
    background:#f2eee7;
  }
  .library-count{
    margin-bottom:13px;
  }
  .library-grid{
    gap:11px;
  }
  .library-card{
    min-height:0;
    padding:20px 18px;
    border-radius:15px;
    box-shadow:0 7px 22px rgba(5,28,41,.045);
  }
  .library-card h2{
    margin:10px 0 9px;
    font-size:22px;
    line-height:1.16;
  }
  .library-card p{
    font-size:12.5px;
    line-height:1.6;
  }

  /* Cikk fejléc */
  .article-hero{
    padding:50px 0 40px;
  }
  .article-badges{
    gap:5px;
  }
  .article-badges span{
    padding:5px 8px;
    font-size:9px;
  }
  .article-hero h1{
    margin:15px 0 14px;
    font-size:clamp(35px,10.5vw,46px);
    line-height:1.07;
    letter-spacing:-.025em;
  }
  .article-lead{
    font-size:15.5px;
    line-height:1.68;
  }
  .article-byline{
    margin-top:18px;
    line-height:1.55;
  }

  /* A korábbi nagy összefüggő fehér oldal helyett elkülönülő olvasókártyák */
  .article-layout{
    max-width:none;
    padding-top:22px;
    padding-bottom:54px;
  }
  .article-main{
    font-size:16.5px;
    line-height:1.75;
    color:#314a55;
  }
  .article-section{
    position:relative;
    margin:0 0 13px;
    padding:22px 18px 20px;
    border:1px solid #dedfd9;
    border-radius:15px;
    background:#fff;
    box-shadow:0 6px 20px rgba(5,28,41,.045);
    overflow:hidden;
  }
  .article-section::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:52px;
    height:3px;
    background:var(--gold);
  }
  .article-section h2{
    margin:0 0 12px;
    font-size:25px;
    line-height:1.16;
  }
  .article-section p,
  .article-section>div{
    margin:0;
  }
  .article-section ul,
  .article-section ol{
    margin:12px 0 0;
    padding-left:20px;
  }
  .article-section li+li{
    margin-top:7px;
  }

  .professional-audit,
  .expert-note,
  .sources-box{
    margin:13px 0;
    padding:21px 18px;
    border-radius:15px;
    box-shadow:0 6px 20px rgba(5,28,41,.04);
  }
  .professional-audit{
    background:linear-gradient(145deg,#fffaf0,#f5eee2);
  }
  .professional-audit>h2,
  .expert-note h2,
  .sources-box h2{
    font-size:25px;
    line-height:1.16;
    margin-bottom:13px;
  }
  .audit-point{
    padding:14px 0;
  }
  .audit-point h3{
    font-size:18px;
    line-height:1.24;
  }
  .sources-box ul{
    padding-left:18px;
  }
  .sources-box li+li{
    margin-top:8px;
  }

  .article-cta{
    gap:17px;
    margin-top:16px;
    padding:22px 18px;
    border-radius:17px 5px 17px 5px;
  }
  .article-cta strong{
    font-size:20px;
    line-height:1.25;
  }
  .back-link{
    margin-top:18px;
    padding:0 4px;
  }
}

@media(max-width:360px){
  .audience-intro{
    grid-template-columns:1fr !important;
  }
}
