/* ==========================================================================
   EISD — global.css  ·  Sitewide overrides via Asset Injector.
   Loads before page-specific CSS (homepage-deploy.css, interior.css, etc.).
   ========================================================================== */


/* ==========================================================================
   FONTS
   Load Roboto Slab (headings / CTAs) + Poppins (body / support) via Google.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


/* ==========================================================================
   DESIGN TOKENS — COLOR
   ========================================================================== */

:root {
  /* Primary */
  --color-academy-blue:    #012239;
  --color-mint:            #3DB489;

  /* Secondary */
  --color-elior-blue:      #005D83;

  /* Accent — CTAs, icons, hover states; 5–10% of layout color weight */
  --color-flame:           #E45310;
  --color-flame-soft:      #F0794A;
  --color-orange:          #FFA500;

  /* Neutral */
  --color-columbia-blue:   #CEDCE6;
  --color-white:           #FFFFFF;

  /* Tints — lighten toward white at 75/50/25% steps only */
  --color-academy-blue-75: color-mix(in srgb, var(--color-academy-blue) 75%, white);
  --color-academy-blue-50: color-mix(in srgb, var(--color-academy-blue) 50%, white);
  --color-academy-blue-25: color-mix(in srgb, var(--color-academy-blue) 25%, white);
  --color-mint-75:         color-mix(in srgb, var(--color-mint) 75%, white);
  --color-mint-50:         color-mix(in srgb, var(--color-mint) 50%, white);
  --color-mint-25:         color-mix(in srgb, var(--color-mint) 25%, white);
  --color-elior-blue-75:   color-mix(in srgb, var(--color-elior-blue) 75%, white);
  --color-elior-blue-50:   color-mix(in srgb, var(--color-elior-blue) 50%, white);
  --color-elior-blue-25:   color-mix(in srgb, var(--color-elior-blue) 25%, white);
  --color-columbia-blue-50: color-mix(in srgb, var(--color-columbia-blue) 50%, white);
  --color-columbia-blue-25: color-mix(in srgb, var(--color-columbia-blue) 25%, white);

  /* Ribbon tints (per brand guide: 85% background tint for ribbon fill) */
  --color-academy-blue-ribbon: color-mix(in srgb, var(--color-academy-blue) 85%, white);
  --color-elior-blue-ribbon:   color-mix(in srgb, var(--color-elior-blue) 85%, white);

  /* Brand ribbon SVG assets — used as mask-image for tinted ribbon decorations */
  --ribbon-mint:     url('/sites/www.elior-independentschools.com/files/2026-06/mint.svg');
  --ribbon-academy:  url('/sites/www.elior-independentschools.com/files/2026-06/academy_001_0.svg');
  --ribbon-columbia: url('/sites/www.elior-independentschools.com/files/2026-06/columbia.svg');

  /* Semantic */
  --ink:          var(--color-academy-blue);
  --ink-soft:     color-mix(in srgb, var(--color-academy-blue) 70%, white);
  --surface:      var(--color-white);
  --surface-cool: var(--color-columbia-blue-25);
  --hairline:     color-mix(in srgb, var(--color-academy-blue) 12%, transparent);
  --shadow-soft:
    0 12.5px 10px rgba(1, 34, 57, .04),
    0 22.3px 17.9px rgba(1, 34, 57, .05),
    0 41.8px 33.4px rgba(1, 34, 57, .06);

  /* UI */
  --radius:   6px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:      200ms;
}


/* ==========================================================================
   DESIGN TOKENS — TYPOGRAPHY
   Roboto Slab: headings, CTAs, key statements.
   Poppins: body, subheads, captions, labels.
   ========================================================================== */

:root {
  --font-heading: 'Roboto Slab', serif;
  --font-body:    'Poppins', sans-serif;
}


/* ==========================================================================
   DESIGN TOKENS — TYPE SCALE
   Corrects theme's mobile heading line-height: 1.7 (tightened to 1.12/1.2).
   ========================================================================== */

:root {
  --fs-h1:    2.5rem;
  --fs-h2:    1.75rem;
  --fs-h3:    1.375rem;
  --fs-h4:    1.125rem;
  --fs-h5:    1rem;
  --fs-h6:    0.75rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  --lh-display: 1.12;
  --lh-heading: 1.2;
  --lh-body:    1.5;

  --tracking-display: -0.02em;
  --tracking-heading: 0;
  --tracking-body:    0;
  --tracking-caps:    0.06em;

  /* Heading weights — lighter than theme default (700) for editorial punch at large scale.
     300 at 3–4.5rem reads refined, not weak. 700 is reserved for CTAs and h6 caps labels. */
  --fw-display: 300;  /* h1, h2 — large display headings */
  --fw-heading: 300;  /* h3 — mid-size section heads */
  --fw-subhead: 400;  /* h4, h5 — smaller utility headings */
  --fw-caps:    600;  /* h6, CTAs, buttons */
}

@media print, screen and (min-width: 64em) {
  :root {
    --fs-h1: 3.5rem;   --fs-h2: 2.25rem;  --fs-h3: 1.75rem;
    --fs-h4: 1.375rem; --fs-h5: 1.125rem; --fs-h6: 1rem;
  }
  .large-offset-2:has(.page-header-content) { margin-left: 0 !important; }
}

@media print, screen and (min-width: 85.375em) {
  :root { --fs-h1: 4.5rem; --fs-h2: 2.75rem; --fs-h3: 2rem; }
}

/* :is() resolves at the max specificity of its members — matches theme paragraph heading selectors */
:is(.paragraph, body) :is(h1, .h1),
:is(.paragraph, body) :is(h2, .h2) { line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-display); }
:is(.paragraph, body) :is(h1, .h1) { font-size: var(--fs-h1); }
:is(.paragraph, body) :is(h2, .h2) { font-size: var(--fs-h2); }

:is(.paragraph, body) :is(h3, .h3),
:is(.paragraph, body) :is(h4, .h4),
:is(.paragraph, body) :is(h5, .h5) { line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
:is(.paragraph, body) :is(h3, .h3) { font-size: var(--fs-h3); font-weight: var(--fw-heading); }
:is(.paragraph, body) :is(h4, .h4) { font-size: var(--fs-h4); font-weight: var(--fw-subhead); }
:is(.paragraph, body) :is(h5, .h5) { font-size: var(--fs-h5); font-weight: var(--fw-subhead); }

:is(.paragraph, body) :is(h6, .h6) { font-size: var(--fs-h6); line-height: var(--lh-heading); letter-spacing: var(--tracking-caps); font-weight: var(--fw-caps); }
/* :is(.paragraph, body) :is(h1, .h1, h2, .h2, h3, .h3) { text-wrap: balance; } */

p { font-family: var(--font-body); font-weight: 300; color: var(--ink-soft); }


/* ==========================================================================
   DESIGN TOKENS — SPACING
   Reference tokens only — do not override the theme's existing spacing.
   ========================================================================== */

:root {
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 5rem;
  --space-4xl: 6rem;

  --container-max: 75rem;
  --container-pad: 0.75rem;
  --grid-gutter:   1.5rem;

  --section-y: 3rem;
}

@media print, screen and (min-width: 64em)     { :root { --section-y: 5rem; } }
@media print, screen and (min-width: 85.375em) { :root { --section-y: 6rem; } }


/* ==========================================================================
   BASE
   ========================================================================== */

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
}
h1, .h1, h2, .h2 { font-weight: var(--fw-display); }
h3, .h3           { font-weight: var(--fw-heading); }
h4, .h4, h5, .h5  { font-weight: var(--fw-subhead); }
h6, .h6           { font-weight: var(--fw-caps); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: 3px;
  border-radius: 2px;
}
.block-large-image :where(a, button, [tabindex]):focus-visible { outline-color: var(--color-orange); }

