/* ==========================================================================
   NextBrix - responsive overrides
   Mirrors the sample project's chennai.css / chennai-mobile.css split.
   Base rules in nextbrix.css are mobile-first; this file layers up the
   breakpoints and holds small-screen-only fixes.
   ========================================================================== */

/* >= 576px  (sm) --------------------------------------------------------- */
@media (min-width: 576px) {
    .nb-features { grid-template-columns: repeat(3, 1fr); }
    .nb-hero__title { font-size: 40px; }
    .nb-contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* >= 768px  (md) --------------------------------------------------------- */
@media (min-width: 768px) {
    :root { --nb-section-y: 60px; }
    body { font-size: 15.5px; }
    h1 { font-size: 38px; }
    h2 { font-size: 29px; }

    .nb-topbar__inner { flex-direction: row; justify-content: space-between; text-align: left; }
    .nb-modules { grid-template-columns: repeat(2, 1fr); }
    .nb-course-grid { grid-template-columns: repeat(2, 1fr); }
    .nb-steps { grid-template-columns: repeat(2, 1fr); }
    .nb-outcomes { grid-template-columns: repeat(3, 1fr); }
    .nb-orbit { max-width: 400px; }
    .nb-orbit__chip { font-size: 12px; padding: 14px 8px; }
    .nb-form { padding: 30px; }
}

/* >= 992px  (lg) --------------------------------------------------------- */
@media (min-width: 992px) {
    :root { --nb-section-y: 72px; }

    /* Desktop nav */
    .nb-navtoggle { display: none; }
    .nb-nav { display: block !important; }
    .nb-nav__list { display: flex; align-items: center; gap: 4px; padding: 0; }
    .nb-nav__list a { border-bottom: 0; padding: 10px 14px; border-radius: var(--nb-radius-pill); }
    .nb-nav__list a:hover { background: var(--nb-surface-alt); }
    .nb-nav__list a.is-active { background: var(--nb-accent-soft); color: var(--nb-accent); }
    .nb-nav__cta { padding: 0 0 0 10px; }

    .nb-hero { padding: 66px 0 76px; }
    .nb-hero__title { font-size: 52px; }
    .nb-hero__lead { font-size: 17px; }
    .nb-modules { grid-template-columns: repeat(3, 1fr); }
    .nb-features { grid-template-columns: repeat(6, 1fr); }
    .nb-feature { padding: 22px 14px; }
    .nb-steps { grid-template-columns: repeat(4, 1fr); }
    .nb-pagehead { padding: 52px 0; }
    .nb-ctaband { padding: 56px 0; }
    .nb-orbit { margin-top: 0; max-width: 100%; gap: 16px; }

    /* Sticky bar is a small-screen affordance only */
    .nb-stickybar { display: none; }
    body { padding-bottom: 0; }
}

/* >= 1200px (xl) --------------------------------------------------------- */
@media (min-width: 1200px) {
    .nb-modules { grid-template-columns: repeat(5, 1fr); }
    .nb-module-card--wide { grid-column: span 2; }
    .nb-hero__title { font-size: 60px; }
    .nb-feature__title { font-size: 14px; }
}

/* max-width: 575.98px  (small-screen only fixes) ------------------------- */
@media (max-width: 575.98px) {
    .nb-hero__actions .nb-btn,
    .nb-ctaband__actions .nb-btn,
    .nb-course-card__actions .nb-btn { width: 100%; }
    .nb-ribbon__label, .nb-ribbon__meta { width: 100%; text-align: center; }
    .nb-topbar { font-size: 12.5px; }
}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .nb-btn:hover, .nb-feature:hover, .nb-course-card:hover { transform: none; }
}

/* Print ------------------------------------------------------------------- */
@media print {
    .nb-topbar, .nb-header, .nb-stickybar, .nb-ctaband { display: none !important; }
    body { padding-bottom: 0; }
}