/* ==========================================================================
   Blinkcade Academy
   The hub reads like a level-select screen: four stages on one track. The
   tutorials and articles around it stay calm and readable.
   ========================================================================== */

.academy,
.ac-article {
  --ac-display: "Barlow Condensed", "Arial Narrow", var(--bc-font);
  --ac-track: #2a5b96;
  --ac-node: #66e4ff;
  --ac-sign: #ffd84d;
  --ac-beginner: #7be495;
  --ac-intermediate: #ffd84d;
  --ac-advanced: #ff8fab;
  --ac-panel: #0a1b37;
}

.ac-h2 {
  margin: 0 0 22px;
  font-family: var(--ac-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1;
  color: var(--bc-text);
}

.ac-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--bc-muted);
  font-size: .92rem;
  font-weight: 650;
}

.ac-crumbs a { color: var(--bc-cyan); }
.ac-crumbs a:hover { color: #fff; }

/* Level and topic labels */
.ac-level {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
}

.ac-level--beginner { color: var(--ac-beginner); }
.ac-level--intermediate { color: var(--ac-intermediate); }
.ac-level--advanced { color: var(--ac-advanced); }

/* ------------------------------------------------------------------ hub hero */

.ac-hero { padding: 64px 0 48px; }

.ac-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px 72px;
  align-items: center;
}

.ac-hero__title {
  margin: 0 0 18px;
  font-family: var(--ac-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: .86;
  color: var(--bc-text);
}

.ac-hero__lead {
  max-width: 58ch;
  margin: 0;
  color: var(--bc-soft);
  font-size: 1.15rem;
  line-height: 1.65;
}

.ac-hero__lead p { margin: 0; }

.ac-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.ac-hero--topic { padding-bottom: 28px; }
.ac-hero--topic .ac-hero__title { font-size: clamp(2.8rem, 6vw, 4.8rem); }

/* The guide: the one "start here" sign on the page */
.ac-guide {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 28px 30px 26px;
  border: 2px solid var(--ac-sign);
  border-radius: 18px;
  background: linear-gradient(160deg, #102446, #0a1a35);
  color: var(--bc-text);
  box-shadow: 0 0 60px rgba(255, 216, 77, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ac-guide:hover { transform: translateY(-2px); box-shadow: 0 0 70px rgba(255, 216, 77, .2); }
.ac-guide:focus-visible { outline: 3px solid var(--ac-node); outline-offset: 4px; }

.ac-guide__kicker {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--ac-sign);
  color: #0a1a3a;
  font-size: .85rem;
  font-weight: 800;
}

.ac-guide__title {
  font-family: var(--ac-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.02;
}

.ac-guide__text { color: var(--bc-soft); line-height: 1.55; }

.ac-guide__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--ac-sign);
  font-size: .9rem;
  font-weight: 700;
}

/* ------------------------------------------------------------- the track */

.ac-path { padding: 40px 0 72px; }

.ac-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

/* The line every stage sits on */
.ac-track::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--ac-track) 0 14px, transparent 14px 22px);
}

.ac-stage {
  position: relative;
  padding-top: 56px;
  counter-increment: stage;
}

.ac-stage__node {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--ac-track);
  border-radius: 50%;
  background: var(--bc-bg-deep, #030914);
}

.ac-stage__node::after {
  content: counter(stage);
  font-family: var(--ac-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--bc-muted);
}

.ac-stage.has-posts .ac-stage__node {
  border-color: var(--ac-node);
  background: var(--ac-node);
  box-shadow: 0 0 22px rgba(102, 228, 255, .45);
}

