/* ===========================================
   MyAiSchool – front.css (compact & contrasty)
   - h2 (section headings) = 2.4rem
   - h3 (card titles) smaller for clear hierarchy
   - subtle backgrounds via color-mix
   - neat borders, tight spacing, responsive
   =========================================== */

.myai-home{
  --myai-primary:   #269684; /* teal */
  --myai-accent:    #EE4A62; /* coral/pink */
  --myai-highlight: #FFD301; /* yellow */
  --myai-text:      #111827;
  --myai-muted:     #6B7280;
  --myai-surface:   #ffffff;
  --myai-border:    rgba(0,0,0,.12);
  --myai-shadow:    0 10px 18px rgba(0,0,0,.04);

  /* new helpers */
  --myai-card-bg:   color-mix(in srgb, var(--myai-primary) 4%, #fff);
  --myai-tint:      color-mix(in srgb, var(--myai-primary) 6%, #fff);
  --myai-radius:    12px;
}

/* ---------- Layout ---------- */
.myai-container{width:min(1120px,92vw);margin-inline:auto}
.myai-section{padding: clamp(22px, 4vw, 40px) 0}
.myai-grid{display:grid;gap: clamp(12px, 3vw, 16px)}
.myai-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.myai-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.myai-cols-2,.myai-cols-3{grid-template-columns:1fr}}

/* Alternate subtle background for sections after the hero */
.myai-home .myai-section:not(:first-of-type){
  background: color-mix(in srgb, var(--myai-primary) 3%, #fff);
}

/* ---------- Typography ---------- */
.myai-home h1{
  font-size: clamp(2.0rem, 2.2vw + 1.2rem, 2.8rem);
  line-height: 1.2;
  margin: .2rem 0 .6rem;
  color: var(--myai-text);
  letter-spacing: -0.01em;
}

/* Required: 2.4rem for section headings (e.g., “Academics”, “AI Study Hub”) */
.myai-home h2{
  font-size: 2.4rem;              /* fixed as requested */
  line-height: 1.25;
  margin: 0 0 .5rem;
  color: var(--myai-text);
  letter-spacing: -0.005em;
}

/* Smaller card titles for clear contrast vs h2 */
.myai-home h3{
  font-size: clamp(1.05rem, 1.2vw + .8rem, 1.35rem);
  line-height: 1.35;
  margin: .15rem 0 .25rem;
  color: var(--myai-text);
  font-weight: 700;
}

.myai-list{margin:0;padding-left:1.1rem}
.myai-hero-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 0}

/* ---------- Cards ---------- */
.myai-card{
  background: var(--myai-card-bg);
  border: 1px solid color-mix(in srgb, var(--myai-primary) 18%, var(--myai-border));
  border-radius: var(--myai-radius);
  padding: clamp(12px, 2.5vw, 18px);
  box-shadow: var(--myai-shadow);
  transition: border-color .15s ease, transform .06s ease, box-shadow .15s ease, background .2s ease;
}
.myai-card:hover{
  border-color: color-mix(in srgb, var(--myai-primary) 35%, var(--myai-border));
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(0,0,0,.08);
}

/* ---------- Stats (smaller counters) ---------- */
.myai-stat{display:grid;gap:.2rem}
.myai-stat-count{font-size: clamp(1.2rem, 4.5vw, 1.7rem);font-weight:800;color:var(--myai-primary)}
.myai-stat-label{opacity:.9;color:var(--myai-text)}

/* ---------- Pills / Tags ---------- */
.myai-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .6rem;border-radius:999px;
  background: color-mix(in srgb, var(--myai-highlight) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--myai-highlight) 45%, transparent);
  font-size:.85rem;font-weight:700;color:var(--myai-text)
}

