/* Canonical JCI layout containers.
 *
 * Page-specific styles define component layout only. Width, max-width and
 * horizontal gutters belong to this file. Context defaults use :where() so
 * explicit container modifiers always remain the final source of truth.
 */
:root {
  --jci-container-max: var(--layout-max-width, 1280px);
  --jci-container-gutter: 20px;
  --jci-container-gutter-mobile: 16px;
  --jci-container-max-wide: 1516px;
  --jci-container-max-search: 1480px;
  --jci-container-max-content: 1088px;
  --jci-container-max-testimonial: 760px;
  --jci-container-max-reading: 760px;
  --jci-container-max-page: 1280px;
  --jci-container-gutter-page: 9vw;
  --jci-container-page-edge: max(
    var(--jci-container-gutter-page),
    calc((100vw - var(--jci-container-max-page)) / 2)
  );
}

.jci-container {
  width: min(
    var(--jci-container-local-max, var(--jci-container-max)),
    calc(100% - var(--jci-container-local-gutter, var(--jci-container-gutter)) - var(--jci-container-local-gutter, var(--jci-container-gutter)))
  ) !important;
  max-width: none !important;
  min-width: 0;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* Existing wrapper names are compatibility aliases while markup is migrated. */
:where(
  .container-inner,
  .jci-new-hero__inner,
  .jci-new-section__inner,
  .jci-new-business__inner,
  .jci-magazine-page__inner,
  .jci-mag-home__container,
  .jci-index-fallback__inner
).jci-container {
  min-width: 0;
}

/* Context defaults. Their zero specificity lets explicit modifiers win. */
:where(
  .jci-mag-home .jci-mag-home__container.jci-container,
  .jci-magazine-page .jci-magazine-page__inner.jci-container,
  .jci-article .jci-container--editorial
) {
  --jci-container-local-max: 1280px;
  --jci-container-local-gutter: 40px;
}


:where(
  .jci-business-solutions .jci-new-section__inner.jci-container,
  .jci-business-hero .container-inner.jci-container
) {
  --jci-container-local-max: 1280px;
}

:where(.jci-article__body-grid.jci-container) {
  --jci-container-local-max: var(--jci-container-max-content);
}

/* Explicit variants. These are the public layout API used by templates. */
.jci-container--editorial {
  --jci-container-local-gutter: 40px;
}

.jci-container--wide {
  --jci-container-local-max: var(--jci-container-max-wide);
}

.jci-container--search {
  --jci-container-local-max: var(--jci-container-max-search);
}

.jci-container--content {
  --jci-container-local-max: var(--jci-container-max-content);
}

/* Compact editorial compositions such as the overlapping wide testimonial.
 * Testimonial media is intentionally capped because source portraits are often
 * smaller than hero/editorial photography and should not be needlessly upscaled. */
.jci-container--testimonial {
  --jci-container-local-max: var(--jci-container-max-testimonial);
}

.jci-container--reading {
  --jci-container-local-max: var(--jci-container-max-reading);
}

/* Main design grid used by homepage, internal editorial pages and listings. */
.jci-container--page,
.jci-container--program,
.jci-container--secondary-nav {
  --jci-container-local-max: var(--jci-container-max-page);
  --jci-container-local-gutter: var(--jci-container-page-edge);
}

/* Explicit opt-in for an inner wrapper that inherits an already-contained width. */
.jci-container--flush {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

@media (max-width: 760px) {
  .jci-container,
  .jci-container--editorial,
  .jci-container--page,
  .jci-container--program,
  .jci-container--secondary-nav {
    --jci-container-local-gutter: var(--jci-container-gutter-mobile);
  }
}

@media (max-width: 360px) {
  :root {
    --jci-container-gutter-mobile: 14px;
  }
}


/* Search shells.
 *
 * Search exists in two WordPress contexts on this installation:
 * 1. the native results template (?s=...), rendered by search.php;
 * 2. the regular page whose slug is /search/, rendered by page.php.
 *
 * Both use the same 80% / 1280px grid as Home and About us. These selectors
 * intentionally also match the pre-1.3.14 markup so a cached PHP template
 * cannot fall back to the old 20px Search gutter.
 */
.jci-search-page > .jci-magazine-page__inner,
.jci-search-landing .jci-article__hero-inner,
.jci-search-landing .jci-article__body-grid {
  width: min(var(--jci-container-max-page), 80%) !important;
  max-width: none !important;
  min-width: 0;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* The outer article sections stay full width. Only their inner grid is contained. */
.jci-search-landing .jci-article__hero,
.jci-search-landing .jci-article__body-wrap {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

@media (max-width: 760px) {
  .jci-search-page > .jci-magazine-page__inner,
  .jci-search-landing .jci-article__hero-inner,
  .jci-search-landing .jci-article__body-grid {
    width: calc(100% - (var(--jci-container-gutter-mobile) * 2)) !important;
  }
}