.ac-stage.has-posts .ac-stage__node::after { color: #04142b; }

.ac-stage__name {
  margin: 0 0 8px;
  font-family: var(--ac-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
}

.ac-stage__text {
  margin: 0 0 16px;
  color: var(--bc-soft);
  font-size: .97rem;
  line-height: 1.55;
}

.ac-stage__topics {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}

.ac-stage__topics li { display: flex; align-items: baseline; gap: 8px; }
.ac-stage__topics a { color: var(--ac-node); font-weight: 650; }
.ac-stage__topics a:hover { color: #fff; }
.ac-stage__soon { color: var(--bc-muted); }

.ac-count {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(102, 228, 255, .14);
  color: var(--ac-node);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.ac-count--soon { background: transparent; color: var(--bc-muted); font-weight: 600; padding: 0; }

/* ----------------------------------------------------------- tutorials */

.ac-list {
  padding: 64px 0 80px;
  border-top: 1px solid var(--bc-line-soft);
}

.ac-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 8px;
}

.ac-list__head .ac-h2 { margin-bottom: 14px; }

.ac-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ac-filter[hidden] { display: none; }
.ac-filter__label { color: var(--bc-muted); font-size: .9rem; }
.ac-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ac-chip {
  padding: 7px 14px;
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--bc-soft);
  font: 650 .9rem/1.2 var(--bc-font);
  cursor: pointer;
}

.ac-chip:hover { border-color: var(--ac-node); color: #fff; }
.ac-chip[aria-pressed="true"] { border-color: var(--ac-node); background: var(--ac-node); color: #04142b; }
.ac-chip:focus-visible { outline: 3px solid var(--ac-sign); outline-offset: 2px; }

.ac-lessons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-lesson {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--bc-line-soft);
}

.ac-lesson[hidden] { display: none; }

.ac-lesson__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: var(--ac-panel);
}

.ac-lesson__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.ac-lesson:hover .ac-lesson__thumb img { transform: scale(1.03); }

.ac-lesson__noimg {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ac-track);
}

.ac-lesson__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 10px;
  color: var(--bc-muted);
  font-size: .88rem;
}

.ac-lesson__topic { color: var(--ac-node); font-weight: 700; }
.ac-lesson__topic:hover { color: #fff; }

.ac-lesson__title {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.ac-lesson__title a { color: var(--bc-text); }
.ac-lesson__title a:hover { color: var(--ac-node); }
.ac-lesson__title a:focus-visible { outline: 3px solid var(--ac-node); outline-offset: 3px; border-radius: 4px; }

.ac-lesson__excerpt {
  max-width: 68ch;
  margin: 0;
  color: var(--bc-soft);
  line-height: 1.6;
}

/* The newest tutorial leads the list (until a filter is on). */
.ac-lesson--featured {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 18px;
}

.ac-lesson--featured .ac-lesson__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; }
.ac-lesson--featured .ac-lesson__excerpt { font-size: 1.08rem; }
.is-filtered .ac-lesson--featured { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
.is-filtered .ac-lesson--featured .ac-lesson__title { font-size: 1.3rem; }

.ac-lessons__empty,
.ac-empty p { color: var(--bc-muted); font-size: 1.05rem; }
.ac-empty { display: grid; justify-items: start; gap: 8px; padding: 20px 0 40px; }

/* ----------------------------------------------------------- to the arcade */

.ac-arcade { padding: 72px 0 96px; background: #081a35; border-top: 1px solid var(--bc-line-soft); }

.ac-arcade__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px 72px;
  align-items: start;
}

.ac-arcade__grid p { margin: 0; color: var(--bc-soft); font-size: 1.05rem; line-height: 1.65; }
.ac-arcade__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px !important; grid-column: 2; }

/* ================================================================== articles */

.ac-article { padding: 48px 0 40px; }

.ac-article__header { max-width: 1026px; margin: 0 auto 30px; }

.ac-article__title {
  margin: 0 0 18px;
  font-family: var(--ac-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1;
  color: var(--bc-text);
}

.ac-article__lead {
  max-width: 64ch;
  margin: 0 0 18px;
  color: var(--bc-soft);
  font-size: 1.18rem;
  line-height: 1.6;
}

.ac-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  color: var(--bc-muted);
  font-size: .92rem;
}

.ac-article__media {
  max-width: 1026px;
  margin: 0 auto 48px;
}

.ac-article__media img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 18px;
}

.ac-article__layout { display: block; }

.ac-article__layout.has-toc {
  display: grid;
  grid-template-columns: 250px minmax(0, 720px);
  justify-content: center;
  gap: 56px;
  align-items: start;
}

.ac-article__layout.has-toc .ac-prose { margin: 0; }

/* Contents list */
.ac-toc {
  position: sticky;
  top: calc(var(--bc-header-h) + 24px);
  max-height: calc(100vh - var(--bc-header-h) - 48px);
  overflow-y: auto;
}

