/* ==========================================================
   TEACHIX — Category Page
   File: teachix-category.css | Astra child theme
   Matches the dark blue/purple design of teachix-home.css
   ========================================================== */

/* ----------------------------------------------------------
   CSS vars are declared in :root via teachix-home.css which
   loads on every page. This file reuses them directly.
   ---------------------------------------------------------- */

/* ============================
   BASE WRAPPER
   ============================ */
.tx-cat {
  background: var(--tx-bg);
  color: var(--tx-text);

  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin-top: -65px;
}
.tx-cat *, .tx-cat *::before, .tx-cat *::after { box-sizing: border-box; }
.tx-cat a { text-decoration: none; color: inherit; }

/* ============================
   CATEGORY HERO HEADER
   ============================ */
.tx-cat-hero {
  position: relative;
  padding: 110px 32px 64px;
  overflow: hidden;
  background: var(--tx-bg);
  border-bottom: 1px solid var(--tx-border);
}

/* Orbs — same blur technique as homepage hero */
.tx-cat-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
.tx-cat-hero__orb--1 {
  width: 420px;
  height: 420px;
  background: rgba(99, 102, 241, .13);
  top: -15%;
  left: -6%;
}
.tx-cat-hero__orb--2 {
  width: 300px;
  height: 300px;
  background: rgba(139, 92, 246, .09);
  bottom: -20%;
  right: 5%;
}

/* Grid background overlay */
.tx-cat-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, .03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 20% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 50%, black, transparent);
}

.tx-cat-hero__inner {
  max-width: var(--tx-max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Back link */
.tx-cat-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tx-font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-text-muted);
  margin-bottom: 36px;
  transition: color .2s;
}
.tx-cat-hero__back:hover { color: var(--tx-text-dim); }

/* Content row: icon + text */
.tx-cat-hero__content {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

/* Icon square — shows first letter of category */
.tx-cat-hero__icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: var(--tx-radius);
  background: var(--tx-surface);
  border: 1px solid var(--tx-border);
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tx-indigo);
  margin-top: 3px;
  letter-spacing: -.02em;
}

.tx-cat-hero__text { flex: 1; min-width: 0; }

/* Eyebrow row: section label + post count badge */
.tx-cat-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tx-font-mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tx-indigo);
  margin-bottom: 10px;
}

.tx-cat-hero__count {
  background: rgba(99, 102, 241, .08);
  border: 1px solid rgba(99, 102, 241, .14);
  border-radius: 100px;
  padding: 3px 11px;
  font-size: .62rem;
  color: var(--tx-text-dim);
  letter-spacing: .08em;
}

/* Category title */
.tx-cat-hero__title {

  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.032em;
  line-height: 1.1;
  margin: 0 0 12px;
}

/* Optional description */
.tx-cat-hero__desc {
  color: var(--tx-text-dim);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0;
  max-width: 540px;
}

/* ============================
   PER-CATEGORY ACCENT COLOURS
   ============================ */

