/* ============================================================
   WANDZILAK WEB DESIGN — CONTENT HUB
   Glossary · FAQ · Blog · Category landings · Posts · Media feed
   Builds on interior-shell.css design tokens. Load AFTER interior-shell.css.
   ============================================================ */

/* ---------- SHARED LAYOUT ---------- */
.ch-section {
  padding: clamp(48px, 7vw, 96px) var(--section-pad-x);
  position: relative;
}
.ch-wrap { max-width: var(--content-max); margin: 0 auto; }
.ch-wrap--narrow { max-width: 820px; }

.ch-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  max-width: 760px;
}
.ch-section + .ch-section { padding-top: 0; }

/* Generic prose block used inside posts + intros */
.ch-prose { color: rgba(255,255,255,0.66); font-size: 1.05rem; line-height: 1.8; }
.ch-prose > * + * { margin-top: 1.15em; }
.ch-prose h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--text-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em;
  margin-top: 2.2em;
}
.ch-prose h3 {
  font-family: var(--font-body); font-weight: 700; color: #fff;
  font-size: 1.25rem; margin-top: 1.8em;
}
.ch-prose a { color: var(--cyan-bright); text-decoration: none; border-bottom: 1px solid rgba(0,212,255,0.3); }
.ch-prose a:hover { border-bottom-color: var(--cyan-bright); }
.ch-prose strong { color: rgba(255,255,255,0.9); font-weight: 700; }
.ch-prose ul, .ch-prose ol { padding-left: 1.3em; }
.ch-prose li { margin-top: 0.5em; }
.ch-prose li::marker { color: var(--cyan-core); }
.ch-prose blockquote {
  border-left: 3px solid var(--cyan-core);
  padding: 0.4em 0 0.4em 1.2em; margin-left: 0;
  color: rgba(255,255,255,0.78); font-style: italic;
}
.ch-prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: rgba(0,180,255,0.1); color: #8fe3ff;
  padding: 0.15em 0.45em; border-radius: 5px;
}
.ch-prose pre {
  background: #060a16; border: 1px solid rgba(0,180,255,0.18);
  border-radius: 12px; padding: 18px 20px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.6;
  color: #cfe9ff;
}
.ch-prose pre code { background: none; padding: 0; color: inherit; }

/* ---------- ACCORDION (native <details>) ---------- */
.acc {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: var(--bg-card);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--hover-speed), box-shadow var(--hover-speed);
}
.acc[open] { border-color: rgba(0,180,255,0.35); box-shadow: 0 0 0 1px rgba(0,180,255,0.15), 0 18px 40px -24px rgba(0,180,255,0.5); }
.acc:hover { border-color: rgba(255,255,255,0.16); }
.acc[open]:hover { border-color: rgba(0,180,255,0.5); }

.acc__sum {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  font-weight: 600; color: #fff; font-size: 1.06rem; line-height: 1.4;
  user-select: none;
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: -2px; border-radius: 12px; }
.acc__q { flex: 1 1 auto; }
.acc__icon {
  flex: 0 0 auto; width: 24px; height: 24px; position: relative;
  transition: transform var(--hover-speed);
}
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px; background: var(--cyan-bright); border-radius: 2px;
  transform: translate(-50%, -50%); transition: opacity var(--hover-speed), transform var(--hover-speed);
}
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc__icon::after { opacity: 0; }
.acc[open] .acc__icon { transform: rotate(180deg); }

.acc__panel { overflow: hidden; }
.acc[open] .acc__panel { animation: acc-slide 0.34s var(--entrance-ease); }
@keyframes acc-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.acc__body {
  padding: 0 22px 22px;
  color: rgba(255,255,255,0.66); line-height: 1.75; font-size: 1rem;
}
.acc__body > * + * { margin-top: 0.9em; }
.acc__body a { color: var(--cyan-bright); text-decoration: none; border-bottom: 1px solid rgba(0,212,255,0.3); }
.acc__body a:hover { border-bottom-color: var(--cyan-bright); }
.acc__body strong { color: rgba(255,255,255,0.9); }
.acc__body code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: rgba(0,180,255,0.1); color: #8fe3ff; padding: 0.12em 0.4em; border-radius: 5px;
}
.acc__body ul, .acc__body ol { padding-left: 1.25em; }
.acc__body li { margin-top: 0.4em; }
.acc__body li::marker { color: var(--cyan-core); }