/* Kicker — small-cap label above section headings */
.kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  color: var(--color-mint);
  margin: 0 0 var(--space-2xs);
}
/* Theme's .bg-color-white wildcard forces color: inherit — reassert brand color */
.bg-color-white .kicker { color: var(--color-mint) !important; }

/* On dark backgrounds the kicker reads in Columbia Blue */
[class*="bg-color-theme-"] .kicker,
.block-large-image .kicker { color: var(--color-columbia-blue) !important; }

.bg-surface-cool,
.bg-color-light-gray,
.bgcolorlightgray { background-color: var(--surface-cool); }

.small { font-size: var(--fs-small) !important; }


/* ==========================================================================
   HEADER
   ========================================================================== */

#block-header-menu .menu a {
  font-family: var(--font-body);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
#region-header .header-inner #block-header-menu > .menu > li > a {
  font-size: var(--fs-h5);
}
#block-header-menu .menu a:hover,
#block-header-menu .menu a.is-active { color: var(--color-academy-blue); }

#block-header-menu .menu li.has-children { position: relative; }
#block-header-menu .menu li.has-children > .icon-chevron-down { display: none !important; }

/* Mobile accordion (below 90em): grid-stack the main link and .li-menu-wrapper in the same
   cell so the wrapper always matches the link's height without a fixed rem value.
   The submenu auto-places to row 2. */
@media (max-width: 89.9375em) {
  #block-header-menu .menu li.has-children {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper) {
    grid-column: 1 !important; grid-row: 1 !important;
    display: flex !important; align-items: center !important;
  }
  #block-header-menu .menu li.has-children > a.li-menu-wrapper {
    grid-column: 1 !important; grid-row: 1 !important;
    position: relative !important;
    height: auto !important; width: auto !important; margin: 0 !important;
  }
  /* Icon \e906 faces ∧ naturally. Own the transform so collapsed always shows ∨
     regardless of theme render timing. */
  #block-header-menu .menu li.has-children > a.li-menu-wrapper::after {
    transform: translateY(-50%) rotate(180deg) !important;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  #block-header-menu .menu li.has-children.clicked > a.li-menu-wrapper::after {
    transform: translateY(-50%) rotate(0deg) !important;
  }
}

/* Desktop nav (90em = xlarge, horizontal menu active) */
@media (min-width: 90em) {
  /* Wrapper is an absolute overlay over the li but must not capture pointer events —
     doing so triggers the theme's a:after underline bar on unrelated items. */
  #block-header-menu .menu li.has-children > a.li-menu-wrapper {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 6.5rem !important; width: auto !important; margin: 0 !important;
    pointer-events: none !important;
  }
  #block-header-menu .menu li.has-children > a.li-menu-wrapper::after { display: none !important; }

  /* ::after = inline ∨ chevron. Theme uses ::after for its underline bar on regular links
     (position: absolute, width: 100%, height: 4px) so ::before carries the bar here. */
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper) {
    overflow: visible !important;
    position: relative !important;
  }
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper)::after {
    content: "" !important;
    display: inline-block !important;
    position: static !important;
    background: none !important;
    width: 0.45em !important; height: 0.45em !important;
    padding: 0.08em !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    margin-left: 0.4em !important;
    vertical-align: 0.08em !important;
    opacity: 0.65 !important;
    transition: none !important;
  }
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 4px !important;
    background: var(--color-mint) !important;
    opacity: 0 !important;
    transition: opacity 150ms ease !important;
  }
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper):hover::before,
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper):focus::before,
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper).keyboard-focus::before,
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper).is-active::before { opacity: 1 !important; }
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper):hover::after,
  #block-header-menu .menu li.has-children > a:not(.li-menu-wrapper):focus::after { opacity: 1 !important; }
}


/* ==========================================================================
   THEME OVERRIDES
   ========================================================================== */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--color-academy-blue) !important; }
.bg-color-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3) { color: var(--color-academy-blue) !important; }
.bg-color-white p { color: var(--ink-soft) !important; }
body:not(.node--type-list-view):not(.path-job-list) h4,
body:not(.node--type-list-view):not(.path-job-list) .h4 { text-transform: unset; }
.filters-title-wrapper h2 { text-transform: unset !important; }
@media screen and (max-width: 85.3125em) {
  .mobile-sticky-filters .block-content-list-filter h2 {
    color: var(--color-white) !important;
  }
  .block-content-list-filter .filters-title-wrapper {
    border-radius: var(--radius);
  }
}
.category-style { text-transform: unset !important; }
.date-style.txt-gray { color: var(--ink-soft); }
.block-content-list-filter {
  background-color: var(--surface-cool);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
}
.chosen-container { border-radius: 5px; }
.chosen-container .chosen-single { border-radius: 5px; }
.block-content-list-filter .form-actions .btn-wrapper { margin-left: 0; }
a#next-block-anchor { display: none; }

/* Restore Elior Blue on link-style and links-wrapper anchors when nested inside
   a [bg-color-*] context — the theme's blanket color: inherit on those containers
   would otherwise inherit white or another background-tier color. */
/* Arrow pseudo-element on internal links — brand Mint instead of theme default */
.link-style:not([target="_blank"])::after,
.filters-accordion-trigger:not([target="_blank"])::after,
.link-style.with-arrow-after::after,
.with-arrow-after.filters-accordion-trigger::after,
button.link-style:not([target="_blank"])::after,
button.filters-accordion-trigger:not([target="_blank"])::after,
button.link-style.with-arrow-after::after,
button.with-arrow-after.filters-accordion-trigger::after,
.links-wrapper a:not([target="_blank"])::after,
.links-wrapper a.with-arrow-after::after,
a.link-style:not([target="_blank"])::after,
a.filters-accordion-trigger:not([target="_blank"])::after,
a.link-style.with-arrow-after::after,
a.with-arrow-after.filters-accordion-trigger::after {
  color: var(--color-mint);
}

[class*="bg-color-"] .bg-color-light-gray .link-style,
[class*="bg-color-"] .bg-color-white .link-style,
[class*="bg-color-"] .bg-color-medium-gray .link-style,
[class*="bg-color-"] .bg-color-light-gray a.link-style,
[class*="bg-color-"] .bg-color-white a.link-style,
[class*="bg-color-"] .bg-color-medium-gray a.link-style,
[class*="bg-color-"] .bg-color-light-gray button.link-style,
[class*="bg-color-"] .bg-color-white button.link-style,
[class*="bg-color-"] .bg-color-medium-gray button.link-style,
[class*="bg-color-"] .bg-color-light-gray .links-wrapper a,
[class*="bg-color-"] .bg-color-white .links-wrapper a,
[class*="bg-color-"] .bg-color-medium-gray .links-wrapper a {
  color: var(--color-elior-blue);
  stroke: var(--color-elior-blue);
}


/* ==========================================================================
   BUTTONS
   Roboto Slab Bold — Primary: Academy Blue → hover Elior Blue.
   Accent: Flame on dark / Orange on light contexts.
   ========================================================================== */

.btn {
  --btn-bg: var(--color-academy-blue);
  --btn-fg: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 0;
  border-radius: 4rem;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.btn:hover {
  background-color: var(--color-elior-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--btn-bg) 65%, transparent);
}
/* Theme's .overlay-infos * { color: #fff !important } blanket-forces children — reassert */
.overlay-infos .btn { color: var(--btn-fg) !important; }

.btn--accent { --btn-bg: var(--color-flame); --btn-fg: var(--color-white); }
.btn--mint   { --btn-bg: var(--color-mint); --btn-fg: var(--color-academy-blue); }
.btn--light  { --btn-bg: var(--color-columbia-blue); --btn-fg: var(--color-academy-blue); }
.btn--lg     { padding: 1rem 2rem; }

.btn__arrow {
  width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__arrow,
.link-arrow:hover .btn__arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-elior-blue);
  text-decoration: none;
}
.link-arrow .btn__arrow { width: 1em; height: 1em; }

