/* desktop.css
 *
 * Additive desktop overlay for the static HTML pages of the Evalify portal
 * (`responsive-desktop-layouts` spec). Mobile rendering is unchanged because
 * every rule below sits inside `@media (min-width: 1024px)`.
 *
 * Pages targeted via body class:
 *   - body.evalify-landing → index.html (login / role select)
 *   - body.evalify-doc     → privacy-policy.html, terms-of-service.html
 *
 * Validates: Requirement 2.1, 2.5, 2.6, 7.1
 */

:root {
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --sidebar-w: 240px;
  --content-max: 1280px;
  --content-pad: 32px;
  --hit-area-mobile: 44px;
  --hit-area-desktop: 32px;
}

@media (min-width: 1024px) {
  /* ---------- Landing (index.html) ---------- */

  body.evalify-landing .container {
    max-width: var(--content-max);
    padding: var(--content-pad);
    margin-inline: auto;
  }

  body.evalify-landing .glass-card {
    /* Comfortable centered card — wider than the 600px mobile clamp but
       capped at 720px so reading line length stays sensible. */
    max-width: 720px;
    margin-inline: auto;
    padding: 2.5rem 2.75rem;
  }

  /* If the page also has a hero / stats grid, lay it out side-by-side
     instead of stacking. The selectors below are no-ops if the markup
     doesn't include those classes. */
  body.evalify-landing .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }

  body.evalify-landing .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* ---------- Static doc pages ---------- */

  body.evalify-doc .container {
    /* Mobile rule already sets max-width: 800px. We widen slightly for
       desktop (880px) and increase horizontal padding for breathing room
       per Requirement 2.6 (>=48px each side). */
    max-width: 880px;
    padding: 56px 64px;
  }

  /* Fallback shell escape hatch — kept for any future static dashboard
     pages that bake in the 480px clamp. */
  .app-shell-static {
    max-width: none;
  }
}

/* Larger desktops: keep the content cap stable; widen padding only. */
@media (min-width: 1280px) {
  body.evalify-landing .container,
  body.evalify-doc .container {
    padding-inline: 48px;
  }
}