/* ================================================================
   MathClair — Design System v2
   ================================================================ */

/* ---- View Transitions (navigation fluide entre pages) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vtFadeIn 150ms ease-out; }
@keyframes vtFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- 1. TOKENS ---- */
:root {
  /* Couleurs */
  --accent:       #6366f1;
  --accent-dark:  #4f46e5;
  --accent-soft:  #eef2ff;
  --hero-bg:      #0f172a;
  --body-bg:      #f8fafc;
  --card-bg:      #ffffff;
  --text:         #0f172a;
  --text-sub:     #64748b;
  --border:       #e2e8f0;

  /* Aliases legacy (compat pages existantes) */
  --bg:              var(--body-bg);
  --card:            var(--card-bg);
  --muted:           var(--text-sub);
  --primary:         var(--accent);
  --border-subtle:   1px solid var(--border);

  /* Ombres */
  --shadow-sm: 0 4px 16px -8px rgba(15,23,42,.16);
  --shadow-md: 0 12px 32px -16px rgba(15,23,42,.26);
  --shadow-lg: 0 24px 48px -24px rgba(15,23,42,.36);
  --shadow:    var(--shadow-md);

  /* Rayons */
  --radius-sm:        10px;
  --radius-md:        16px;
  --radius-lg:        22px;
  --border-radius-lg: var(--radius-md);

  /* Animations */
  --anim-fast: 180ms;
  --anim-med:  320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --anim-fast: 0ms; --anim-med: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ---- 2. BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--body-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--body-bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Offset pour la navbar fixe */
@media (min-width: 992px) {
  body { padding-top: 68px; }
}
@media (max-width: 991.98px) {
  body { padding-top: calc(66px + env(safe-area-inset-top, 0px)); }
}


/* ---- 3. CONTAINERS ---- */
.mc-container    { width: min(1160px, 100% - 48px); margin: 0 auto; }
.mc-container-sm { width: min(860px,  100% - 48px); margin: 0 auto; }

/* Compat ancien code */
.content-wrapper {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
}


/* ---- 4. TYPOGRAPHIE ---- */
.mc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mc-section-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--text);
}

.mc-section-sub {
  font-size: 1rem;
  color: var(--text-sub);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
}

/* Alias legacy */
.main-section-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 2rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  color: var(--text);
}


/* ---- 5. BOUTONS ---- */
.btn-mc-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 10px 22px -14px rgba(99,102,241,.65);
  transition: background var(--anim-fast), transform var(--anim-fast), box-shadow var(--anim-fast);
}
.btn-mc-primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.btn-mc-primary:active { transform: scale(.98); }

.btn-mc-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--anim-fast), background var(--anim-fast);
}
.btn-mc-ghost:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Bootstrap overrides pour cohérence */
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}


/* ---- 6. CARDS ---- */

/* Card de base */
.mc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Module card (avec accent coloré) */
.mc-module-card {
  --m-accent: var(--accent);
  --m-soft:   var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast);
}
.mc-module-card:hover {
  transform: translateY(-3px);
  border-color: var(--m-accent);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.mc-module-card:active { transform: scale(.98); }
.mc-module-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--m-accent);
  opacity: 0;
  transition: opacity var(--anim-fast);
}
.mc-module-card:hover::before,
.mc-module-card.is-ready::before { opacity: 1; }

.mc-module-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--m-accent);
  background: var(--m-soft);
  flex-shrink: 0;
}
.mc-module-name { font-size: .95rem; font-weight: 800; margin: 0; }
.mc-module-meta {
  font-size: .74rem;
  color: var(--text-sub);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}

/* Action card (alias legacy) */
.action-card {
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast);
}
.action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text); }
.action-card h3 { margin: .5rem 0; font-weight: 700; font-size: 1.2rem; color: var(--text); }
.action-card p  { font-size: .9rem; color: var(--text-sub); margin: 0; line-height: 1.45; }
.card-icon { font-size: 2rem; color: var(--accent); }

.card-course {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}


