/* ========================
   RESPONSIVE — Mobile-first media queries (M3 tokens)
   ======================== */

/* ---- Mobile defaults (below 768px) ---- */

/* Header nav links hidden — rail handles navigation on mobile */
.nav {
  display: none;
}


/* ---- Small mobile — below 480px ---- */
@media (max-width: 480px) {
  .hero__title {
    font-size: var(--md-headline-large-size);
    line-height: var(--md-headline-large-line);
  }

  /* Ref-grid: prevent 300px minmax from overflowing small screens */
  .ref-grid {
    grid-template-columns: 1fr;
  }

  /* Hero card: hide image on mobile for clean text-only layout */
  .hero-card__image {
    display: none;
  }

  /* Elevation boxes: reduce min-width to fit */
  .elevation-box {
    min-width: var(--md-list-item-height-large);
  }

  /* Shape boxes + labels: smaller on tiny screens */
  .shape-box {
    width: var(--md-icon-button-size);
    height: var(--md-icon-button-size);
  }

  .shape-label {
    width: var(--md-icon-button-size);
    font-size: var(--md-label-small-size);
  }

  /* Swatch: smaller on tiny screens */
  .swatch {
    width: var(--md-button-height-large);
    height: var(--md-button-height-large);
  }

  /* Carousel buttons: smaller on mobile */
  .carousel__btn {
    width: var(--md-carousel-button-size-small);
    height: var(--md-carousel-button-size-small);
    font-size: var(--md-label-large-size);
  }

  /* Date picker dropdown: constrain to viewport and center */
  .date-picker__dropdown {
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-list-max-height);
    left: var(--md-spacing-4);
    right: var(--md-spacing-4);
  }

  /* Reduce day button size slightly on very small screens */
  .date-picker__day {
    width: var(--md-icon-button-size);
    height: var(--md-icon-button-size);
    font-size: var(--md-body-small-size);
  }

  .date-picker__nav {
    width: var(--md-icon-button-size);
    height: var(--md-icon-button-size);
  }

  /* Side sheet: full width on small mobile */
  .side-sheet {
    width: 100%;
    max-width: 100%;
  }

  /* OTP input: reduce field size for very small screens */
  .otp-input__field {
    width: var(--md-button-height-small);
  }

  .otp-input__fields {
    gap: var(--md-spacing-1);
  }

  /* Snackbar: reduce min-width on small screens */
  .snackbar {
    min-width: auto;
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-component-width-medium);
  }

  /* Time picker: constrain to viewport */
  .time-picker__dropdown {
    min-width: auto;
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-list-max-height);
    left: 50%;
    transform: translateX(-50%);
  }

  .time-picker__dropdown--visible {
    display: block;
  }

  /* Color picker: constrain to viewport */
  .color-picker__dropdown {
    min-width: auto;
    width: calc(100vw - var(--md-spacing-8));
    max-width: var(--md-component-width-small);
  }

  /* Tabs: enable horizontal scroll */
  .tabs__bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs__bar::-webkit-scrollbar {
    display: none;
  }

  /* Breadcrumbs: wrap on small screens */
  .breadcrumbs {
    flex-wrap: wrap;
  }

  .breadcrumbs__item {
    max-width: var(--md-min-dropdown-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pagination: show only arrows + active page on mobile */
  .pagination__btn:not(:first-child):not(:last-child):not(.pagination__btn--active) {
    display: none;
  }

  /* Keep ellipsis visible for context */
  .pagination__ellipsis {
    font-size: var(--md-label-small-size);
  }

  /* Banner: stack actions vertically on small screens */
  .banner__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .banner__btn {
    width: 100%;
    text-align: center;
  }

  /* Dialog: reduce padding on small screens */
  .dialog {
    padding: var(--md-spacing-4);
  }

  .dialog__title {
    font-size: var(--md-title-medium-size);
  }

  /* Tag input: reduce size on small screens */
  .tag-input__tag {
    font-size: var(--md-label-small-size);
    padding: var(--md-spacing-1) var(--md-spacing-2);
  }

  /* Bottom sheet: ensure content fits and buttons stack properly */
  .bottom-sheet__content .ref-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bottom-sheet__content .btn {
    width: 100%;
  }

  /* Bottom sheet: reduce max height on very small screens */
  .bottom-sheet {
    max-height: 90vh;
  }
}

/* ---- Mobile — below 768px: off-screen drawer + hamburger ---- */
@media (max-width: 767px) {

  /* Horizontal stepper: scrollable on mobile */
  .stepper:not(.stepper--vertical) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--md-spacing-2);
  }

  /* Segmented button: allow horizontal scroll */
  .segmented-button {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .segmented-button__item {
    padding: var(--md-spacing-3) var(--md-spacing-4);
    font-size: var(--md-label-medium-size);
  }

  /* Hide nav-rail and scrim on mobile - navigation-drawer is used instead */
  .nav-rail,
  .nav-rail__scrim {
    display: none;
  }

  /* Transfer list: stack vertically on mobile */
  .transfer-list__container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--md-spacing-4);
  }

  .transfer-list__controls {
    order: 2;
    flex-direction: row;
    justify-content: center;
    gap: var(--md-spacing-3);
  }

  .transfer-list__panel:first-child {
    order: 1;
  }

  .transfer-list__panel:last-child {
    order: 3;
  }
}

/* ---- Tablet — 768px+ ---- */
@media (min-width: 768px) {
  .header {
    padding: 0 var(--md-spacing-10);
  }

  .main {
    padding: var(--md-spacing-12) var(--md-spacing-10);
  }

  /* Show icon nav in header, hide rail + hamburger */
  .nav {
    display: block;
  }


  .nav-rail,
  .nav-rail__scrim {
    display: none;
  }

  .section--hero {
    min-height: 27.5vh;
    max-height: 42.5vh;
  }
}

/* ---- Desktop — 1024px+ ---- */
@media (min-width: 1024px) {
  .main {
    padding: var(--md-spacing-12) var(--md-spacing-6);
  }

  .section--hero {
    min-height: 30vh;
    max-height: 45vh;
  }
}