/* ============================================================
   EPDS.hu — Knowledge centre (Tudásközpont)
   Components for the Tudástár hub (§7) and pillar pages (§6).
   Extends styles.css; never overrides locked 1.1.0 tokens.
   ============================================================ */

/* ---- page top: breadcrumb + page head ---- */
.kc-top{padding:34px 0 0;}
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--faint);
}
.crumb a{color:var(--faint);}
.crumb a:hover{color:var(--accent-press);}
.crumb .sep{color:var(--line-strong);}
.crumb .here{color:var(--ink);}

.page-head{max-width:760px;padding:30px 0 0;}
.page-head h1{
  font-size:46px;line-height:1.07;font-weight:500;letter-spacing:-.018em;
  color:var(--navy);margin-top:16px;text-wrap:balance;
}
.page-head .sub{font-size:18.5px;color:var(--muted);margin-top:18px;text-wrap:pretty;}

/* ===========================================================
   HUB — search bar
   =========================================================== */
.kh-search{max-width:680px;margin:30px 0 4px;position:relative;}
.kh-search .ic{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--faint);pointer-events:none;
}
.kh-search input{
  width:100%;height:58px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:#fff;padding:0 18px 0 50px;font-family:inherit;font-size:16.5px;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.kh-search input::placeholder{color:#94A2AC;}
.kh-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.kh-search .hint{margin-top:10px;font-size:13px;color:var(--faint);}

/* ===========================================================
   HUB — "Kezdje itt" start cards (Build-1 pillars)
   =========================================================== */
.start-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.start-card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 20px;min-height:188px;transition:border-color .15s ease,transform .15s ease;
}
.start-card:hover{border-color:var(--line-strong);}
.start-card .sc-tag{
  font-family:var(--font-label);font-size:11px;letter-spacing:var(--label-tracking);
  color:var(--accent-text);text-transform:none;
}
.start-card h3{font-size:18px;font-weight:500;color:var(--navy);letter-spacing:-.01em;margin-top:13px;line-height:1.22;text-wrap:balance;}
.start-card p{font-size:13.5px;color:var(--muted);margin-top:9px;text-wrap:pretty;}
.start-card .go{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:500;color:var(--navy);
}
.start-card .go .arr{color:var(--accent);font-size:15px;transition:transform .15s ease;}
.start-card:hover .go .arr{transform:translateX(3px);}

/* ===========================================================
   HUB — "Témák" theme group cards
   =========================================================== */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.theme-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 22px;
}
.theme-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid var(--line);}
.theme-head .ic{
  width:34px;height:34px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--navy);background:#fff;
}
.theme-head .ic svg{width:18px;height:18px;}
.theme-head h3{font-size:16.5px;font-weight:500;color:var(--navy);letter-spacing:-.005em;}
.theme-links{display:flex;flex-direction:column;}
.theme-links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;font-size:15px;color:var(--ink);border-top:1px solid var(--line);
}
.theme-links a:first-child{border-top:none;}
.theme-links a .arr{color:var(--line-strong);font-size:15px;transition:transform .15s ease,color .15s ease;}
.theme-links a:hover{color:var(--accent-press);}
.theme-links a:hover .arr{color:var(--accent);transform:translateX(3px);}

/* ===========================================================
   HUB — Fogalomtár doorway band
   =========================================================== */
.glossary-band{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:var(--navy);border-radius:var(--radius);padding:34px 36px;color:#fff;
}
.glossary-band .gb-copy h3{font-size:23px;font-weight:500;letter-spacing:-.01em;color:#fff;}
.glossary-band .gb-copy p{font-size:15px;color:#A9BBC8;margin-top:8px;max-width:46ch;}
.glossary-band .gb-count{
  font-family:var(--font-label);font-size:12px;letter-spacing:var(--label-tracking);
  color:var(--accent);
}

/* ===========================================================
   HUB — Latest blog
   =========================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.blog-card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .15s ease;
}
.blog-card:hover{border-color:var(--line-strong);}
.blog-card .bc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.blog-card .bc-date{font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);color:var(--faint);}
.blog-card h3{font-size:16.5px;font-weight:500;color:var(--navy);line-height:1.3;margin-top:11px;text-wrap:pretty;}
.blog-card .go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--navy);}
.blog-card .go .arr{color:var(--accent);font-size:15px;transition:transform .15s ease;}
.blog-card:hover .go .arr{transform:translateX(3px);}

/* ===========================================================
   HUB / PILLAR — soft CTA band
   =========================================================== */
.soft-cta{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  padding:36px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.soft-cta h3{font-size:22px;font-weight:500;color:var(--navy);letter-spacing:-.01em;}
.soft-cta p{font-size:15px;color:var(--muted);margin-top:7px;max-width:48ch;}
.soft-cta .sc-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ===========================================================
   PILLAR — layout: centered reading column
   =========================================================== */
.pillar{padding:0 0 20px;}
.pillar-col{max-width:760px;margin:0 auto;}

/* meta row (E-E-A-T) */
.meta-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
}
.meta-tag{
  font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);
  color:var(--accent-text);border:1px solid var(--line-strong);border-radius:20px;padding:4px 11px;
}
.meta-row .mi{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--faint);}
.meta-row .mi .av{
  width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--line);
}
.meta-row .mi strong{color:var(--muted);font-weight:500;}

