/* ═════════════════════════════════════════════════════════════
   tandoco · desktop polish
   ─────────────────────────────────────────────────────────────
   Shared stylesheet that upgrades the desktop experience without
   touching mobile. Linked from every public page. All rules are
   scoped inside media queries ≥ 1200px so mobile / tablet render
   identically to before.

   Goals:
   1. Lift narrow content containers (820px → 1080px, 1060 → 1440)
   2. Scale hero typography up on large screens
   3. Densify grids (3-col → 4-col) on wide screens
   4. Add decorative radial glows so side margins don't feel empty
   5. More breathing room between sections

   Token reference (declared below as CSS variables):
     --content-max:       1440px   // primary desktop container
     --content-max-wide:  1600px   // 4K / ultrawide container
     --prose-max:         820px    // max line length for body text
   ═════════════════════════════════════════════════════════════ */

:root {
  --content-max: 1440px;
  --content-max-wide: 1600px;
  --prose-max: 820px;
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP (≥ 1200px)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {

  /* ── Narrow prose containers ──
     Lift `.container` (GLP-1 + meal-prep + city pages) and
     `.content` (meal-prep-minneapolis blog-style pages) from
     their mobile-first 720–820px to a more generous 1080px.
     Still keeps lines readable (~90ch) while using more screen. */
  .container {
    max-width: 1080px;
  }
  .content {
    max-width: 1080px;
  }

  /* ── Section + hero wrappers ──
     Most pages cap these at 1060px. Lift to 1440px. */
  .hero-inner,
  .section-inner,
  .pt-inner,
  .pickup-inner,
  .faq-inner,
  .social-cta-wrap,
  .section-wrap,
  .filter-inner,
  .store-divider {
    max-width: var(--content-max);
  }

  /* Exception: index.html has a two-column .hero-grid layout
     where .hero-inner is the LEFT column. Keep it narrow. */
  .hero-grid .hero-inner {
    max-width: 620px;
  }
  .hero-grid {
    max-width: var(--content-max) !important;
  }

  /* ── Menu + blog grids ──
     These already use 1280px. Lift to 1440 for more cards visible. */
  .menu-grid-wrap,
  .blog-wrap {
    max-width: var(--content-max);
  }

  /* ── Hero typography scale ──
     Existing clamp() tops out around 66px. Lift ceiling so big
     monitors get a headline that actually feels like a headline. */
  .hero h1 {
    font-size: clamp(44px, 5.2vw, 84px) !important;
    line-height: 1.02;
  }
  .hero-sub {
    font-size: 17px;
    max-width: 620px;
    line-height: 1.75;
  }

  /* Section titles a touch larger on desktop */
  .section-title {
    font-size: clamp(26px, 3vw, 40px) !important;
  }

  /* ── Grid density ──
     Benefit cards, stat rows, and product grids: push to 4 cols
     on wide screens so they fill horizontal space naturally. */
  .benefit-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
  }
  .stat-row {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }
  .posts-grid {
    gap: 24px;
  }

  /* Store menu cards get a bit more room */
  .menu-grid {
    gap: 24px;
  }

  /* ── Breathing room between sections ──
     Mobile padding is 40px top+bottom. Bump to 64 on desktop. */
  .section {
    padding: 64px 4%;
  }
  .section-alt {
    padding: 72px 4%;
  }

  /* ── Decorative radial glows in the side margins ──
     Fills the empty space outside the content column with subtle
     color so the page doesn't feel like a centered blog column. */
  .section,
  .section-alt,
  .pickup-section,
  .faq-section {
    position: relative;
    overflow: hidden;
  }
  .section::before,
  .section-alt::before {
    content: '';
    position: absolute;
    top: 8%;
    left: -10%;
    width: 44%;
    height: 70%;
    background: radial-gradient(circle at 30% 40%, rgba(200, 169, 110, 0.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  .section::after,
  .section-alt::after {
    content: '';
    position: absolute;
    top: 24%;
    right: -10%;
    width: 40%;
    height: 58%;
    background: radial-gradient(circle at 70% 50%, rgba(79, 81, 212, 0.08), transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  .section > *,
  .section-alt > * {
    position: relative;
    z-index: 1;
  }

  /* ── Hero sections get side glow orbs ──
     Pure visual polish — no layout change. */
  .hero {
    position: relative;
  }
  .hero > .hero-inner,
  .hero > .hero-grid {
    position: relative;
    z-index: 2;
  }

  /* ── Wider nav on desktop for balance ── */
  .nav {
    max-width: 1280px !important;
    height: 62px !important;
    padding: 0 22px !important;
  }
  .nav-brand {
    font-size: 20px !important;
  }
  .nav-links {
    gap: 22px !important;
  }
  .nav-links a {
    font-size: 14px !important;
  }
  .nav-cta,
  .btn-nav {
    padding: 9px 22px !important;
    font-size: 13px !important;
  }

  /* ── index.html: HOW IT WORKS strip ──
     Current: max-width:860px with tight gaps. Lift to fill more width. */
  .how {
    padding: 40px 5% !important;
  }
  .how-strip {
    max-width: 1200px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }
  .how-step {
    padding: 16px 28px !important;
    gap: 14px !important;
  }
  .how-step-num {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
  }
  .how-step-when {
    font-size: 11px !important;
  }
  .how-step-label {
    font-size: 15px !important;
  }
  .how-arrow {
    font-size: 28px !important;
    color: rgba(27, 26, 107, 0.3);
  }
  .how-title {
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }

  /* ── index.html: section + sub-sections ──
     These have their own padding / max-widths — normalize them so desktop
     content doesn't hug the left edge. */
  .section,
  .sub,
  .about,
  .pt,
  .social-section,
  .email-capture,
  .pickup-section,
  .contact-section,
  .faq-section,
  .stats-wrap {
    padding-left: max(5%, calc((100% - var(--content-max)) / 2 + 20px)) !important;
    padding-right: max(5%, calc((100% - var(--content-max)) / 2 + 20px)) !important;
  }

  /* Ensure the inner wrapper itself is properly contained */
  .section-inner,
  .pt-inner,
  .pickup-inner,
  .faq-inner,
  .social-cta-wrap {
    width: 100%;
  }

  /* Section tag + title get a touch more visual weight on desktop */
  .section-tag {
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
  }

  /* ── Store card details get a touch more padding ── */
  .menu-card,
  .product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .menu-card:hover,
  .product-card:hover {
    transform: translateY(-3px);
  }

  /* ── Checklists in long-form content get wider gap ── */
  .checklist li {
    padding: 14px 0;
    font-size: 15px;
  }

  /* ── Larger footer on desktop ── */
  footer {
    padding: 32px 6% !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   WIDE DESKTOP (≥ 1600px — 1440p / 4K monitors)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .menu-grid-wrap,
  .blog-wrap,
  .hero-inner:not(.hero-grid .hero-inner),
  .section-inner {
    max-width: var(--content-max-wide);
  }

  /* Menu grid: 3 cols → 4 cols on very wide screens */
  .menu-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .posts-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Even bigger hero type on 4K */
  .hero h1 {
    font-size: clamp(52px, 5vw, 96px) !important;
  }

  .section {
    padding: 80px 5%;
  }
  .section-alt {
    padding: 88px 5%;
  }

  /* Container-style pages can breathe a bit more too */
  .container,
  .content {
    max-width: 1180px;
  }
}

/* ─────────────────────────────────────────────────────────────
   ULTRAWIDE (≥ 2000px)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 2000px) {
  /* Cap everything so it doesn't go absurd on cinema displays */
  .hero-inner:not(.hero-grid .hero-inner),
  .section-inner,
  .menu-grid-wrap,
  .blog-wrap,
  .hero-grid {
    max-width: 1720px !important;
  }
}