/* Drupal renders field CTAs via .button (theme template), not .btn */
.block-large-image .button,
.block-article .button,
.paragraph--type--text-only .button,
.block-cta-card .button {
  --btn-bg: var(--color-academy-blue);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  background-color: var(--btn-bg);
  color: var(--color-white);
  font-size: 1rem;
  line-height: 1;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: 4rem;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.button:hover,
button:hover,
.filters-container .block-content-form .btn.btn-outline:hover,
.button:focus,
button:focus,
.filters-container .block-content-form .btn.btn-outline:focus {
  background-color: var(--color-elior-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-academy-blue) 65%, transparent);
}

.block-large-image .button:hover,
.block-article .button:hover,
.paragraph--type--text-only .button:hover,
.block-cta-card .button:hover {
  background-color: var(--color-elior-blue);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-academy-blue) 65%, transparent);
}

/* Theme's .hollow uses outline style — override to match filled button */
[class*="bg-color-theme-"] .button.hollow,
[class*="bg-color-theme-"] button.hollow {
  background-color: var(--color-academy-blue) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  box-shadow: none !important;
  border-radius: 4rem;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
[class*="bg-color-theme-"] .button.hollow:hover,
[class*="bg-color-theme-"] button.hollow:hover {
  background-color: var(--color-elior-blue) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

/* Theme's .btn-framed-white — page header regions */
.button.btn-framed-white,
button.btn-framed-white,
.filters-container .block-content-form .btn-framed-white.btn.btn-outline {
  background: var(--color-academy-blue);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  font-size: 1rem;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.button.btn-framed-white:hover,
button.btn-framed-white:hover,
.filters-container .block-content-form .btn-framed-white.btn.btn-outline:hover {
  background-color: var(--color-elior-blue);
  color: var(--color-white);
  transform: translateY(-2px);
}
@media screen and (max-width: 85.3125em) {
  .button.big, button.big,
  .filters-container .block-content-form .big.btn.btn-outline,
  .button.btn-framed-white, button.btn-framed-white,
  .filters-container .block-content-form .btn-framed-white.btn.btn-outline,
  .block-page-header-image .button,
  .block-page-header-image button,
  .block-page-header-image .filters-container .block-content-form .btn.btn-outline,
  .filters-container .block-content-form .block-page-header-image .btn.btn-outline {
    font-size: 1rem; padding: 1rem 3rem;
  }
}


/* ==========================================================================
   PAGE HEADER / HERO
   .block-page-header — interior page hero (title + headline over image).
   .block-main-slider — homepage full-viewport hero: video + dual-axis scrim,
     left-bottom-anchored content, editorial H1, animated scroll cue.
   ========================================================================== */

.page-header-content { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); text-align: left; }
.headline { text-align: left; }

.block-main-slider {
  background-color: var(--color-academy-blue);
}

/* Dual-axis scrim — lighter left vignette, faster horizontal fade,
   stronger top dip with mid-transparency gap, softer bottom burn. */
.block-main-slider .mask-effect::before {
  background:
    linear-gradient(90deg,  rgba(1,24,42,.68) 0%, rgba(1,24,42,.26) 38%, rgba(1,24,42,0) 66%),
    linear-gradient(180deg, rgba(1,24,42,.46) 0%, rgba(1,24,42,.10) 17%, rgba(1,24,42,0) 32%, rgba(1,24,42,0) 60%, rgba(1,24,42,.52) 100%);
}
.block-page-header .mask-effect::before {
  background: linear-gradient(to bottom, rgba(1,34,57,.10) 0%, rgba(1,34,57,.72) 100%);
}

/* Mint ribbon overlay — right side, above photo scrim, below overlay-infos content.
   Mirrors the .pb-ribbon.main + has-image treatment from the mockup at opacity .14. */
.block-page-header.block-page-header-image {
  overflow: hidden;
}
.block-page-header.block-page-header-image::after {
  content: "";
  position: absolute;
  top: 50%; right: -4%;
  width: min(620px, 46vw); height: 230%;
  transform: translateY(-50%);
  background-color: var(--color-columbia-blue);
  opacity: .14;
  -webkit-mask-image: var(--ribbon-columbia), linear-gradient(to left, #000 42%, transparent 96%);
  mask-image: var(--ribbon-columbia), linear-gradient(to left, #000 42%, transparent 96%);
  -webkit-mask-size: 150%, 100%; mask-size: 150%, 100%;
  -webkit-mask-position: 74% 48%, center; mask-position: 74% 48%, center;
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  pointer-events: none;
  z-index: 2;
}

/* Overlay: left-aligned, bottom-anchored, max-width container */
.block-main-slider .overlay-infos {
  text-align: left !important;
  left: 0 !important;
  right: 0 !important;
  bottom: clamp(3.5rem, 9vh, 7rem) !important;
  padding-inline: clamp(1.5rem, 4vw, 3rem) !important;
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Flame accent — wrap words in <span class="accent"> to highlight in hero titles */
.accent { color: var(--color-flame) !important; }
.accent-soft { color: var(--color-flame-soft) !important; }
.block-main-slider h1.infos-sep .accent { color: var(--color-flame-soft) !important; font-weight: 700 !important; }

/* Editorial hero H1: weight 300 at display scale, tight leading, hairline divider below */
.block-main-slider h1.infos-sep {
  font-weight: var(--fw-display) !important;
  font-size: clamp(2.5rem, 4.5vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  max-width: 17ch;
  text-wrap: balance;
  color: var(--color-white) !important;
  text-shadow: 0 2px 30px rgba(1,16,28,.50), 0 1px 2px rgba(1,16,28,.40);
  margin-bottom: 0;
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  border-bottom: 1px solid rgba(255,255,255,.18);
  width: 100%;
}
.block-main-slider .buttons-wrapper {
    width: calc(100% - 2rem);
}

/* Hero foot: lead text + CTA that follow the H1 */
.block-main-slider .overlay-infos > *:not(h1) {
  margin-top: clamp(1.2rem, 2.5vh, 2rem) !important;
}
.block-main-slider .infos-sep.txt.big {
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
}
.block-main-slider .overlay-infos p {
  max-width: 46ch;
  font-size: 1.0625rem !important;
  color: rgba(255,255,255,.82) !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  margin-bottom: 0 !important;
  text-shadow: 0 1px 16px rgba(1,16,28,.72), 0 1px 2px rgba(1,16,28,.60);
}

/* Hero CTA — Flame fill, Roboto Slab, mockup hover treatment */
.block-main-slider .overlay-infos .links-wrapper a,
.block-main-slider .overlay-infos a.button,
.block-main-slider .overlay-infos .btn {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  font-size: 0.875rem !important;
  color: var(--color-white) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: var(--color-flame) !important;
  border: none !important;
  border-radius: 4rem !important;
  padding: 0.75rem 1.6rem !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 30px rgba(228,83,16,.35) !important;
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease !important;
  text-shadow: none;
}
.block-main-slider .overlay-infos .links-wrapper a:hover,
.block-main-slider .overlay-infos a.button:hover,
.block-main-slider .overlay-infos .btn:hover {
  background: var(--color-flame-soft) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 38px rgba(228,83,16,.45) !important;
}
.block-main-slider .overlay-infos .links-wrapper a svg,
.block-main-slider .overlay-infos a.button svg {
  transition: transform 0.35s ease !important;
}
.block-main-slider .overlay-infos .links-wrapper a:hover svg,
.block-main-slider .overlay-infos a.button:hover svg {
  transform: translateX(5px) !important;
}

/* Scroll cue — CSS-only via pseudo-elements on .parag-wrapper (position: relative).
   ::before = rotated "Scroll" label, ::after = animated descending gradient line.
   Hidden below 1024px to avoid colliding with mobile slider controls. */
.block-main-slider .parag-wrapper::before {
  content: "Scroll";
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: calc(clamp(3.5rem, 9vh, 7rem) + 54px);
  z-index: 10;
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,.82);
  pointer-events: none;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-transform: uppercase;
}
.block-main-slider .parag-wrapper::after {
  content: "";
  position: absolute;
  right: calc(clamp(1.5rem, 4vw, 3rem) + 0.4rem);
  bottom: clamp(3.5rem, 9vh, 7rem);
  z-index: 10;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--color-mint), rgba(61,180,137,.06));
  pointer-events: none;
  animation: hero-scroll-drop 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hero-scroll-drop {
  0%   { clip-path: inset(0% 0 100% 0); }
  55%  { clip-path: inset(0% 0   0% 0); }
  80%  { clip-path: inset(78% 0  0% 0); }
  100% { clip-path: inset(100% 0 0% 0); }
}

.node--type-page .img-container.mask-effect,
.node--type-page .img-container.mask-effect img {
  min-height: 34rem !important;
}
.node--type-page .img-container.mask-effect {
  max-height: 34rem !important;
}

@media screen and (max-width: 1023px) {
  .node-page .overlay-infos,
  .node-article .overlay-infos {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 0 2rem 1.5rem;
  }
  .block-main-slider .parag-wrapper::before,
  .block-main-slider .parag-wrapper::after { display: none; }
}

/* Target .grid-x, not .hero-page-inner (.grid-container) — theme zeros .grid-container padding at this breakpoint */
@media (min-width: 64em) {
  .node--type-page .hero-page-inner > .grid-x {
    padding-top: var(--space-3xl);
  }
}
@media (min-width: 85.375em) {
  .node--type-page .hero-page-inner > .grid-x {
    padding-top: var(--space-4xl);
  }
}


/* ==========================================================================
   BLOCK-LARGE-IMAGE
   Overlay band — image fills the block, content overlays it.
   ========================================================================== */

.block-large-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-white);
  min-height: clamp(18rem, 42vh, 30rem);
  padding-top: 0 !important;
}
.block-large-image > .content-bg {
  position: absolute; inset: 0; z-index: -1;
  flex: none; max-width: none; padding: 0;
}
.block-large-image .img-container { width: 100%; height: 100%; }
/* Do not override .overlay-infos { position: absolute } — theme manages this */
.block-large-image > .content-infos { width: 100%; max-width: 100%; box-sizing: border-box; }
.overlay-infos { text-align: center; }
.block-large-image .block-article__text.full-width { max-width: 100%; }
/* Escape inherited color for overlay context; reassert for primary-light variant */
.block-large-image .block-article__text p { color: inherit !important; }
.block-large-image.bg-color-theme-primary-light .block-article__text p { color: var(--ink-soft) !important; }

.band__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-white);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.block-large-image .band__lead {
  font-family: var(--font-body);
  max-width: 46ch;
  margin: var(--space-md) auto 0;
  color: var(--color-columbia-blue);
  font-size: 1.1rem;
  font-weight: 300;
}
.block-large-image .band__statement { color: var(--color-white) !important; }
.paragraph--type--text-only .band__statement {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.block-large-image .band__statement-lead {
  max-width: 52ch;
  margin: 0 auto var(--space-md);
  color: rgba(255, 255, 255, 0.92);
}
.paragraph--type--text-only .band__statement-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.band__hero-lead {
  max-width: 42ch;
  color: var(--color-columbia-blue);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Band variant — min-heights and positioning */
.band--hero { min-height: clamp(24rem, 60vh, 40rem); }
.band--hero .band__title   { font-size: clamp(2.25rem, 5.5vw, 4rem); }
.band--hero .overlay-infos { text-align: left; }

/* theme: .overlay-infos { position:absolute } — center via left/right/margin on abs element */
.band--hero > .content-infos {
  left: 0; right: 0; margin: auto;
  width: 100%; max-width: var(--container-max);
  padding-inline: var(--space-md);
}
@media (min-width: 64em) { .band--hero > .content-infos { padding-inline: var(--space-lg); } }
.band--hero .block-article__text.full-width { max-width: 46rem; margin-inline: 0; }
.band--hero .band__hero-lead { margin: 0 0 var(--space-lg); }

.band--statement { min-height: clamp(20rem, 44vh, 30rem); }

/* Text-only band variants */
.paragraph--type--text-only:has(.lede) { background: var(--surface-cool); text-align: center; }
.paragraph--type--text-only:has(.band__statement) { background: var(--color-academy-blue); text-align: center; padding-block: var(--section-y) !important; }
.paragraph--type--text-only:has(.band__statement) .kicker             { color: var(--color-mint) !important; }
.paragraph--type--text-only:has(.band__statement) .band__statement      { color: var(--color-white) !important; }
.paragraph--type--text-only:has(.band__statement) .band__statement-lead { color: rgba(255, 255, 255, 0.85) !important; }

.paragraph--type--text-only:has(.academy) {
  background-color: var(--color-academy-blue);
  position: relative;
  overflow: hidden;
}
.paragraph--type--text-only p.lg-callout {
  color: var(--color-white) !important;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  text-align: center;
  position: relative;
  padding-block: 2rem;
}
.paragraph--type--text-only:has(.lg-callout) p::before,
.paragraph--type--text-only:has(.lg-callout) p::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--color-flame);
}
.paragraph--type--text-only:has(.lg-callout) p::before { top: 0; }
.paragraph--type--text-only:has(.lg-callout) p::after  { bottom: 0; }

.paragraph--type--text-only:has(.lg-title) {
  padding-block: clamp(4.375rem, 9vw, 7.5rem) clamp(3.75rem, 8vw, 6.25rem) !important;
  text-align: center;
}

/* Accent ribbon — top-left corner */
.paragraph--type--text-only:has(.lg-title)::before {
  content: "";
  position: absolute;
  top: -14%; left: -6%;
  width: min(230px, 22vw); height: min(230px, 22vw);
  transform: scaleX(-1);
  background-color: #5C8198;
  opacity: .24;
  -webkit-mask-image: var(--ribbon-academy), radial-gradient(90% 90% at 50% 88%, #000 12%, transparent 52%);
  mask-image: var(--ribbon-academy), radial-gradient(90% 90% at 50% 88%, #000 12%, transparent 52%);
  -webkit-mask-size: 205%, 100%; mask-size: 205%, 100%;
  -webkit-mask-position: 58% 72%, center; mask-position: 58% 72%, center;
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  pointer-events: none; z-index: 0;
}

/* Main ribbon — right side */
.paragraph--type--text-only:has(.lg-title)::after {
  content: "";
  position: absolute;
  top: 50%; right: -4%;
  width: min(640px, 50vw); height: 160%;
  transform: translateY(-50%);
  background-color: #5C8198;
  opacity: .32;
  -webkit-mask-image: var(--ribbon-academy), linear-gradient(to left, #000 42%, transparent 96%);
  mask-image: var(--ribbon-academy), linear-gradient(to left, #000 42%, transparent 96%);
  -webkit-mask-size: 175%, 100%; mask-size: 175%, 100%;
  -webkit-mask-position: 80% 52%, center; mask-position: 80% 52%, center;
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  pointer-events: none; z-index: 0;
}

/* Keep content above ribbons */
.paragraph--type--text-only:has(.lg-title) .grid-container,
.paragraph--type--text-only:has(.lg-title) .block-article__text,
.paragraph--type--text-only:has(.lg-title) .cell {
  position: relative; z-index: 2;
}
.paragraph--type--text-only:has(.lg-title) h2 {
  color: var(--color-white) !important;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em;
  text-align: center;
  position: relative;
}

/* Eyebrow / kicker label for .lg-title sections */
.lg-eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1.375rem;
}
.lg-eyebrow::before,
.lg-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--color-flame);
  display: inline-block;
  flex-shrink: 0;
}


/* ==========================================================================
   BLOCK-ARTICLE
   Text + image column layout used across the site.
   ========================================================================== */

.block-article { padding-block: var(--section-y); }

/* Theme applies padding-top: 6rem via .parag-type-small-image + .parag-type-small-image
   and .section-sep-top / .section-padding-top. Target the theme's own class to override. */
.parag-type-small-image + .parag-type-small-image,
.paragraph--type--small-image + .paragraph--type--small-image {
  padding-top: 0 !important;
}
.block-article__row { align-items: center; }
.block-article__text.bg-color-white { background: var(--color-white); }

.paragraph--type--small-image .block-article__text h2.infos-sep {
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  margin-bottom: var(--space-sm);
}

/* !important on color: theme's .bg-color-white wildcard overrides lower-specificity selectors */
.block-article__text p,
.field-type-text-long p  { color: var(--ink-soft) !important; font-size: var(--fs-body); line-height: var(--lh-body); }
.block-article__text li,
.field-type-text-long li { font-size: var(--fs-body); font-weight: 300 !important; line-height: var(--lh-body); }
.field-type-text-long ol li,
.field-type-text-long ul:not(.links-wrapper) li,
.block-article__text ol li,
.block-article__text ul:not(.links-wrapper) li { padding-left: 1.5rem; }
.field-type-text-long ol li + li,
.field-type-text-long ul:not(.links-wrapper) li + li,
.block-article__text ol li + li,
.block-article__text ul:not(.links-wrapper) li + li { margin-top: 0.5rem; }
.txt ul li, .txt ol li {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--ink-soft) !important;
}
.field-type-text-long ul:not(.links-wrapper) li::before,
.block-article__text ul:not(.links-wrapper) li::before {
  content: "•";
  font-size: 1.2em;
  top: 0;
  font-family: sans-serif;
  color: var(--color-mint);
}
.block-article__text a:not(.button):not(button) { color: var(--color-elior-blue); }
.field-type-text-long a:not(.button):not(button),
.block-article__text a:not(.button):not(button) { font-weight: 600; }

.links-wrapper a { font-size: var(--fs-body); }

.block-article__image img {
  width: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: var(--shadow-soft);
}

/* Theme's .path-frontpage rule sets viewport-based width + float + height: 100% — neutralize */
.path-frontpage .paragraph--type--small-image .block-article__image {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
}

/* === Offset frame — all screen sizes ===
   ::before extends 18px above + right of the image; image clips via picture overflow:hidden.
   Scoped away from: swapped layout (large-6 has text), cta-card variant, bg-light-gray. */
.paragraph--type--small-image:not(:has(.cta-card__lead)):not(:has(.cell.large-6 .block-article__text)):not(:has(.bg-color-light-gray)) .block-article__image {
  position: relative;
  overflow: visible !important;
  border-radius: 0 !important;
}
.paragraph--type--small-image:not(:has(.cta-card__lead)):not(:has(.cell.large-6 .block-article__text)):not(:has(.bg-color-light-gray)) .block-article__image::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  border: 2px solid var(--color-flame);
  border-radius: 0;
  pointer-events: none;
}
.paragraph--type--small-image:not(:has(.cta-card__lead)):not(:has(.cell.large-6 .block-article__text)):not(:has(.bg-color-light-gray)) .block-article__image picture {
  display: block;
  overflow: hidden;
}
.paragraph--type--small-image:not(:has(.cta-card__lead)):not(:has(.cell.large-6 .block-article__text)):not(:has(.bg-color-light-gray)) .block-article__image img {
  border-radius: 0;
  box-shadow: none !important;
  position: relative;
}

