/* ============================================================
   MCAL Global — Visual Density Reduction
   General typography/spacing: 768px+
   Hero-specific, breadcrumb, buttons: 1024px+ (desktop only)
   Mobile styles (< 768px) are completely untouched.
   ============================================================ */

/* ── 1. SECTION PADDING ──────────────────────────────────────*/
.section-padding { padding: 60px 0 !important; }

@media (max-width: 767px) {
  .section-padding { padding: 40px 0 !important; }
}

/* ── 2. HERO HEIGHT ──────────────────────────────────────────
   Desktop (1024px+): fill exactly the viewport — no gap below.
   Mobile  (<768px):  use 100svh to avoid address-bar overlap.  */
@media (min-width: 1024px) {
  .hero-bg {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767px) {
  .hero-bg {
    min-height: 100svh !important;
  }
}

/* ── 3. HERO INNER CONTAINER PADDING (1024px+) ───────────────
   40px top / 30px bottom — applies to both py-20 (homepage)
   and py-16 md:py-20 (course pages).                        */
@media (min-width: 1024px) {
  .hero-bg .py-20,
  .hero-bg .md\:py-20,
  .hero-bg .py-16,
  .hero-bg .md\:py-16 {
    padding-top: 2.5rem !important;      /* 40px */
    padding-bottom: 1.875rem !important; /* 30px */
  }
}

/* ── 4. HERO HEADINGS (1024px+) ─────────────────────────────
   Target h1 directly so arbitrary Tailwind values like
   lg:text-[4.2rem] are also capped at 44px.                */
@media (min-width: 1024px) {
  .hero-bg h1 {
    font-size: 2.75rem !important;  /* 44px */
    line-height: 1.08 !important;
  }
}

/* ── 5. HERO BODY PARAGRAPH (1024px+) ───────────────────────
   leading-relaxed is on all hero description paragraphs.   */
@media (min-width: 1024px) {
  .hero-bg .leading-relaxed {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.5 !important;
  }
}

/* ── 6. HERO CTA BUTTON SIZING (1024px+) ────────────────────
   Compact: 12px vertical / 28px horizontal / 14px font.   */
@media (min-width: 1024px) {
  .hero-bg .py-4,
  .hero-bg .md\:py-4 {
    padding-top: 0.75rem !important;     /* 12px */
    padding-bottom: 0.75rem !important;
  }
  .hero-bg .py-3\.5,
  .hero-bg .md\:py-3\.5 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  .hero-bg .px-8,
  .hero-bg .md\:px-8 {
    padding-left: 1.75rem !important;    /* 28px */
    padding-right: 1.75rem !important;
  }
  .hero-bg button {
    font-size: 0.875rem !important;      /* 14px */
  }
}

/* ── 7. HERO TRUST BADGES / INFO BAR (1024px+) ──────────────
   13px text for the icon+text trust lines below buttons.  */
@media (min-width: 1024px) {
  .hero-bg .text-sm {
    font-size: 0.8125rem !important;  /* 13px */
  }
}

/* ── 8. HERO VERTICAL RHYTHM (1024px+) ──────────────────────
   Reduce space-y gaps inside hero content column.
   Tailwind uses :not([hidden]) ~ :not([hidden]) for space-y. */
@media (min-width: 1024px) {
  .hero-bg .space-y-7 > :not([hidden]) ~ :not([hidden]),
  .hero-bg .space-y-6 > :not([hidden]) ~ :not([hidden]),
  .hero-bg .space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem !important;  /* 16px */
  }
  .hero-bg .md\:space-y-6 > :not([hidden]) ~ :not([hidden]),
  .hero-bg .md\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem !important;
  }
  /* Suppress extra pt-* padding that doubles up with space-y */
  .hero-bg .pt-2 { padding-top: 0 !important; }
  .hero-bg .pt-1 { padding-top: 0 !important; }
}

/* ── 9. BREADCRUMB ───────────────────────────────────────────
   Styling handled entirely by premium.css (floating overlay). */

/* ── 10. GLOBAL TYPOGRAPHY DENSITY (768px+) ─────────────────
   Section headings and body text outside the hero.        */
@media (min-width: 768px) {

  /* 72px → 44px */
  .text-7xl,
  .md\:text-7xl {
    font-size: 2.75rem !important;
    line-height: 1.08 !important;
  }

  /* 60px → 40px */
  .text-6xl,
  .md\:text-6xl {
    font-size: 2.5rem !important;
    line-height: 1.08 !important;
  }

  /* 48px → 36px */
  .text-5xl,
  .md\:text-5xl {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }

  /* 36px → 28px */
  .text-4xl,
  .md\:text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* 30px → 22px */
  .text-3xl,
  .md\:text-3xl {
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
  }

  /* 24px → 19px */
  .text-2xl,
  .md\:text-2xl {
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
  }

  /* 20px → 16px */
  .text-xl,
  .md\:text-xl {
    font-size: 1rem !important;
  }

  /* 18px → 15px */
  .text-lg,
  .md\:text-lg {
    font-size: 0.9375rem !important;
  }

}

/* ── 11. GLOBAL LG: TYPOGRAPHY (1024px+) ────────────────────*/
@media (min-width: 1024px) {

  .lg\:text-7xl {
    font-size: 2.75rem !important;
    line-height: 1.08 !important;
  }

  .lg\:text-6xl {
    font-size: 2.5rem !important;
    line-height: 1.08 !important;
  }

  .lg\:text-5xl {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }

  .lg\:text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .lg\:text-3xl {
    font-size: 1.375rem !important;
    line-height: 1.3 !important;
  }

}

/* ── 12. SECTION INTRO GAPS (768px+) ────────────────────────*/
@media (min-width: 768px) {
  .mb-12 { margin-bottom: 2rem !important; }
  .mb-10 { margin-bottom: 1.75rem !important; }
}

/* ── 13. GRID GAPS (768px+) ─────────────────────────────────*/
@media (min-width: 768px) {
  .gap-16 { gap: 2.5rem !important; }
  .gap-12 { gap: 2rem !important; }
  .md\:gap-16 { gap: 2.5rem !important; }
  .md\:gap-12 { gap: 2rem !important; }
}