/* ==========================================================================
   Homepage backdrops: ONE system for every band below the hero.
   Two shades only, alternating down the page:
     white  (+ the soft dot grid from the "Which full stack course" section)
     mint   (plain light green)
   The dark green stats strip stays as the single brand accent.

   Loaded after every other homepage stylesheet. Selectors start with
   #main-content > so they beat the inline <style> blocks inside includes.
   Section spacing moves from margin to padding, otherwise the colour of a
   band would stop short and the body gradient would show between bands.
   ========================================================================== */
:root {
  --hb-white: #ffffff;
  --hb-mint: #f3faf6;
  --hb-dot: rgba(4, 120, 87, 0.075);
  --hb-gap: clamp(64px, 8vw, 104px);
}

/* Shared shapes -------------------------------------------------------------- */
#main-content > .kdf-jb,
#main-content > .home-html-course,
#main-content > .course-section,
#main-content > .kdf-fc,
#main-content > .services-section,
#main-content > .training-stories,
#main-content > .upcoming-section,
#main-content > .kdf-qz,
#main-content > .course-directory,
#main-content > .quote,
#main-content > .testimonial-section,
#main-content > .contact-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: var(--hb-gap) !important;
  padding-bottom: var(--hb-gap) !important;
}

/* Mint bands: plain light green, nothing else. */
#main-content > .kdf-jb,
#main-content > .course-section,
#main-content > .services-section,
#main-content > .upcoming-section,
#main-content > .course-directory,
#main-content > .testimonial-section {
  background: var(--hb-mint) !important;
}

/* White bands: white with a soft dot grid that fades out at the top and bottom
   edges, so neighbouring bands meet on a clean line instead of a dotted seam. */
#main-content > .home-html-course,
#main-content > .kdf-fc,
#main-content > .training-stories,
#main-content > .kdf-qz,
#main-content > .quote,
#main-content > .contact-section {
  background:
    linear-gradient(180deg, var(--hb-white) 0, rgba(255, 255, 255, 0) 72px, rgba(255, 255, 255, 0) calc(100% - 72px), var(--hb-white) 100%),
    radial-gradient(circle, var(--hb-dot) 1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--hb-white) !important;
}

/* "Which full stack course" band: a dotted rule along its top edge and a soft
   mint wash behind the heading, so the band reads as its own section and the
   cards below sit on the plain dot grid. */
#main-content > .kdf-fc {
  background:
    radial-gradient(60% 420px at 50% 0, rgba(209, 250, 229, 0.75), rgba(209, 250, 229, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) calc(100% - 72px), var(--hb-white) 100%),
    radial-gradient(circle, var(--hb-dot) 1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--hb-white) !important;
}
#main-content > .kdf-fc::before {
  inset: 0 0 auto 0 !important;
  height: 3px;
  background: radial-gradient(circle, #6ee7b7 1.3px, transparent 1.7px) 0 50% / 12px 3px repeat-x !important;
  opacity: 0.9;
}

/* Chooser cards: every card shares one set of rows (quote, logos, tag, title,
   facts, price), so the titles line up even when one quote wraps to two lines. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) {
    #main-content > .kdf-fc .kdf-fc__grid { row-gap: 0; }
    #main-content > .kdf-fc .kdf-fc__grid > li,
    #main-content > .kdf-fc .kdf-fc__card { display: grid; grid-template-rows: subgrid; grid-row: span 6; }
    #main-content > .kdf-fc .kdf-fc__card > * { min-width: 0; }
    #main-content > .kdf-fc .kdf-fc__tag { justify-self: start; align-self: start; }
    #main-content > .kdf-fc .kdf-fc__name { align-self: start; }
    #main-content > .kdf-fc .kdf-fc__foot { align-self: end; }
  }
}

/* The old per-section glows and blobs go: the shade system replaces them. */
#main-content > .upcoming-section::before { background: none !important; }
#main-content > .kdf-jb .kdf-jb__blob { display: none !important; }

/* The stats strip keeps its brand green; only the gap below it moves inside the next band. */
#main-content > .stats-section { margin-bottom: 0 !important; }

/* The hero fades into the mint jobs band below it. */
#main-content > .hero-section { background: linear-gradient(180deg, #ffffff 60%, var(--hb-mint) 100%) !important; }

/* Jobs band: calmer India map so the cards lead. */
#main-content > .kdf-jb .india-map { opacity: 0.5; }
#main-content > .kdf-jb .im-dots { stroke-opacity: 0.14; }
#main-content > .kdf-jb .im-dots--bright { stroke-opacity: 0.28; animation-name: hbTwinkle; }
@keyframes hbTwinkle { 0%, 100% { stroke-opacity: 0.28; } 50% { stroke-opacity: 0.12; } }

@media (max-width: 767px) {
  :root { --hb-gap: 56px; }
}