/* Homepage responsive ownership — 2026-09-20
   The home page has two intentional render modes:
   phone <=760px and desktop/tablet >=761px.
   Keep the handoff continuous so iPad portrait/landscape never falls into a
   width where both hero variants are hidden. */
/* Reserve the desktop layout in the first stylesheet paint. This prevents the
   mobile-first source blocks and legacy 700px hero rule from contributing a
   transient geometry before the canonical desktop layout wins the cascade. */
@media (min-width:761px) {
  #main-content[data-ag-home-design="23.9.32.7.2"] > .ag326-mobile-home,
  #main-content[data-ag-home-design="23.9.32.7.2"] > .ag326-mobile-recommended,
  #main-content[data-ag-home-design="23.9.32.7.2"] > .ag-mobile-practical-20260901 { display:none !important; }
  #main-content[data-ag-home-design="23.9.32.7.2"] > .ag326-desktop-hero { min-height:455px !important; }

  .ag326-mobile-home,
  .ag326-mobile-recommended,
  .ag-mobile-practical-20260901 {
    display:none !important;
  }

  .ag326-desktop-hero {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .ag326-desktop-hero .ag3272-desktop-grid {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .ag326-desktop-hero .ag3272-desktop-copy,
  .ag326-desktop-hero .ag3272-discovery-card {
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* Tablet portrait / compact landscape: keep the same canonical desktop hero
   but stack it so it remains readable instead of disappearing or overflowing. */
@media (min-width:761px) and (max-width:1099px) {
  .ag326-desktop-hero {
    min-height:auto !important;
    padding:42px 0 34px !important;
  }

  .ag326-desktop-hero .ag3272-desktop-grid {
    grid-template-columns:1fr !important;
    gap:24px !important;
    align-items:start !important;
  }

  .ag326-desktop-hero .ag3272-desktop-copy,
  .ag326-desktop-hero .ag3272-discovery-card {
    width:100% !important;
    max-width:none !important;
  }

  .ag326-desktop-hero .ag3272-primary-stack {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    display:grid !important;
    gap:12px !important;
  }

  .ag326-desktop-hero .ag3272-discovery-card {
    margin-top:0 !important;
  }
}

@media (max-width:760px) {
  .ag326-mobile-home {
    display:block !important;
  }
  .ag326-desktop-hero {
    display:none !important;
  }
}