/* ---------- Buttons (compact) ---------- */
.myai-btn{
  display:inline-block;
  padding:.5rem .85rem;
  border-radius:10px;
  border:1px solid var(--myai-border);
  background:#fff;
  color:#111827;
  text-decoration:none;
  font-weight:700;
  font-size: clamp(.9rem, 2.2vw, 1rem);
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.myai-btn:hover{transform:translateY(-1px);box-shadow:0 8px 14px rgba(0,0,0,.06)}
.myai-btn:focus-visible{outline:2px solid var(--myai-accent);outline-offset:2px}
.myai-btn-primary{
  background: linear-gradient(135deg, var(--myai-primary), #1f796b);
  border-color: var(--myai-primary);
  color:#fff;
}
.myai-btn-primary:hover{filter:brightness(.98)}
.myai-btn-ghost{
  background: #fff;
  border-color: color-mix(in srgb, var(--myai-primary) 25%, var(--myai-border));
  color: var(--myai-primary);
}
.myai-btn-g
/* === Headings hover styles ===================================== */
/* 1) set a reusable hover color tuned from primary+accent */
.myai-home{
  --myai-heading-hover: color-mix(in srgb, var(--myai-primary) 78%, var(--myai-accent) 22%);
}

/* 2) smooth color transition on headings */
.myai-home h1,
.myai-home h2,
.myai-home h3{
  transition: color .18s ease;
}

/* 3) direct hover on headings (even if they aren't links) */
.myai-home h1:hover,
.myai-home h2:hover,
.myai-home h3:hover{
  color: var(--myai-heading-hover);
}

/* 4) if a heading contains a link, keep the link styled like the heading,
      but change to the hover color on hover/focus */
.myai-home h1 a,
.myai-home h2 a,
.myai-home h3 a{
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
.myai-home h1 a:hover,
.myai-home h2 a:hover,
.myai-home h3 a:hover,
.myai-home h1 a:focus-visible,
.myai-home h2 a:focus-visible,
.myai-home h3 a:focus-visible{
  color: var(--myai-heading-hover);
  outline: none;
}

/* 5) card titles specifically get the same hover treatment */
.myai-home .myai-card h3:hover{
  color: var(--myai-heading-hover);
}
/* === HERO: push image lower on tablets/phones ================== */
@media (max-width: 900px){
  .myai-home .myai-section:first-of-type .myai-grid{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .myai-home .myai-section:first-of-type aside{
    /* keep it visible and centered */
    display: grid !important;          /* overrides any prior display:none */
    place-items: center;
    min-height: 200px;

    /* the “shift down” spacing */
    margin-top: clamp(12px, 5vw, 28px);
  }
}

@media (max-width: 600px){
  .myai-home .myai-section:first-of-type aside{
    /* a bit more space under the copy on very small screens */
    margin-top: clamp(16px, 7vw, 36px);
  }
}
/* === Academics tab styling (teal pill tabs) ==================== */
.myai-home{
  /* helpers just for tabs */
  --myai-tab-bg:     color-mix(in srgb, var(--myai-primary) 7%,  #fff);
  --myai-tab-hover:  color-mix(in srgb, var(--myai-primary) 16%, #fff);
  --myai-tab-border: color-mix(in srgb, var(--myai-primary) 35%, #cbd5e1);
  --myai-tab-active: var(--myai-primary);
}

/* container: more breathing room + subtle tint + border */
.myai-home .myai-tabs{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(.7rem, 2.2vw, 1.1rem);          /* ↑ bigger gap */
  margin-bottom: .9rem;
  padding: .35rem .45rem;
  background: color-mix(in srgb, var(--myai-primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--myai-primary) 18%, var(--myai-border));
  border-radius: 14px;
}

/* individual tabs (pills) */
.myai-home .myai-tab[role="tab"]{
  appearance: none;
  background: var(--myai-tab-bg);
  border: 1.5px solid var(--myai-tab-border);
  color: var(--myai-primary);
  font-weight: 800;
  font-size: .98rem;
  padding: .46rem .95rem;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, transform .06s ease, box-shadow .15s ease;
}

.myai-home .myai-tab[role="tab"]:hover{
  background: var(--myai-tab-hover);               /* teal-ish hover */
  border-color: color-mix(in srgb, var(--myai-primary) 52%, #cbd5e1);
  color: color-mix(in srgb, var(--myai-primary) 92%, #0f766e);
  transform: translateY(-1px);
}

.myai-home .myai-tab[role="tab"]:focus-visible{
  outline: 2px solid var(--myai-accent);
  outline-offset: 2px;
}

/* selected = solid teal pill */
.myai-home .myai-tab[aria-selected="true"]{
  background: var(--myai-tab-active);
  border-color: var(--myai-tab-active);
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 6px 12px rgba(38,150,132,.18);
  transform: translateY(-1px);
}

/* small-screen comfort */
@media (max-width: 640px){
  .myai-home .myai-tabs{ padding:.35rem; border-radius:12px; }
  .myai-home .myai-tab[role="tab"]{ font-size:.95rem; padding:.42rem .8rem; }
}