/* ═══════════════════════════════════════════════════════════
   homepage3.css — Companion overrides for index3.html
   Split-hero layout: info left, video/image right
   ═══════════════════════════════════════════════════════════ */

:root {
  --hds3-banner-min-height: 50dvh;
  --hds3-bg-dark: #0d1018;

  --hds3-image-width: 75%;
  --hds3-image-brightness: 0.85;
  --hds3-image-mask-stop: 15%;

  --hds3-video-width: 65%;
  --hds3-video-mask-stop: 25%;

  --hds3-cards-left-col: 52%;
  --hds3-hero-gap: 2.5rem;
  --hds3-hero-padding: 4.5rem 4rem 4rem 5rem;
  --hds3-hero-grad-1: #0b0c10;
  --hds3-hero-grad-2: #0d1018ef;
  --hds3-hero-grad-3: #0d1018c0;
  --hds3-hero-grad-4: #0d101860;

  --hds3-hero-text-max-width: 600px;
  --hds3-hero-title-size: clamp(2.4rem, 3.1vw, 3.6rem);
  --hds3-hero-title-letter-spacing: 1.5px;
  --hds3-hero-title-line-height: 1.15;
  --hds3-hero-subtitle-size: clamp(1.4rem, 1.6vw, 1.8rem);
  --hds3-hero-subtitle-color: #FFFFFFB8;

  --hds3-course-groups-max-width: 600px;
  --hds3-course-groups-gap: 3rem;
  --hds3-card-group-gap: 0.5rem;
  --hds3-group-label-size: 1.05rem;
  --hds3-group-label-color: #FFFFFF80;
  --hds3-group-label-icon-size: 1.1rem;

  --hds3-btn-gap: 0.9rem;
  --hds3-btn-padding: 0.9rem 2.4rem;
  --hds3-btn-font-size: 2.2rem;
  --hds3-btn-icon-size: 2rem;
  --hds3-btn-letter-spacing: 0.5px;
  --hds3-btn-line-height: 1.3;
  --hds3-enroll-text: var(--primary-color);
  --hds3-call-accent: #7eb8da;
  --hds3-call-bg: #7EB8DA26;
  --hds3-call-border: #7EB8DA4D;

  --hds3-course-grid-gap: 12px;

  --hds3-chip-min-height: 5.4rem;
  --hds3-chip-gap: 1rem;
  --hds3-chip-padding: 1.15rem 1.8rem;
  --hds3-chip-radius: 10px;
  --hds3-chip-font-size: 1.7rem;
  --hds3-chip-font-size-mobile: 1.15rem;
  --hds3-chip-text: #f0f0f0;
  --hds3-chip-icon-size: 2rem;
  --hds3-chip-bg: #d0d0d027;
  --hds3-chip-border: #FFFFFF14;
  --hds3-chip-hover-bg: #FFFFFF14;
  --hds3-chip-online-shadow: #F2C43A1A;
  --hds3-chip-call-shadow: #7EB8DA1A;
}


/* ───────────────────────────────────────────────────────────
   1. HERO BANNER — Split Grid
   ─────────────────────────────────────────────────────────── */

#c-banner {
  min-height: var(--hds3-banner-min-height);
  display: grid;
  grid-template-columns: 1fr;     /* single cell; children stack */
  grid-template-rows: 1fr;
  background-color: var(--hds3-bg-dark);      /* fills the gap left of the video */
}

/* Remove the old radial vignette — left panel handles readability now */
#c-banner::before {
  display: none;
}

/* Video / image — right-aligned, only covers ~75% of the banner width.
   mask-image fades the left edge into the #0d1018 background. */
#banner-background-img {
  inset: auto;                    /* cancel inset:0 from homepage2 */
  top: 0;
  right: 0;
  width: var(--hds3-image-width);
  height: 100%;
  filter: brightness(var(--hds3-image-brightness));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--hds3-image-mask-stop));
          mask-image: linear-gradient(to right, transparent 0%, #000 var(--hds3-image-mask-stop));
}

