:root{
  --em-media-max: 20rem;
  --em-gap: .75rem;
  --em-body-pad-left: 1.25rem;
}
.em-section{display:grid;grid-template-columns:1fr;gap:var(--em-gap);margin:.5rem 0}
.em-section .em-media img{width:100%;height:auto;display:block;border-radius:.5rem}

/* desktop layout */
@media (min-width: 900px){
  .entry-content .em-section{padding:2.5rem 0 !important;margin:.5rem 0 !important}
  .em-section:has(.em-media){
    grid-template-columns: fit-content(var(--em-media-max)) minmax(0,1fr);
    align-items:start;
  }
  .em-section:has(.em-media) .em-body{padding-left:var(--em-body-pad-left)}
  .em-section:not(:has(.em-media)){grid-template-columns:1fr}
  .entry-content .em-section .em-body{max-width:none !important;margin:0 !important}
}

/* alternating backgrounds + top-gap fix (example, tweak as needed) */
.em-section:nth-of-type(even){background:transparent}
.entry-content .em-section.is-first{margin-top:0}

/* === Alternating backgrounds for .em-section blocks ===
   Uses modern :nth-child(… of .em-section) where available, with a fallback.
   Tweak --em-alt-bg to your preferred shade. */
:root{ --em-alt-bg: rgba(0,0,0,0.035); }

.entry-content :is(.em-section):nth-child(2n of .em-section){
  background: var(--em-alt-bg);
}

/* Fallback for browsers that don't support "nth-child(of …)".
   This approximates alternation when .em-section blocks are siblings. */
@supports not (selector(:nth-child(2n of .em-section))) {
  .em-section{ background: transparent; }
  .em-section + .em-section{ background: var(--em-alt-bg); }
  .em-section + .em-section + .em-section{ background: transparent; }
  .em-section + .em-section + .em-section + .em-section{ background: var(--em-alt-bg); }
}

/* === Brand alternation (exact prior palette) === */
:root{
  --em-blue:       #356bb3;  /* from em-alignfull-override.php */
  --em-light:      #b0b7c3;  /* from em-alignfull-override.php */
  --em-blue-fg:    #e5e7eb;  /* readable on blue */
  --em-light-fg:   #111827;  /* readable on grey */
  --em-blue-link:  #cfe4ff;  /* link on blue */
  --em-light-link: #0b5cab;  /* link on grey (from base) */
}

/* Use modern nth-child(of …) so we only count .em-section siblings */
.entry-content :is(.em-section):nth-child(odd of .em-section){
  background: var(--em-blue) !important;
  color: var(--em-blue-fg) !important;
}
.entry-content :is(.em-section):nth-child(even of .em-section){
  background: var(--em-light) !important;
  color: var(--em-light-fg) !important;
}
.entry-content :is(.em-section):nth-child(odd of .em-section) a{
  color: var(--em-blue-link) !important;
}
.entry-content :is(.em-section):nth-child(even of .em-section) a{
  color: var(--em-light-link) !important;
}

/* Fallback for browsers without :nth-child(of …) support */
@supports not (selector(:nth-child(2n of .em-section))) {
  .em-section{ background: var(--em-blue) !important; color: var(--em-blue-fg) !important; }
  .em-section + .em-section{ background: var(--em-light) !important; color: var(--em-light-fg) !important; }
  .em-section + .em-section + .em-section{ background: var(--em-blue) !important; color: var(--em-blue-fg) !important; }
  .em-section + .em-section + .em-section + .em-section{ background: var(--em-light) !important; color: var(--em-light-fg) !important; }
  .em-section a{ color: var(--em-blue-link) !important; }
  .em-section + .em-section a{ color: var(--em-light-link) !important; }
}

/* === Remove white seams & force full-bleed === */
.entry-content .em-section{
  /* keep internal spacing, kill external seams */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Break out of content padding so background hits the viewport edges */
.entry-content .em-section.alignfull{
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Use dynamic viewport units when available (avoids scrollbar math issues) */
@supports (width: 100dvw){
  .entry-content .em-section.alignfull{
    margin-left:  calc(50% - 50dvw) !important;
    margin-right: calc(50% - 50dvw) !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
  }
}

/* Prevent any accidental horizontal scroll from full-bleed sections */
.entry-content{ overflow-x: clip; }

/* === Media-left gutter so background shows beside the image === */
:root{ --em-media-left-pad: clamp(12px, 2.5vw, 16px); }

@media (min-width: 900px){
  .entry-content .em-section:has(.em-media) .em-media{
    padding-left: var(--em-media-left-pad);
  }
}

/* === Unify section padding (top/bottom and media-left) === */
:root{ --em-section-pad: 2.5rem; }  /* matches current top/bottom */

.entry-content .em-section{
  padding-top:    var(--em-section-pad) !important;
  padding-bottom: var(--em-section-pad) !important;
}

@media (min-width: 900px){
  .entry-content .em-section:has(.em-media) .em-media{
    padding-left: var(--em-section-pad) !important;
  }
}

/* === Mobile gutters: show blue/grey padding beside content === */
:root{ --em-section-pad-x: var(--em-section-pad, 2.5rem); }

.entry-content .em-section{
  padding-left:  var(--em-section-pad-x) !important;
  padding-right: var(--em-section-pad-x) !important;
}

/* Desktop keeps the tighter left gutter logic already defined */
@media (min-width: 900px){
  /* If you prefer slightly smaller side gutters on desktop, uncomment:
  .entry-content .em-section{ padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  */
}

/* Make padding part of the element's width (important for full-bleed) */
.entry-content .em-section{ box-sizing: border-box !important; }

/* Mobile: guarantee equal left/right gutters for both columns */
@media (max-width: 899px){
  .entry-content .em-section.alignfull{
    padding-left:  var(--em-section-pad, 2.5rem) !important;
    padding-right: var(--em-section-pad, 2.5rem) !important;
  }
  .entry-content .em-section .em-media,
  .entry-content .em-section .em-body{
    padding-right: var(--em-section-pad, 2.5rem) !important; /* explicit right gutter */
  }
}

/* === Mobile padding: container-only, no extra on children === */
@media (max-width: 899px){
  .entry-content .em-section.alignfull{
    padding-left:  var(--em-section-pad, 2.5rem) !important;
    padding-right: var(--em-section-pad, 2.5rem) !important;
  }
  .entry-content .em-section .em-media,
  .entry-content .em-section .em-body{
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
}