/*
 * JJDigit AI Plant Care Guide
 * Unified desktop content width — 820 px
 *
 * IMPORTANT:
 * - Every rule is isolated to desktop screens (769 px and wider).
 * - Mobile/tablet rules at 768 px and below are untouched.
 * - Hero content, page content and footer share the same 820 px frame.
 */

@media (min-width: 769px) {
  /* ==========================================================
     GLOBAL DESKTOP FRAME
     ========================================================== */
  body.desktop-width-standard main > .container,
  body.desktop-width-standard main section > .container,
  body.desktop-width-standard > section > .container,
  body.desktop-width-standard #main-content > .container,
  body.desktop-width-standard #main-content section > .container,
  body.desktop-width-standard .hero > .container,
  body.desktop-width-standard .site-footer > .container {
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Full page shells align to the approved frame. */
  body.desktop-width-standard .card,
  body.desktop-width-standard .compact-card,
  body.desktop-width-standard .access-card,
  body.desktop-width-standard .checkout-card,
  body.desktop-width-standard .desktop-tool-card,
  body.desktop-width-standard .desktop-tool-result,
  body.desktop-width-standard .desktop-results-shell,
  body.desktop-width-standard .content-wrap {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* ==========================================================
     HOME / DASHBOARD
     ========================================================== */
  body.page-home #main-content .container,
  body.page-home #main-content .content-wrap,
  body.page-home #main-content .card {
    max-width: 820px !important;
  }

  /* ==========================================================
     SEARCH
     ========================================================== */
  body.page-search .desktop-search-shell,
  body.page-search .desktop-search-shell > form,
  body.page-search #searchResults {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* ==========================================================
     SPACES / LIBRARY / GUIDES INDEX
     ========================================================== */
  body.page-spaces .spaces-page-container,
  body.page-library .library-hero .container,
  body.page-library .library-main > .container,
  body.page-library .library-controls,
  body.page-library .library-featured,
  body.page-library .library-grid,
  body.page-guides .guides-hero .container,
  body.page-guides .guides-main > .container,
  body.page-guides .guides-controls,
  body.page-guides .guides-grid {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.page-library .library-featured-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-library .library-grid,
  body.page-guides .guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.page-library .library-control-row {
    grid-template-columns: minmax(0, 1fr) 220px !important;
  }

  body.page-library .library-card.is-featured {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  /* ==========================================================
     TODAY
     ========================================================== */
  body.page-today #todayContent {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-today #todayContent .today-section,
  body.page-today #todayContent .healthy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 12px;
    align-items: start;
  }

  body.page-today #todayContent .today-section > .today-section-header,
  body.page-today #todayContent .today-section > .today-empty,
  body.page-today #todayContent .today-section > .healthy-grid,
  body.page-today #todayContent .today-section > .week-summary,
  body.page-today #todayContent .today-section > .notice {
    grid-column: 1 / -1;
  }

  body.page-today #todayContent .plant-task-card {
    width: 100%;
    margin-bottom: 0;
  }

  /* ==========================================================
     MY PLANTS / MY PLANS
     ========================================================== */
  body.page-my-plants .content-wrap,
  body.page-my-plans .content-wrap,
  body.page-my-plants #pageContent,
  body.page-my-plans #pageContent,
  body.page-my-plants .desktop-collection-search,
  body.page-my-plans .desktop-collection-search,
  body.page-my-plants #plantsToolbar,
  body.page-my-plans #plansToolbar,
  body.page-my-plants .list-controls-bottom-row,
  body.page-my-plans .list-controls-bottom-row,
  body.page-my-plants #plantsSummarySection,
  body.page-my-plans #plansSummarySection,
  body.page-my-plants #plantsGrid,
  body.page-my-plans #plansGrid {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.page-my-plants #plantsGrid,
  body.page-my-plans #plansGrid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    align-items: start;
  }

  body.page-my-plants .collection-summary-grid,
  body.page-my-plans .collection-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* ==========================================================
     JOURNAL
     ========================================================== */
  body.page-journal #journalHero .container,
  body.page-journal > .container,
  body.page-journal #journalContent {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* ==========================================================
     IDENTIFY / DIAGNOSE / RESULTS
     ========================================================== */
  body.page-identify #appSection > .container,
  body.page-diagnose #appSection > .container,
  body.page-identify .desktop-tool-card,
  body.page-diagnose .desktop-tool-card,
  body.page-identify .desktop-tool-result,
  body.page-diagnose .desktop-tool-result,
  body.page-results .desktop-results-shell {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* ==========================================================
     USER GUIDE / PRIVACY
     ========================================================== */
  body.page-user-guide .content-wrap,
  body.page-privacy .content-wrap {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.page-user-guide .access-clarity-grid,
  body.page-privacy .access-clarity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ==========================================================
     REVIEWS
     ========================================================== */
  body.page-reviews .reviews-hero-inner,
  body.page-reviews .reviews-content,
  body.page-reviews .reviews-summary,
  body.page-reviews .reviews-layout,
  body.page-reviews .reviews-results {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.page-reviews .reviews-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.page-reviews .reviews-layout {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  body.page-reviews .reviews-sidebar {
    position: sticky !important;
    top: 24px !important;
  }

  /* ==========================================================
     PLANS
     ========================================================== */
  body.page-plans .plans-grid,
  body.page-plans .desktop-features-list,
  body.page-plans #plansSection > .container,
  body.page-plans #renewSection > .container {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.page-plans .plans-grid {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  body.page-plans .plan-card {
    width: auto;
    max-width: none !important;
  }

  /* ==========================================================
     COMPACT / TRANSACTIONAL PAGES
     ========================================================== */
  body.page-contact .compact-card,
  body.page-profile .compact-card,
  body.page-recover .compact-card,
  body.page-cancel .card,
  body.page-success .checkout-card {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* ==========================================================
     FOOTER
     ========================================================== */
  body.desktop-width-standard .site-footer .container,
  body.desktop-width-standard .site-footer .footer-links,
  body.desktop-width-standard .site-footer .footer-bottom {
    width: 100%;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }


  /* ==========================================================
     HOME PUBLIC PAGE — ALL CONTENT CARDS AT 820 PX
     This override is desktop-only because it remains inside the
     parent @media (min-width: 769px) rule.
     ========================================================== */
  body.page-home.home-public-active .access-clarity-section > .container,
  body.page-home.home-public-active .home-how-section > .container,
  body.page-home.home-public-active #accessSection > .container,
  body.page-home.home-public-active .home-feature-section > .container {
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  body.page-home.home-public-active .access-clarity,
  body.page-home.home-public-active .home-how-section .section-header,
  body.page-home.home-public-active .home-step-grid,
  body.page-home.home-public-active .home-activate-card,
  body.page-home.home-public-active .home-feature-section .section-header,
  body.page-home.home-public-active .home-feature-grid,
  body.page-home.home-public-active .home-final-cta {
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Preserve the approved single-column presentation while making
     every card occupy the complete 820 px desktop content frame. */
  body.page-home.home-public-active .access-clarity-grid,
  body.page-home.home-public-active .home-step-grid,
  body.page-home.home-public-active .home-feature-grid {
    width: 100% !important;
    max-width: 820px !important;
    grid-template-columns: 1fr !important;
  }

  body.page-home.home-public-active .access-clarity-item,
  body.page-home.home-public-active .home-step-grid article,
  body.page-home.home-public-active .home-feature-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }
}