/* =========================================================
   🔒 FROZEN FILE (Part 7 / Contract)
   File: assets/themes/crossmerg/custom/css/marketing-alignment.css

   Role:
   - Global alignment contract for Marketing Shell ONLY
   - Standardizes HERO + SECTION HEADING + CARDS
   - Explicitly EXCLUDES Pricing (wrapper-based)

   Guardrails:
   - Do NOT change pricing by accident.
   - No page-by-page hacks here; use page CSS for layout exceptions.
   ========================================================= */


/* =========================================================
   SCOPE GUARD (IMPORTANT)
   Pricing uses .cm-page--pricing on the PAGE WRAPPER.
   So we scope all rules to:
     .marketing-site .cm-page:not(.cm-page--pricing)
   and provide a conservative fallback for any markup that
   doesn’t use the .cm-page wrapper.
   ========================================================= */

/* Preferred scope: page wrapper exists */
.marketing-site .cm-page:not(.cm-page--pricing) {
  --cm-hero-max:  820px;
  --cm-hero-gap:  12px;

  --cm-heading-max: 760px;
  --cm-heading-gap: 10px;

  --cm-card-pad:  18px;
  --cm-card-gap:  12px;
}

/* Fallback scope: if a page doesn’t use .cm-page wrapper */
.marketing-site:not(.cm-page--pricing) {
  --cm-hero-max:  820px;
  --cm-hero-gap:  12px;

  --cm-heading-max: 760px;
  --cm-heading-gap: 10px;

  --cm-card-pad:  18px;
  --cm-card-gap:  12px;
}


/* =========================================================
   SECTION 1 — HERO ALIGNMENT (FROZEN)
   ========================================================= */

/* Default hero alignment: CENTER (contract) */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content) {
  --cm-hero-text-align: center;
}

/* Left-aligned hero exception (opt-in only) */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content):is(.cm-hero--left, .cm-hero--align-left),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content):is(.cm-hero--left, .cm-hero--align-left) {
  --cm-hero-text-align: left;
}

/* Hero text elements — centered by default */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-eyebrow, .cm-hero-title, .cm-hero-subtitle, .cm-hero-tagline),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-eyebrow, .cm-hero-title, .cm-hero-subtitle, .cm-hero-tagline) {
  max-width: var(--cm-hero-max);
  text-align: center;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

/* Left-aligned hero override */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content):is(.cm-hero--left, .cm-hero--align-left)
  :is(.cm-eyebrow, .cm-hero-title, .cm-hero-subtitle, .cm-hero-tagline),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content):is(.cm-hero--left, .cm-hero--align-left)
  :is(.cm-eyebrow, .cm-hero-title, .cm-hero-subtitle, .cm-hero-tagline) {
  text-align: left;
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

/* Hero CTA row — centered by default */
.marketing-site .cm-page:not(.cm-page--pricing) .cm-hero-cta-row,
.marketing-site:not(.cm-page--pricing) .cm-hero-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.marketing-site .cm-page:not(.cm-page--pricing) .cm-hero-cta-row > *,
.marketing-site:not(.cm-page--pricing) .cm-hero-cta-row > * {
  margin: 0;
}

/* Left-aligned hero CTA exception */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content):is(.cm-hero--left, .cm-hero--align-left)
  .cm-hero-cta-row,
.marketing-site:not(.cm-page--pricing)
  :is(.cm-hero, .cm-hero-block, .cm-hero-content):is(.cm-hero--left, .cm-hero--align-left)
  .cm-hero-cta-row {
  justify-content: flex-start;
  text-align: left;
}

/* Hero vertical rhythm */
.marketing-site .cm-page:not(.cm-page--pricing) .cm-eyebrow,
.marketing-site:not(.cm-page--pricing) .cm-eyebrow { margin-bottom: var(--cm-hero-gap); }

.marketing-site .cm-page:not(.cm-page--pricing) .cm-hero-title,
.marketing-site:not(.cm-page--pricing) .cm-hero-title { margin-bottom: var(--cm-hero-gap); }

.marketing-site .cm-page:not(.cm-page--pricing) .cm-hero-subtitle,
.marketing-site:not(.cm-page--pricing) .cm-hero-subtitle { margin-bottom: var(--cm-hero-gap); }

.marketing-site .cm-page:not(.cm-page--pricing) .cm-hero-tagline,
.marketing-site:not(.cm-page--pricing) .cm-hero-tagline { margin-bottom: 0; }


/* =========================================================
   SECTION 2 — SECTION HEADINGS ALIGNMENT (FROZEN)
   Targets:
   - .cm-section-title
   - .cm-section-subtitle
   - plus common variants used in page CSS
   ========================================================= */

.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-section-title, .cm-section-subtitle, .cm-section-subtext, .cm-section-heading),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-section-title, .cm-section-subtitle, .cm-section-subtext, .cm-section-heading) {
  max-width: var(--cm-heading-max);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Title/subtitle rhythm */
.marketing-site .cm-page:not(.cm-page--pricing) .cm-section-title,
.marketing-site:not(.cm-page--pricing) .cm-section-title {
  margin-bottom: var(--cm-heading-gap);
}

.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-section-subtitle, .cm-section-subtext),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-section-subtitle, .cm-section-subtext) {
  margin-top: 0;
  margin-bottom: 1.75rem;
}

