/* ============================================================
   desktop.css — Desktop Layout Scaling Improvements
   --------------------------------------------------------
   PURPOSE : Fix boxed/narrow feel on 1366px+ screens.
   SCOPE   : ONLY affects desktop (min-width: 1366px and up).
             Mobile & tablet breakpoints are completely untouched.
   STRATEGY: Override container max-width + side padding,
             add a 1400px+ breakpoint for wider screens,
             slightly increase section padding and grid gaps.
   HOW TO USE: Link this file AFTER style.css in header.php:
     <link rel="stylesheet" href="<?= $base ?>/css/desktop.css">
============================================================ */


/* ── 1: Wider container on desktop (1366px and above) ── */
/*
  Original: max-width: 1200px; padding: 0 20px
  New     : max-width: 1280px; padding: 0 32px
  Effect  : More breathing room, better use of 1366–1440px screens.
*/
@media (min-width: 1366px) {
  .container {
    max-width: 1280px;
    padding: 0 32px;
  }
}


/* ── 2: Large screen layout (1400px and above) ── */
/*
  Allows the layout to stretch slightly further on 1440px / 1920px.
  max-width: 1320px keeps content readable; it never goes full-bleed.
  padding: 0 40px gives clean side whitespace on ultra-wide monitors.
*/
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
    padding: 0 40px;
  }

  /* ── 2a: Slightly taller section padding for large screens ── */
  /*
    Original: 72px. Adding ~16px gives more vertical rhythm
    without changing the compact feel on smaller screens.
  */
  .section {
    padding: 88px 0;
  }

  .section-sm {
    padding: 60px 0;
  }

  /* ── 2b: Hero section — a touch more vertical room ── */
  .hero {
    padding: 108px 0 96px;
  }

  /* ── 2c: CTA section — match increased section rhythm ── */
  .cta-section {
    padding: 96px 0;
  }

  /* ── 2d: Slightly larger grid gap for tools grid ── */
  /*
    Original: 22px. On large screens, 26px makes cards feel less cramped.
  */
  .tools-grid {
    gap: 26px;
  }

  /* ── 2e: Steps/features grid gap ── */
  .steps-grid,
  .features-grid {
    gap: 40px;
  }

  /* ── 2f: Footer top section — more column breathing room ── */
  .ft-top {
    gap: 64px;
  }
}


/* ── 3: Extra-wide screens (1920px+) ── */
/*
  Hard cap at 1440px max-width so content never stretches too thin.
  This mirrors how Smallpdf / iLovePDF cap their layout.
*/
@media (min-width: 1920px) {
  .container {
    max-width: 1440px;
    padding: 0 48px;
  }
}