/* ===================================================== Mobile Visibility ========== */
@media (max-width: 768px) {
  .mah-exam-mobile-accordion-group {
    display: block;
  }

  .mah-exam-panel {
    display: none;
    max-height: 30vh;
    overflow-y: auto;
    padding-right: 4px;
    position: relative;
  }

  /*.mah-exam-panel::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    background: linear-gradient(to top, var(--mah-bg-muted), transparent 70%);
    pointer-events: none;
  }*/

  .mah-exam-tab.active + .mah-exam-panel {
    display: block;
  }

  .mah-exam-directory-tabs {
    display: none;
  }

  /* Reduce gap between child items on mobile */
  .mah-exam-panel .mah-grid {
    gap: 0.25rem;
    margin-top: 0.5rem;
  }

  /* Add button-like style to parent tabs on mobile */
  .mah-exam-mobile-accordion-group .mah-exam-tab {
    border: 1px solid var(--mah-border-color);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--mah-bg-light);
    font-weight: 600;
    color: var(--mah-text-default);
  }

  .mah-exam-mobile-accordion-group .mah-exam-tab.active {
    background-color: var(--mah-bg-muted);
    color: var(--mah-text-dark);
  }
}

@media (min-width: 769px) {
  .mah-exam-mobile-accordion-group {
    display: none;
  }

  .mah-exam-directory-panels .mah-exam-panel {
    display: none !important;
  }

  .mah-exam-directory-panels .mah-exam-panel.active {
    display: block !important;
  }
}

/* ===================================================== Desktop Visibility ========== */


/* Sidebar (parent/tabs) white background */
.mah-exam-directory-sidebar {
  width: 240px;
  overflow-y: auto;
  background-color: var(--mah-bg-light);
  padding: 1rem;
  position: sticky;
  top: 90px;
}

.mah-exam-directory-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Parent sidebar tabs on desktop */
.mah-exam-directory-tabs .mah-exam-tab {
  border-radius: 6px;
  margin-bottom: 6px;
  padding: 10px 12px;
  font-family: var(--mah-font-alt);
  font-size: var(--mah-font-size-lg);
  font-weight: 600;
  background-color: var(--mah-bg-muted);
  border: 1px solid var(--mah-border-color);
  transition: all 0.3s ease;
}

.mah-exam-directory-tabs .mah-exam-tab.active,
.mah-exam-directory-tabs .mah-exam-tab:hover {
  background-color: var(--mah-bg-muted);
  color: var(--mah-text-default);
}

.mah-exam-directory-tabs .mah-exam-tab:hover {
  background-color: var(--mah-bg-accent);
  color: var(--mah-text-dark);
}


/* ========== Grid and Cards ========== */
.mah-exam-directory-panels {
  flex-grow: 1;
  width: 100%;
  min-height: 100px;
  background-color: var(--mah-bg-light);
  padding: 1rem;
}


.mah-exam-group-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--mah-text-default);
}



.mah-card--exam:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* ========== List Reset for Semantic Cards ========== */






/* ========== Accordion Group ========== */
.mah-exam-accordion-group {
  display: flex;
  flex-direction: column;
}



/* ========== Responsive Display Utilities ========== */

.mah-visible-mobile {
  display: block;
}

.mah-visible-desktop {
  display: none;
}

@media (min-width: 769px) {
  .mah-visible-mobile {
    display: none;
  }

  .mah-visible-desktop {
    display: block;
  }
}
/* ========== Exam Card Icons ========== */
.mah-card-icon.mah-exam-card-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: inline-block;
  border-radius: 4px;
}
/* Hide subgroup headings inside exam panels */
.mah-exam-panel .mah-subgroup-heading {
  display: none;
}