/* 
  TrainingCo Website Styles
  Replace colours and branding in :root to match your company identity.
*/

:root{
  --bg: #121b2e;
  --surface: #16223d;
  --card: #16253d;
  --card-2: #182948;
  --text: #b8c2d6;
  --muted: #a7b2cc;
  --border: rgba(255,255,255,.10);

  --brand: #4f8cff;         /* PRIMARY BRAND COLOUR (replace) */
  --brand-2: #2dd4bf;       /* SECONDARY ACCENT (replace) */
  --brand-dark: #1c4fd6;

  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;

  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.25);

  --radius: 18px;
  --radius-sm: 12px;
  --max: 1200px;

  --focus: 0 0 0 4px rgba(79, 140, 255, .35);
}

*{ box-sizing: border-box; }
/* Hint to the browser that the site uses a dark UI so native form controls (dropdowns) use readable colours */
html{ scroll-behavior: smooth; color-scheme: dark; }
body{
  margin: 0;
  position: relative;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(137,207,240,.24), transparent 58%),
    radial-gradient(900px 700px at 90% 10%, rgba(45,212,191,.16), transparent 62%),
    radial-gradient(900px 650px at 50% 120%, rgba(137,207,240,.15), transparent 58%),
    linear-gradient(180deg, var(--bg), #0a1220 65%, #080d18);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.55;
}

/* Subtle watermark logo background (replace the image if you update branding) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Full-screen logo background */
  background-image: url("../images/phezulu-academy-logo.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* makes it full-screen */
  opacity: .08;
  filter: saturate(0.95) contrast(1.05) blur(1px);
  mix-blend-mode: screen;
}

/* Ensure page content sits above the watermark layer */
body > *{ position: relative; z-index: 1; }

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
/* ...but an inline link inside a sentence has to look like a link. The reset
   above is right for nav items, buttons, pills and whole-card links, which
   all carry their own styling -- it was wrong for body copy, where it left
   every inline link the exact same colour as the text around it with no
   underline (measured identical: rgba(184,194,214,.82)). The 404 page was the
   clearest casualty: its only two ways back, "homepage" and "browse our
   courses", read as plain text. Same treatment .prose already gives editor
   content, scoped to the classes body copy actually uses. Deliberately placed
   here, straight after the reset, so the later context rules -- .nav-links a,
   .drawer-links a, .footer a, .prose a -- still win where they apply. */
