/* ============================================================
   premium-desktop.css — Playtypus: responsiv strategi telefon → datorskärm
   playtypus-desktop-strategi.md, avsnitt 10, Sprint D1–D5 (2026-07-01)
   Load LAST in index.html, after premium.css.

   Razor-motparter (se ActivityDetail.razor / AppShell.razor):
     - D4: .app-shell--detail-open fallback-klass (för browsers utan :has())
     - D6: tabindex + @onkeydown="HandlePanelKeyDown" på panel-roten,
           CanGoBack/OnNavigateBack kopplat mot en riktig back-stack i
           AppShell (INTE History/RecentHistoryService — den har ingen
           back-stack, bara en MRU-lista. Se ändringsloggen.)

   Brytpunkter (se 10.9):
     640px  = stor telefon / liten surfplatta
     900px  = desktop, det stora skiftet (redan etablerad konvention i
              mosaic.css/gallery.css/kanban.css)
     1200px = master–detail blir meningsfullt
     1400px = tak, se 10.7
   ============================================================ */

/* ── D1 (10.1): --app-max-width blir responsiv — kaskaderar automatiskt
   till .app-shell, .detail-panel, .modal-sheet, .panic-detail-panel och
   [data-grid-style="two-column"], eftersom de redan läser samma token. ── */
@media (min-width: 640px) {
  :root { --app-max-width: 600px; }
}
@media (min-width: 900px) {
  :root { --app-max-width: 1100px; }
}
@media (min-width: 1400px) {
  :root { --app-max-width: 1280px; } /* tak, se 10.7 — håller korten läsbara även på 32" */
}

/* ── D1 (10.2): Baseline-griden får kolumner (two-column och mosaic är
   redan egna, explicita fall och rörs inte här). ── */
@media (min-width: 640px) {
  .app-shell:not([data-grid-style="mosaic"]):not([data-grid-style="two-column"]) .activity-grid {
    --grid-columns: repeat(auto-fill, minmax(260px, 1fr));
    --grid-gap: var(--spacing-md, 16px);
  }
}
@media (min-width: 900px) {
  .app-shell:not([data-grid-style="mosaic"]):not([data-grid-style="two-column"]) .activity-grid {
    --grid-gap: var(--spacing-lg, 24px);
  }
}

/* ── D6 (10.10): Panelbredd som skalar med skärmen istället för fast 460px.
   Egen variabel (inte --app-max-width) eftersom D5:s padding-right måste
   matcha exakt — annars läcker/överlappar griden panelen. Uppdatera BARA
   här; padding-right nedan läser samma variabel. ── */
:root { --detail-panel-width: 100%; }
@media (min-width: 900px)  { :root { --detail-panel-width: 460px; } }
@media (min-width: 1400px) { :root { --detail-panel-width: 520px; } }
@media (min-width: 1800px) { :root { --detail-panel-width: 580px; } }

