/* Wider screens — tablet and laptop.
   *
   * EVERY rule in this file sits behind a min-width media query, which is the contract: a phone
   * renders pixel-for-pixel as if this file did not exist. The phone layout is the designed one;
   * this file only decides what to do with the room a bigger screen adds.
   *
   * The approach is column count, not new layouts. Screens that are a run of cards — the
   * community feed (#community), my trips (.mytrips), saved places (#saved) — become a grid, and
   * everything in them that is not a card spans the full row: headers, the search field, the sort
   * chips, the empty state. The itinerary deliberately stays one column at reading width: a day
   * is read top to bottom, and two days side by side is two things half-read.
   *
   * Uses only the app's own tokens and class names. Nothing here introduces a colour, a font, a
   * shadow, or a new element.
   */

  /* ---- tablet, and small laptops ---------------------------------------------------------- */
  @media (min-width: 768px){
    .wrap{max-width:760px}

    /* runs of cards become two columns; anything that is not a card keeps the full row */
    #community,.mytrips{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
    #community > :not(.cmcard),.mytrips > :not(.cmcard){grid-column:1 / -1}
    #community > .cmcard,.mytrips > .cmcard{margin:0}

    /* saved places: the per-category groups sit side by side */
    #saved{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
    #saved > :not(.svgroup){grid-column:1 / -1}
    #saved > .svgroup{margin:0}

    /* the day card reads best at phone width; hold it there and keep it centred */
    .day{max-width:680px;margin-left:auto;margin-right:auto}
  }

  /* ---- laptop ----------------------------------------------------------------------------- */
  @media (min-width: 1100px){
    .wrap{max-width:980px}
    #community{grid-template-columns:1fr 1fr 1fr}
  }