/* Trip screens at width — rides, sleeping, gear, packing, tickets, festival
 * info, outfits and arrivals. Phones keep one narrow column. When main is
 * wider than 48rem the page widens, lists become two-up grids, category
 * sections flow in columns, and Arrivals puts the form beside the timeline.
 * New/edit forms open in the side panel (shared/_form_page).
 */

@layer components {
  @container main (width > 48rem) {
    .trip-page {
      max-width: 72rem;
    }

    .trip-page :is(.ride-list, .lodging-list, .vault-list) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
      column-gap: var(--inline-space-l);
    }

    /* Sections of any height pack without holes, read down each column. */
    .trip-columns {
      columns: 2 22rem;
      column-gap: var(--block-space-l);

      & > * {
        break-inside: avoid;
        margin-block-end: var(--block-space-l);
      }
    }

    .trip-split {
      display: grid;
      grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
      gap: var(--block-space-l);
      align-items: start;
    }
  }
}