/* Interior page layout flame frame — all breakpoints.
   Desktop media query below adds height-fill only.
   Mirrors .path-frontpage neutralizations: theme may apply float/left/height outside frontpage context. */
.paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__image {
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-soft);
  position: relative !important;
  float: none !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__image::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  border: 2px solid var(--color-flame);
  border-radius: 0;
  pointer-events: none;
}
.paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__image picture {
  display: block !important;
  overflow: hidden;
}
.paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__image img {
  border-radius: 0;
  box-shadow: none !important;
  position: relative;
}

@media (min-width: 64em) {
  /* Default landscape ratio; JS adds .is-portrait for tall images */
  .paragraph--type--small-image .block-article__image { aspect-ratio: 5 / 4; }
  /* Portrait: constrain width so aspect-ratio drives a visibly tall height.
     max-width (not max-height) preserves the 2:3 ratio — max-height alone clips height
     while width stays at column width, producing a square. height: auto overrides the
     stretch-layout height: 100% so the row height is driven by the portrait image. */
  .paragraph--type--small-image .block-article__image.is-portrait {
    aspect-ratio: 4 / 5;
    max-width: clamp(18rem, 32vw, 26rem);
    height: auto !important;
    margin-inline: auto;
  }
  .paragraph--type--small-image:has(.bg-color-light-gray) .block-article__image { aspect-ratio: unset; }
}
@media (max-width: 63.9375em) {
  .block-article__image { margin-top: var(--space-lg); }
}