/* Opt-in left heading utility (existing markup uses cm-heading-left) */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-heading-left, .cm-text-left, .cm-align-left, .cm-section--left)
  :is(.cm-section-title, .cm-section-subtitle, .cm-section-subtext, .cm-section-heading),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-heading-left, .cm-text-left, .cm-align-left, .cm-section--left)
  :is(.cm-section-title, .cm-section-subtitle, .cm-section-subtext, .cm-section-heading) {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* Left-content pages (wrapper-based) — only within band sections so HERO stays centered */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-page--about, .cm-page--contact, .cm-page--contact-success, .cm-page--help, .cm-page--guide, .cm-page--guides, .cm-page--live-portal, [class*="cm-page--services"])
  .cm-section--band
  :is(.cm-section-title, .cm-section-subtitle, .cm-section-subtext, .cm-section-heading),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-page--about, .cm-page--contact, .cm-page--contact-success, .cm-page--help, .cm-page--guide, .cm-page--guides, .cm-page--live-portal, [class*="cm-page--services"])
  .cm-section--band
  :is(.cm-section-title, .cm-section-subtitle, .cm-section-subtext, .cm-section-heading) {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* Also left-align common CTA/“pillars” subtitle variants within those band sections */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-page--contact, .cm-page--help, .cm-page--guide, .cm-page--guides, .cm-page--about)
  .cm-section--band
  :is(.cm-contact-channels-subtitle),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-page--contact, .cm-page--help, .cm-page--guide, .cm-page--guides, .cm-page--about)
  .cm-section--band
  :is(.cm-contact-channels-subtitle) {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* CTA/button rows inside those left-content band sections */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-page--about, .cm-page--contact, .cm-page--contact-success, .cm-page--help, .cm-page--guide, .cm-page--guides, .cm-page--live-portal, [class*="cm-page--services"])
  .cm-section--band
  :is(.cm-hero-cta-row, .cm-hero-cta, .cm-hero-cta-group),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-page--about, .cm-page--contact, .cm-page--contact-success, .cm-page--help, .cm-page--guide, .cm-page--guides, .cm-page--live-portal, [class*="cm-page--services"])
  .cm-section--band
  :is(.cm-hero-cta-row, .cm-hero-cta, .cm-hero-cta-group) {
  justify-content: flex-start;
  text-align: left;
}


/* =========================================================
   SECTION 3 — CARDS CONTRACT (ACTIVE)
   Layout + alignment rules ONLY.
   Visual styling lives in marketing-cards.css (frozen).
   Supports:
   - .cm-card-row (preferred)
   - .cm-service-group (Home/Services/About)
   ========================================================= */

/* Equal-height rows */
.marketing-site .cm-page:not(.cm-page--pricing) :is(.cm-card-row, .cm-equal-cards, .cm-service-group),
.marketing-site:not(.cm-page--pricing)          :is(.cm-card-row, .cm-equal-cards, .cm-service-group) {
  display: flex;
  flex-wrap: wrap;
}

/* Columns become equal-height flex containers */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-card-row, .cm-equal-cards, .cm-service-group) > [class*="col-"],
.marketing-site:not(.cm-page--pricing)
  :is(.cm-card-row, .cm-equal-cards, .cm-service-group) > [class*="col-"],
.marketing-site .cm-page:not(.cm-page--pricing) .cm-service-group .cm-service-col,
.marketing-site:not(.cm-page--pricing)          .cm-service-group .cm-service-col {
  display: flex;
}

/* Cards fill available height */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-card, .cm-service-card),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-card, .cm-service-card) {
  flex: 1 1 auto;
  height: 100%;
  text-align: left;
  align-items: flex-start;
}

/* Icon alignment */
.marketing-site .cm-page:not(.cm-page--pricing)
  :is(.cm-card-icon, .cm-service-icon),
.marketing-site:not(.cm-page--pricing)
  :is(.cm-card-icon, .cm-service-icon) {
  align-self: flex-start;
}

/* Mobile: let grids stack naturally */
@media (max-width: 767px) {
  .marketing-site .cm-page:not(.cm-page--pricing) :is(.cm-card-row, .cm-equal-cards, .cm-service-group),
  .marketing-site:not(.cm-page--pricing)          :is(.cm-card-row, .cm-equal-cards, .cm-service-group) {
    display: block;
  }

  .marketing-site .cm-page:not(.cm-page--pricing)
    :is(.cm-card-row, .cm-equal-cards, .cm-service-group) > [class*="col-"],
  .marketing-site:not(.cm-page--pricing)
    :is(.cm-card-row, .cm-equal-cards, .cm-service-group) > [class*="col-"],
  .marketing-site .cm-page:not(.cm-page--pricing) .cm-service-group .cm-service-col,
  .marketing-site:not(.cm-page--pricing)          .cm-service-group .cm-service-col {
    display: block;
  }
}

/* Shared tightening */
@media (max-width: 600px) {
  .marketing-site .cm-page:not(.cm-page--pricing),
  .marketing-site:not(.cm-page--pricing) {
    --cm-hero-max:     92vw;
    --cm-heading-max:  92vw;
    --cm-card-pad:     16px;
  }
}