/* Shared page standards for content pages outside the job center (2026-09-28).
   Loaded last of the content-page stylesheets (sections -> content-pages -> content-page-layouts ->
   atomic-content-pages -> page-standards) on every page with _cxs_content_page=1, container or atomic.

   SCOPE: nothing here is a blanket rule. Every rule needs an explicit marker class placed by the page build:
   - .cxs-page-intro        the introductory text block after the hero (or after the no-hero H1): the intro
                            H2 at clamp(24px,2.4vw,32px)/700/1.2 and 16px/400/1.6 left-aligned paragraphs.
                            Container pages: put it on the .cxs-editorial-section (this also gives the
                            40px/28px section padding-top). Atomic pages: on the intro block. It may also sit
                            on a single heading widget (_css_classes) when only that one H2 is introductory.
   - .cxs-page-hero-follow  the first section after an image hero when it is not an intro: 40px desktop /
                            28px mobile padding-top so hero -> content reads ~40px / 24-32px.
   - .cxs-page-intro--centered   a ~760px centered reading container with left-aligned copy (podcast, connect).
   - .cxs-page-split        two-column text | media split (text first on mobile), for split openings.
   - .cxs-page-badges       row of store/platform badges at a matching 48px height.
   --cxs-page-intro-h2-gap  extra H2 -> paragraph margin. Default 0 because Elementor containers already put
                            their own 14-24px gap / widget spacing between the heading and the copy (measured
                            24px on 26514 and 26266, and 20px + 24px = 44px when the margin was added). Set it
                            (16-24px) on the marker, page-scoped, only for gap-less blocks such as atomic
                            div-blocks with gap 0, so the total H2 -> paragraph distance stays 16-24px.
   Approved reusable widgets (cxs-section-*) keep their own typography: never put the markers on them, and the
   hero H1/description standard itself lives in content-pages.css (.cxs-page-hero) / .cxs-build-title h1.
   Mobile values apply at <= 767px. No !important; specificity matches the shared rules it refines
   ((0,4,1) for the H2 so it beats the cxs-build-v2 section-H2 rule and the :is(h2,h3,.elementor-heading-title)
   heading rule, while approved page-scoped (0,5,1)+ blocks still win). */

/* --- Intro component ---------------------------------------------------------------------------- */
.elementor .cxs-content-page .cxs-page-intro { --cxs-page-intro-h2-gap: 0px; }
.elementor .cxs-content-page .cxs-editorial-section.cxs-page-intro,
.elementor .cxs-content-page .cxs-editorial-section.cxs-page-hero-follow,
.elementor .cxs-content-page .cxs-page-hero-follow { padding-top: 40px; }

/* Intro H2: section marker (any h2 inside), or the marker directly on a classic / atomic heading. */
.elementor .cxs-content-page .cxs-editorial-section.cxs-page-intro h2,
.elementor .cxs-content-page .cxs-page-intro h2.elementor-heading-title,
.elementor .cxs-content-page .cxs-page-intro h2.e-heading-base {
  margin: 0 0 var(--cxs-page-intro-h2-gap, 0px);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

/* Intro paragraphs: 16px/400/1.6, left-aligned, ~760px reading measure (narrower containers still clip it). */
.elementor .cxs-content-page .cxs-page-intro p,
.elementor .cxs-content-page .cxs-page-intro .cxs-editorial-copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
}
.elementor .cxs-content-page .cxs-page-intro .cxs-editorial-copy,
.elementor .cxs-content-page .cxs-page-intro .elementor-widget-text-editor.cxs-editorial-copy,
.elementor .cxs-content-page .cxs-page-intro .e-paragraph-base {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 760px;
}

/* Centered ~760px reading container (podcast / Anders Connect style); copy inside stays left-aligned. */
.elementor .cxs-content-page .cxs-page-intro--centered { width: 100%; max-width: 760px; margin-inline: auto; text-align: left; }
.elementor .cxs-content-page .cxs-editorial-inner.cxs-page-intro--centered { max-width: calc(760px + 2 * clamp(20px, 4vw, 40px)); }
.elementor .cxs-content-page .cxs-page-intro--centered .cxs-editorial-copy,
.elementor .cxs-content-page .cxs-page-intro--centered .elementor-widget-text-editor.cxs-editorial-copy { display: block; width: 100%; min-width: 0; max-width: none; }
.elementor .cxs-content-page .cxs-page-intro--centered :is(h2, p) { text-align: left; }

/* --- Layout utilities ----------------------------------------------------------------------------- */
/* Two-column split opening: text | media, centered vertically; media may go left with the modifier. */
.elementor .cxs-content-page .cxs-page-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.elementor .cxs-content-page .cxs-page-split > * { min-width: 0; }
.elementor .cxs-content-page .cxs-page-split--media-left > .cxs-page-split__media { order: -1; }
.elementor .cxs-content-page .cxs-page-split__media img { display: block; width: 100%; max-width: 100%; height: auto; margin-inline: auto; }

/* Badge row: platform / store badges side by side at a matching 48px height; wraps when narrow. */
.elementor .cxs-content-page .cxs-page-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px; }
.elementor .cxs-content-page .cxs-page-badges--center { justify-content: center; }
.elementor .cxs-content-page .cxs-page-badges > .elementor-widget,
.elementor .cxs-content-page .cxs-page-badges > .e-con { --container-widget-width: auto; width: auto; max-width: 100%; margin: 0; }
.elementor .cxs-content-page .cxs-page-badges a { display: inline-flex; line-height: 0; }
.elementor .cxs-content-page .cxs-page-badges img { display: block; width: auto; height: 48px; max-width: 100%; }

@media (max-width: 767px) {
  .elementor .cxs-content-page .cxs-editorial-section.cxs-page-intro,
  .elementor .cxs-content-page .cxs-editorial-section.cxs-page-hero-follow,
  .elementor .cxs-content-page .cxs-page-hero-follow { padding-top: 28px; }
  .elementor .cxs-content-page .cxs-page-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .elementor .cxs-content-page .cxs-page-split > .cxs-page-split__text,
  .elementor .cxs-content-page .cxs-page-split--media-left > .cxs-page-split__text { order: -1; }
  .elementor .cxs-content-page .cxs-page-split--media-left > .cxs-page-split__media { order: 0; }
  .elementor .cxs-content-page .cxs-page-badges { gap: 12px 16px; }
  .elementor .cxs-content-page .cxs-page-badges img { height: 44px; }
}