.pillar h1{
  font-size:44px;line-height:1.08;font-weight:500;letter-spacing:-.018em;
  color:var(--navy);margin-top:24px;text-wrap:balance;
}
.pillar .lead{font-size:19.5px;line-height:1.5;color:var(--ink);margin-top:22px;text-wrap:pretty;}

/* early CTA banner (commercial pillars) */
.cta-banner{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:30px;padding:20px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);background:var(--accent-tint);
}
.cta-banner p{font-size:15.5px;color:var(--ink);font-weight:500;}
.cta-banner .ct-track{font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);color:var(--accent-text);display:block;margin-top:4px;font-weight:400;}

/* table of contents */
.toc{
  margin-top:38px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);padding:22px 26px 24px;
}
.toc .toc-h{font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);color:var(--faint);margin-bottom:14px;}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:1px;}
.toc li{counter-increment:toc;}
.toc a{
  display:flex;gap:12px;align-items:baseline;padding:8px 0;font-size:15.5px;color:var(--ink);
  border-top:1px solid var(--line);
}
.toc li:first-child a{border-top:none;}
.toc a::before{
  content:counter(toc,decimal-leading-zero);font-family:var(--font-label);font-size:12px;
  color:var(--accent-text);letter-spacing:var(--label-tracking);flex-shrink:0;width:22px;
}
.toc a:hover{color:var(--accent-press);}

/* body prose */
.prose{margin-top:8px;}
.prose section{padding-top:42px;scroll-margin-top:90px;}
.prose h2{
  font-size:28px;font-weight:500;color:var(--navy);letter-spacing:-.013em;line-height:1.16;
  margin-bottom:16px;text-wrap:balance;
}
.prose h3{font-size:19px;font-weight:500;color:var(--navy);letter-spacing:-.008em;margin:26px 0 8px;}
.prose p{font-size:16.5px;line-height:1.62;color:var(--ink);margin-bottom:15px;text-wrap:pretty;}
.prose p + p{margin-top:0;}
.prose a{color:var(--accent-text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px;}
.prose a:hover{text-decoration-color:var(--accent);}
.prose strong{font-weight:500;color:var(--ink);}
.prose ul,.prose ol{margin:0 0 16px;padding-left:0;list-style:none;}
.prose ul li,.prose ol li{
  font-size:16.5px;line-height:1.58;color:var(--ink);padding-left:26px;position:relative;margin-bottom:11px;text-wrap:pretty;
}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:1.6px;background:var(--accent);}
.prose ol{counter-reset:li;}
.prose ol li{counter-increment:li;}
.prose ol li::before{
  content:counter(li);position:absolute;left:0;top:0;font-family:var(--font-label);
  font-size:12.5px;color:var(--accent-text);font-weight:500;letter-spacing:var(--label-tracking);
}
.prose .note{
  font-size:15.5px;color:var(--muted);border-left:3px solid var(--line-strong);
  padding:4px 0 4px 18px;margin:4px 0 18px;font-style:normal;
}

/* "A gyakorlatból" callout — highest-converting block, must stand out */
.field-note{
  margin:30px 0 8px;border:1px solid var(--navy);border-radius:var(--radius);
  overflow:hidden;background:#fff;
}
.field-note .fn-head{
  display:flex;align-items:center;gap:9px;background:var(--navy);color:#fff;
  padding:13px 24px;font-family:var(--font-label);font-size:12px;letter-spacing:var(--label-tracking);
}
.field-note .fn-head .dot{background:var(--accent);}
.field-note .fn-body{padding:22px 26px 24px;display:grid;gap:14px;}
.field-note dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;}
.field-note dt{
  font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);
  color:var(--accent-text);padding-top:2px;white-space:nowrap;
}
.field-note dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink);text-wrap:pretty;}
.field-note .fn-foot{font-size:13px;color:var(--faint);font-style:italic;border-top:1px solid var(--line);padding-top:13px;}

/* lead-magnet download card */
.lead-magnet{
  margin:34px 0 8px;display:flex;gap:22px;align-items:flex-start;
  border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);padding:26px 28px;
}
.lead-magnet .lm-ic{
  width:46px;height:46px;flex-shrink:0;border:1px solid var(--line-strong);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--accent-press);background:var(--accent-tint);
}
.lead-magnet .lm-ic svg{width:22px;height:22px;}
.lead-magnet .lm-tag{font-family:var(--font-label);font-size:11px;letter-spacing:var(--label-tracking);color:var(--faint);}
.lead-magnet h3{font-size:18px;font-weight:500;color:var(--navy);margin-top:6px;}
.lead-magnet p{font-size:14.5px;color:var(--muted);margin-top:8px;max-width:52ch;text-wrap:pretty;}
.lead-magnet .lm-form{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap;}
.lead-magnet .lm-form input{
  flex:1;min-width:200px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:0 14px;font-family:inherit;font-size:14.5px;color:var(--ink);
}
.lead-magnet .lm-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}

