/**
 * @file layout.css
 * Verid — Layout
 *
 * STRATEGIE:
 * - page.html.twig platziert .region-sidebar-wrapper VOR <main> im DOM
 * - Deshalb: grid-template-columns: sidebar content (keine order-Tricks nötig)
 * - Oliveros grid.css definiert .sidebar-grid; wir überschreiben mit !important
 *   wo nötig, da Olivero layout.css und grid.css als separate Libraries lädt
 */

/* ─── Page / global ─────────────────────────────────────── */

.page-wrapper {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#page {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden; /* verhindert horizontalen Scroll auf iOS (Olivero-Overflow) */
}

/* ─── Main wrapper ──────────────────────────────────────── */

.layout-main-wrapper {
  flex: 1;
  padding-block-start: var(--verid-space-10);
  padding-block-end: var(--verid-space-24);
}

.main-content {
  min-width: 0;
}

/* ─── Container ─────────────────────────────────────────── */

.container,
.main-content__container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--verid-container-padding);
}

/* ─── Sidebar-Grid ──────────────────────────────────────── */
/*
 * Olivero's grid.css setzt möglicherweise andere Spalten auf .sidebar-grid.
 * Wir verwenden !important auf grid-template-columns, weil:
 * a) Oliveros sidebar.css mit gleicher Spezifität kollidiert
 * b) unser page.html.twig die DOM-Reihenfolge schon korrekt setzt
 *    (sidebar-wrapper zuerst = linke Spalte, main danach = rechte Spalte)
 */

.sidebar-grid {
  display: grid !important;
  grid-template-columns: var(--verid-sidebar-width) 1fr !important;
  gap: var(--verid-sidebar-gap) !important;
  align-items: start !important;
  /* Kein float, kein flexbox — Grid ist die einzige Quelle der Wahrheit */
  float: none !important;
}

/* Linke Spalte: Sidebar-Wrapper */
.sidebar-grid > .region-sidebar-wrapper {
  min-width: 0;
  /* Kein position:sticky hier — die innere .region-sidebar ist sticky */
}

/* Rechte Spalte: Hauptinhalt */
.sidebar-grid > main {
  min-width: 0;
  max-width: none; /* Spalte nutzt vollen 1fr-Track */
}

/* Artikel-Lesebreite NUR am Node, nicht am Grid-Wrapper */
.sidebar-grid > main .node,
.sidebar-grid > main article {
  max-width: var(--verid-content-max);
}

/* Ohne Sidebar: Container bleibt voll breit (1180px, wie der Header).
   Lesbreite wird auf Artikel-Ebene via .node/article max-width gesteuert. */
.layout-main-wrapper:not(:has(.sidebar-grid)) main > .node,
.layout-main-wrapper:not(:has(.sidebar-grid)) main > article {
  max-width: var(--verid-content-max);
  margin-inline: auto;
}

/* ─── Olivero-Fallback: .grid-full neutralisieren ───────── */
/*
 * Olivero's grid.css gibt .grid-full spezielle Breiten-/Spalten-Regeln.
 * Im Sidebar-Context wollen wir das nicht.
 */
.sidebar-grid.grid-full {
  width: 100%;
  margin-inline: 0;
}

/* ─── Sidebar Toggle Button (Tablet / Mobile) ────────────── */
/*
 * Wird per JS in .sidebar-grid eingefügt (vor .region-sidebar-wrapper).
 * Sichtbar nur bei ≤1100px.
 */
.sidebar-toggle-btn {
  display: none; /* Desktop: ausgeblendet */
  order: 1;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-family: var(--verid-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--verid-color-text-secondary);
  background: var(--verid-color-surface);
  border: 1px solid var(--verid-color-border);
  border-radius: var(--verid-radius);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  margin-bottom: 0.75rem;
  transition: background 150ms, color 150ms;
  appearance: none;
}

.sidebar-toggle-btn:hover {
  background: var(--verid-color-surface-2);
  color: var(--verid-color-text);
}

.sidebar-toggle-btn__chevron {
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.sidebar-toggle-btn[aria-expanded="true"] .sidebar-toggle-btn__chevron {
  transform: rotate(180deg);
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 1100px) {
  /*
   * Sidebar-Grid: auf Flex-Column wechseln statt Grid-Kollaps.
   * Visuelle Reihenfolge: toggle-btn (1) → main (2) → sidebar (3, versteckt)
   * Text hat Vorrang; Sidebar ist standardmäßig eingeklappt.
   */
  .sidebar-grid,
  .sidebar-grid.grid-full {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    float: none !important;
    align-items: stretch !important; /* main streckt sich auf volle Breite (align-items:start vom Desktop zurücksetzen) */
  }

  /* Sidebar standardmäßig ausgeblendet; JS fügt .sidebar-is-open hinzu */
  .sidebar-grid > .region-sidebar-wrapper {
    order: 2; /* zwischen Toggle-Button (1) und Hauptinhalt (3) */
    display: none;
  }

  .sidebar-grid > .region-sidebar-wrapper.sidebar-is-open {
    display: block;
    padding-block: var(--verid-space-6);
    border-bottom: 1px solid var(--verid-color-border);
  }

  /* Hauptinhalt nach dem Toggle-Button und der (ggf. geöffneten) Sidebar */
  .sidebar-grid > main {
    order: 3;
  }

  /* Text im Einzel-Spalten-Layout zentrieren — !important überschreibt Olivero-Regeln */
  .sidebar-grid > main .node,
  .sidebar-grid > main article {
    width: 100%;
    max-width: var(--verid-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sidebar-toggle-btn {
    display: flex;
  }
}

@media (max-width: 768px) {
  .layout-main-wrapper {
    padding-block-start: var(--verid-space-8);
    padding-block-end: var(--verid-space-16);
  }

  .container,
  .main-content__container {
    padding-inline: var(--verid-space-5);
  }
}

@media (max-width: 480px) {
  /* Mehr Lesebreite auf sehr schmalen Screens */
  .container,
  .main-content__container {
    padding-inline: var(--verid-space-4);
  }
}