/* ==========================================================================
   PARAGRAPH — TEXT-ONLY
   ========================================================================== */

.paragraph--type--text-only .block-article__text { max-width: 48rem; margin-inline: auto; }

/* Button sits outside .block-article__text in the markup. Align it with the 48rem
   centered text block in .field-item.nobgcolor, which skips theme's text-align: center. */
.field-item.nobgcolor .paragraph--type--text-only .cell > a.button {
  margin-left: max(0px, calc((100% - 48rem) / 2));
}
.paragraph--type--text-only:has(.surface) {
  background-color: var(--surface);
  padding-top: 6rem !important;
  padding-bottom: 0;
  text-align: center;
}
.paragraph--type--text-only:has(.surface-cool) {
  background-color: var(--surface-cool);
  padding-top: 6rem !important;
  padding-bottom: 0;
  text-align: center;
}
.paragraph--type--text-only .btn { margin-top: var(--space-xl); }

.paragraph--type--text-only .lede {
  font-family: var(--font-heading);
  color: var(--color-academy-blue) !important;
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ==========================================================================
   CLOSING — full-width dark CTA band
   Matches mockup: gradient bg, mint veil, weight-300 heading, flame CTA, ribbon.
   ========================================================================== */

.paragraph--type--text-only:has(.closing) {
  /* Veil folded into background — frees both pseudo-elements for ribbon decorations */
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(61,180,137,.30), transparent 55%),
    linear-gradient(150deg, #016184 0%, var(--color-academy-blue) 72%);
  position: relative;
  overflow: hidden;
  padding-block: clamp(5.5rem, 12vw, 10.5rem) !important;
  text-align: center;
}

/* Accent ribbon — small, top-left corner, scaleX(-1) flip, fades bottom-right.
   Position is % of the paragraph height (which includes all padding — correct reference). */
.paragraph--type--text-only:has(.closing)::before {
  content: "";
  position: absolute;
  top: -26%; left: -7%;
  width: min(230px, 22vw); height: min(230px, 22vw);
  transform: scaleX(-1);
  background-color: var(--color-mint);
  opacity: .22;
  -webkit-mask-image: var(--ribbon-mint), linear-gradient(to bottom right, #000 28%, transparent 82%);
  mask-image: var(--ribbon-mint), linear-gradient(to bottom right, #000 28%, transparent 82%);
  -webkit-mask-size: 205%, 100%;
  mask-size: 205%, 100%;
  -webkit-mask-position: 52% 64%, center;
  mask-position: 52% 64%, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
  z-index: 0;
}

/* Main ribbon — right side, tall, fades toward center */
.paragraph--type--text-only:has(.closing)::after {
  content: "";
  position: absolute;
  top: 50%; right: -4%;
  width: min(620px, 52vw); height: 165%;
  transform: translateY(-50%);
  background-color: var(--color-mint);
  opacity: .26;
  -webkit-mask-image: var(--ribbon-mint), linear-gradient(to left, #000 42%, transparent 96%);
  mask-image: var(--ribbon-mint), linear-gradient(to left, #000 42%, transparent 96%);
  -webkit-mask-size: 170%, 100%;
  mask-size: 170%, 100%;
  -webkit-mask-position: 74% 48%, center;
  mask-position: 74% 48%, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
  z-index: 0;
}

/* Keep grid cell content above the pseudo-element overlays */
.paragraph--type--text-only:has(.closing) .grid-container,
.paragraph--type--text-only:has(.closing) .block-article__text,
.paragraph--type--text-only:has(.closing) .cell {
  position: relative;
  z-index: 2;
}

/* Heading: Roboto Slab weight 300 at display scale, centered, max 34ch */
.paragraph--type--text-only .closing {
  color: var(--color-white) !important;
  font-family: var(--font-heading);
  font-weight: 300 !important;
  font-size: clamp(1.6rem, 3.2vw, 2.55rem) !important;
  line-height: 1.22 !important;
  max-width: 34ch;
  margin: 0 auto 2.75rem !important;
  text-align: center;
  text-wrap: balance;
}

/* Mint accent inline — wrap key phrase in <span class="accent"> */
.paragraph--type--text-only .closing .accent {
  color: var(--color-mint) !important;
  font-weight: 500 !important;
}

/* Cancel the nobgcolor margin-left offset — closing is center-aligned, not left-offset */
.field-item.nobgcolor .paragraph--type--text-only:has(.closing) .cell > a.button {
  margin-left: 0;
}

/* CTA button in closing context — Flame fill */
.paragraph--type--text-only:has(.closing) .cell > a.button {
  background-color: var(--color-flame) !important;
  box-shadow: 0 8px 30px rgba(228,83,16,.35);
  position: relative;
  z-index: 2;
  margin-top: 0;
}
.paragraph--type--text-only:has(.closing) .cell > a.button:hover {
  background-color: var(--color-flame-soft) !important;
  box-shadow: 0 12px 38px rgba(228,83,16,.45);
}

/* ==========================================================================
   BLOCK-ARTICLE — overlapping card layout (desktop)
   Text card steps over the adjacent image via negative margin.
   DOM: .paragraph--type--small-image > .grid-container > .grid-x.block-article__row
        > [.cell.large-5 (text)] [.cell.large-6 (image)]
   ========================================================================== */

@media (min-width: 64em) {
  /* Scoped to small-image — .block-article also appears on text-only paragraphs
     where flex-wrap: nowrap would break full-width cells. */
  .paragraph--type--small-image .block-article__row,
  .paragraph--type--small-image .grid-x { justify-content: flex-start; flex-wrap: nowrap; }

  /* Foundation cells: content = calc(X% - 2rem) with 1rem margins per side.
     Bare percentages overflow — calc() keeps the row at exactly 100%. */
  .block-article .cell.large-5 { flex-basis: calc(50% - 2rem); max-width: calc(50% - 2rem); }
  .block-article .cell.large-6 { flex-basis: calc(50% - 2rem); max-width: calc(50% - 2rem); }

  .block-article .block-article__text.bg-color-white {
    position: relative; z-index: 2;
    padding: var(--space-xl);
    border-radius: var(--radius);
  }
  .block-article .block-article__text.bg-color-white { padding-bottom: var(--space-xl) !important; }

  /* Standard layout (homepage): text in large-5, image in large-6.
     stretch + justify-content:center mirrors interior page behavior:
     center content when text is shorter than image; top-align when it overflows. */
  .paragraph--type--small-image:not(:has(.cell.large-6 .block-article__text)):not(:has(.cta-card__lead)) .block-article__row {
    align-items: stretch;
  }
  .paragraph--type--small-image:not(:has(.cell.large-6 .block-article__text)):not(:has(.cta-card__lead)) .cell.large-5 {
    display: flex; flex-direction: column;
  }
  .paragraph--type--small-image:not(:has(.cell.large-6 .block-article__text)):not(:has(.cta-card__lead)) .block-article__text {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
  }
  .paragraph--type--small-image:not(:has(.cell.large-6 .block-article__text)):not(:has(.cta-card__lead)) .block-article__image {
    height: 100%;
  }
  .paragraph--type--small-image:not(:has(.cell.large-6 .block-article__text)):not(:has(.cta-card__lead)) .block-article__image picture {
    height: 100%;
  }

  /* Interior page standard layout: text in large-6, image in large-5.
     stretch fills the text card to image height — no gap below text when content is shorter.
     flex column + flex:1 on the card makes it fill the stretched cell cleanly. */
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__row {
    align-items: stretch;
  }
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .cell.large-5 {
    flex-basis: calc(50% - 2rem) !important; max-width: calc(50% - 2rem) !important;
  }
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .cell.large-6 {
    flex-basis: calc(50% - 2rem) !important; max-width: calc(50% - 2rem) !important;
    display: flex; flex-direction: column;
  }
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__text {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* Non-white text blocks (bg-color-light-gray etc.) get same internal padding as the white card. */
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__text:not(.bg-color-white) {
    padding: var(--space-xl);
  }
  /* Desktop: fill image height to match text column; frame rules live outside this query.
     height: 100% lets image fill the cell when text content drives the row taller than the aspect ratio. */
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__image {
    max-height: none !important; margin-top: 0 !important; width: 100% !important; height: 100%;
  }
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__image picture {
    width: 100%; height: 100%;
  }
  .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .block-article__image img {
    height: 100%;
  }

  /* Article nodes — flat 1/3 image + 2/3 text, top-aligned; cancel the overlap card. */
  .node--type-article .paragraph--type--small-image:has(.cell.large-6 .block-article__text) .block-article__row {
    align-items: flex-start !important;
  }
  .node--type-article .paragraph--type--small-image:has(.cell.large-6 .block-article__text) .cell.large-5 {
    width: calc(33.333% - 2rem) !important;
    flex-basis: calc(33.333% - 2rem) !important;
    max-width: calc(33.333% - 2rem) !important;
    box-shadow: var(--shadow-soft);
  }
  .node--type-article .paragraph--type--small-image:has(.cell.large-6 .block-article__text) .cell.large-6 {
    width: calc(66.666% - 2rem) !important;
    flex-basis: calc(66.666% - 2rem) !important;
    max-width: calc(66.666% - 2rem) !important;
  }
  .node--type-article .paragraph--type--small-image .block-article__image { aspect-ratio: unset !important; }
  .node--type-article .paragraph--type--small-image .block-article__image picture { height: auto !important; }
  .node--type-article .paragraph--type--small-image .block-article__image img { border-radius: 0 !important; box-shadow: none !important; }
  .node--type-article .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .cell.large-5 .block-article__text.bg-color-white,
  .node--type-article .paragraph--type--small-image:has(.cell.large-6 .block-article__text):not(:has(.cta-card__lead)) .cell.large-6 .block-article__text.bg-color-white {
    width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    border-radius: 0 !important;
  }
}


/* ==========================================================================
   BLOCK-ARTICLE — mobile reset
   Theme applies an overlap card on mobile (.block-article__text { margin-top: -2.875rem }
   and .block-article__image { width: calc(100% + 48px); left: -24px }). Reset to a
   standard text-above / image-below stack. CTA card excluded.
   ========================================================================== */

@media (max-width: 63.9375em) {
  .paragraph--type--small-image:not(:has(.cta-card__lead)) .block-article__text {
    position: static; z-index: auto;
    margin-top: 0; margin-left: 0 !important;
    width: 100% !important; box-shadow: none;
    padding: var(--space-lg) var(--space-md);
  }
  .paragraph--type--small-image:not(:has(.cta-card__lead)) .block-article__row,
  .paragraph--type--small-image:not(:has(.cta-card__lead)) .grid-x { flex-wrap: wrap !important; }
  .paragraph--type--small-image:not(:has(.cta-card__lead)) .cell { order: 0 !important; max-width: 100% !important; }
  .paragraph--type--small-image:not(:has(.cta-card__lead)) .block-article__image {
    width: 100% !important; max-width: 100% !important;
    left: 0 !important; position: relative !important; height: auto !important;
  }
  .paragraph--type--small-image:not(:has(.cta-card__lead)) .img-container { max-height: none; }
}


/* ==========================================================================
   CTA CARD — paragraph--type--small-image:has(.cta-card__lead)
   Scoped via p.cta-card__lead in the text field. Renders as a flush split
   panel (image / text) using position: absolute on the image cell.
   ========================================================================== */

.paragraph--type--small-image:has(.cta-card__lead) {
  padding-block: var(--space-3xl) !important;
  padding-inline: 0 !important;
}
.paragraph--type--small-image:has(.cta-card__lead) .content-max-wrapper {
  padding-inline: 1.5rem !important; max-width: none !important; width: 100% !important; box-sizing: border-box !important;
}
.paragraph--type--small-image:has(.cta-card__lead) .grid-container {
  max-width: 64rem; margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft);
  padding-left: 0; padding-right: 0;
}
/* Foundation .grid-margin-x bakes in 1rem gutter per side — zero margins so panels sit flush */
.paragraph--type--small-image:has(.cta-card__lead) .grid-margin-x { margin-left: 0; margin-right: 0; }
.paragraph--type--small-image:has(.cta-card__lead) .grid-margin-x > .cell { margin: 0; width: 100%; }
/* !important: theme's body:not(.path-frontpage) .block-article__row overrides on interior pages */
.paragraph--type--small-image:has(.cta-card__lead) .block-article__row { align-items: stretch !important; flex-wrap: wrap; }

.paragraph--type--small-image:has(.cta-card__lead) .cell:has(.block-article__image) {
  position: relative; min-height: clamp(14rem, 30vh, 22rem); overflow: hidden;
}
/* Theme's .path-frontpage sets viewport-based width + float + left: 24px — neutralize all */
.paragraph--type--small-image:has(.cta-card__lead) .block-article__image {
  position: absolute !important; inset: 0;
  left: 0 !important; width: 100% !important; max-width: none !important; max-height: none !important;
  float: none !important; aspect-ratio: unset; height: 100%; min-height: 0; margin-top: 0;
}
.paragraph--type--small-image:has(.cta-card__lead) .img-container picture { display: block; width: 100%; height: 100%; }
.paragraph--type--small-image:has(.cta-card__lead) .block-article__image img { border-radius: 0; box-shadow: none; }

.paragraph--type--small-image:has(.cta-card__lead) .block-article__text.bg-color-white {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  background: var(--surface-cool) !important; box-shadow: none !important; border-radius: 0 !important;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl)) !important;
  flex: 1 0 auto;
}
.paragraph--type--small-image:has(.cta-card__lead) h2.infos-sep {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--space-sm);
}
/* Cancel overlap margin inherited from the standard large-5/large-6 card rules */
.paragraph--type--small-image:has(.cta-card__lead) .cell.large-5 .block-article__text.bg-color-white,
.paragraph--type--small-image:has(.cta-card__lead) .cell.large-6 .block-article__text.bg-color-white {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
}
.paragraph--type--small-image:has(.cta-card__lead) .block-article__text h2 + div { margin-top: 0; }
.paragraph--type--small-image:has(.cta-card__lead) .block-article__text div ~ p { margin-top: 0; }

@media (min-width: 64em) {
  /* 45/55 split — flex: 0 0 N% avoids width:100% interference from the grid-margin-x cell reset */
  .paragraph--type--small-image:has(.cta-card__lead) .cell:has(.block-article__image) { flex: 0 0 45%; max-width: 45%; }
  .paragraph--type--small-image:has(.cta-card__lead) .cell:has(.block-article__text)  { flex: 0 0 55%; max-width: 55%; display: flex; flex-direction: column; }
}


/* ==========================================================================
   IMAGE WITH COLORED BACKGROUND — block-half-image
   Recasts the theme's absolutely-positioned image layout as a true 50/50 CSS grid.
   ========================================================================== */

.block-large-image:has(.block-half-image-content) { min-height: 0; }
.block-half-image-content { padding-bottom: 0 !important; }
.block-half-image-content > .boxed { margin: 0; width: 100%; box-sizing: border-box; }

.block-half-image-content .boxed > .relative-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-height: clamp(28rem, 55vh, 42rem);
}
@media (min-width: 64em) {
  .block-half-image-content .boxed > .relative-wrapper { grid-template-columns: 1fr 1fr; }
}

/* Image — theme positions this absolutely with large offsets; override to fill the grid cell */
.block-half-image-content .boxed .absolute-infos {
  position: relative !important;
  top: auto !important; left: auto !important; height: auto !important; width: auto !important;
  box-shadow: none !important;
  order: -1; min-height: 20rem; overflow: hidden;
}
.block-half-image-content .block-half-image__image.img-container {
  display: block !important; position: absolute; inset: 0; max-height: none !important;
}
.block-half-image-content .block-half-image__image.img-container picture { display: block; width: 100%; height: 100%; }
.block-half-image-content .block-half-image__image.img-container img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Text — theme's .bg-color-theme-primary forces background and color with !important */
.block-half-image-content .block-article__text {
  background: var(--surface-cool) !important; color: var(--color-academy-blue) !important;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(var(--space-xl), 6vw, var(--space-4xl)) clamp(var(--space-lg), 4vw, var(--space-3xl)) !important;
  max-width: none !important; width: 100% !important; box-sizing: border-box; margin-top: 0 !important;
}
.block-half-image-content h2.infos-sep {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: var(--lh-display); color: var(--color-academy-blue); margin: 0 0 var(--space-md);
}
.block-half-image-content p {
  color: var(--ink-soft) !important; font-size: 1.0625rem; line-height: var(--lh-body); margin: 0 0 var(--space-xl);
}
.block-half-image-content .links-wrapper a { color: var(--color-elior-blue) !important; stroke: var(--color-elior-blue) !important; }
@media (min-width: 64em) { .block-half-image-content p { max-width: 48ch; } }


/* ==========================================================================
   GRILLE — cartouche-style cards
   ========================================================================== */

.grille-container .cartouche-style { border-radius: 0; overflow: hidden; }
.news-view .cartouche-style { border-radius: 0; }
.news-view .cartouche-style .infos-wrapper { border-radius: 0; }
.with-shadow .cartouche-style { box-shadow: var(--shadow-soft); }
.cartouche-style .txt { color: var(--ink-soft); }
.cartouche-style .img-container { border-radius: 0; border-bottom: 4px solid var(--color-mint); }
.news-view .cartouche-style.list-view .img-container {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.news-view .cartouche-style.list-view .img-container picture { display: block; width: 100%; height: 100%; }
.news-view .cartouche-style.list-view .img-container img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (min-width: 40em) {
  .news-view .grid-x > .cartouche-style.list-view {
    width: calc(50% - 2rem) !important;
    flex: 0 0 calc(50% - 2rem) !important;
    max-width: calc(50% - 2rem) !important;
  }
}

.block-job-offers .block-content-view.negative-margin.medium { margin-top: 6rem; }
@media screen and (max-width: 85.3125em) {
  .block-job-offers .block-content-view.negative-margin.medium { margin-top: 3rem !important; }
}

/* Grille uses a real <img> tag (not CSS background-image) — aspect-ratio replaces the
   theme's fixed 11.25rem height. object-fit: cover fills the 4:3 container cleanly. */
.cartouche-style.parag .top-wrapper {
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  height: auto !important;
  overflow: hidden;
  background-color: transparent !important;
}
.cartouche-style.parag .top-wrapper .img-container {
  display: block !important;
  width: 100% !important; height: 100% !important;
  max-height: none !important;
}
.cartouche-style.parag .top-wrapper .img-container picture { display: block; width: 100%; height: 100%; }
.cartouche-style.parag .top-wrapper .img-container picture img {
  display: block !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
}

/* Tablet (640–1023px): force 2 columns. Theme's .medium-up-3 has no upper breakpoint
   so it holds 3 columns into tablet. grid-margin-x gutter = 1rem per side. */
@media print, screen and (min-width: 40em) and (max-width: 63.9375em) {
  .grid-margin-x.medium-up-3 > .cell.grille-container { width: calc(50% - 2rem) !important; }
  /* Theme's .negative-margin :nth-child offsets are calibrated for 3 columns — reset spacing */
  .grid-margin-x.medium-up-3 > .cell.grille-container.negative-margin { margin-top: 1rem !important; }
}


/* ==========================================================================
   ALBUM
   ========================================================================== */

.album-item img { border-radius: 0; }
.bgcolorlightgray:has(.paragraph--type--photo-album),
.paragraph--type--photo-album:has(.bgcolorwhite),
.paragraph--type--photo-album .bg-color-light-gray { background-color: var(--surface); }
.with-shadow .container-shadow::before { border-radius: var(--radius); }


/* ==========================================================================
   STATS — paragraph--type--chiffres-cles
   ========================================================================== */

.paragraph--type--chiffres-cles {
  background: var(--color-columbia-blue);
  padding-block: var(--section-y) !important;
  text-align: center;
}
/* Suppress empty h2/text cells the theme always renders even when fields are blank */
.paragraph--type--chiffres-cles .grid-x > .double-field-sep,
.paragraph--type--chiffres-cles .grid-x > .field-sep-64 { display: none !important; }

.paragraph--type--chiffres-cles ul.row {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: center !important;
}
.paragraph--type--chiffres-cles ul.row > li {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  vertical-align: top !important;
  margin: 0 var(--space-xl) !important;
  text-align: center !important;
}
.paragraph--type--chiffres-cles .chiffre {
  font-family: var(--font-heading) !important;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-academy-blue) !important;
  margin-bottom: var(--space-xs);
}
/* .txt.big sets a larger font-size globally — reset for this context */
.paragraph--type--chiffres-cles .cle,
.paragraph--type--chiffres-cles .cle.txt.big {
  font-family: var(--font-body);
  color: var(--color-elior-blue) !important;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.5;
  max-width: 32ch;
  margin-inline: auto;
  text-transform: uppercase; 
  letter-spacing: 0.02em;
  margin-top: 1.5rem;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

#block-elior-top-menu-footeraddress .section-padding,
#block-elior-top-menu-contact .section-padding { padding: 1rem 0; }
#block-elior-top-menu-footeraddress .grid-margin-x > .cell,
#block-elior-top-menu-contact .grid-margin-x > .cell {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
  margin-left: 0 !important;
}
footer h2 { color: var(--color-white) !important; font-size: var(--fs-h5) !important; }
footer .block-article__text p,
footer .field-type-text-long p { color: var(--color-white) !important; }
footer .block-article__text a:not(.button):not(button),
footer .field-type-text-long a:not(.button):not(button) { color: var(--color-white) !important; font-weight: unset !important; }
footer .double-field-sep { margin-bottom: 0; }
footer .block-article__text p.small { line-height: 1.5rem; }
footer .block-article__text p.small + p.small { margin-top: 0; }
#block-elior-top-menu-contact .block-article__text p.small { margin-bottom: 0; }
#region-footer .footer-inner { align-items: flex-start; font-size: var(--fs-small); }
#region-footer .social-links-wrapper .list-social { justify-content: flex-start; }
#region-footer .social-links-wrapper .list-social li:not(:last-child) { margin-right: 1rem; }
.social-links-wrapper .list-social li { width: 1.15rem; height: 1.15rem; }
.nav-footer { padding: 1rem 0; }
.nav-footer .menu { flex-direction: column; align-items: flex-start; }

/* Desktop: nav cols side by side */
@media (min-width: 85.375em) {
  #region-footer .footer-inner .footer-center-inner > div {
    display: flex; flex-direction: row; gap: var(--space-xl);
    align-items: flex-start; justify-content: space-evenly;
  }
}
/* Theme applies margin-left/right on .grid-container at multiple breakpoints — zero unconditionally in footer blocks */
#block-elior-top-menu-footeraddress .grid-container,
#block-elior-top-menu-contact .grid-container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
#block-elior-top-menu-footeraddress .grid-margin-x,
#block-elior-top-menu-contact .grid-margin-x { margin-left: 0 !important; margin-right: 0 !important; }