/* related links — two lists */
.related{margin:42px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-top:30px;border-top:1px solid var(--line);}
.related h4{font-family:var(--font-label);font-size:11.5px;letter-spacing:var(--label-tracking);color:var(--faint);margin-bottom:14px;}
.related .rel-list{display:flex;flex-wrap:wrap;gap:9px;}
.related .rel-list a{
  font-size:14px;color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:7px 14px;
  background:#fff;transition:border-color .15s ease,color .15s ease;
}
.related .rel-list a:hover{border-color:var(--accent);color:var(--accent-press);}

/* "Hogyan segítünk?" — three-track grid (reuses .tracks/.track from styles.css) */
.help-block{margin-top:48px;padding-top:46px;border-top:1px solid var(--line);}
.help-block .hb-head{margin-bottom:26px;}
.help-block .hb-head h2{font-size:26px;font-weight:500;color:var(--navy);letter-spacing:-.013em;}
.help-block .hb-head p{font-size:15.5px;color:var(--muted);margin-top:8px;}
.track.is-featured{border:2px solid var(--accent);}
.track .badge{
  font-family:var(--font-label);font-size:10.5px;letter-spacing:var(--label-tracking);
  color:var(--on-accent);background:var(--accent);border-radius:20px;padding:3px 10px;
}

/* FAQ */
.faq{margin-top:48px;padding-top:46px;border-top:1px solid var(--line);}
.faq h2{font-size:26px;font-weight:500;color:var(--navy);letter-spacing:-.013em;margin-bottom:8px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:17px;font-weight:500;color:var(--navy);text-wrap:pretty;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-item p{font-size:16px;line-height:1.6;color:var(--muted);padding:0 40px 22px 0;margin:0;text-wrap:pretty;}

/* in-flow tables (lead-magnet quick guides) */
.kc-table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:15px;}
.kc-table th,.kc-table td{text-align:left;padding:11px 14px;border:1px solid var(--line);vertical-align:top;color:var(--ink);}
.kc-table th{background:var(--bg);font-weight:500;color:var(--navy);font-size:13.5px;}
.kc-table tr:nth-child(even) td{background:#FCFDFD;}

/* ===========================================================
   HUB — START-CARD PHOTO BANDS
   The four "Kezdje itt" start cards carry a photographic header band.
   No colour-coding — the rest of §7 keeps the minimal white-card look.
   Each card maps its photo via data-cat; a neutral placeholder shows
   only if the image fails to load.
   =========================================================== */
.start-card{padding-top:0;overflow:hidden;}
.sc-photo{
  display:block;height:128px;margin:0 -22px 18px;
  background-color:#E7ECF0;                 /* neutral placeholder if the photo 404s */
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
.start-card[data-cat="doc"]    .sc-photo{background-image:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=900&q=70");}
.start-card[data-cat="survey"] .sc-photo{background-image:url("https://images.unsplash.com/photo-1566221857770-508d35ee6220?auto=format&fit=crop&w=900&q=70");}
.start-card[data-cat="risk"]   .sc-photo{background-image:url("https://images.unsplash.com/photo-1516937941344-00b4e0337589?auto=format&fit=crop&w=900&q=70");}
.start-card[data-cat="ops"]    .sc-photo{background-image:url("https://images.unsplash.com/photo-1678984239420-43cdc183bce6?auto=format&fit=crop&w=900&q=70");}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  .start-grid{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:1fr;}
  .page-head h1{font-size:38px;}
  .pillar h1{font-size:36px;}
}
@media (max-width:760px){
  .theme-grid{grid-template-columns:1fr;}
  .related{grid-template-columns:1fr;gap:24px;}
  .field-note dl{grid-template-columns:1fr;gap:4px 0;}
  .field-note dd{margin-bottom:8px;}
}
@media (max-width:560px){
  .start-grid{grid-template-columns:1fr;}
  .page-head h1{font-size:31px;}
  .pillar h1{font-size:29px;}
  .pillar .lead{font-size:17.5px;}
  .prose h2{font-size:24px;}
  .glossary-band,.soft-cta{padding:26px 24px;}
  .lead-magnet{flex-direction:column;gap:16px;}
  /* zone quick-table: let it scroll horizontally instead of forcing page overflow */
  .kc-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .kc-table th,.kc-table td{white-space:normal;min-width:84px;}
  .kc-table td:nth-child(3),.kc-table th:nth-child(3){min-width:150px;}
}