/* EasySub progressive desktop layout, 2026.
 * Text remains readable while visual canvases, cards, and media use large displays.
 */

/* Responsive article width V2 is duplicated here intentionally. This file is
 * cache-busted independently and excluded from NitroPack CSS combination. */
body.elementor-page-553 .elementor-element-a1437ce > .elementor-container > .elementor-column > .elementor-widget-wrap,
body.elementor-page-553 .elementor-element-a1437ce .elementor-widget-theme-post-content .e-con-boxed {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.elementor-page-553 .elementor-element-a1437ce .elementor-widget-theme-post-content .e-con-boxed > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
}

body.elementor-page-527 .elementor-element-4ae5abe .elementor-element-45eaf40 {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0;
}

/* Homepage copy should use the available canvas as deliberately as its media.
 * Keep the creator and featured-video widths untouched. */
@media (min-width: 1025px) {
  .es-character-stories-layout,
  .es-subtitle-layout {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
    gap: clamp(44px, 4vw, 64px) !important;
  }

  .es-faq-layout {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    gap: clamp(48px, 5vw, 72px) !important;
  }

  .es-heading-center {
    max-width: 960px !important;
  }

  .es-heading-center > p:last-child {
    max-width: 820px !important;
  }

  .es-workflow .es-heading-center {
    max-width: 1020px !important;
  }

  .es-workflow .es-heading-center h2 {
    max-width: 1000px !important;
  }

  .es-workflow .es-heading-center > p:last-child {
    max-width: 820px !important;
  }
}

/* At compact laptop/tablet widths, two narrow text columns are harder to read
 * than one full-width copy block followed by its visual. */
@media (min-width: 769px) and (max-width: 1100px) {
  .es-heading-split,
  .es-subtitle-first-heading,
  .es-character-stories-layout,
  .es-subtitle-layout,
  .es-faq-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 38px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1599px) {
  body.elementor-page-553 .elementor-element-a1437ce > .elementor-container,
  body.elementor-page-527 .elementor-element-4ae5abe > .elementor-container {
    width: min(1280px, calc(100% - 64px));
    max-width: 1280px !important;
  }

  body.elementor-page-527 .elementor-element-4ae5abe .elementor-element-ed04f63 > .elementor-widget-wrap {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.elementor-page-553 .elementor-element-a1437ce > .elementor-container,
  body.elementor-page-527 .elementor-element-4ae5abe > .elementor-container {
    width: calc(100% - 32px);
    max-width: none !important;
  }

  body.elementor-page-527 .elementor-element-4ae5abe .elementor-element-ed04f63 > .elementor-widget-wrap {
    padding: 34px 32px 42px !important;
  }
}

@media (max-width: 767px) {
  body.elementor-page-553 .elementor-element-a1437ce > .elementor-container,
  body.elementor-page-527 .elementor-element-4ae5abe > .elementor-container {
    width: calc(100% - 24px);
    max-width: none !important;
  }

  body.elementor-page-527 .elementor-element-4ae5abe .elementor-element-ed04f63 > .elementor-widget-wrap {
    padding: 24px 18px 34px !important;
  }
}

@media (min-width: 1600px) {
  #masthead .inside-header,
  #site-navigation .inside-navigation {
    width: min(1440px, calc(100% - 96px)) !important;
    max-width: 1440px !important;
  }

  .es-shell,
  .eaf-shell,
  .ecp-shell,
  .eah-shell {
    width: min(1440px, calc(100% - 96px)) !important;
    max-width: 1440px !important;
  }

  .es-hero-copy {
    max-width: 960px !important;
  }

  .es-creator,
  .es-hero-film {
    max-width: 1320px !important;
  }

  body.elementor-page-553 .elementor-element-5836667 > .elementor-container,
  body.elementor-page-527 .elementor-element-30bbe5a > .elementor-container,
  body.elementor-page-553 .elementor-element-a7d5866 > .elementor-container,
  body.elementor-page-527 .elementor-element-6771922 > .elementor-container {
    width: min(1360px, calc(100% - 96px));
    max-width: 1360px !important;
  }

  body.elementor-page-553 .elementor-element-a1437ce > .elementor-container {
    width: min(1360px, calc(100% - 96px));
    max-width: 1360px !important;
  }

  body.elementor-page-553 .elementor-element-be582ce > .elementor-container {
    width: min(1360px, calc(100% - 96px));
    max-width: 1360px !important;
  }

  body.elementor-page-527 .elementor-element-4ae5abe > .elementor-container {
    width: min(1360px, calc(100% - 96px));
    max-width: 1360px !important;
  }

  body.elementor-page-527 .elementor-element-4ae5abe .elementor-element-45eaf40 {
    max-width: none !important;
  }

  body.elementor-page-527 .elementor-element-29d4d8a > .elementor-container {
    width: min(1360px, calc(100% - 96px));
    max-width: 1360px !important;
  }
}

@media (min-width: 2400px) {
  #masthead .inside-header,
  #site-navigation .inside-navigation,
  .es-shell,
  .eaf-shell,
  .ecp-shell,
  .eah-shell {
    width: min(1600px, calc(100% - 128px)) !important;
    max-width: 1600px !important;
  }

  .es-hero-copy {
    max-width: 1020px !important;
  }

  .es-creator,
  .es-hero-film {
    max-width: 1480px !important;
  }

  body.elementor-page-553 .elementor-element-5836667 > .elementor-container,
  body.elementor-page-527 .elementor-element-30bbe5a > .elementor-container,
  body.elementor-page-553 .elementor-element-a7d5866 > .elementor-container,
  body.elementor-page-527 .elementor-element-6771922 > .elementor-container,
  body.elementor-page-553 .elementor-element-be582ce > .elementor-container,
  body.elementor-page-527 .elementor-element-29d4d8a > .elementor-container {
    width: min(1480px, calc(100% - 128px));
    max-width: 1480px !important;
  }

  body.elementor-page-553 .elementor-element-a1437ce > .elementor-container {
    width: min(1480px, calc(100% - 128px));
    max-width: 1480px !important;
  }

  body.elementor-page-527 .elementor-element-4ae5abe > .elementor-container {
    width: min(1480px, calc(100% - 128px));
    max-width: 1480px !important;
  }

  body.elementor-page-527 .elementor-element-4ae5abe .elementor-element-45eaf40 {
    max-width: none !important;
  }
}