/* ============================================================
   LUMIO — desktop.css

   Native desktop-class layout for ≥1024px viewports. Mobile under
   1024px is completely unaffected by this file — every rule is
   gated behind the media query.

   Sprint 64 — the fixed left sidebar is GONE. Home v3 unifies
   desktop and mobile into one layout (slim topbar + hero + tiles),
   so desktop now only needs: full-viewport screens, wider content
   padding, and the handful of per-screen grid upgrades below.
   Navigation back to home runs through the same per-screen back
   buttons mobile always used.
   ============================================================ */

@media (min-width: 1024px) {

  /* ── Layout shell ──────────────────────────────────────── */
  /* The legacy styles.css @media (min-width: 700px) block was
     designed BEFORE the desktop pattern and turns the body into a
     dark-purple gradient that hosts 430px phone cards (every rule
     in there uses !important). At ≥1024px we replace that pattern
     with full-viewport screens, so every legacy override has to be
     undone with !important of equal weight. */
  html, body {
    overflow: hidden !important;
    height: 100%;
  }
  body {
    /* Sprint 115 — lucht i.p.v. crème, in lijn met de globale flip. */
    background: var(--confetti-lucht) !important;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
  }

  .screen {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    /* Sprint 115 — lucht i.p.v. crème (was de bron van "oude stijl"
       op elk nog niet omgezet scherm op desktop). */
    background: var(--confetti-lucht) !important;
  }
  /* Loading + signin had legacy height clamps to fit the 900px phone
     card. Reset so they fill the actual viewport. */
  .loading-center { height: 100vh !important; }
  .signin-inner   { min-height: 100vh !important; }
  /* Sprint 30.2 — aggressive override. styles.css has
     `.screen-inner { max-width: 600px }` which keeps showing
     the phone-shaped column even after Sprint 30.1. Bumping
     selector specificity and using !important to make sure the
     desktop pane truly fills the available width regardless of
     what other rules try to clamp it. (Home v3 re-clamps itself
     to a centred 1080px column in styles.css with higher
     specificity — that rule wins over this one by design.) */
  body .screen-inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 32px 48px 80px;
  }
  /* The v2 wrapper divs (screen-bg, screen-character) exist in the
     DOM for the v2 design but are empty in v1 mode. Force them
     out of layout so they can't ever overlay or create a stray
     box behind the content. */
  body.design-v1 .screen-bg,
  body.design-v1 .screen-character {
    display: none !important;
  }

  /* ── Comprehension reading: text-left / questions-right split ──
     Sprint 30.4 — the global '.screen { inset: 0 !important }'
     above was clobbering the existing styles.css comp-split rules
     and the user's question screen ended up covering the text. Adding
     !important here so the split wins back for these two screens.
     Both screens get .active simultaneously via _updateDesktopCompSplit
     in app.js, so they render side-by-side. Sprint 64 — left edge
     moved from 240px (old sidebar) to 0. */
  body.desktop-comp-split #screen-comprehension {
    inset: 0 40vw 0 0 !important;
    border-right: 1px solid rgba(108, 93, 211, 0.15);
  }
  body.desktop-comp-split #screen-comprehension-question {
    inset: 0 0 0 60vw !important;
  }
  /* Inner content of both panes can use the full pane width — the
     legacy .screen-inner phone clamp would have made them look
     awkwardly narrow inside their already-narrow pane. */
  body.desktop-comp-split #screen-comprehension .screen-inner,
  body.desktop-comp-split #screen-comprehension-question .screen-inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 28px 40px !important;
  }
  /* "Naar de vragen" / "← Tekst" buttons are redundant on the split
     because both panes are visible at once. */
  body.desktop-comp-split #btn-start-questions,
  body.desktop-comp-split #btn-back-to-text {
    display: none !important;
  }

  /* ── Profile picker: tile grid instead of vertical list ── */
  #screen-profile-picker .profile-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
  }

  /* ── Exercise / result screens — content stays focused but no
     fake phone clamp. Cards inside have their own widths. ───── */
  #screen-math .answer-buttons,
  #screen-spelling .answer-buttons,
  #screen-lezen .answer-buttons,
  #screen-comprehension-question .answer-buttons {
    max-width: 720px;
  }
  #screen-comprehension .comp-text {
    max-width: 720px;
    margin: 0 auto;
  }

  /* ── Parent portal: two-column menu grid ──────────────── */
  #screen-parent-portal .portal-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Sprint 112 — Confetti-speeltuin: de oefenschermen houden hun
   lucht-gradient ook op desktop. De generieke .screen-reset
   hierboven zet !important-cream op elk scherm; dit blok staat
   later in dezelfde file en wint dus met gelijk gewicht (zelfde
   patroon als de #screen-home-uitzondering in styles.css). */
@media (min-width: 1024px) {
  .screen--oefening {
    background: var(--confetti-lucht) !important;
  }
  /* Speelveld gecentreerd op leesbreedte — de generieke verbreding
     hierboven (body .screen-inner: 100%) laat vraagkaarten anders
     de volle 1280px+ overspannen. */
  .screen--oefening .screen-inner {
    max-width: 720px !important;
    margin: 0 auto !important;
  }
}

/* Sprint 113 — Confetti-landing op desktop: hero-split uit de
   goedgekeurde schets (kop + inloggen links, live demo rechts),
   tegels op één rij van zes, features op één rij van drie. De
   generieke .screen / body .screen-inner-resets hierboven werken
   met !important; gelijke wapens hier. */
@media (min-width: 1024px) {
  #screen-signin { background: var(--confetti-lucht) !important; }
  /* Sprint 117 — de demo hoort front-and-center: geen hero/demo-
     kolomsplitsing meer. Hero over de volle breedte (pitch + CTA
     links, vos rechts — geregeld in styles.css), demo als brede
     gecentreerde kaart direct eronder. Drie klassen + id: het oude
     `display: block !important` uit styles.css wint anders. */
  body #screen-signin .screen-inner.signin-v3 {
    display: block !important;
    max-width: 1120px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 26px 48px 60px;
  }
  #screen-signin .sv3-demo {
    max-width: 780px;
    margin: 26px auto 0 !important;
  }
  /* Sprint 118 — de tegel-/feature-rijen zijn vervangen door de
     sectie-opbouw (sv3-vakken, sv3-blok); de secties regelen hun
     eigen breedtes in styles.css. */
  #screen-signin .sv3-pitch h1 { font-size: 40px; line-height: 1.14; }
  #screen-signin .sv3-sectie { max-width: 820px; margin-left: auto; margin-right: auto; }
}