/* Amber + purple accents for accordions (per topic group) */
.acc--amber[open] { border-color: rgba(255,180,60,0.4); box-shadow: 0 0 0 1px rgba(255,180,60,0.15), 0 18px 40px -24px rgba(255,180,60,0.5); }
.acc--amber .acc__icon::before, .acc--amber .acc__icon::after { background: var(--amber-bright); }
.acc--purple[open] { border-color: rgba(180,100,255,0.4); box-shadow: 0 0 0 1px rgba(180,100,255,0.15), 0 18px 40px -24px rgba(180,100,255,0.5); }
.acc--purple .acc__icon::before, .acc--purple .acc__icon::after { background: var(--purple-core); }

/* ---------- TOOLBAR (search + filters) ---------- */
.ch-toolbar {
  position: sticky; top: 70px; z-index: 30;
  background: rgba(8,9,22,0.82); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 16px;
  padding: 16px; margin-bottom: 32px;
}
.ch-search {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 0 14px;
}
.ch-search:focus-within { border-color: var(--cyan-core); box-shadow: 0 0 0 3px var(--cyan-subtle); }
.ch-search svg { flex: 0 0 auto; width: 18px; height: 18px; color: rgba(255,255,255,0.4); }
.ch-search input {
  flex: 1 1 auto; background: none; border: 0; outline: none;
  color: #fff; font-family: var(--font-body); font-size: 1rem; padding: 13px 0;
}
.ch-search input::placeholder { color: rgba(255,255,255,0.35); }
.ch-count { font-size: 0.82rem; color: var(--text-tertiary); margin-top: 10px; padding-left: 4px; }

/* A-Z index */
.az-index { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.az-index a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07); transition: all var(--hover-speed);
}
.az-index a:hover { color: #fff; background: var(--cyan-subtle); border-color: var(--cyan-core); }
.az-index a.is-empty { opacity: 0.25; pointer-events: none; }

/* ---------- GLOSSARY ---------- */
.glossary-group { margin-bottom: 36px; scroll-margin-top: 200px; }
.glossary-letter {
  font-family: var(--font-display); font-weight: 700; color: var(--cyan-bright);
  font-size: 2rem; margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,180,255,0.18);
}
.glossary-term .acc__sum { font-size: 1.1rem; }
.glossary-term .ch-tag {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--amber-bright); border: 1px solid rgba(255,180,60,0.3);
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; font-weight: 700;
}
.glossary-empty, .ch-noresults {
  display: none; text-align: center; padding: 48px 20px; color: var(--text-tertiary);
}
.ch-noresults.is-visible { display: block; }

/* ---------- CARD GRIDS (blog index, categories, related) ---------- */
.ch-grid { display: grid; gap: 22px; }
.ch-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ch-grid--2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.post-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--card-radius); padding: 26px;
  text-decoration: none; transition: transform var(--hover-speed), border-color var(--hover-speed), box-shadow var(--hover-speed);
  position: relative; overflow: hidden;
}
.post-card:hover { transform: translateY(-4px); border-color: rgba(0,180,255,0.4); box-shadow: 0 24px 50px -30px rgba(0,180,255,0.6); }
.post-card__cat {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--cyan-bright); margin-bottom: 12px;
}
.post-card__title {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px;
}
.post-card__excerpt { color: rgba(255,255,255,0.55); font-size: 0.96rem; line-height: 1.65; flex: 1 1 auto; }
.post-card__meta { margin-top: 18px; font-size: 0.8rem; color: var(--text-tertiary); display: flex; gap: 10px; align-items: center; }
.post-card__more { margin-top: 16px; color: var(--cyan-bright); font-weight: 600; font-size: 0.9rem; }
.post-card__more::after { content: " →"; }

/* category accent variants */
.post-card--amber:hover { border-color: rgba(255,180,60,0.45); box-shadow: 0 24px 50px -30px rgba(255,180,60,0.6); }
.post-card--amber .post-card__cat, .post-card--amber .post-card__more { color: var(--amber-bright); }
.post-card--purple:hover { border-color: rgba(180,100,255,0.45); box-shadow: 0 24px 50px -30px rgba(180,100,255,0.6); }
.post-card--purple .post-card__cat, .post-card--purple .post-card__more { color: var(--purple-core); }

/* Category hub tiles (blog index) */
.cat-tile {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(160deg, rgba(16,20,40,0.9), rgba(8,10,24,0.9));
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;
  padding: 28px; text-decoration: none; transition: all var(--hover-speed);
}
.cat-tile:hover { transform: translateY(-4px); border-color: rgba(0,180,255,0.4); }
.cat-tile__icon { font-size: 1.8rem; line-height: 1; }
.cat-tile__name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.4rem; }
.cat-tile__desc { color: rgba(255,255,255,0.55); font-size: 0.95rem; line-height: 1.6; }
.cat-tile__count { margin-top: auto; padding-top: 14px; color: var(--cyan-bright); font-size: 0.82rem; font-weight: 600; }