video#banner-background-img {
  /* filter: brightness(0.7) saturate(0.7) contrast(1.1); */
  inset: auto;
  top: 0;
  right: 0;
  width: var(--hds3-video-width);
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--hds3-video-mask-stop));
          mask-image: linear-gradient(to right, transparent 0%, #000 var(--hds3-video-mask-stop));
}


/* ───────────────────────────────────────────────────────────
   2. INFO PANEL (left side overlay via grid)
   ─────────────────────────────────────────────────────────── */

#banner-cards-container {
  /* Override homepage2 — use grid to create the split */
  display: grid;
  grid-template-columns: var(--hds3-cards-left-col) 1fr;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
  box-shadow: none;
}

.hero-section {
  /* Left column */
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hds3-hero-gap);
  max-width: none;
  height: auto;
  padding: var(--hds3-hero-padding);
  /* #0d1018 matches the video's natural dark left edge — seamless blend */
  background: linear-gradient(
    to right,
    var(--hds3-hero-grad-1) 0%,
    var(--hds3-hero-grad-2) 40%,
    var(--hds3-hero-grad-3) 65%,
    var(--hds3-hero-grad-4) 82%,
    transparent    100%
  );
  

  
}


/* ───────────────────────────────────────────────────────────
   3. HERO TEXT
   ─────────────────────────────────────────────────────────── */

.hero-text {
  max-width: var(--hds3-hero-text-max-width);
}

.hero-text h1 {
  text-align: left;
  font-size: var(--hds3-hero-title-size);
  font-weight: 800;
  /* font-style: italic; */
  letter-spacing: var(--hds3-hero-title-letter-spacing);
  text-shadow: none;
  line-height: var(--hds3-hero-title-line-height);
  color: var(--hds-yellow);
}

.hero-text p {
  text-align: left;
  font-size: var(--hds3-hero-subtitle-size);
  color: var(--hds3-hero-subtitle-color);
  text-shadow: none;
  margin-top: 0.6rem;
  line-height: 1.5;
}


/* ───────────────────────────────────────────────────────────
   4. COURSE CARD GROUPS — compact chip layout
   ─────────────────────────────────────────────────────────── */

.course-groups {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--hds3-course-groups-max-width);
  display: flex;
  flex-direction: column;
  gap: var(--hds3-course-groups-gap);
  flex :1;
}

.card-group {
  display: flex;
  flex-direction: column;
  gap: var(--hds3-card-group-gap);
}

.card-group-label {
  font-size: var(--hds3-group-label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--hds3-group-label-color);
}

.card-group-label wa-icon {
  font-size: var(--hds3-group-label-icon-size);
}


/* ── Action buttons (Enroll / Phone) ── */

.hero-action-btn {
  height: auto;

  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--hds3-btn-gap);
  padding: var(--hds3-btn-padding);
  border-radius: 10px;
  font-size: var(--hds3-btn-font-size);
  font-weight: 700;
  letter-spacing: var(--hds3-btn-letter-spacing);
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
  border: none;
  line-height: var(--hds3-btn-line-height);
  margin-top: 0.3rem;
}

.hero-action-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.hero-action-btn wa-icon {
  font-size: var(--hds3-btn-icon-size);
}

.hero-action-btn--enroll {
  background: var(--hds-yellow);
  color: var(--hds3-enroll-text);
}

.hero-action-btn--call {
  background: var(--hds3-call-bg);
  color: var(--hds3-call-accent);
  border: 1px solid var(--hds3-call-border);
}


/* ── Course chip grid ── */

.card-group--online .course-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--hds3-course-grid-gap);
  height: auto;
  align-content: start;
}

.card-group--call .course-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--hds3-course-grid-gap);
  height: auto;
  align-content: start;
}

