/* ============================================================
   layout-k/style.css — Dark Hero (AI Blog Dark Theme)
   Whole-site dark background, high-contrast accent glow.
   All colors via var(--clr-*); no hardcoded hex except #fff / rgba
   ============================================================ */

/* ── Override body to full dark ─────────────────────────────── */
body {
  background: var(--clr-bg-dark) !important;
  color: var(--clr-text-inv);
}

/* ── Header: dark + accent bottom border ─────────────────────── */
.layout-k .site-header,
body.layout-k .site-header {
  background: var(--clr-bg-dark);
  border-bottom: 3px solid var(--clr-accent);
  box-shadow: 0 2px 24px rgba(0,0,0,.45);
}

/* ── HERO ────────────────────────────────────────────────────── */
.layout-k-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--clr-bg-dark);
  overflow: hidden;
}

.layout-k-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 40%,
    var(--clr-accent-glow, rgba(240,180,41,.18)) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* Secondary accent orb */
.layout-k-hero-glow::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--clr-accent-glow, rgba(240,180,41,.09)) 0%,
    transparent 65%
  );
  top: -120px;
  right: -100px;
  pointer-events: none;
}

.layout-k-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: var(--space-16, 64px) var(--space-5, 20px);
}

.layout-k-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-4, 16px);
  background: rgba(240,180,41,.12);
  border: 1px solid var(--clr-accent);
  border-radius: var(--radius-full, 9999px);
  padding: 4px 14px;
}

.layout-k-hero-title {
  font-size: clamp(36px, 6vw, 72px);
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif);
  font-weight: 900;
  color: var(--clr-text-inv);
  line-height: 1.08;
  margin-bottom: var(--space-5, 20px);
  letter-spacing: -.02em;
}

.layout-k-hero-title .k-accent {
  color: var(--clr-accent);
}

.layout-k-hero-sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--clr-text-inv-muted);
  line-height: 1.65;
  margin-bottom: var(--space-8, 32px);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.layout-k-hero-actions {
  display: flex;
  gap: var(--space-4, 16px);
  justify-content: center;
  flex-wrap: wrap;
}

.layout-k-hero-meta {
  margin-top: var(--space-8, 32px);
  font-size: 12px;
  color: var(--clr-text-inv-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
}

/* ── TAG BAR ─────────────────────────────────────────────────── */
.layout-k-tag-bar {
  background: var(--clr-bg-dark);
  border-bottom: 1px solid var(--clr-border-dark);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 58px;
  z-index: 100;
}
.layout-k-tag-bar::-webkit-scrollbar { display: none; }

.layout-k-tag-bar-inner {
  max-width: var(--container, 1160px);
  margin: 0 auto;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  white-space: nowrap;
}

.layout-k-tag-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--radius-full, 9999px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid var(--clr-border-dark);
  color: var(--clr-text-inv-muted);
  background: transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
  text-decoration: none;
}
.layout-k-tag-btn:hover,
.layout-k-tag-btn.active {
  color: var(--clr-accent);
  border-color: var(--clr-accent);
  background: rgba(240,180,41,.08);
}

/* ── ARTICLES SECTION ────────────────────────────────────────── */
.layout-k-articles-section {
  padding: var(--space-12, 48px) 0;
}

.layout-k-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8, 32px);
}

.layout-k-section-title {
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: var(--clr-text-inv);
  letter-spacing: -.01em;
}
.layout-k-section-title .accent { color: var(--clr-accent); }

/* ── CARD GRID (3-col dark cards) ────────────────────────────── */
.layout-k-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5, 20px);
}
@media (min-width: 640px) {
  .layout-k-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .layout-k-grid { grid-template-columns: repeat(3, 1fr); }
}

.layout-k-card {
  background: var(--clr-bg-dark2, #1a1d24);
  border: 1px solid var(--clr-border-dark);
  border-top: 3px solid var(--clr-accent);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.layout-k-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px var(--clr-accent);
}

.layout-k-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--clr-bg-dark);
  display: block;
}

