/* ============================================================
   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)
     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.
   2026-08-02: bytt från en pixel-stege (460/520/580px) till exakt 50vw —
   uttrycklig begäran om att ActivityDetail ska fylla PRECIS halva
   högersidan av skärmen i desktopvy, inte en approximation som växer i
   steg. Ingen egen övre gräns här (t.ex. för en 32"-skärm): "precis
   halva" är ett explicit krav, så en tyst cap skulle motsäga det. Om en
   övre gräns visar sig behövas på riktigt breda skärmar är det en egen
   uppföljning, inte något att smyga in här. ── */
:root { --detail-panel-width: 100%; }
@media (min-width: 900px) { :root { --detail-panel-width: 50vw; } }

/* ── 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 hade tidigare en egen bredare gräns här
     (760px/900px) eftersom den är tänkt att fyllas med innehåll
     (galleri m.m.) — se D7 nedan. Borttagen 2026-08-02: "precis halva
     högersidan" är ett uttryckligt, enhetligt krav för ActivityDetail i
     desktopvy, oavsett data-detail-style. fullscreen-packs (t.ex.
     svenskafaglar) delar nu samma 50vw som sheet-varianten via
     --detail-panel-width ovan — inget särfall kvar att underhålla här. */

  /* Bugfix 2026-08-02: samma borttagning bröt höger-dockningen för
     fullscreen-packar. ui-variants.css sätter, ovillkorligt (ingen
     brytpunkt), .app-shell[data-detail-style="fullscreen"] .detail-overlay
     { justify-content: stretch }. Den selektorn har högre specificitet än
     .detail-overlay-regeln här ovan, så den vinner alltid för
     fullscreen-packar — och när panelen (som här) har en explicit,
     icke-auto bredd kan stretch inte tillämpas, med skiftande resultat
     mellan webbläsare (justify-content:stretch är ett ovanligt värde).
     Gamla koden kompenserade redan för detta med margin-left:auto på
     panelen — borttaget av misstag tillsammans med bredd-taket ovan,
     utan att den delen av vad regeln gjorde uppmärksammades. margin:auto
     vinner alltid över justify-content oavsett hur stretch tolkas, så
     detta är robust snarare än att försöka reda ut specificitets-striden. */
  .app-shell[data-detail-style="fullscreen"] .detail-panel {
    margin-left: auto;
  }
}
@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 (50vw i desktopvy, se D6 ovan — kan bli 900px+ på breda skärmar),
   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). ── */
@media (min-width: 900px) {
  .detail-panel__identity,
  .detail-panel__body {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── D8 (10.12) BORTTAGEN 2026-07-30 ─────────────────────────────────────
   Tvåkolumns body via CSS `columns` (fullscreen-varianten, ≥1400px) är
   borttagen helt på uttrycklig begäran — inga kolumner i ActivityDetail.
   Grundorsak till varför den togs bort, inte bara "föredrogs bort":
   `columns` balanserar kolumnhöjd mot det tillgängliga utrymmet och
   TYST KLIPPER innehåll som inte får plats, istället för att göra det
   scrollbart. Verifierat direkt: ett injicerat testelement med
   `min-height: 2000px` renderades på bara 434px, och
   .detail-panel__body's scrollHeight förblev låst lika med clientHeight
   trots genuint högt innehåll — dvs innehåll som varken syns eller går
   att scrolla till. `min-height: 0` (den vanliga grid-item-fixen för
   den här typen av problem) testades och löste INTE detta; det är
   columns-modellen själv, inte en grid-detalj, som är boven.
   .detail-panel__body faller nu tillbaka på D7 (max-width: 640px,
   centrerad, ≥900px) som enda desktop-regel — samma enkelkolumns flex
   som redan är verifierat korrekt (riktiga scroll-gester, forcerad
   overflow) vid varje annan brytpunkt. ── */

/* ── 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 på desktop.
   v15: den gamla .filter-trigger-bar-regeln (max-width: 360px) är borta —
   sök/filter-knappen som behövde den bredd-begränsningen finns inte längre
   i feeden, den bor i headern nu (.icon-btn). .results-line är bara text
   och behöver ingen egen bredd-regel. ── */
@media (min-width: 900px) {
  .app-header {
    padding: 0 var(--spacing-xl, 32px);
    gap: var(--spacing-md, 16px);
  }
}

/* ── D9 (10.13): superseded 2026-07-09, footer removed 2026-08-02. This
   used to switch the footer from a stacked column (mobile) to a row
   (desktop, ≥900px) once there was room — already unnecessary since
   2026-07-09 (Done/Try again/Share/Copy/Print became icon-only circles
   that fit on one row at any width). The footer itself is gone now too:
   those same icon buttons live in the Zone 1 hero action row instead
   (see .detail-panel__hero-actions in detail-zones.css). Nothing
   desktop-specific left to do here. ── */

/* ── 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;
  }
}