@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');
/* =====================================================================
   courses-academy-v2.css
   Overlay restyle for the #/courses catalog so it matches the LIVE
   iteachaiacademy.org cinematic landing (iTeachAI-landing-mockup-v8.html)
   — NOT the ISTE/FETC lead-capture page.

   Design tokens lifted from v8:
     bg #0a0508 / #150810 / #1d0c16, burgundy #4A1F2E, bordeaux #620303,
     antique gold #C4A35A / light #d4be7c, cream #FDF6F0, hairline rgba(196,163,90,.18).
     Playfair display headings, Source Serif 4 lede, Inter sans.
     Glass "tier" cards w/ gold hover hairline; shimmer gold display text.

   SAFE: linked LAST so it overrides style.css by source order; every rule
   scoped to .catalog- and .course- selectors or body:has(.catalog-hero) so NO other SPA
   route changes. Cards self-darken (readable even without :has()).
   Rollback = remove the one <link> line.
   ===================================================================== */

:root{
  --ac-bg:#0a0508;
  --ac-bg2:#150810;
  --ac-bg3:#1d0c16;
  --ac-burg:#4A1F2E;
  --ac-bord:#620303;
  --ac-gold:#C4A35A;
  --ac-gold-light:#d4be7c;
  --ac-gold-glow:rgba(196,163,90,.3);
  --ac-cream:#FDF6F0;
  --ac-cream-soft:rgba(253,246,240,.85);
  --ac-cream-mute:rgba(253,246,240,.6);
  --ac-line:rgba(196,163,90,.18);
  --ac-line-strong:rgba(196,163,90,.4);
  --ac-serif-body:'Source Serif 4', Georgia, serif;
}

/* ---------------------------------------------------------------
   1. Page canvas — deep cinematic near-black with burgundy glows
   (catalog route only, via :has)
   --------------------------------------------------------------- */
body:has(.catalog-hero){
  background:
    radial-gradient(900px 620px at 28% 12%, rgba(74,31,46,.5) 0%, transparent 60%),
    radial-gradient(820px 600px at 86% 26%, rgba(98,3,3,.26) 0%, transparent 55%),
    linear-gradient(180deg, var(--ac-bg) 0%, var(--ac-bg2) 58%, var(--ac-bg3) 100%);
  background-attachment:fixed;
}

