/*
 * Earpedia responsive foundation.
 *
 * Phase 6D centralizes shared responsive mechanics only. Page-specific art
 * direction, course media layouts, dashboard behavior, and mobile menu
 * behavior stay local until they are explicitly refactored and verified.
 *
 * Documented breakpoint scale:
 * xs: 480px
 * sm: 640px
 * md: 768px
 * lg: 1024px
 * xl: 1200px
 *
 * CSS custom properties cannot be used in media query conditions, so these
 * breakpoint values intentionally remain literal.
 */

/* ================== Desktop Visibility ================== */
@media (min-width: 769px) {
  .ep-hide-desktop {
    display: none !important;
  }
}

/* ================== Large Tablet and Down ================== */
@media (max-width: 1024px) {
  .ep-container,
  .ep-container--course,
  .ep-container--wide {
    width: min(100% - (var(--ep-space-6) * 2), var(--ep-container-lg));
  }

  .ep-grid--lg-stack {
    grid-template-columns: 1fr;
  }
}

/* ================== Tablet and Down ================== */
@media (max-width: 768px) {
  .ep-hide-mobile {
    display: none !important;
  }

  .ep-container,
  .ep-container--sm,
  .ep-container--md,
  .ep-container--course,
  .ep-container--wide {
    width: min(100% - (var(--ep-space-4) * 2), var(--ep-container-lg));
  }

  .ep-section {
    padding-block: var(--ep-space-10);
  }

  .ep-section--compact {
    padding-block: var(--ep-space-8);
  }

  .ep-two-column,
  .ep-grid--md-stack {
    grid-template-columns: 1fr;
  }

  .ep-grid {
    gap: var(--ep-space-5);
  }

  .ep-card {
    padding: var(--ep-card-padding-sm);
  }

  .ep-card__header {
    margin-bottom: var(--ep-space-3);
  }

  .ep-card__footer {
    margin-top: var(--ep-space-3);
  }

  .ep-section-header {
    margin-bottom: var(--ep-space-6);
  }

  .ep-section-header__title {
    font-size: var(--ep-font-size-3xl);
  }

  .ep-page-header {
    padding-block: var(--ep-space-10);
  }
}

/* ================== Small Tablet and Down ================== */
@media (max-width: 640px) {
  .ep-grid--sm-stack {
    grid-template-columns: 1fr;
  }

  .ep-grid {
    gap: var(--ep-space-4);
  }

  .ep-form-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ep-input,
  .ep-select,
  .ep-textarea,
  .ep-search-field {
    font-size: var(--ep-font-size-base);
  }

  .ep-btn--full-mobile {
    width: 100%;
  }

  .ep-chip,
  .ep-badge {
    max-width: 100%;
  }

  .ep-pagination {
    gap: var(--ep-space-2);
  }

  .ep-pagination__link {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  .ep-empty-state {
    padding: var(--ep-space-6);
  }

  .ep-empty-state__actions {
    width: 100%;
  }

  .ep-prose :where(table, pre) {
    font-size: var(--ep-font-size-sm);
  }

  .ep-prose :where(figure, table, pre) {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ================== Narrow Mobile ================== */
@media (max-width: 480px) {
  .ep-container,
  .ep-container--sm,
  .ep-container--md,
  .ep-container--course,
  .ep-container--wide {
    width: min(100% - (var(--ep-space-3) * 2), var(--ep-container-lg));
  }

  .ep-section {
    padding-block: var(--ep-space-8);
  }

  .ep-section--compact {
    padding-block: var(--ep-space-6);
  }

  .ep-section-header__title {
    font-size: var(--ep-font-size-2xl);
  }

  .ep-section-header__text {
    font-size: var(--ep-font-size-base);
  }

  .ep-page-header {
    padding-block: var(--ep-space-8);
  }
}