/* ══════════════════════════════════════════════════════════
   ARTSKWELA PROJECT PAGE — artskwela.css
   Brand colours:
     Red:    #F03F2E
     Blue:   #0D83FF
     Yellow: #F7B52A
     Green:  #25B154
     Bg:     #F9F7F3
     Black:  #000000
══════════════════════════════════════════════════════════ */

/* ── Page base ───────────────────────────────────────────── */
body.artskwela-page {
  background: #F9F7F3;
  color: #000000;
  font-family: 'Inter', 'Rethink Sans', sans-serif;
}

.artskwela-page h1,
.artskwela-page h2,
.artskwela-page h3,
.artskwela-page p,
.artskwela-page span,
.artskwela-page a,
.artskwela-page button { font-family: 'Inter', 'Rethink Sans', sans-serif; color: inherit; }

/* ── Section title ───────────────────────────────────────── */
.artskwela-page .vp-section-title { color: #000000; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.artskwela-page .vp-tag {
  background: #F79C07;
  color: #000000;
  border-color: #F79C07;
}
.artskwela-page .vp-tag--date {
  background: transparent;
  color: #666;
  border-color: #DDD8D0;
}
.artskwela-page .vp-back         { color: #25B154; }
.artskwela-page .vp-back:hover   { color: #1A8040; }

/* ── Hero chips ──────────────────────────────────────────── */
.artskwela-page .vp-chip {
  background: #E6F8ED;
  color: #25B154;
  border-color: #A8DFB8;
}

/* ── Results metrics ─────────────────────────────────────── */
.artskwela-page .vp-results {
  border-top-color: #E0DDD8;
  border-bottom-color: #E0DDD8;
}
.artskwela-page .vp-metric {
  background: #25B154;
  border-color: #25B154;
}
.artskwela-page .vp-metric-value { color: #faf6ed; }
.artskwela-page .vp-metric-label { color: #faf6ed; opacity: 0.8; }

/* "Gen Alpha" — sized to match card height of numeric values */
.ak-metric-label {
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.6rem) !important;
  line-height: 1;
  color: #faf6ed !important;
}

/* ── Quote ───────────────────────────────────────────────── */
.artskwela-page .vp-quote {
  background: #25B154;
  border-left-color: #1A8040;
  border-top-color: #1A8040;
  border-right-color: #1A8040;
  border-bottom-color: #1A8040;
  color: #faf6ed;
}

/* ── Problem diagram ─────────────────────────────────────── */
.artskwela-page .vp-lag-container {
  background: #F9F7F3;
  border-color: #E0DDD8;
}
.artskwela-page .vp-lag-arrow { color: #CCCCCC; font-weight: 700; }
.artskwela-page .vp-lag-quote { color: #555; }

/* Existing Platforms — blue */
.ak-box--green {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 2.5rem;
  border-radius: 16px;
  background: #0D83FF;
  border: 1.5px solid #0D83FF;
  font-weight: 700;
  font-size: 1.05rem;
  color: #faf6ed;
  min-width: 180px;
  text-align: center;
}
.ak-box--green .vp-lag-sub { color: rgba(250,246,237,0.75); }

/* Disconnected Learners — yellow */
.ak-box--amber {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 2.5rem;
  border-radius: 16px;
  background: #F7B52A;
  border: 1.5px solid #F7B52A;
  font-weight: 700;
  font-size: 1.05rem;
  color: #000000;
  min-width: 180px;
  text-align: center;
}
.ak-box--amber .vp-lag-sub { color: rgba(0,0,0,0.6); }

/* Cultural Gap — red */
.artskwela-page .vp-lag-box--gap {
  background: #F03F2E;
  border-color: #F03F2E;
  color: #faf6ed;
}
.artskwela-page .vp-lag-box--gap .vp-lag-sub { color: rgba(250,246,237,0.75); }

/* ── Process ─────────────────────────────────────────────── */
.artskwela-page .vp-process {
  border-top-color: #E0DDD8;
  border-bottom-color: #E0DDD8;
}

/* Process & solution title overrides — larger, semibold */
.artskwela-page .vp-step-title {
  font-size: 1.25rem;
  font-weight: 600;
}
.artskwela-page .vp-feature-title {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Phase 1 — red */
.artskwela-page .vp-process-steps > .vp-step:nth-child(1) {
  background: #F03F2E;
  border-color: #F03F2E;
}
.artskwela-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-num,
.artskwela-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-title,
.artskwela-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-desc { color: #faf6ed; }

/* Phase 2 — blue */
.artskwela-page .vp-process-steps > .vp-step:nth-child(3) {
  background: #0D83FF;
  border-color: #0D83FF;
}
.artskwela-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-num,
.artskwela-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-title,
.artskwela-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-desc { color: #faf6ed; }

/* Phase 3 — yellow */
.artskwela-page .vp-process-steps > .vp-step:nth-child(5) {
  background: #F7B52A;
  border-color: #F7B52A;
}
.artskwela-page .vp-process-steps > .vp-step:nth-child(5) .vp-step-num,
.artskwela-page .vp-process-steps > .vp-step:nth-child(5) .vp-step-title,
.artskwela-page .vp-process-steps > .vp-step:nth-child(5) .vp-step-desc { color: #000000; }

/* Phase 4 — green */
.artskwela-page .vp-process-steps > .vp-step:nth-child(7) {
  background: #25B154;
  border-color: #25B154;
}
.artskwela-page .vp-process-steps > .vp-step:nth-child(7) .vp-step-num,
.artskwela-page .vp-process-steps > .vp-step:nth-child(7) .vp-step-title,
.artskwela-page .vp-process-steps > .vp-step:nth-child(7) .vp-step-desc { color: #faf6ed; }

/* ── Corner tag pill ─────────────────────────────────────── */
.ak-corner-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.ak-corner-tag--green  { background: #25B154; color: #ffffff; }
.ak-corner-tag--blue   { background: #0D83FF; color: #ffffff; }
.ak-corner-tag--red    { background: #F03F2E; color: #ffffff; }
.ak-corner-tag--yellow { background: #F7B52A; color: #000000; }

/* ── Feature cards ───────────────────────────────────────── */

/* Green — Learn / Education */
.ak-card--teal {
  background: #25B154;
  border: 1.5px solid #25B154;
  border-radius: var(--radius-20);
  padding: 1.75rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.ak-card--teal:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(37,177,84,0.3);
}
.ak-card--teal .vp-feature-title { color: #faf6ed; }
.ak-card--teal .vp-feature-desc  { color: rgba(250,246,237,0.85); }
.ak-card--teal .vp-feature-mockup-wrap { border-top-color: rgba(250,246,237,0.25); }

/* Blue — Play / Interactive */
.ak-card--purple {
  background: #0D83FF;
  border: 1.5px solid #0D83FF;
  border-radius: var(--radius-20);
  padding: 1.75rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.ak-card--purple:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(13,131,255,0.3);
}
.ak-card--purple .vp-feature-title { color: #faf6ed; }
.ak-card--purple .vp-feature-desc  { color: rgba(250,246,237,0.85); }
.ak-card--purple .vp-feature-mockup-wrap { border-top-color: rgba(250,246,237,0.25); }

/* Blue — Train / Assessment */
.ak-card--orange {
  background: #0D83FF;
  border: 1.5px solid #0D83FF;
  border-radius: var(--radius-20);
  padding: 1.75rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.ak-card--orange:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(13,131,255,0.3);
}
.ak-card--orange .vp-feature-title { color: #faf6ed; }
.ak-card--orange .vp-feature-desc  { color: rgba(250,246,237,0.85); }
.ak-card--orange .vp-feature-mockup-wrap { border-top-color: rgba(250,246,237,0.25); }

/* Green — Create / Creative */
.ak-card--yellow {
  background: #25B154;
  border: 1.5px solid #25B154;
  border-radius: var(--radius-20);
  padding: 1.75rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.ak-card--yellow:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(37,177,84,0.3);
}
.ak-card--yellow .vp-feature-title { color: #faf6ed; }
.ak-card--yellow .vp-feature-desc  { color: rgba(250,246,237,0.85); }
.ak-card--yellow .vp-feature-mockup-wrap { border-top-color: rgba(250,246,237,0.25); }

/* ── Links ───────────────────────────────────────────────── */
.artskwela-page .vp-links { border-top-color: #E0DDD8; }
.artskwela-page .vp-link-btn {
  background: #000000 !important;
  color: #faf6ed !important;
}
.artskwela-page .vp-link-btn:hover {
  background: #1a1a1a !important;
  color: #faf6ed !important;
}

/* ── More projects — match velora styling ────────────────── */
.artskwela-page .vp-more          { background: #FDFCFB; border-top-color: #E4E4E7; }
.artskwela-page .vp-more-card     { background: #FDFCFB; border-color: #E4E4E7; }
.artskwela-page .vp-more-card:hover { box-shadow: 0 16px 48px rgba(96,96,160,0.12); }
.artskwela-page .vp-more-img-wrap { background: #F6F1FA; }
.artskwela-page .vp-more-title    { color: var(--color-near-black); }
.artskwela-page .vp-more-cta      { background: var(--color-lilac-main); color: var(--color-near-black); }
.artskwela-page .vp-more-card:hover .vp-more-cta { background: var(--color-soft-lavender); }

/* ── Footer ──────────────────────────────────────────────── */
.artskwela-page .cta-footer-area { background: var(--color-soft-lavender); }

.artskwela-page .new-footer-heading  { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.artskwela-page .new-footer-accent   { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.artskwela-page .new-footer-kry      { color: var(--color-deep-purple);   font-family: 'Parisienne', cursive; }
.artskwela-page .new-footer-tagline  { color: var(--color-ivory);         font-family: 'Rethink Sans', sans-serif; }
.artskwela-page .new-footer-col-label{ color: var(--color-deep-purple);   font-family: 'Rethink Sans', sans-serif; }
.artskwela-page .new-footer-link     { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.artskwela-page .new-footer-link:hover { color: var(--color-deep-purple); }
.artskwela-page .new-footer-info     { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.artskwela-page .new-footer-copy     { color: var(--color-ivory);         font-family: 'Rethink Sans', sans-serif; }


/* ══════════════════════════════════════════════════════════
   ARTSKWELA — RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (768–1024px) ─────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .artskwela-page .vp-more-grid { grid-template-columns: repeat(2, 1fr); }
  .artskwela-page .vp-process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .ak-card--teal,
  .ak-card--purple,
  .ak-card--orange,
  .ak-card--yellow { min-height: 360px; }
}

/* ── Mobile (< 768px) ───────────────────────────────────── */
@media (max-width: 767px) {
  /* Feature cards — tighter height */
  .ak-card--teal,
  .ak-card--purple,
  .ak-card--orange,
  .ak-card--yellow {
    min-height: auto;
    padding: 1.25rem 1.25rem 1rem;
  }

  /* Lag boxes — full width stack */
  .ak-box--green,
  .ak-box--amber {
    min-width: unset;
    width: 100%;
    padding: 1rem 1.25rem;
  }

  /* Process steps — single column */
  .artskwela-page .vp-process-steps {
    grid-template-columns: 1fr !important;
  }

  /* Breadcrumb padding for sticky nav */
  .artskwela-page .vp-breadcrumb { padding-top: 5.5rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── Small mobile (< 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .ak-corner-tag { font-size: 0.55rem; padding: 0.2rem 0.6rem; }
}