.course-groups .course-list {
  height: auto;
  grid-auto-rows: 1fr;
  align-content: start;
}


/* ───────────────────────────────────────────────────────────
   5. CHIP STYLES
   ─────────────────────────────────────────────────────────── */

.course-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--hds3-chip-min-height);
  gap: var(--hds3-chip-gap);
  padding: var(--hds3-chip-padding);
  border-radius: var(--hds3-chip-radius);
  text-decoration: none;
  color: var(--hds3-chip-text);
  font-size: var(--hds3-chip-font-size);
  font-weight: 500;
  white-space: nowrap;
  /* line-height: 1.3; */
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  background: var(--hds3-chip-bg);
  border: 1px solid var(--hds3-chip-border);
}

.course-chip span {
  white-space: nowrap;
}

.course-chip .chip-icon {
  font-size: var(--hds3-chip-icon-size);
  flex-shrink: 0;
  opacity: 0.7;
}

.course-chip:hover {
  transform: translateY(-2px);
  background: var(--hds3-chip-hover-bg);
}


/* ── Online chips: gold accent on hover ── */

.card-group--online .course-chip:hover {
  border-color: var(--hds-yellow);
  box-shadow: 0 0 12px var(--hds3-chip-online-shadow);
}

.card-group--online .course-chip .chip-icon {
  color: var(--hds-yellow);
}


/* ── Call chips: blue accent on hover ── */

.card-group--call .course-chip:hover {
  border-color: var(--hds3-call-accent);
  box-shadow: 0 0 12px var(--hds3-chip-call-shadow);
}

.card-group--call .course-chip .chip-icon {
  color: var(--hds3-call-accent);
}


/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── ≤ 1185px — tighten the split ── */
@media screen and (max-width: 1185px) {
  #banner-cards-container {
    grid-template-columns: 56% 1fr;
  }
  .hero-section {
    padding: 3.5rem 3rem 3rem 3.5rem;
  }
}

/* ── ≤ 900px — collapse to full-width overlay ── */
@media screen and (max-width: 900px) {
  #c-banner {
    min-height: auto;
  }
  #banner-background-img,
  video#banner-background-img {
    width: 100%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  #banner-cards-container {
    grid-template-columns: 1fr;
  }
  .hero-section {
    grid-column: 1;
    padding: 3rem 2rem;
    background: linear-gradient(
      to bottom,
      #0C0F18F2 0%,
      #0C0F18E0 100%
    );
  }
  .hero-text h1 {
    text-align: center;
    font-size: 3rem;
  }
  .hero-text p {
    text-align: center;
  }
  .course-groups {
    max-width: 100%;
  }
  .card-group-header {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ── ≤ 680px — stack chips vertically ── */
@media screen and (max-width: 680px) {
  .hero-section {
    padding: 2.5rem 1.5rem;
  }
  .hero-text h1 {
    font-size: 2.6rem;
  }
  .card-group--online .course-list,
  .card-group--call .course-list {
    grid-template-columns: 1fr 1fr;
  }
  .course-chip,
  .course-chip span {
    white-space: normal;
  }
  .hero-action-btn {
    font-size: 1.7rem;
    padding: 0.75rem 1.8rem;
  }
  .hero-action-btn wa-icon {
    font-size: 1.6rem;
  }
}

/* ── ≤ 420px — phones ── */
@media screen and (max-width: 420px) {
  .hero-section {
    padding: 2rem 1rem;
    gap: 1.8rem;
  }
  .hero-text h1 {
    font-size: 2.2rem;
  }
  .hero-text p {
    font-size: 1.3rem;
  }
  .course-groups {
    gap: 1.2rem;
  }
  .card-group--online .course-list,
  .card-group--call .course-list {
    grid-template-columns: 1fr;
  }
  .card-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .course-chip {
    font-size: var(--hds3-chip-font-size-mobile);
    padding: 0.55rem 0.8rem;
  }
}