.layout-k-card-body {
  padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-5, 20px);
}

.layout-k-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}

.layout-k-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--clr-text-inv);
  margin-bottom: var(--space-2, 8px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
.layout-k-card-title:hover { color: var(--clr-accent); }

.layout-k-card-excerpt {
  font-size: 13px;
  color: var(--clr-text-inv-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-3, 12px);
}

.layout-k-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--clr-text-inv-muted);
  border-top: 1px solid var(--clr-border-dark);
  padding-top: var(--space-3, 12px);
  margin-top: var(--space-3, 12px);
}

/* ── MORE ARTICLES LINK ──────────────────────────────────────── */
.layout-k-more {
  text-align: center;
  margin-top: var(--space-10, 40px);
}

/* ── CTA BANNER (dark with glow) ─────────────────────────────── */
.layout-k-cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--clr-bg-dark);
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-lg, 20px);
  padding: var(--space-12, 48px) var(--space-8, 32px);
  text-align: center;
  margin: var(--space-8, 32px) 0;
}
.layout-k-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 80% at 50% 50%,
    var(--clr-accent-glow, rgba(240,180,41,.15)) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.layout-k-cta-banner h2 {
  position: relative;
  font-family: var(--font-heading, 'Barlow Condensed', sans-serif);
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 900;
  color: var(--clr-text-inv);
  margin-bottom: var(--space-4, 16px);
}
.layout-k-cta-banner p {
  position: relative;
  font-size: 16px;
  color: var(--clr-text-inv-muted);
  margin-bottom: var(--space-6, 24px);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
.layout-k-cta-banner .btn {
  position: relative;
}

/* ── ARTICLE PAGE LAYOUT ─────────────────────────────────────── */
.layout-k-article {
  padding: var(--space-10, 40px) 0;
}

.layout-k-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8, 32px);
}
@media (min-width: 900px) {
  .layout-k-article-grid {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
}

/* Dark article container */
.layout-k-article-main {
  background: var(--clr-bg-dark2, #1a1d24);
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-lg, 20px);
  padding: var(--space-8, 32px);
}

/* Override article-body colors for dark bg */
.layout-k-article-main .article-body {
  color: var(--clr-text-inv);
}
.layout-k-article-main .article-body h2,
.layout-k-article-main .article-body h3 {
  color: var(--clr-text-inv);
}
.layout-k-article-main .article-body p { color: var(--clr-text-inv-muted); }
.layout-k-article-main .article-body blockquote {
  background: rgba(255,255,255,.04);
  color: var(--clr-text-inv-muted);
}
.layout-k-article-main .article-lead {
  color: var(--clr-text-inv);
  border-bottom-color: var(--clr-border-dark);
}

/* Dark sidebar */
.layout-k-sidebar-widget {
  background: var(--clr-bg-dark2, #1a1d24);
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-4, 16px);
}
.layout-k-sidebar-widget-title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--clr-accent);
  margin-bottom: var(--space-4, 16px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--clr-border-dark);
}

/* Dark breadcrumb */
.layout-k-article-main .breadcrumb { color: var(--clr-text-inv-muted); }
.layout-k-article-main .breadcrumb a { color: var(--clr-text-inv-muted); }
.layout-k-article-main .breadcrumb a:hover { color: var(--clr-accent); }

/* Dark author bio card */
.layout-k-article-main .author-bio-card {
  background: rgba(255,255,255,.04);
  border-color: var(--clr-border-dark);
}
.layout-k-article-main .author-bio-name { color: var(--clr-text-inv); }

/* Dark FAQ */
.layout-k-article-main .faq-item { border-color: var(--clr-border-dark); }
.layout-k-article-main .faq-question {
  background: rgba(255,255,255,.04);
  color: var(--clr-text-inv);
}
.layout-k-article-main .faq-answer { color: var(--clr-text-inv-muted); }