/* Tablet: 2-column grid */
@media (min-width: 40em) and (max-width: 85.3125em) {
  #region-footer .footer-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
  #region-footer .footer-inner .footer-left-inner  { grid-column: 1; grid-row: 1; text-align: left; }
  #region-footer .footer-inner .footer-center-inner { display: contents; }
  #region-footer .footer-inner .footer-center-inner > div { display: contents; }
  #region-footer .footer-inner .footer-center-inner > div > .col-12:first-child { grid-column: 2; grid-row: 1; }
  #region-footer .footer-inner .footer-center-inner > div > .col-12:last-child  { grid-column: 1; grid-row: 2; }
  #region-footer .footer-inner .footer-right-inner { grid-column: 2; grid-row: 2; }
  #region-footer .footer-inner .footer-center-inner .nav-footer { justify-content: flex-start; align-items: flex-start; }
  #region-footer .footer-inner .footer-center-inner .nav-footer .menu li,
  #region-footer .footer-inner .footer-center-inner .nav-footer .menu a { text-align: left; }
}
/* Mobile: 1 column */
@media (max-width: 39.9375em) {
  #region-footer .footer-inner .footer-center-inner > div { flex-direction: column; align-items: flex-start; text-align: left; }
  #region-footer .footer-inner .footer-center-inner > div > .col-12 { margin-bottom: var(--space-lg); }
  #block-elior-top-menu-contact { text-align: left; }
  #block-elior-top-menu-contact .block-article__text p.small + p.small { margin-top: var(--space-xs); }
  #region-footer .footer-inner .footer-center-inner .nav-footer { justify-content: flex-start; align-items: flex-start; }
  #region-footer .footer-inner .footer-center-inner .nav-footer .menu li,
  #region-footer .footer-inner .footer-center-inner .nav-footer .menu a { text-align: left; }
}


