/*
 * Page layout. Loaded last so its responsive rules override component defaults.
 *
 *   ≥ 1180 px  three columns: settings | preview | trips — the page itself does not scroll,
 *              each side column scrolls on its own.
 *   861–1179   two columns: trips + settings stacked | sticky preview — the page scrolls.
 *   ≤ 860 px   one column: trips, preview, Customize button (folds the settings).
 */

.app {
  display: grid;
  grid-template-columns: minmax(290px, 350px) minmax(0, 1fr) minmax(320px, 400px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'head     preview trips'
    'settings preview trips'
    'footer   preview trips';
  gap: 20px 24px;
  height: 100vh;
  height: 100dvh;
  padding: 20px;
}

header {
  grid-area: head;
  padding: 2px 2px 0;
}
.preview {
  grid-area: preview;
}
.settings {
  grid-area: settings;
}
.trips-col {
  grid-area: trips;
}
.app-footer {
  grid-area: footer;
}

.settings,
.trips-col {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  padding: 0 2px 20px;
}
.settings > .group-title:first-child,
.trips-col > .group-title:first-child {
  margin-top: 6px;
}
/* The pinned .trips-actions provides the bottom spacing, so cards cannot show below it. */
.trips-col {
  padding-bottom: 0;
}

/*
 * Add trip / Clear trips stay visible at the bottom of the trips column however long the
 * list gets (wide and medium layouts; on phones they simply follow the list).
 * A short fade above them hints that cards scroll underneath.
 */
@media (min-width: 861px) {
  .trips-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-bottom: 20px;
    background: var(--bg);
  }
  .trips-actions::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 16px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
  }
  .trips-actions .footer-links {
    margin-top: 10px;
  }
  /* Scrolling a new or focused card into view keeps it clear of the pinned buttons. */
  .trip {
    scroll-margin-bottom: 120px;
  }
}

/* ---- Medium ---- */

@media (max-width: 1179px) {
  .app {
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      'head     preview'
      'trips    preview'
      'settings preview'
      'footer   preview';
    height: auto;
    gap: 0 24px;
  }
  header {
    padding-bottom: 14px;
  }
  .settings,
  .trips-col {
    overflow: visible;
    padding-bottom: 0;
  }
  .settings {
    padding-bottom: 20px;
  }
  .settings > .group-title:first-child {
    margin-top: 28px;
  }
  .preview {
    position: sticky;
    top: 20px;
    align-self: start;
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
  }
}

/* ---- Phone ---- */

@media (max-width: 860px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 'head' 'trips' 'preview' 'customize' 'settings' 'footer';
    padding: 18px 16px calc(32px + env(safe-area-inset-bottom));
  }
  header {
    padding-bottom: 16px;
  }
  .trips-col {
    padding-bottom: 0;
  }
  .trips-col > .group-title:first-child {
    margin-top: 12px;
  }
  .preview {
    position: static;
    height: auto;
    margin-top: 24px;
    padding: 20px 16px;
  }

  /* Settings are folded behind the Customize button, right under the preview. */
  .customize-btn {
    display: flex;
    grid-area: customize;
    margin-top: 16px;
  }
  .app:not(.settings-open) .settings {
    display: none;
  }
  .settings {
    padding-bottom: 4px;
  }
  .settings > .group-title:first-child {
    margin-top: 20px;
  }
  .app-footer {
    margin-top: 28px;
  }
}