/* ============================================================
  LAYOUT
  Two-mode UI: mobile under 900px, desktop from 900px
  ============================================================ */

@layer layout {

  /* ── App Header ── */
  .app-header {
    position: relative;
    z-index: 100;
    background: var(--accent);
    color: var(--text-on-accent);
    padding-block-start: calc(var(--sp-4) + var(--safe-top));
    padding-block-end: 0;
    padding-inline: calc(var(--sp-4) + var(--safe-left));
    /* Subtle texture overlay */
    background-image:
      radial-gradient(circle at 80% 20%, oklch(from var(--accent) calc(l + 0.08) c h / 0.5) 0%, transparent 60%),
      radial-gradient(circle at 20% 80%, oklch(from var(--accent) calc(l - 0.08) c h / 0.4) 0%, transparent 50%);
    /* Grain texture via SVG filter */
    filter: url(#grain);
    overflow: hidden;
  }

  /* SVG grain filter – defined in JS */
  .app-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.15;
  }

  .header-inner {
    position: relative;
    z-index: 1;
    padding-block-end: var(--sp-3);
    max-inline-size: 78rem;
    margin-inline: auto;
  }

  .header-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-block-end: var(--sp-2);
    flex-wrap: wrap;
  }

  .header-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }

  .app-title {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-end: var(--sp-2);
  }

  .title-main {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 700;
    color: var(--text-on-accent);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .title-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 4vw, 1.3rem);
    font-weight: 400;
    color: oklch(from var(--text-on-accent) l c h / 0.75);
    line-height: 1.2;
  }

  .header-desc {
    font-size: 0.75rem;
    color: oklch(from var(--text-on-accent) l c h / 0.7);
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.01em;
    max-inline-size: 48rem;
  }

  .header-ornament {
    inline-size: 100%;
    block-size: 40px;
    color: var(--text-on-accent);
    opacity: 0.3;
    margin-block-start: var(--sp-2);
  }

  .mobile-toolbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 140;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-3) calc(var(--sp-3) + var(--safe-right)) calc(var(--sp-3) + var(--safe-bottom)) calc(var(--sp-3) + var(--safe-left));
    background: oklch(from var(--bg-surface) l c h / 0.94);
    border-block-start: 1px solid oklch(from var(--border) l c h / 0.8);
    backdrop-filter: blur(18px);
    box-shadow: 0 -10px 28px oklch(0% 0 0 / 0.08);
  }

  .mobile-toolbar[hidden] {
    display: none;
  }

  .mobile-result-summary {
    grid-column: 1 / -1;
  }

  .mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 390;
    background: oklch(10% 0.01 80 / 0.45);
    backdrop-filter: blur(3px);
  }

  .mobile-filter-backdrop[hidden] {
    display: none;
  }

  /* ── Filter Section ── */
  .filter-section {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 400;
    display: none;
    max-block-size: min(78dvh, 42rem);
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-block: var(--sp-3) calc(var(--sp-4) + var(--safe-bottom));
    box-shadow: var(--shadow-modal);
  }

  .filter-section.is-mobile-open {
    display: block;
  }

  .app-main.has-open-popup .filter-section {
    pointer-events: none;
  }

  .filter-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-inline: var(--sp-4);
    padding-block-end: var(--sp-3);
  }

  .filter-sheet-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-primary);
  }

  .filter-sheet-subtitle {
    margin-block-start: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .filter-group,
  .filter-group-inline {
    border: 0;
    min-inline-size: 0;
  }

  .filter-legend {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-style: italic;
    margin-block-end: var(--sp-2);
    white-space: nowrap;
  }

  .filter-scroll {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-inline: var(--sp-4);
    padding-block: var(--sp-1);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Fade edges */
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--sp-4),
      black calc(100% - var(--sp-4)),
      transparent 100%
    );
  }

  .filter-scroll::-webkit-scrollbar { display: none; }

  .filter-row-secondary {
    display: flex;
    gap: var(--sp-3);
    padding-inline: var(--sp-4);
    padding-block-start: var(--sp-2);
    flex-wrap: wrap;
    align-items: center;
  }

  .filter-group-inline {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    flex: 0 0 auto; /* prevent stretching so Saison stays next to Wetter */
  }

  .result-count {
    display: block;
    padding-inline: var(--sp-4);
    padding-block-start: var(--sp-2);
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-family: var(--font-body);
    font-style: italic;
    letter-spacing: 0.02em;
  }

  /* ── Content Area ── */
  .app-main {
    --content-max-width: 120rem;
    --page-gutter: clamp(var(--sp-3), 3vw, var(--sp-5));
    --content-inline-size: min(var(--content-max-width), calc(100% - (2 * var(--page-gutter))));
    --detail-panel-inline-size: min(clamp(28rem, 42vw, 48rem), calc(var(--content-inline-size) - 20rem));
    --filter-stack-bottom: 0px;
    --mobile-toolbar-offset: calc(6.5rem + var(--safe-bottom));
    min-block-size: 100dvh;
    position: relative;
    z-index: 101; /* above sticky header so filter panel can overlap it */
    display: flex;
    flex-direction: column;
    isolation: isolate;
  }

  .app-main > :not(.mobile-toolbar):not(.mobile-filter-backdrop):not(.filter-section) {
    z-index: 1;
  }

  .app-main > .content-area {
    z-index: 0;
  }

  .content-area {
    position: relative;
    flex: 1 1 auto;
    min-block-size: 0;
    min-inline-size: 0;
    padding-block-end: calc(6.5rem + var(--safe-bottom));
  }

  .map-shell {
    position: relative;
    block-size: 100%;
    min-block-size: max(32rem, calc(100dvh - 14rem));
    background:
      radial-gradient(circle at 18% 16%, oklch(from var(--accent) calc(l + 0.24) calc(c * 0.35) h / 0.35), transparent 24%),
      linear-gradient(180deg, oklch(from var(--bg-page) calc(l - 0.01) c h) 0%, var(--bg-page) 100%);
    overflow: clip;
  }

  .map-canvas {
    position: absolute;
    inset: 0;
  }

  .map-overlay-controls {
    position: absolute;
    inset-inline: var(--sp-3);
    inset-block-start: var(--sp-3);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    pointer-events: none;
  }

  .map-list-toggle,
  .map-selection-clear {
    pointer-events: auto;
  }

  .map-list-toggle[hidden],
  .map-selection-clear[hidden] {
    display: none;
  }

  .map-list-panel {
    display: none;
  }

  .map-detail-panel {
    display: none;
  }

  .map-detail-panel[hidden] {
    display: none;
  }

  .map-detail-panel-body {
    block-size: 100%;
    overflow: auto;
    padding: var(--sp-4);
  }

  .map-list-panel.is-collapsed {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(100% + var(--sp-4)));
    pointer-events: none;
  }

  .map-shell.has-open-popup .map-list-panel:not(.has-gallery-pane) {
    pointer-events: none;
  }

  body[data-view-mode='mobile'][data-mobile-view='map'] {
    overflow: hidden;
    padding-bottom: 0;
  }

  body[data-view-mode='mobile'][data-mobile-view='map'] .app-header {
    display: none;
  }

  body[data-view-mode='mobile'][data-mobile-view='map'] .app-main {
    block-size: 100dvh;
    min-block-size: 100dvh;
    overflow: hidden;
  }

  body[data-view-mode='mobile'][data-mobile-view='map'] .content-area {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    inset-block-end: var(--mobile-toolbar-offset);
    padding: 0;
    overflow: hidden;
  }

  body[data-view-mode='mobile'][data-mobile-view='map'] .map-shell {
    block-size: 100%;
    min-block-size: 100%;
  }

  .map-list-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-block-end: 1px solid oklch(from var(--border) l c h / 0.82);
    background: linear-gradient(180deg, oklch(from var(--bg-surface-alt) l c h / 0.92), oklch(from var(--bg-surface) l c h / 0.88));
  }

  .map-list-panel-title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: var(--text-primary);
  }

  .map-list-panel-meta {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-style: italic;
  }

  .map-list-panel-body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    padding: var(--sp-3) var(--sp-3) var(--sp-5);
  }

  .map-list-panel.has-gallery-pane .map-list-panel-body {
    overflow: hidden;
    padding: var(--sp-4);
  }

  .place-sections {
    min-inline-size: 0;
  }

  /* Section groups */
  .section-group {
    margin-block-end: var(--sp-8);
  }

  .section-heading {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-block-end: var(--sp-3);
    padding-block-end: var(--sp-2);
    border-block-end: 1px solid var(--border);
  }

  .section-heading h2 {
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--text-primary);
  }

  .section-count-badge {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 300;
  }

  /* Card grid – single column on mobile */
  .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  /* No results state */
  .empty-state {
    text-align: center;
    padding-block: var(--sp-16);
    padding-inline: var(--sp-8);
    color: var(--text-tertiary);
  }

  .empty-state-icon {
    font-size: 3rem;
    margin-block-end: var(--sp-3);
    display: block;
  }

  .empty-state-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
  }

  /* Install banner */
  .install-banner {
    position: fixed;
    inset-block-end: calc(var(--sp-4) + var(--safe-bottom));
    inset-inline: var(--sp-4);
    z-index: 200;
    animation: slide-up var(--duration-slow) var(--ease-out-expo) both;
  }

  .install-banner[hidden] { display: none; }

  @keyframes slide-up {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .install-banner-inner {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    box-shadow: var(--shadow-lg);
  }

  .install-icon { font-size: 1.5rem; flex-shrink: 0; }

  .install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .install-text strong {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-family: var(--font-display);
  }

  .install-text span {
    font-size: 0.72rem;
    color: var(--text-secondary);
  }

  .install-dismiss {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    padding: var(--sp-1);
    flex-shrink: 0;
  }

  @media (min-width: 900px) {
    .mobile-toolbar,
    .mobile-filter-backdrop,
    .filter-sheet-header {
      display: none;
    }

    .app-header {
      position: relative;
      padding-inline: max(var(--sp-6), calc(var(--sp-6) + var(--safe-left)));
      padding-block-start: calc(var(--sp-8) + var(--safe-top));
    }

    .header-inner {
      padding-block-end: var(--sp-5);
    }

    .header-eyebrow {
      gap: var(--sp-3);
    }

    .header-topbar {
      align-items: center;
      margin-block-end: var(--sp-3);
    }

    .title-main {
      font-size: clamp(2.4rem, 3vw, 3.6rem);
    }

    .title-sub {
      font-size: clamp(1.35rem, 1.8vw, 1.8rem);
    }

    .header-desc {
      font-size: 0.95rem;
    }

    .app-main {
      min-block-size: calc(100dvh - 180px);
      padding: 0;
    }

    .filter-section {
      position: relative;
      inset: auto;
      max-block-size: none;
      overflow: visible;
      transform: none;
      opacity: 1;
      visibility: visible;
      inline-size: min(var(--content-max-width), calc(100% - (2 * var(--page-gutter))));
      margin-inline: auto;
      margin-block-start: -28px; /* overlap the header */
      margin-block-end: 0;
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: var(--sp-4) var(--sp-5);
      box-shadow: var(--shadow-sm);
      background: oklch(from var(--bg-surface) l c h / 0.92);
      backdrop-filter: blur(16px);
      /* Single-row layout: categories + Wetter + Saison in one flex row */
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-3);
    }

    .filter-scroll {
      overflow: visible;
      flex-wrap: wrap;
      gap: var(--sp-2);
      padding: 0;
      mask-image: none;
      scroll-snap-type: none;
    }

    .filter-group.filter-group-cats {
      flex: 1 1 auto;
      min-inline-size: 0;
    }

    .filter-row-secondary {
      align-items: center;
      gap: var(--sp-3);
      padding: 0;
      flex: 0 0 auto;
      flex-wrap: nowrap;
    }

    .filter-group-inline {
      gap: var(--sp-2);
      flex: 0 0 auto;
    }

    .filter-legend {
      font-size: 0.8rem;
    }

    .result-count {
      padding-inline: 0;
      padding-block: 0;
      font-size: 0.82rem;
      flex-basis: 100%;
      order: 10;
    }

    .content-area {
      position: absolute;
      inset: 0;
      flex: initial;
      padding-block-end: 0;
      padding: 0;
    }

    .map-shell {
      min-block-size: 100%;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    .map-overlay-controls {
      inset-inline-start: 50%;
      inset-block-start: calc(var(--filter-stack-bottom) + var(--sp-4));
      inline-size: var(--content-inline-size);
      justify-content: space-between;
      transform: translateX(-50%);
    }

    .map-list-panel {
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: calc(var(--filter-stack-bottom) + var(--sp-8));
      inset-block-end: var(--sp-4);
      z-index: 450;
      display: flex;
      flex-direction: column;
      inline-size: var(--content-inline-size);
      min-block-size: 0;
      max-block-size: calc(100% - var(--filter-stack-bottom) - var(--sp-12));
      background: oklch(from var(--bg-surface) l c h / 0.9);
      border: 1px solid oklch(from var(--border) l c h / 0.85);
      border-radius: var(--r-xl);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(16px);
      overflow: hidden;
      transition:
        transform var(--duration-base) var(--ease-out-expo),
        opacity var(--duration-fast) var(--ease-in-out),
        visibility var(--duration-fast) var(--ease-in-out);
      transform: translateX(-50%);
    }

    .map-detail-panel {
      position: absolute;
      inset-inline-end: calc(50% - (var(--content-inline-size) / 2));
      inset-block-start: calc(var(--filter-stack-bottom) + var(--sp-8));
      inset-block-end: var(--sp-4);
      z-index: 460;
      display: block;
      inline-size: var(--detail-panel-inline-size);
      min-inline-size: 0;
      max-block-size: calc(100% - var(--filter-stack-bottom) - var(--sp-12));
      background: oklch(from var(--bg-surface) l c h / 0.94);
      border: 1px solid oklch(from var(--border) l c h / 0.85);
      border-radius: var(--r-xl);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    .map-shell.has-detail-pane .map-list-panel {
      inset-inline-start: calc(50% - (var(--content-inline-size) / 2));
      inline-size: calc(var(--content-inline-size) - var(--detail-panel-inline-size) - var(--sp-4));
      transform: none;
    }

    .map-list-panel-body {
      padding: var(--sp-4);
    }

    .map-detail-panel-body {
      padding: var(--sp-5);
    }

    .desktop-showcase {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(22rem, 28rem);
      gap: var(--sp-4);
      align-items: stretch;
    }

    .desktop-showcase-toolbar {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      padding-block-end: var(--sp-3);
      border-block-end: 1px solid var(--border);
    }

    .desktop-showcase-meta {
      display: grid;
      justify-items: end;
      gap: 2px;
      text-align: end;
    }

    .desktop-showcase-kicker {
      font-family: var(--font-body);
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }

    .desktop-showcase-title {
      font-family: var(--font-display);
      font-size: 1rem;
      color: var(--text-primary);
    }

    .desktop-showcase > .desktop-gallery-column,
    .desktop-showcase > .desktop-detail-pane {
      min-inline-size: 0;
    }

    .desktop-gallery-column {
      min-inline-size: 0;
    }

    .desktop-detail-pane {
      min-inline-size: 0;
      max-block-size: min(72dvh, 48rem);
      overflow-y: auto;
      padding: var(--sp-5);
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      box-shadow: var(--shadow-md);
    }

    .place-sections {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
    }

    .section-group {
      margin-block-end: var(--sp-10);
    }

    .section-heading {
      margin-block-end: var(--sp-4);
    }

    .section-heading h2 {
      font-size: 1.25rem;
    }

    .cards-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--sp-5);
    }

    .install-banner {
      inset-inline-start: auto;
      inset-inline-end: var(--sp-6);
      inline-size: min(24rem, calc(100vw - 2 * var(--sp-6)));
    }
  }

  @media (min-width: 900px) and (max-width: 1120px) {
    .desktop-showcase {
      grid-template-columns: minmax(0, 1fr);
    }

    .map-shell.has-detail-pane .map-list-panel {
      inline-size: calc(var(--content-inline-size) - var(--detail-panel-inline-size) - var(--sp-3));
    }

    .cards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-4);
    }

    .desktop-showcase-meta {
      justify-items: start;
      text-align: start;
    }

    .desktop-showcase-toolbar {
      align-items: flex-start;
      flex-direction: column;
    }
  }
}