.lead a,
.small a,
.hint a,
.eyebrow a{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lead a:hover,
.small a:hover,
.hint a:hover,
.eyebrow a:hover{ color: #fff; }
/* An .eyebrow is a standalone label whose whole content is the link, not a
   link sitting inside a sentence, so colour alone identifies it -- the same
   way nav items and buttons work. Underlining it as well fought with the
   heading underneath, and doubly so where the label wraps onto two lines. */
.eyebrow a{ text-decoration: none; }
.eyebrow a:hover{ text-decoration: underline; }
/* A button or pill that happens to sit in body copy keeps its own look. */
.lead a.btn, .small a.btn, .hint a.btn, .eyebrow a.btn,
.lead a.pill, .small a.pill, .hint a.pill, .eyebrow a.pill{
  color: inherit;
  text-decoration: none;
}
p{ margin: 0 0 1rem; color: var(--muted); }
ul{ margin: 0; padding-left: 1.1rem; color: var(--muted); }
li{ margin: .35rem 0; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 12px;
  background: #fff;
  color: #000;
  padding: .6rem .9rem;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus{ left: 12px; outline: none; }

.container{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section{
  padding: 4.25rem 0;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: rgba(184, 194, 214, .92);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}
.eyebrow::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

h1,h2,h3{
  margin: 0 0 .8rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
}
h1{ font-size: clamp(2.1rem, 4.3vw, 3.55rem); }
h2{ font-size: clamp(1.55rem, 2.7vw, 2.2rem); }
h3{ font-size: 1.18rem; }

.lead{
  font-size: clamp(1.02rem, 1.4vw, 1.1rem);
  color: rgba(184, 194, 214, .82);
  max-width: 70ch;
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  color: rgba(184, 194, 214, .92);
  font-size: .86rem;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.15rem;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}
.btn:focus-visible{ outline: none; box-shadow: var(--focus); }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{
  background: linear-gradient(135deg, var(--brand), rgba(79,140,255,.85));
  color: #061025;
  box-shadow: 0 6px 16px rgba(79,140,255,.28);
}
.btn-primary:hover{ box-shadow: 0 9px 20px rgba(79,140,255,.36); }
.btn-secondary{
  background: rgba(255,255,255,.07);
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover{ background: rgba(255,255,255,.10); }
.btn-ghost{
  background: transparent;
  border-color: var(--border);
  color: rgba(184, 194, 214, .92);
}

.grid{
  display: grid;
  gap: 1.1rem;
}
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.card-body{ padding: 1.25rem; }
.card:hover{
  border-color: rgba(79,140,255,.35);
  box-shadow: 0 22px 55px rgba(0,0,0,.38);
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(7, 11, 21, .58);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 0;
}
.brand{
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 180px;
}
.brand img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  /* The SVG badge carries its own white circle and sits flush against the
     dark nav — no extra box/background needed, that clashed with its shape. */
}
.brand-title{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-title strong{ font-size: 1rem; letter-spacing: -0.01em; }
.brand-title span{ font-size: .84rem; color: var(--muted); }

.nav-links{
  display: flex;
  align-items: center;
  gap: .25rem;
}
.nav-links a{
  padding: .6rem .85rem;
  border-radius: 12px;
  color: rgba(184,194,214,.88);
  font-weight: 650;
  border: 1px solid transparent;
}
.nav-links a:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.nav-links a[aria-current="page"]{
  background: rgba(79,140,255,.12);
  border-color: rgba(79,140,255,.35);
  color: rgba(184,194,214,.98);
}
.nav-cta{
  display: flex;
  align-items: center;
  gap: .6rem;
}

.menu-btn{
  display: none;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: .55rem .7rem;
  cursor: pointer;
}
.menu-btn:focus-visible{ outline: none; box-shadow: var(--focus); }

.mobile-drawer{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.55);
}
.mobile-drawer[aria-hidden="false"]{ display: block; }
.drawer-panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: rgba(7, 11, 21, .92);
  border-left: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  padding: 1.1rem;
  transform: translateX(12px);
  animation: slideIn .18s ease-out forwards;
}
@keyframes slideIn{
  from{ transform: translateX(28px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}
.drawer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.drawer-links{
  display: grid;
  gap: .55rem;
  margin: 1rem 0;
}
.drawer-links a{
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 700;
}
.drawer-links a:hover{ background: rgba(255,255,255,.07); }
.drawer-links a[aria-current="page"]{ border-color: rgba(79,140,255,.35); background: rgba(79,140,255,.12); }

.hero{
  padding: 4.8rem 0 3.5rem;
}
.hero-wrap{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 2rem;
  align-items: center;
}
.hero-card{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(650px 450px at 20% 0%, rgba(79,140,255,.28), transparent 58%),
    radial-gradient(650px 450px at 90% 10%, rgba(45,212,191,.20), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-card-inner{ padding: 1.4rem; }
.hero-badges{ display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.35rem; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.hero-visual{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg, rgba(79,140,255,.22), rgba(45,212,191,.12)),
    url("../images/course-default.svg") center/cover no-repeat;
  min-height: 380px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.hero-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 420px at 50% 55%, rgba(0,0,0,.18), rgba(0,0,0,.55));
}
/* With the Academy's own square hero graphic (front-page.php): the box takes
   the image's 1:1 shape so nothing is cropped, and the placeholder
   background + darkening overlay are switched off -- the graphic is the
   finished artwork. Border, radius and shadow stay so it still reads as a
   card next to the hero copy. */
.hero-visual.has-photo{
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: none;
}
.hero-visual.has-photo::after{ display: none; }
.hero-visual .hero-visual-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-visual .hero-visual-caption{
  position: absolute;
  inset: auto 1.2rem 1.2rem 1.2rem;
  z-index: 1;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7, 11, 21, .65);
  backdrop-filter: blur(10px);
}
.hero-visual .hero-visual-caption strong{ display: block; }
.hero-visual .hero-visual-caption span{ color: var(--muted); font-size: .92rem; }

.kpi-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.35rem;
}
.kpi{
  padding: 1.05rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.kpi strong{
  display: block;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.kpi span{ color: var(--muted); font-size: .9rem; }

.muted{ color: var(--muted); }
.small{ font-size: .93rem; }

.feature-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(79,140,255,.14);
  margin-bottom: .9rem;
}
.feature-icon svg{ width: 22px; height: 22px; }
.feature-icon.teal{ background: rgba(45,212,191,.12); }
.feature-icon.amber{ background: rgba(245,158,11,.12); }

.cta{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 520px at 0% 20%, rgba(79,140,255,.25), transparent 62%),
    radial-gradient(900px 520px at 100% 20%, rgba(45,212,191,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.cta-inner{
  padding: 2rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.cta-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.footer{
  padding: 2.6rem 0;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(7, 11, 21, .25);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 1.3rem;
}
/* The footer keeps its own quieter treatment: its own colour, and an underline
   on hover only. text-decoration has to be reset explicitly -- this rule only
   ever set colour, so the inline-link rule near the top of the file would
   otherwise underline all 49 links down here as well. */
.footer a{ color: rgba(184,194,214,.88); text-decoration: none; }
.footer a:hover{ color: #fff; text-decoration: underline; }
.footer small{ color: var(--muted); }
.footer .social{
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}
.footer .social a{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .9rem .35rem .35rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(184,194,214,.88);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  transition: border-color .55s cubic-bezier(.22,1,.36,1), background .55s cubic-bezier(.22,1,.36,1), color .55s cubic-bezier(.22,1,.36,1);
}
.footer .social a:hover,
.footer .social a:focus-visible{
  background: rgba(137,207,240,.09);
  border-color: rgba(137,207,240,.4);
  color: #fff;
  text-decoration: none;
}
.footer .social-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.footer .social-icon.instagram{
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
}
.footer .social-icon.whatsapp{
  background: linear-gradient(135deg, #25d366, #128c7e);
}
.footer .social-icon svg{
  width: 16px;
  height: 16px;
  display: block;
}
.footer .social a:hover .social-icon,
.footer .social a:focus-visible .social-icon{
  animation: social-curious 1.8s ease-in-out infinite;
}
@keyframes social-curious{
  0%, 100%{ transform: translateY(-2px) rotate(-10deg) scale(1.12); }
  50%{ transform: translateY(-4px) rotate(10deg) scale(1.18); }
}
@media (prefers-reduced-motion: reduce){
  .footer .social-icon{ transition: none; }
  .footer .social a:hover .social-icon,
  .footer .social a:focus-visible .social-icon{ animation: none; transform: none; }
}
.footer-bottom{
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
}

/* Forms */
.form{
  display: grid;
  gap: .9rem;
}
.form-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .9rem;
}
label{
  display: block;
  font-weight: 650;
  color: rgba(184,194,214,.92);
  margin-bottom: .35rem;
}
input, select, textarea{
  width: 100%;
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: #121b2e; /* solid background for maximum contrast */
  color: #ffffff;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
textarea{ min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: rgba(169, 182, 214, .72); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(79,140,255,.55);
  box-shadow: var(--focus);
  background: #121b2e;
}

/* Improve dropdown readability (Windows/Chrome native menus) */
select{
  color-scheme: dark;
  -webkit-text-fill-color: #ffffff; /* improves contrast in some Chromium builds */
}
select option,
select optgroup{
  background-color: #121b2e !important;
  color: #ffffff !important;
}
.hint{ color: var(--muted); font-size: .92rem; margin-top: .25rem; }
.error-text{
  color: rgba(239,68,68,.95);
  font-size: .92rem;
  margin-top: .35rem;
  display: none;
}
.field[data-invalid="true"] .error-text{ display: block; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{
  border-color: rgba(239,68,68,.75);
  box-shadow: 0 0 0 4px rgba(239,68,68,.20);
}
.form-success{
  display: none;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.25);
  background: rgba(34,197,94,.12);
  color: rgba(184,194,214,.95);
}
.form-success[aria-hidden="false"]{ display: block; }

/* Course catalogue */
.page-title-row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.1rem;
  margin-bottom: 1.3rem;
}
.filters{
  display: grid;
  gap: .9rem;
  padding: 1.1rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
/* Category pills that link to the filtered catalogue, and the category
   eyebrow on a course page. */
a.pill:hover{ background: rgba(255,255,255,.14); color: #fff; }
.eyebrow a:hover{ text-decoration: underline; }
/* Filters are always open on desktop. On phones they sit behind a toggle
   (archive-course.php / course-filter.js) so the first courses are above
   the fold instead of a full screen of controls. */
.filters-toggle{ display: none; }
.filters-grid{
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(0,1fr));
  gap: .85rem;
}
.filters-grid-2{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.courses-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.1rem;
  margin-top: 1.2rem;
}
/* A lone result would otherwise sit left-aligned in the first grid cell
   with empty space to the right — center it instead. Left at full-width
   below 721px, where .courses-grid is already a single column and a
   fixed max-width would just shrink the card on small screens. */
@media (min-width: 721px){
  .courses-grid:has(> .card:only-child){
    grid-template-columns: minmax(0, 380px);
    justify-content: center;
  }
}
.course-media{
  height: 150px;
  overflow: hidden;
  /* Shows briefly while the image loads, and as a fallback if it fails to load */
  background:
    radial-gradient(520px 220px at 30% 0%, rgba(79,140,255,.35), transparent 60%),
    radial-gradient(520px 220px at 100% 20%, rgba(45,212,191,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.course-media img{ width: 100%; height: 100%; object-fit: cover; }
.course-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .7rem 0 .9rem;
}
.course-price{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .9rem;
}
.price{
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(184,194,214,.98);
}

/* Grid rows stretch cards to equal height, but the price/button row would
   otherwise sit right under each card's own description — different
   description lengths then leave it at a different height per card in the
   same row. Flex column + margin-top:auto pins it to the bottom instead,
   so prices line up across a row regardless of content length. Applies to
   both the courses.html catalogue grid and the homepage's featured-courses
   grid, which share the same card markup. */
.courses-grid .card,
#featuredCourses .card{ display: flex; flex-direction: column; }
/* Catalogue cards past the first batch are rendered but not yet live (see
   archive-course.php / course-filter.js). Needs to out-rank the display:flex
   rule above, hence the attribute selector rather than the hidden attribute. */
.courses-grid .card[data-deferred]{ display: none; }
/* Editor content on generic pages (page.php), e.g. the Privacy Policy. */
.prose h2{ font-size: 1.3rem; margin: 1.6rem 0 .5rem; }
.prose h3{ font-size: 1.1rem; margin: 1.2rem 0 .4rem; }
.prose h2:first-child, .prose p:first-child{ margin-top: 0; }
.prose p, .prose li{ color: var(--muted); }
.prose ul{ margin: 0 0 1rem; }
.prose a{ color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover{ color: #fff; }
.load-more-wrap{ display: flex; justify-content: center; margin-top: 1.5rem; }
.courses-grid .card-body,
#featuredCourses .card-body{ padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
/* Center the title/description/meta pills; the price row keeps its own
   left price + right button layout, untouched. */
.courses-grid .card-body h3,
.courses-grid .card-body p.small,
#featuredCourses .card-body h3,
#featuredCourses .card-body p.small{ text-align: center; }
.courses-grid .course-meta,
#featuredCourses .course-meta{ justify-content: center; }
.courses-grid .course-price,
#featuredCourses .course-price{
  align-items: center;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.courses-grid .course-price .btn,
#featuredCourses .course-price .btn{
  padding: .7rem 1.3rem;
  font-size: .92rem;
  white-space: nowrap;
}
.empty{
  margin-top: 1.25rem;
  padding: 1.3rem;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}

/* Course detail */
.detail-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 1.1rem;
  align-items: start;
}
.detail-aside{
  position: sticky;
  top: 90px;
}
.list-clean{ padding-left: 1.1rem; }
.dates{ display: grid; gap: .55rem; }
.date-row{
  padding: .7rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.date-row strong{ display: block; }
.date-row span{ color: var(--muted); font-size: .92rem; }

/* Utilities */

/* Responsive */
/* The desktop header (brand + 4 links + 2 buttons) needs ~970px. Below that
   the links would wrap onto two lines, so the Menu button takes over here --
   not at the 720px phone breakpoint where it used to. */
@media (max-width: 1000px){
  .nav-links, .nav-cta{ display: none; }
  .menu-btn{ display: inline-flex; }
}
@media (max-width: 980px){
  .hero-wrap{ grid-template-columns: 1fr; }
  .hero-visual{ min-height: 280px; }
  .kpi-row{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .courses-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .detail-grid{ grid-template-columns: 1fr; }
  .detail-aside{ position: static; }
  .filters-grid{ grid-template-columns: 1fr; }
  .filters-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.swipe-arrow{ display: none; }
@media (max-width: 720px){
  /* Filter panel behind a toggle on phones (see .filters-toggle above). */
  .filters-toggle{ display: inline-flex; width: 100%; justify-content: center; margin-bottom: .9rem; }
  .filters:not(.is-open){ display: none; }
  .form-row{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .courses-grid{ grid-template-columns: 1fr; }
  .cta-inner{ flex-direction: column; align-items: flex-start; }
  .cta-actions{ width: 100%; }
  .hero-actions .btn{ width: 100%; }
  .section{ padding: 3rem 0; }
  .hero{ padding: 3rem 0 2.25rem; }

  /* Swipeable card row: saves vertical space on mobile by letting card pairs
     scroll horizontally instead of stacking. Desktop keeps the normal grid. */
  .swipe-cards{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    margin: 0 -1.1rem;
    padding: .2rem 1.1rem .6rem;
    scrollbar-width: none;
  }
  .swipe-cards::-webkit-scrollbar{ display: none; }
  .swipe-cards > *{
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .swipe-wrap{ position: relative; }
  .swipe-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1.3rem;
    top: 2.3rem;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--brand), rgba(79,140,255,.85));
    box-shadow: 0 6px 16px rgba(79,140,255,.32);
    color: #061025;
    cursor: pointer;
  }
  .swipe-arrow svg{ width: 18px; height: 18px; }
  .swipe-arrow:active{ transform: translateY(-50%) scale(.92); }
  .swipe-arrow:focus-visible{ outline: none; box-shadow: var(--focus); }
}
@media (max-width: 480px){
  .filters-grid-2{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
  .page-title-row{ align-items: flex-start; }
}

/* The scroll-reveal animation that used to live here (.reveal / .reveal.in --
   elements starting at opacity 0 and fading in once JavaScript decided they
   were on screen) has been removed, along with both copies of the JavaScript
   that drove it. It was the only thing on this site capable of leaving content
   present in the page but invisible, and every "the courses disappeared"
   report traced back to it. Cards now render with the page. */