/*
 * WellNuvo Responsive Canvas Fix v1.0
 * Pages:
 *   710 = Where Are You Right Now?
 *   750 = Start Where You Are
 *
 * Intent:
 * - leave phone layouts alone
 * - make tablet/desktop use the browser canvas
 * - neutralize narrow theme content constraints
 */

/* Tablet + desktop only */
@media (min-width: 768px) {

  /* Remove theme-level narrow-column constraints around the page content */
  body.page-id-710 main,
  body.page-id-750 main,
  body.page-id-710 .wp-site-blocks main,
  body.page-id-750 .wp-site-blocks main,
  body.page-id-710 .wp-block-post-content,
  body.page-id-750 .wp-block-post-content,
  body.page-id-710 .entry-content,
  body.page-id-750 .entry-content {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make any theme wrapper around Post Content stop acting like a narrow article */
  body.page-id-710 .wp-block-post-content > *,
  body.page-id-750 .wp-block-post-content > * {
    max-width: none !important;
  }

  /*
   * Current and prior WellNuvo plugin roots.
   * The extra class coverage makes the patch safe across the versions
   * already used during staging.
   */
  body.page-id-710 .wayr-wrap,
  body.page-id-710 .wa4,
  body.page-id-750 .swya-wrap,
  body.page-id-750 .sw4 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow-x: clip !important;
  }

  /* Expand all WellNuvo internal shells on larger screens */
  body.page-id-710 .wayr-shell,
  body.page-id-710 .wa4-inner,
  body.page-id-750 .swya-shell,
  body.page-id-750 .sw4-inner {
    width: min(1600px, calc(100vw - 72px)) !important;
    max-width: none !important;
  }

  /* Keep the hero cinematic rather than portrait-shaped */
  body.page-id-710 .wayr-hero,
  body.page-id-710 .wa4-hero,
  body.page-id-750 .swya-hero,
  body.page-id-750 .sw4-hero {
    min-height: 560px !important;
    height: clamp(560px, 62vw, 720px) !important;
    max-height: 720px !important;
  }

  /* Broaden the hero copy so headings do not become tall towers */
  body.page-id-710 .wayr-hero-copy,
  body.page-id-710 .wa4-hero-card,
  body.page-id-750 .swya-hero-copy,
  body.page-id-750 .sw4-hero-card {
    width: min(760px, 48vw) !important;
    max-width: 760px !important;
  }

  /* Keep primary headings more landscape-friendly */
  body.page-id-710 .wayr-hero h1,
  body.page-id-710 .wa4-hero h1,
  body.page-id-750 .swya-hero h1,
  body.page-id-750 .sw4-hero h1 {
    font-size: clamp(3.5rem, 5.3vw, 6.2rem) !important;
    line-height: 0.98 !important;
  }

  /*
   * Preserve side-by-side editorial sections longer.
   * These selectors cover the currently installed page versions.
   */
  body.page-id-710 .wayr-intro-grid,
  body.page-id-710 .wayr-doorway-grid,
  body.page-id-710 .wa4-intro-grid,
  body.page-id-750 .swya-hero-grid,
  body.page-id-750 .swya-split,
  body.page-id-750 .swya-two,
  body.page-id-750 .swya-why-grid,
  body.page-id-750 .swya-reset-grid,
  body.page-id-750 .sw4-intro-grid {
    max-width: none !important;
  }

  /* Avoid overly tall section padding on tablet / desktop */
  body.page-id-710 .wayr-section,
  body.page-id-750 .swya-section {
    padding-top: clamp(64px, 6vw, 92px) !important;
    padding-bottom: clamp(64px, 6vw, 92px) !important;
  }
}

/* Tablet-specific composition */
@media (min-width: 768px) and (max-width: 1100px) {

  body.page-id-710 .wayr-shell,
  body.page-id-710 .wa4-inner,
  body.page-id-750 .swya-shell,
  body.page-id-750 .sw4-inner {
    width: calc(100vw - 40px) !important;
  }

  body.page-id-710 .wayr-hero,
  body.page-id-710 .wa4-hero,
  body.page-id-750 .swya-hero,
  body.page-id-750 .sw4-hero {
    min-height: 520px !important;
    height: 58vw !important;
    max-height: 620px !important;
  }

  body.page-id-710 .wayr-hero-copy,
  body.page-id-710 .wa4-hero-card,
  body.page-id-750 .swya-hero-copy,
  body.page-id-750 .sw4-hero-card {
    width: min(690px, 68vw) !important;
    max-width: 690px !important;
  }

  body.page-id-710 .wayr-hero h1,
  body.page-id-710 .wa4-hero h1,
  body.page-id-750 .swya-hero h1,
  body.page-id-750 .sw4-hero h1 {
    font-size: clamp(3.2rem, 6.1vw, 5.2rem) !important;
  }
}

/* Desktop: take advantage of the full horizontal canvas */
@media (min-width: 1101px) {

  body.page-id-710 .wayr-shell,
  body.page-id-710 .wa4-inner,
  body.page-id-750 .swya-shell,
  body.page-id-750 .sw4-inner {
    width: min(1660px, calc(100vw - 96px)) !important;
  }

  /* Encourage major card systems to stay broad on desktop */
  body.page-id-710 .wayr-theme-grid,
  body.page-id-710 .wa4-score-grid,
  body.page-id-750 .swya-lens-grid,
  body.page-id-750 .sw4-lens-row {
    max-width: none !important;
  }
}