/* Dark QA box */
.layout-k-article-main .qa-box {
  background: rgba(240,180,41,.06);
}

/* Dark related cards */
.layout-k-article-main .rel-card {
  background: rgba(255,255,255,.04);
  border-color: var(--clr-border-dark);
}
.layout-k-article-main .rel-title { color: var(--clr-text-inv); }

/* ── SECTION utility ─────────────────────────────────────────── */
.layout-k-section {
  padding: var(--space-12, 48px) 0;
}

/* ── FOOTER override (already dark in base) ──────────────────── */
.layout-k-footer-sep {
  border-top: 1px solid var(--clr-border-dark);
  margin-top: 0;
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 640px) {
  .layout-k-hero { min-height: 420px; }
  .layout-k-hero-content { padding: var(--space-12, 48px) var(--space-4, 16px); }
  .layout-k-article-main { padding: var(--space-5, 20px); border-radius: var(--radius-md, 12px); }
}

/* ── prefers-color-scheme: light fallback ────────────────────── */
/* Hero stays dark by design; content areas switch to light.      */
@media (prefers-color-scheme: light) {
  body { background: var(--clr-bg) !important; color: var(--clr-text); }

  .layout-k .site-header,
  body.layout-k .site-header {
    background: var(--clr-bg);
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
  }

  .layout-k-tag-bar { background: var(--clr-bg-alt); border-bottom-color: var(--clr-border); }
  .layout-k-tag-btn { border-color: var(--clr-border); color: var(--clr-text-muted); }
  .layout-k-tag-btn:hover, .layout-k-tag-btn.active {
    color: var(--clr-accent); border-color: var(--clr-accent); background: var(--clr-accent-faint);
  }

  .layout-k-section-title { color: var(--clr-text); }

  .layout-k-card {
    background: var(--clr-bg); border-color: var(--clr-border);
    box-shadow: var(--clr-shadow);
  }
  .layout-k-card:hover { box-shadow: var(--clr-shadow-md); }
  .layout-k-card-title { color: var(--clr-text); }
  .layout-k-card-excerpt { color: var(--clr-text-muted); }
  .layout-k-card-footer { color: var(--clr-text-muted); border-top-color: var(--clr-border); }
  .layout-k-card-img { background: var(--clr-bg-alt); }

  .layout-k-article-main {
    background: var(--clr-bg); border-color: var(--clr-border);
  }
  .layout-k-article-main .article-body { color: var(--clr-text); }
  .layout-k-article-main .article-body h2,
  .layout-k-article-main .article-body h3 { color: var(--clr-text); }
  .layout-k-article-main .article-body p { color: var(--clr-text-muted); }
  .layout-k-article-main .article-body blockquote {
    background: var(--clr-bg-alt); color: var(--clr-text-muted);
  }
  .layout-k-article-main .article-lead { color: var(--clr-text); border-bottom-color: var(--clr-border); }
  .layout-k-article-main .breadcrumb,
  .layout-k-article-main .breadcrumb a { color: var(--clr-text-muted); }
  .layout-k-article-main .author-bio-card {
    background: var(--clr-bg-alt); border-color: var(--clr-border);
  }
  .layout-k-article-main .author-bio-name { color: var(--clr-text); }
  .layout-k-article-main .faq-item { border-color: var(--clr-border); }
  .layout-k-article-main .faq-question { background: var(--clr-bg-alt); color: var(--clr-text); }
  .layout-k-article-main .faq-answer { color: var(--clr-text-muted); }
  .layout-k-article-main .rel-card { background: var(--clr-bg-alt); border-color: var(--clr-border); }
  .layout-k-article-main .rel-title { color: var(--clr-text); }

  .layout-k-sidebar-widget { background: var(--clr-bg-alt); border-color: var(--clr-border); }
  .layout-k-sidebar-widget-title { border-bottom-color: var(--clr-border); }
}