/* ---- 7. EXERCISE BOX ---- */
.exercise-box {
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: center;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast);
}
.exercise-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.exercise-idx { font-weight: 700; color: var(--accent); margin-right: 5px; }

.check-btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--text-sub);
  border: none;
  color: #fff;
  transition: background var(--anim-fast);
}
.check-btn:hover { background: var(--accent); }

/* Feedback alignment */
.exercise-box .col-6,
.exercise-box .text-danger,
.exercise-box .text-success,
.exercise-box .feedback-message { text-align: left !important; }
.exercise-box .row .col,
.exercise-box .row .col-md-6 { text-align: left; }


/* ---- 8. CORRECTION BOX ---- */
.correction-box {
  background: var(--body-bg);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--border);
  font-size: .9rem;
  text-align: left !important;
  overflow-x: auto;
  overflow-y: hidden;
  display: block;
}
.correction-box::-webkit-scrollbar { height: 6px; }
.correction-box::-webkit-scrollbar-track { background: var(--border); border-radius: 4px; }
.correction-box::-webkit-scrollbar-thumb { background: var(--text-sub); border-radius: 4px; }
.correction-box::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.corr-toggle summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  list-style: none;
  outline: none;
  text-align: left !important;
  transition: color var(--anim-fast);
}
.corr-toggle summary:hover { color: var(--accent-dark); }


/* ---- 9. SECTION HEADER ---- */
.mc-section-header { margin-bottom: 36px; }
.mc-section-header .mc-eyebrow { margin-bottom: 10px; }

.header-form-section {
  background: var(--card-bg);
  padding: 28px 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 36px;
}
.jumbotron h1 { font-weight: 800; color: var(--text); font-size: 2.1rem; margin-bottom: 8px; }
.jumbotron .lead { color: var(--text-sub); font-size: 1.05rem; margin-bottom: 20px; }


/* ---- 10. FORMULAIRES ---- */
#exosForm {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--body-bg);
}
#exosForm .form-label { font-weight: 600; color: var(--text); margin-bottom: 4px; }
#exosForm .form-select { color: var(--text); border-color: var(--border); border-radius: var(--radius-sm); }

#generateBtn {
  font-weight: 700;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transition: background var(--anim-fast);
}
#generateBtn:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }


/* ---- 11. PILLS / BADGES ---- */
.mc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid #c7d2fe;
}
.mc-pill-muted {
  background: var(--body-bg);
  color: var(--text-sub);
  border-color: var(--border);
}

/* Bootstrap color overrides */
.text-primary  { color: var(--accent) !important; }
.text-warning  { color: #d97706 !important; }
.text-danger   { color: #dc2626 !important; }
.text-indigo-600 { color: var(--accent) !important; }


/* ---- 12. MATHJAX ---- */
.MJX-TEX { font-size: 1.05em !important; color: var(--text) !important; }
mjx-container { text-align: center !important; display: block !important; width: 100%; }


/* ---- 13. MOBILE / PWA ---- */

/* Header mobile fixe */
.mc-mobile-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow-sm);
}

/* Bottom nav mobile */
.mc-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 -8px 20px -16px rgba(15,23,42,.18);
}
.mc-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 14px;
  text-decoration: none;
  color: #94a3b8;
  font-size: .62rem;
  font-weight: 800;
  transition: color var(--anim-fast), background var(--anim-fast);
}
.mc-nav-item i { font-size: 1.18rem; color: inherit; }
.mc-nav-item.active { color: var(--accent); background: rgba(99,102,241,.08); }
.mc-nav-item:active { transform: scale(.97); }

/* Padding body quand bottom nav présente */
body.has-bottom-nav {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Contenu mobile : offset header */
.mc-mobile-content {
  padding-top: calc(76px + env(safe-area-inset-top));
}

/* Alias legacy */
.mobile-header  { /* voir .mc-mobile-header */ }
.bottom-nav     { /* voir .mc-bottom-nav */ }

@media (min-width: 992px) {
  .mc-bottom-nav,
  .mc-mobile-header,
  .mobile-only { display: none !important; }
}
@media (max-width: 991.98px) {
  .desktop-only { display: none !important; }
}


/* ---- 14. HERO (pages de modules) ---- */
.mc-hero-panel {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--body-bg) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}

