/* Desktop-Layout ab 1024px: Karte, Ausflugsziele und Filter nebeneinander
   (Grid, eine Zeile). Filter & Suche steht rechts und bleibt über das
   native <details>-Element auf-/zuklappbar (siehe css/filters.css) - so
   verdrängt ein geöffneter Filter nicht mehr die Ergebnisliste nach unten. */

@media (min-width: 1024px) {
  /* Menü-Overlay: drei Spalten nebeneinander - links der Standort, in der
     Mitte alles zum Anlegen von Ausflugszielen, rechts das Konto. Mobil
     stehen dieselben Gruppen untereinander (siehe css/layout.css). */
  .app-menu__groups {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .app-layout {
    /* Basis 0 statt auto (css/layout.css): hier soll das Raster genau den
       verbleibenden Platz einnehmen und nicht mit seinem Inhalt wachsen -
       die drei Spalten blättern jeweils für sich. */
    flex: 1;
    display: grid;
    grid-template-columns: 380px 1fr 300px;
    grid-template-rows: 1fr;
    grid-template-areas: 'list map filter';
    /* Höhe ergibt sich aus flex:1 auf .app-layout (siehe css/layout.css) -
       damit passt sich die Höhe automatisch an, egal ob der Header gerade
       durch ein geöffnetes Menü höher ist. */

    /* Das Aufgleiten der Filterspalte: Grid-Spalten lassen sich animieren,
       solange ihre Anzahl gleich bleibt - hier wechselt nur die letzte
       zwischen 56px und 300px. Die Karte in der Mitte (1fr) wächst und
       schrumpft dabei mit, ohne dass sie eine eigene Angabe braucht. */
    transition: grid-template-columns 180ms ease;
  }

  /* Filter-Spalte auf Icon-Breite schrumpfen, solange die Leiste zu ist
     (Klasse von js/filters/filterPanel.js) - sonst bliebe die Spalte trotz
     verborgenem Inhalt in voller Breite stehen. */
  .app-layout:has(.filter-panel:not(.filter-panel--open)) {
    grid-template-columns: 380px 1fr 56px;
  }

  @media (prefers-reduced-motion: reduce) {
    .app-layout {
      transition: none;
    }
  }

  .map-panel {
    grid-area: map;
    height: 100%;
    min-height: 0;
  }

  .list-panel {
    grid-area: list;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
  }

  .filter-panel {
    grid-area: filter;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid var(--color-border);
  }

  /* Zugeklappt gibt es nichts zu blättern: der Inhalt ist zwar noch da
     (visibility: hidden), beansprucht aber weiterhin seine volle Höhe und
     erzeugte dadurch eine Bildlaufleiste an einer Spalte, in der nur ein
     Knopf steht. */
  .filter-panel:not(.filter-panel--open) {
    overflow: hidden;
  }

  /* Detailansicht als Spalte über der Ergebnisliste (statt Modal über der
     Karte). Die Karte bleibt vollständig sichtbar und unverdunkelt - beim
     Öffnen schwenkt sie auf das gewählte Ziel (js/map/mapController.js).
     Die Liste bleibt darunter stehen und ist beim Schließen sofort wieder
     da, mit unveränderter Scrollposition. */
  .detail-modal {
    grid-area: list;
    position: relative;
    /* inset aus der Overlay-Fassung zurücknehmen - als Rasterzelle darf das
       Element nicht zusätzlich verschoben werden. */
    inset: auto;
    /* Über der Ergebnisliste, aber unter dem Menü-Overlay (z-index 1100). */
    z-index: 2;
    height: 100%;
    min-height: 0;
  }

  .detail-modal__backdrop {
    display: none;
  }

  .detail-modal__panel {
    /* relative, nicht static: das Panel ist der Scroll-Container, an dem die
       Werkzeugleiste oben klebt (css/detail.css). */
    position: relative;
    width: 100%;
    height: 100%;
    max-height: none;
    transform: none;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
  }

  /* Die verdeckte Liste aus der Tastaturbedienung nehmen: visibility (nicht
     display:none) nimmt sie aus der Tab-Reihenfolge, erhält aber ihre
     Scrollposition - beim Schließen steht man wieder an derselben Stelle. */
  body.detail-modal-open .list-panel {
    visibility: hidden;
  }
}