/* ── D2 (10.3): ActivityDetail blir sidopanel ≥900px ── */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (min-width: 900px) {
  .detail-overlay {
    flex-direction: row;
    align-items: stretch;       /* var: center — panelen är nu full höjd */
    justify-content: flex-end;
    background: var(--overlay-backdrop-desktop, rgba(0, 0, 0, 0.32));
  }

  .detail-panel {
    width: var(--detail-panel-width);
    max-width: var(--detail-panel-width);
    height: 100%;
    max-height: 100%;
    border-radius: var(--border-radius-xl, 28px) 0 0 var(--border-radius-xl, 28px);
    --detail-animation: slideInRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* "fullscreen"-varianten behöver sin egen desktop-broms — annars blir
     den en vägg av innehåll kant till kant på en bred monitor. Får mer
     tak än sheet-varianten eftersom den är tänkt att fyllas med
     innehåll (galleri m.m.) — se D7 tvåkolumns-body nedan. */
  .app-shell[data-detail-style="fullscreen"] .detail-panel {
    max-width: 760px;
    margin-left: auto;
  }
}
@media (min-width: 1400px) {
  .app-shell[data-detail-style="fullscreen"] .detail-panel {
    max-width: 900px;
  }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .detail-panel { --detail-animation: none; }
}

/* ── D7 (10.11): Läsbredd-tak för identity/body-text. Panelen kan bli
   bred (upp till 900px i fullscreen-läget), men löpande text ska aldrig
   sträcka sig över hela den bredden — det blir svårläst. Caps på
   ~640px (~65-70ch beroende på typsnitt). Ingen effekt i sheet-varianten
   (panel < 640px där ändå), men skyddar fullscreen-varianten. ── */
@media (min-width: 900px) {
  .detail-panel__identity,
  .detail-panel__body {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── D8 (10.12): Tvåkolumns body — bara i fullscreen-varianten, bara när
   panelen är genuint bred (≥1400px-brytpunkten, panel upp till 900px).
   I sheet-varianten (max ~580px) skulle två kolumner ge ~250px per
   kolumn — smalare än mobilporträtt, alltså ingen vinst. CSS columns
   (inte grid-areas) valt medvetet: fungerar oavsett vilken kombination
   av sections en given aktivitet råkar ha, utan att markupen behöver
   känna till "media" vs "text"-uppdelning. break-inside:avoid håller
   varje detail-section/element helt inom en kolumn. ── */
@media (min-width: 1400px) {
  .app-shell[data-detail-style="fullscreen"] .detail-panel__body {
    max-width: none;        /* läsbredds-taket (D7) gäller inte här — kolumnerna själva är läsbredd */
    margin-left: 0;
    margin-right: 0;
    display: block;          /* CSS columns kräver block, inte flex */
    column-count: 2;
    column-gap: var(--spacing-lg, 24px);
  }
  .app-shell[data-detail-style="fullscreen"] .detail-panel__body > * {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--spacing-md, 16px); /* ersätter flex-gapet som display:block tappar */
  }
}

/* ── D5 (10.4): Master–detail split-view på riktigt breda skärmar.
   :has() har brett stöd i moderna evergreen-webbläsare 2026; för äldre
   WebView (Playtypus.App) faller vi tillbaka på .app-shell--detail-open,
   satt av AppShell.razor baserat på _selectedActivity != null. ── */
@media (min-width: 1200px) {
  .app-shell[data-detail-style="sheet"]:has(.detail-overlay),
  .app-shell--detail-open {
    padding-right: var(--detail-panel-width);
    transition: padding-right 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .app-shell:has(.detail-overlay) .detail-overlay,
  .app-shell--detail-open .detail-overlay {
    background: transparent;    /* griden ska kännas levande, inte pausad */
    backdrop-filter: none;
    pointer-events: none;       /* klick ska gå igenom till tomma ytor */
  }

  .detail-panel {
    pointer-events: auto;       /* panelen själv är fortfarande klickbar */
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12); /* skugga ersätter backdropen som djupsignal */
    border-left: 1px solid var(--color-border);
  }
}

/* ── D2 (10.5): Header-andrum + sökfältets bredd på desktop.
   .filter-trigger-bar ärver --app-max-width-fixen (D1) automatiskt via
   .modal-sheet i FilterDrawer — ingen extra regel behövs där. ── */
@media (min-width: 900px) {
  .app-header {
    padding: 0 var(--spacing-xl, 32px);
    gap: var(--spacing-md, 16px);
  }
  .filter-trigger-bar {
    max-width: 360px;
  }
}

/* ── D9 (10.13): Mindre vertikal chrome i footern på desktop. Primary
   (Done/Try again) och secondary (Share/Copy/Print) staplas alltid på
   mobil (motiverat av tumräckvidd); på desktop finns bredd att slå
   ihop dem till en rad när det får plats, annars wrap:ar de precis
   som förut. Ger body-zonen mer höjd utan att ta bort funktioner. ── */
@media (min-width: 900px) {
  .detail-panel__footer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .detail-panel__footer-primary {
    flex: 1 1 auto;
  }
  .detail-panel__footer-secondary {
    justify-content: flex-end;
  }
}

/* ── D3 (10.8): Hover-lager, skyddat mot touch-regression.
   (hover:hover) and (pointer:fine) träffar musanvändare oavsett
   fönsterbredd och lämnar pekskärmar (även stora touch-laptops) orörda. ── */
@media (hover: hover) and (pointer: fine) {
  .activity-card {
    cursor: pointer;
  }

  .activity-card .card-action-btn {
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .activity-card:hover .card-action-btn {
    opacity: 1;
  }
}