/* ==========================================================================
   PARAGRAPH SPACING — consecutive same/adjacent background field items
   Theme applies 3rem padding-top between paragraphs on desktop only.
   Restores this behavior on interior pages where the default rule doesn't fire.
   ========================================================================== */

@media screen and (min-width: 64em) {
  [class*="field-paragraphs"] .field-items .field-item:not(.no-txt):not(.map-parag):not(.has-img-2-col) + .field-item.same-bgcolor .paragraph:not(.semi-bg),
  [class*="field-paragraphs"] .field-items .field-item:not(.no-txt):not(.map-parag):not(.has-img-2-col).nobgcolor + .field-item.semibg .paragraph,
  [class*="field-paragraphs"] .field-items .field-item:not(.no-txt):not(.map-parag):not(.has-img-2-col).nobgcolor:not(.has-img-2-col) + .bgcolorwhite .paragraph,
  [class*="field-paragraphs"] .field-items .field-item:not(.no-txt):not(.map-parag):not(.has-img-2-col).bgcolorwhite:not(.has-img-2-col) + .nobgcolor .paragraph,
  [class*="field-paragraphs"] .field-items .field-item:not(.no-txt):not(.map-parag):not(.has-img-2-col).bgcolorwhite + .field-item.semibg .paragraph {
    padding-top: 3rem;
  }
}