/* ---------- POST ARTICLE ---------- */
.post-head { max-width: 820px; margin: 0 auto; }
.post-meta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 0.85rem; color: var(--text-tertiary); margin-top: 18px; }
.post-meta-row .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }
.post-byline { display: flex; align-items: center; gap: 10px; }
.post-byline img { width: 34px; height: 34px; border-radius: 50%; }
.post-body { max-width: 820px; margin: 40px auto 0; }
.post-cta {
  max-width: 820px; margin: 56px auto 0; padding: 32px;
  background: linear-gradient(150deg, rgba(0,120,180,0.18), rgba(8,10,24,0.4));
  border: 1px solid rgba(0,180,255,0.3); border-radius: 18px; text-align: center;
}
.post-cta h3 { font-family: var(--font-display); color: #fff; font-size: 1.6rem; margin-bottom: 8px; }
.post-cta p { color: rgba(255,255,255,0.62); margin-bottom: 20px; }
.post-tags { max-width: 820px; margin: 36px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags .ch-tag2 {
  font-size: 0.78rem; color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
}
.post-tags .ch-tag2:hover { color: #fff; border-color: var(--cyan-core); }

/* ---------- MEDIA FEED ---------- */
.media-grid { columns: 3 300px; column-gap: 22px; }
.media-card {
  break-inside: avoid; margin-bottom: 22px;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 22px; transition: all var(--hover-speed);
  display: block; text-decoration: none;
}
.media-card:hover { transform: translateY(-3px); border-color: rgba(0,180,255,0.35); }
.media-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.media-card__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex: 0 0 auto;
}
.media-card__handle { font-weight: 700; color: #fff; font-size: 0.95rem; line-height: 1.2; }
.media-card__plat { font-size: 0.78rem; color: var(--text-tertiary); }
.media-card__text { color: rgba(255,255,255,0.72); font-size: 0.98rem; line-height: 1.6; }
.media-card__foot { margin-top: 14px; font-size: 0.78rem; color: var(--text-tertiary); display: flex; justify-content: space-between; align-items: center; }
.media-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; }
.plat-x       { background: rgba(255,255,255,0.08); color: #fff; }
.plat-linkedin{ background: rgba(10,102,194,0.18); color: #5aa9ff; }
.plat-facebook{ background: rgba(24,119,242,0.16); color: #6ea8ff; }
.plat-instagram{ background: rgba(214,41,118,0.16); color: #ff7ab0; }
.plat-youtube { background: rgba(255,0,0,0.14); color: #ff7373; }
.bg-x{background:#1d1f23}.bg-linkedin{background:#0a66c2}.bg-facebook{background:#1877f2}.bg-instagram{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}.bg-youtube{background:#ff0000}

.media-note {
  text-align: center; color: var(--text-tertiary); font-size: 0.88rem;
  margin-top: 36px; padding: 18px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px;
}

/* ---------- BACK LINK ---------- */
.ch-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-tertiary); text-decoration: none; font-size: 0.9rem; margin-bottom: 24px; }
.ch-back:hover { color: var(--cyan-bright); }
.ch-back::before { content: "←"; }

/* ---------- VISITED-LINK CONSISTENCY ----------
   interior-shell.css sets a global `a:visited{color:inherit!important}`, which
   would recolor visited inline links to the surrounding text color. Pin them
   back to their intended color so a link looks the same visited or not. */
.ch-prose a:visited, .acc__body a:visited { color: var(--cyan-bright) !important; }
.ch-back:visited { color: var(--text-tertiary) !important; }
.ch-back:hover, .ch-back:visited:hover { color: var(--cyan-bright) !important; }
.post-tags .ch-tag2:visited { color: rgba(255,255,255,0.6) !important; }
.az-index a:visited { color: rgba(255,255,255,0.6) !important; }
.post-card:visited, .cat-tile:visited, .media-card:visited { color: inherit; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 700px) {
  .ch-toolbar { top: 60px; }
  .media-grid { columns: 1; }
  .acc__sum { padding: 16px 18px; font-size: 1rem; }
  .acc__body { padding: 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .acc[open] .acc__panel { animation: none; }
  .post-card:hover, .cat-tile:hover, .media-card:hover { transform: none; }
}