/* Snowflake / SnowPro — cyan */
.tx-cat--snow .tx-cat-hero__icon    { color: #29B5E8; border-color: rgba(41, 181, 232, .2); }
.tx-cat--snow .tx-cat-hero__eyebrow { color: #29B5E8; }
.tx-cat--snow .tx-cat-hero__count   { background: rgba(41,181,232,.07); border-color: rgba(41,181,232,.15); }
.tx-cat--snow .tx-cat-hero__orb--1  { background: rgba(41, 181, 232, .12); }
.tx-cat--snow .tx-cat-post::before  { background: #29B5E8; }
.tx-cat--snow .tx-cat-post:hover .tx-cat-post__num { color: #29B5E8; border-color: rgba(41,181,232,.25); }
.tx-cat--snow .tx-cat-post:hover .tx-cat-post__arrow { color: #29B5E8; }

/* Data Engineering — indigo/purple gradient */
.tx-cat--de .tx-cat-hero__icon    { color: #a78bfa; border-color: rgba(167,139,250,.2); }
.tx-cat--de .tx-cat-hero__eyebrow { color: #a78bfa; }
.tx-cat--de .tx-cat-hero__count   { background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.15); }
.tx-cat--de .tx-cat-hero__orb--1  { background: rgba(139, 92, 246, .15); }
.tx-cat--de .tx-cat-post::before  { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

/* Python / SQL — blue */
.tx-cat--py .tx-cat-hero__icon    { color: #60a5fa; border-color: rgba(96,165,250,.2); }
.tx-cat--py .tx-cat-hero__eyebrow { color: #60a5fa; }
.tx-cat--py .tx-cat-hero__count   { background: rgba(96,165,250,.07); border-color: rgba(96,165,250,.15); }
.tx-cat--py .tx-cat-hero__orb--1  { background: rgba(59, 130, 246, .14); }
.tx-cat--py .tx-cat-post::before  { background: #3b82f6; }
.tx-cat--py .tx-cat-post:hover .tx-cat-post__num { color: #60a5fa; border-color: rgba(96,165,250,.25); }
.tx-cat--py .tx-cat-post:hover .tx-cat-post__arrow { color: #60a5fa; }

/* CS Fundamentals — slate */
.tx-cat--cs .tx-cat-hero__icon    { color: #94a3b8; border-color: rgba(148,163,184,.15); }
.tx-cat--cs .tx-cat-hero__eyebrow { color: #94a3b8; }
.tx-cat--cs .tx-cat-hero__count   { background: rgba(148,163,184,.07); border-color: rgba(148,163,184,.12); }
.tx-cat--cs .tx-cat-post::before  { background: #64748b; }

/* ============================
   POSTS LIST SECTION
   ============================ */
.tx-cat-posts {
  padding: 48px 32px 100px;
  background: var(--tx-bg);
}

.tx-cat-posts__inner {
  max-width: var(--tx-max-w);
  margin: 0 auto;
}

/* List header bar */
.tx-cat-posts__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tx-border);
}

.tx-cat-posts__heading {
  font-family: var(--tx-font-mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tx-text-muted);
}

.tx-cat-posts__sort {
  font-family: var(--tx-font-mono);
  font-size: .65rem;
  color: var(--tx-text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================
   POST ROW
   ============================ */
.tx-cat-post {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: var(--tx-bg-card);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius);
  margin-bottom: 10px;
  color: inherit;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}

/* Left accent bar — slides in on hover */
.tx-cat-post::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tx-gradient);
  opacity: 0;
  transition: opacity .25s;
}

.tx-cat-post:hover {
  background: var(--tx-bg-card-hover);
  border-color: rgba(99, 102, 241, .22);
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
}
.tx-cat-post:hover::before { opacity: 1; }

/* Number badge */
.tx-cat-post__num {
  font-family: var(--tx-font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--tx-text-muted);
  text-align: center;
  background: var(--tx-surface);
  border: 1px solid var(--tx-border);
  border-radius: 8px;
  padding: 7px 8px;
  line-height: 1;
  width: 44px;
  justify-self: center;
  transition: color .2s, border-color .2s;
}
.tx-cat-post:hover .tx-cat-post__num {
  color: var(--tx-indigo);
  border-color: rgba(99, 102, 241, .25);
}

/* Body: title + excerpt */
.tx-cat-post__body { min-width: 0; }

.tx-cat-post__title {

  font-size: .98rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s;
}
.tx-cat-post:hover .tx-cat-post__title { color: #e8eaf8; }

.tx-cat-post__excerpt {
  font-size: .8rem;
  color: var(--tx-text-dim);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta: date + arrow */
.tx-cat-post__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.tx-cat-post__date {
  font-family: var(--tx-font-mono);
  font-size: .66rem;
  color: var(--tx-text-muted);
  letter-spacing: .03em;
  white-space: nowrap;
}

.tx-cat-post__arrow {
  font-size: .95rem;
  color: var(--tx-text-muted);
  transition: color .25s, transform .25s;
}
.tx-cat-post:hover .tx-cat-post__arrow {
  color: var(--tx-indigo);
  transform: translateX(4px);
}

/* ============================
   EMPTY STATE
   ============================ */
.tx-cat-empty {
  text-align: center;
  padding: 80px 32px;
  color: var(--tx-text-muted);
}
.tx-cat-empty__icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 16px;
}
.tx-cat-empty h3 {

  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.tx-cat-empty p {
  font-size: .88rem;
  margin: 0;
  max-width: 36ch;
  margin-inline: auto;
}

/* ============================
   BUTTON (reuse homepage style)
   ============================ */
.tx-cat .tx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: .9rem;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 100px;
  transition: all .25s ease;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.tx-cat .tx-btn--ghost {
  background: transparent;
  color: var(--tx-text-dim);
  border: 1px solid rgba(99, 102, 241, .15);
}
.tx-cat .tx-btn--ghost:hover {
  border-color: var(--tx-indigo);
  color: #fff;
  background: rgba(99, 102, 241, .06);
}

/* ============================
   KILL ASTRA CONTAINER LIMITS
   ============================ */
.tx-cat .site-content,
.tx-cat #content,
.tx-cat #primary,
.tx-cat .ast-container,
.tx-cat .site-main,
.tx-cat .entry-content,
.tx-cat .page-container,
.tx-cat article {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1024px) {
  .tx-cat-post { gap: 16px; }
}

@media (max-width: 768px) {
  .tx-cat-hero  { padding: 88px 24px 48px; }
  .tx-cat-posts { padding: 36px 24px 72px; }
  .tx-cat-post  { grid-template-columns: 44px 1fr auto; gap: 14px; padding: 16px 18px; }
}

@media (max-width: 600px) {
  .tx-cat-hero             { padding: 80px 16px 36px; }
  .tx-cat-hero__content    { flex-direction: column; gap: 14px; }
  .tx-cat-hero__icon       { width: 48px; height: 48px; font-size: 1.2rem; }
  .tx-cat-hero__title      { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .tx-cat-posts            { padding: 28px 16px 60px; }
  /* On small screens: 2-col grid (num + body), meta wraps below body */
  .tx-cat-post             { grid-template-columns: 40px 1fr; row-gap: 6px; padding: 14px 16px; }
  .tx-cat-post__meta       { grid-column: 2; flex-direction: row; align-items: center; gap: 10px; }
  .tx-cat-post__arrow      { display: none; }
  .tx-cat-post__title      { white-space: normal; font-size: .92rem; }
  .tx-cat-post__excerpt    { display: none; }
  .tx-cat-posts__header    { flex-direction: column; align-items: flex-start; gap: 4px; }
}



/* ==========================================================
   TEACHIX CATEGORY — Infinite Scroll Additions
   Append these rules to teachix-category.css
   ========================================================== */

/* New posts animate in when appended */
@keyframes tx-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tx-cat-post--in {
  animation: tx-slide-in 0.35s ease both;
}

/* ── Sentinel (invisible trigger) ────────────────────────── */
.tx-cat-sentinel {
  height: 1px;
  pointer-events: none;
}

/* ── Loading dots ────────────────────────────────────────── */
.tx-cat-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 0;
}
.tx-cat-loader__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tx-indigo);
  animation: tx-dot-pulse 1.2s ease-in-out infinite;
}
.tx-cat-loader__dot:nth-child(2) { animation-delay: 0.2s; }
.tx-cat-loader__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes tx-dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ── End of posts message ────────────────────────────────── */
.tx-cat-end {
  display: flex;
  justify-content: center;
  padding: 32px 0 48px;
  font-family: var(--tx-font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--tx-text-muted);
}