/* Desktop hero pleine largeur (home) */
.mc-page-hero {
  background: var(--hero-bg);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.mc-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(99,102,241,.2) 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 10% 80%, rgba(139,92,246,.1) 0%, transparent 60%);
  pointer-events: none;
}
.mc-page-hero > * { position: relative; z-index: 1; }


/* ---- 15. NAVBAR ---- */
.navbar-premium {
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 8px 22px -24px rgba(15,23,42,.28);
    padding: .45rem 0;
    padding-top: calc(.45rem + env(safe-area-inset-top, 0px));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.nav-shell       { min-height: 52px; }
.navbar-brand    { margin-right: 1.25rem; text-decoration: none; }
.nav-logo        { width: auto; height: 30px; }
.brand-text      { color: #0f172a; font-size: 1.08rem; font-weight: 800; }
.brand-text span { color: #6366f1; }

.navbar-premium .nav-link {
    position: relative;
    color: #475569 !important;
    font-size: .95rem; font-weight: 700;
    padding: .55rem .4rem !important;
    transition: color .2s ease;
}
.navbar-premium .nav-link:hover,
.navbar-premium .nav-link:focus,
.navbar-premium .nav-link.show,
.navbar-premium .nav-link.active { color: #0f172a !important; }

.nav-primary { gap: .85rem; align-items: center; }
.nav-primary .nav-link::after {
    content: '';
    position: absolute;
    left: .4rem; right: .4rem; bottom: .15rem;
    height: 2px; border-radius: 10px;
    background: transparent;
    transition: background .2s ease;
}
.nav-primary .nav-link.active::after,
.nav-primary .nav-link:hover::after,
.nav-primary .nav-link.show::after { background: var(--accent); }

.nav-auth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 38px; padding: .5rem .95rem;
    border-radius: 999px; border: 1px solid #dbe3ef;
    background: #fff; color: #0f172a;
    font-size: .9rem; font-weight: 700; text-decoration: none;
    transition: background var(--anim-fast), border-color var(--anim-fast);
}
.nav-auth-btn:hover,
.nav-auth-btn:focus { color: #0f172a; background: #f8fafc; border-color: #cbd5e1; }

.nav-dropdown {
    border: 1px solid #e2e8f0; border-radius: 14px; padding: .45rem;
    box-shadow: 0 14px 30px -28px rgba(15,23,42,.35);
}
.nav-dropdown .dropdown-header {
    color: #64748b; font-size: .75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
}
.nav-dropdown .dropdown-item {
    display: flex; align-items: center; gap: 10px;
    border-radius: 10px; padding: .6rem .75rem;
    color: #1f2937; font-weight: 600;
}
.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus { background: #f8fafc; color: #111827; }
.nav-dropdown .dropdown-item i { color: #64748b; }
.nav-account-menu { min-width: 230px; }

.hamburger-icon { width: 22px; height: 16px; display: inline-flex; flex-direction: column; justify-content: space-between; }
.hamburger-icon span { display: block; width: 100%; height: 2px; border-radius: 999px; background: #0f172a; }

/* Bottom nav injecté par nav.php */
.bottom-nav.sf-mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: stretch; justify-content: space-around; gap: 0;
    padding: 0 2px max(10px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 -1px 0 rgba(148,163,184,.10), 0 -12px 28px -18px rgba(15,23,42,.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.bottom-nav.sf-mobile-bottom-nav .nav-item {
    position: relative;
    flex: 1 1 0; min-width: 0;
    color: #94a3b8; text-decoration: none;
    font-size: .65rem; font-weight: 700; letter-spacing: .01em;
    display: flex; justify-content: center; align-items: center;
    transition: color .2s ease;
}
/* Barre indicatrice en haut de l'onglet actif */
.bottom-nav.sf-mobile-bottom-nav .nav-item::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px; height: 2px;
    border-radius: 0 0 4px 4px;
    background: var(--accent);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.bottom-nav.sf-mobile-bottom-nav .nav-item.active::before {
    transform: translateX(-50%) scaleX(1);
}
.bottom-nav.sf-mobile-bottom-nav .sf-mobile-nav-inner {
    width: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 7px; border-radius: 12px;
    transition: background .2s ease, transform .12s ease;
}
.bottom-nav.sf-mobile-bottom-nav .nav-item i { margin: 0; font-size: 1.18rem; color: inherit; }
.bottom-nav.sf-mobile-bottom-nav .nav-item.active { color: var(--accent); }
.bottom-nav.sf-mobile-bottom-nav .nav-item:active .sf-mobile-nav-inner { transform: scale(.92); }
body.sf-generated-mobile-bottom-nav { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7;
        box-shadow: 0 14px 30px -28px rgba(15,23,42,.25);
        padding: .55rem 0 .85rem;
        max-height: calc(100vh - 64px); overflow-y: auto;
    }
    .nav-primary { gap: 0; }
    .nav-primary .nav-link {
        display: flex; align-items: center; justify-content: space-between;
        padding: .9rem 1rem !important; font-size: 1rem;
        border-bottom: 1px solid #f1f5f9;
    }
    .nav-primary .nav-link::after { left: 1rem; right: 1rem; bottom: 0; }
    .nav-primary .dropdown-menu { margin: 0 1rem; border-radius: 12px; }
    .nav-account { padding: .9rem 1rem 0; }
    .nav-auth-btn { width: 100%; }
    .navbar-toggler { display: none !important; }
    .bottom-nav.sf-mobile-bottom-nav { display: flex !important; }
}
@media (min-width: 992px) {
    .nav-shell        { display: flex; align-items: center; flex-wrap: nowrap;
                        max-width: 100% !important; padding-left: 1.5rem; padding-right: 1.5rem; }
    .navbar-brand     { flex-shrink: 0; }
    .navbar-collapse  { display: flex !important; flex-grow: 1; flex-basis: auto;
                        align-items: center; justify-content: flex-end; }
    .bottom-nav.sf-mobile-bottom-nav { display: none !important; }
}

/* ---- 16. FOOTER ---- */
.mc-footer {
    background: #0f172a;
    border-top: 1px solid rgba(255,255,255,.07);
}
.mc-footer-inner {
    width: 100%;
    padding: 36px 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 16px 48px;
    align-items: center;
}
.mc-footer-brand { display: flex; flex-direction: column; gap: 4px; }
.mc-footer-logo  { font-size: 1rem; font-weight: 900; color: #f8fafc; }
.mc-footer-logo span { color: #a5b4fc; }
.mc-footer-tagline { margin: 0; color: #475569; font-size: .82rem; font-weight: 600; }
.mc-footer-nav-primary,
.mc-footer-nav-secondary { display: flex; gap: 16px; flex-wrap: wrap; }
.mc-footer-nav-primary a,
.mc-footer-nav-secondary a {
    color: #64748b; text-decoration: none;
    font-size: .88rem; font-weight: 600;
    transition: color var(--anim-fast);
}
.mc-footer-nav-primary a:hover,
.mc-footer-nav-secondary a:hover { color: #94a3b8; }
.mc-footer-copy { color: #334155; font-size: .8rem; font-weight: 600; white-space: nowrap; }

@media (max-width: 767.98px) {
    .mc-footer-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 28px 0;
    }
}
@media (max-width: 991.98px) {
    .mc-footer { display: none; }
}

/* ---- 17. GRILLES DE MODULES ---- */
.mc-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
@media (max-width: 575.98px) {
  .mc-module-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.mc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 767.98px) {
  .mc-grid-3,
  .mc-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479.98px) {
  .mc-grid-2 { grid-template-columns: 1fr; }
}