/* header accents -> gold, ONLY while on the catalog route */
body:has(.catalog-hero) .site-header{
  background:rgba(10,5,8,.84);
  border-bottom:1px solid var(--ac-line);
}
body:has(.catalog-hero) .site-header .logo span{ color:var(--ac-gold); }
body:has(.catalog-hero) .site-header nav a:hover,
body:has(.catalog-hero) .site-header nav a.active{ color:var(--ac-gold); }
body:has(.catalog-hero) .site-header nav a::after{ background:var(--ac-gold); }
body:has(.catalog-hero) .site-header .header-cta,
body:has(.catalog-hero) .site-header nav a.header-cta{
  background:linear-gradient(135deg,var(--ac-gold) 0%,#b08d3f 100%);
  color:#1a0a10 !important;
  border:1px solid transparent;
}
body:has(.catalog-hero) .site-header .header-cta:hover,
body:has(.catalog-hero) .site-header nav a.header-cta:hover{
  background:linear-gradient(135deg,var(--ac-gold-light) 0%,var(--ac-gold) 100%);
  color:#1a0a10 !important;
}

/* ---------------------------------------------------------------
   2. Hero — reskin navy/rose -> cinematic black + antique gold
   --------------------------------------------------------------- */
.catalog-hero{
  background:
    radial-gradient(ellipse at 30% 45%, rgba(74,31,46,.5) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,5,8,.55) 0%, var(--ac-bg) 100%);
}
.catalog-hero-video video{ opacity:.22; filter:saturate(.6) hue-rotate(-12deg); }
.catalog-hero::before{
  background:
    radial-gradient(ellipse at 20% 30%, var(--ac-gold-glow) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(74,31,46,.4) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(253,246,240,.03) 0%, transparent 40%);
}
.catalog-hero::after{
  background:linear-gradient(to right, transparent, var(--ac-line-strong), transparent);
}
.catalog-hero-note{
  color:var(--ac-gold);
  border:1px solid var(--ac-line-strong);
  background:rgba(196,163,90,.1);
}
.catalog-hero-title{ color:var(--ac-cream); }
/* v8 shimmer gold on the highlighted hero word (scoped) */
.catalog-hero .text-rose-gradient{
  background:linear-gradient(135deg, var(--ac-gold) 0%, var(--ac-gold-light) 30%, var(--ac-cream) 50%, var(--ac-gold-light) 70%, var(--ac-gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-style:italic;
  animation:acShimmer 5s ease-in-out infinite;
}
@keyframes acShimmer{ 0%{background-position:0% center;} 50%{background-position:100% center;} 100%{background-position:0% center;} }
.catalog-hero-subtitle{ color:var(--ac-cream-soft); font-family:var(--ac-serif-body); }
.catalog-hero-stat-number{ color:var(--ac-cream); }
.catalog-hero-stat-label{ color:var(--ac-gold); }
.catalog-hero-stats{ border-top:1px solid var(--ac-line); }

/* hero / cta / course-card buttons -> antique gold pill (catalog-scoped) */
.catalog-hero .btn-primary,
.cta-register .btn-primary,
.course-card .btn-primary{
  background:linear-gradient(135deg, var(--ac-gold) 0%, #b08d3f 100%);
  color:#1a0a10;
  box-shadow:0 8px 28px var(--ac-gold-glow);
}
.catalog-hero .btn-primary:hover,
.cta-register .btn-primary:hover,
.course-card .btn-primary:hover{
  background:linear-gradient(135deg, var(--ac-gold-light) 0%, var(--ac-gold) 100%);
  color:#1a0a10;
  box-shadow:0 14px 36px rgba(196,163,90,.5);
}
.catalog-hero .btn-outline:hover,
.cta-register .btn-outline:hover{
  background:rgba(253,246,240,.08);
  border-color:var(--ac-gold);
  color:#fff;
}

/* ---------------------------------------------------------------
   3. Search bar -> dark glass with gold focus
   --------------------------------------------------------------- */
.catalog-search{
  background:rgba(253,246,240,.04);
  color:var(--ac-cream);
  border:1px solid var(--ac-line);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.catalog-search:focus{
  border-color:var(--ac-gold);
  box-shadow:0 0 0 3px rgba(196,163,90,.2), 0 8px 30px rgba(0,0,0,.45);
}
.catalog-search::placeholder{ color:rgba(253,246,240,.45); opacity:1; }
.catalog-search-icon{
  opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C4A35A' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------------------------------------------------------------
   4. Filter tabs -> dark glass bar, gold active state
   --------------------------------------------------------------- */
.catalog-tabs-wrap{
  background:rgba(10,5,8,.85);
  border-bottom:1px solid var(--ac-line);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.catalog-tab{ color:rgba(253,246,240,.7); }
.catalog-tab:hover{ color:var(--ac-cream); }
.catalog-tab.active{ color:var(--ac-gold); border-bottom-color:var(--ac-gold); }
.catalog-tab-count{ background:rgba(196,163,90,.12); color:var(--ac-gold); }
.catalog-tab.active .catalog-tab-count{ background:rgba(196,163,90,.22); color:var(--ac-cream); }

/* ---------------------------------------------------------------
   5. Section headings + results info
   --------------------------------------------------------------- */
.catalog-section-title{ color:var(--ac-cream); }
.catalog-section-subtitle{ color:var(--ac-cream-mute); font-family:var(--ac-serif-body); }
.catalog-results-info{ color:rgba(253,246,240,.55); }

/* ---------------------------------------------------------------
   6. Course cards -> glass "tier" treatment w/ gold hover hairline
   --------------------------------------------------------------- */
.course-card{
  position:relative;
  background:linear-gradient(180deg, rgba(74,31,46,.42) 0%, rgba(29,12,22,.64) 100%);
  border:1px solid var(--ac-line);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.course-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg, transparent, var(--ac-gold), transparent);
  opacity:0; transition:opacity .4s;
}
.course-card:hover{
  transform:translateY(-6px);
  border-color:var(--ac-line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.course-card:hover::before{ opacity:1; }
.course-card-body h3{ color:var(--ac-cream); }
.course-card-body p{ color:rgba(253,246,240,.7); }
.course-card-meta,
.course-card-meta-item{ color:rgba(253,246,240,.6); }
.course-card-cta{ border-top:1px solid var(--ac-line); }
.course-price{ color:var(--ac-gold); }
.course-price-free{ color:#8fd6a8; background:rgba(39,174,96,.12); }
.course-card-category-paid{
  background:linear-gradient(135deg, var(--ac-gold), #b08d3f);
  color:#1a0a10;
  box-shadow:0 2px 8px var(--ac-gold-glow);
}
.course-badge-hours{ background:rgba(196,163,90,.14); color:var(--ac-gold-light); }
.badge-enrolled{ background:rgba(196,163,90,.14); color:var(--ac-gold-light); }

/* ---------------------------------------------------------------
   7. Feature highlights -> glass tiers
   --------------------------------------------------------------- */
.feature-card{
  background:linear-gradient(180deg, rgba(74,31,46,.4) 0%, rgba(29,12,22,.6) 100%);
  border:1px solid var(--ac-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.feature-card:hover{
  border-color:var(--ac-line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform:translateY(-6px);
}
.feature-card h3{ color:var(--ac-cream); }
.feature-card p{ color:rgba(253,246,240,.7); }
.catalog-features-title{ color:var(--ac-cream); }

/* ---------------------------------------------------------------
   8. Empty state + register banner cohesion
   --------------------------------------------------------------- */
.catalog-empty{ color:var(--ac-cream-mute); }
.catalog-empty h3{ color:var(--ac-cream); }
.cta-register{
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(74,31,46,.5) 0%, transparent 65%),
    linear-gradient(180deg, var(--ac-bg) 0%, var(--ac-bg2) 55%, var(--ac-bg3) 100%);
}
.cta-register::before{
  background:radial-gradient(ellipse at 50% 30%, var(--ac-gold-glow) 0%, transparent 60%);
}

/* ---------------------------------------------------------------
   9. Motion courtesy
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .catalog-hero .text-rose-gradient{ animation:none; }
}