.ac-toc__box summary {
  margin-bottom: 12px;
  color: var(--bc-text);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.ac-toc__box summary::-webkit-details-marker { display: none; }

.ac-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--bc-line-soft);
}

.ac-toc a {
  display: block;
  margin-left: -2px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  color: var(--bc-muted);
  font-size: .9rem;
  line-height: 1.35;
}

.ac-toc a:hover { color: #fff; }
.ac-toc a[aria-current] { border-left-color: var(--ac-sign); color: var(--bc-text); font-weight: 650; }

/* Reading */
.ac-prose h2 { scroll-margin-top: calc(var(--bc-header-h) + 20px); font-size: 1.85rem; }
.ac-prose h3 { font-size: 1.35rem; }

.ac-prose table,
.ac-prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
}

.ac-prose .wp-block-table,
.ac-prose > table {
  display: block;
  overflow-x: auto;
  margin: 0 0 1.6em;
  border: 1px solid var(--bc-line);
  border-radius: 12px;
}

.ac-prose .wp-block-table table { margin: 0; }
.ac-prose th,
.ac-prose td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--bc-line-soft); text-align: left; vertical-align: top; }
.ac-prose thead th { background: var(--ac-panel); color: #fff; font-weight: 750; }
.ac-prose tbody tr:last-child td { border-bottom: 0; }

.ac-prose pre {
  padding: 18px 20px;
  border: 1px solid var(--bc-line);
  border-radius: 12px;
  background: #050f22;
  font-size: .9rem;
  line-height: 1.6;
  overflow-x: auto;
}

.ac-prose blockquote {
  margin-left: 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ac-sign);
  color: var(--bc-text);
}

/* Keep learning */
.ac-next {
  max-width: 1026px;
  margin: 72px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--bc-line-soft);
}

.ac-next__guide {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 22px 24px;
  border: 2px solid var(--ac-sign);
  border-radius: 14px;
  color: var(--bc-text);
}

.ac-next__guide:hover { background: rgba(255, 216, 77, .06); }
.ac-next__guide .ac-guide__kicker { justify-self: start; }

.ac-next__guide-title {
  font-family: var(--ac-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.05;
}

.ac-lessons--compact .ac-lesson { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding: 20px 0; }
.ac-lessons--compact .ac-lesson__title { font-size: 1.15rem; }
.ac-lessons--compact .ac-lesson__excerpt { font-size: .95rem; }
.ac-next__all { margin: 22px 0 0; }

/* ------------------------------------------------------------ smaller screens */

@media (max-width: 1023px) {
  .ac-article__layout.has-toc { display: block; }
  .ac-toc { position: static; max-height: none; margin: 0 auto 32px; max-width: 720px; }
  .ac-toc__box { padding: 14px 18px; border: 1px solid var(--bc-line); border-radius: 12px; }
  .ac-toc__box summary { margin: 0; }
  .ac-toc__box[open] summary { margin-bottom: 12px; }
  .ac-toc__box summary::after { content: " +"; color: var(--ac-node); }
  .ac-toc__box[open] summary::after { content: " −"; }
}

@media (max-width: 960px) {
  .ac-hero__grid, .ac-arcade__grid { grid-template-columns: 1fr; }
  .ac-arcade__links { grid-column: auto; }
  .ac-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ac-track::before { display: none; }
  .ac-lesson, .ac-lesson--featured, .is-filtered .ac-lesson--featured { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
  .ac-lesson--featured .ac-lesson__title { font-size: 1.4rem; }
}

@media (max-width: 640px) {
  .ac-hero { padding-top: 40px; }
  .ac-track { grid-template-columns: 1fr; }
  /* On one column the line runs down the left, through each stage's node. */
  .ac-track::before {
    display: block;
    top: 18px;
    bottom: 18px;
    left: 17px;
    right: auto;
    width: 4px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--ac-track) 0 14px, transparent 14px 22px);
  }
  .ac-stage { padding: 4px 0 0 58px; }
  .ac-lesson,
  .ac-lesson--featured,
  .is-filtered .ac-lesson--featured,
  .ac-lessons--compact .ac-lesson { grid-template-columns: 1fr; gap: 14px; }
  .ac-filter { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-guide, .ac-lesson__thumb img { transition: none; }
}