/* ===== ACMS Home page =====
   Built from NATIVE Divi modules so every heading, paragraph, button and image is
   editable in the Visual Builder. This file styles those modules via helper classes
   set on each module's CSS Class field; it does not generate content. */

/* ---------- Shared furniture ---------- */
.acms-rule,
.et_pb_code .acms-rule { width: 64px; height: 5px; background: var(--acms-yellow); }
.acms-rule--sm { width: 44px; height: 5px; }

/* Divi wraps every module in a block with its own bottom margin; we control rhythm per section. */
#acms-hero .et_pb_module,
#acms-intro .et_pb_module,
#acms-stats .et_pb_module,
#acms-study .et_pb_module,
#acms-research .et_pb_module,
#acms-projects .et_pb_module { margin-bottom: 0; }

.acms-h2 .et_pb_module_header,
h2.acms-h2 {
  font: 700 42px/1.15 var(--acms-font);
  color: var(--acms-navy);
  padding-bottom: 0;
}
.acms-lede,
.acms-lede p {
  font: 400 18px/1.7 var(--acms-font);
  color: var(--acms-body);
}
.acms-lede p:last-child { padding-bottom: 0; }

/* Buttons — Divi renders these as <a class="et_pb_button">; override its defaults.
   Unlike every other page file (which scopes button overrides under a stable section/row
   ID), .acms-btn is reused across multiple unrelated sections of this page (hero, intro,
   etc.), so there's no single ID to scope under. `body` raises specificity instead, matching
   the fix pattern used for the equivalent issue in study.css. */
body .et_pb_button.acms-btn,
body .et_pb_button.acms-btn:hover {
  font: 700 16px/1 var(--acms-font) !important;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 0;
  border: 0;
  padding: 16px 34px !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body .et_pb_button.acms-btn::after,
body .et_pb_button.acms-btn::before { display: none !important; }
body .et_pb_button.acms-btn--yellow { background-color: var(--acms-yellow) !important; color: var(--acms-brown) !important; }
body .et_pb_button.acms-btn--yellow:hover { background-color: #ffd964 !important; }
body .et_pb_button.acms-btn--navy { background-color: var(--acms-navy) !important; color: var(--acms-white) !important; }
body .et_pb_button.acms-btn--navy:hover { background-color: var(--acms-navy-dark) !important; }
body .et_pb_button.acms-btn--ghost {
  background-color: transparent !important;
  color: var(--acms-white) !important;
  border: 2px solid var(--acms-white) !important;
  padding: 14px 32px !important;
}
body .et_pb_button.acms-btn--ghost:hover { background-color: var(--acms-white) !important; color: var(--acms-navy) !important; }
body .et_pb_button.acms-btn:focus-visible { outline: 3px solid var(--acms-yellow); outline-offset: 3px; }
/* Belt-and-braces hover lock: Divi's base stylesheet AND its per-instance generated CSS
   (et-cache/*/et-core-unified-*.min.css) both apply their own :hover box-model changes
   (asymmetric padding for a sliding arrow, border-radius transitions, etc). The rule above
   already blocks the padding/border Divi's *base* stylesheet tries to apply, but pin every
   box-model property explicitly, on the button AND its wrapper, so nothing Divi generates
   per-instance can reintroduce a hover size change. */
body .et_pb_button.acms-btn,
body .et_pb_button.acms-btn:hover,
body .et_pb_button.acms-btn:focus,
body .et_pb_button.acms-btn:active {
  padding: 16px 34px !important;
  border-width: 0px !important;
  border-radius: 0px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body .et_pb_button.acms-btn--ghost,
body .et_pb_button.acms-btn--ghost:hover,
body .et_pb_button.acms-btn--ghost:focus,
body .et_pb_button.acms-btn--ghost:active {
  padding: 14px 32px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 0px !important;
}
body .et_pb_button.acms-btn::after, body .et_pb_button.acms-btn::before { display: none !important; content: none !important; }
.et_pb_button_module_wrapper { padding: 0 !important; margin: 0 !important; }


/* ---------- HERO ---------- */
#acms-hero { position: relative; background: var(--acms-navy); overflow: hidden; }

/* The hero's slide stack and arrows must span the whole SECTION, not the row's content box.
   Absolute positioning resolves against the nearest positioned ancestor, so the row and column
   are deliberately left static — otherwise the slides get inset by the row's 118px/60px padding. */
/* Bottom padding is 96px of design space PLUS ~38px reserved for the absolutely-positioned
   slide indicators, which otherwise overlap the CTAs. */
#acms-hero > .et_pb_row {
  position: static;
  padding: 170px 60px 186px !important;
  display: flex;
  flex-direction: column;
}
/* Block (not flex column) so the two CTA wrappers can sit inline beside each other — as flex
   items they would each be forced onto their own row. */
#acms-hero .et_pb_column {
  position: static;
  display: block;
}
#acms-hero .et_pb_column > .et_pb_code,
#acms-hero .et_pb_column > .et_pb_heading { margin-bottom: 34px; }
#acms-hero .et_pb_button_module_wrapper {
  display: inline-block;
  vertical-align: top;
  margin: 0 18px 0 0;
}
#acms-hero .et_pb_button_module_wrapper:last-of-type { margin-right: 0; }

/* ---- Native Divi Slider as the hero's image layer ----
   Editors add/reorder/swap hero images as real slides in the Visual Builder. The slides carry
   no copy; the headline and CTAs are separate native modules overlaid on top, so they stay
   fixed across slides. Divi markup:
   .et_pb_slider > .et_pb_slides > .et_pb_slide  |  .et-pb-slider-arrows > a.et-pb-arrow-prev/next
                                                 |  .et-pb-controllers > a (+ .et-pb-active-control)
   z-index stays `auto` on the slider so it creates no stacking context — that lets the slides
   sit under the copy while the arrows/dots are raised above it. */
#acms-hero .et_pb_slider {
  position: absolute;
  inset: 0;
  z-index: auto;
  margin: 0;
  padding: 0;
}
#acms-hero .et_pb_slider,
#acms-hero .et_pb_slides,
#acms-hero .et_pb_slide { height: 100%; min-height: 0; }
#acms-hero .et_pb_slide {
  background-size: cover;
  background-position: center;
  padding: 0;
}
/* Empty slides otherwise reserve space for absent copy. */
#acms-hero .et_pb_slide .et_pb_container { min-height: 0; height: 100%; padding: 0; }
/* Scrim: matches the prototype's left-to-right wash over a navy base. */
#acms-hero .et_pb_slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,57,79,.72) 0%, rgba(11,57,79,.48) 55%, rgba(11,57,79,.28) 100%);
  pointer-events: none;
}

/* Arrows — restyled from Divi's icon-font chevrons to the prototype's bordered squares. */
#acms-hero .et-pb-slider-arrows { position: static; }
#acms-hero .et-pb-arrow-prev,
#acms-hero .et-pb-arrow-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  margin: 0;
  opacity: 1;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(11,57,79,.28);
  color: var(--acms-white);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#acms-hero .et-pb-arrow-prev { left: 18px; right: auto; }
#acms-hero .et-pb-arrow-next { right: 18px; left: auto; }
#acms-hero .et-pb-arrow-prev:hover,
#acms-hero .et-pb-arrow-next:hover { background: var(--acms-yellow); border-color: var(--acms-yellow); color: var(--acms-brown); }
#acms-hero .et-pb-arrow-prev::before,
#acms-hero .et-pb-arrow-next::before { font-size: 32px; line-height: 1; }
#acms-hero .et-pb-arrow-prev:focus-visible,
#acms-hero .et-pb-arrow-next:focus-visible { outline: 3px solid var(--acms-yellow); outline-offset: 3px; }

/* Dot indicators — restyled from Divi's round bullets to the prototype's 32x4 dashes. */
/* Dots align to the CONTENT column, not the section edge. The row is centred at max-width
   1440px with 60px padding, so a hardcoded `left: 60px` drifts out of alignment on any
   viewport wider than 1440px — mirror the row's box instead. */
#acms-hero .et-pb-controllers {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  padding: 0 60px;
  box-sizing: border-box;
  z-index: 3;
  display: flex; justify-content: flex-start; gap: 10px;
  text-align: left;
}
#acms-hero .et-pb-controllers a {
  width: 32px; height: 4px;
  margin: 0;
  border-radius: 0;
  background-color: rgba(255,255,255,.4);
  text-indent: -9999px;
  transition: background-color .3s ease;
}
#acms-hero .et-pb-controllers .et-pb-active-control { background-color: var(--acms-yellow); }
#acms-hero .et-pb-controllers a:focus-visible { outline: 3px solid var(--acms-yellow); outline-offset: 3px; }

/* Content sits above the slides; the row itself is unpositioned, so each module is raised. */
#acms-hero .et_pb_heading,
#acms-hero .et_pb_button_module_wrapper,
#acms-hero .et_pb_code { position: relative; z-index: 2; }
#acms-hero .acms-hero-title .et_pb_module_header,
#acms-hero h1.et_pb_module_header {
  font: 700 60px/1.1 var(--acms-font);
  color: var(--acms-white);
  max-width: 900px;
  padding-bottom: 0;
  text-wrap: pretty;
}
/* The two hero CTAs sit side by side -- spacing and layout are already fully handled by the
   generic .et_pb_button_module_wrapper rule above (margin-right on all but :last-of-type). */


/* ---------- INTRO ---------- */
#acms-intro .acms-intro-lead p {
  font: 600 25px/1.55 var(--acms-font);
  color: var(--acms-navy);
  text-wrap: pretty;
  padding-bottom: 0;
}
#acms-intro .acms-intro-copy p {
  font: 400 17px/1.75 var(--acms-font);
  color: var(--acms-body);
  padding-bottom: 26px;
}
#acms-intro .et_pb_button_module_wrapper { text-align: left; }

/* ---------- NEWS ---------- */
/* Unlike Research/Projects, this head row has a link that must float to the right of the
   heading, not stack under it — the rule+H2 form a left-aligned group, the "All news" link
   sits at the far right, both bottom-aligned. Grid places the three flat sibling modules
   (rule, heading, link) without needing a wrapper div around the first two. */
#acms-news-head .et_pb_column {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 40px;
  row-gap: 14px;
}
#acms-news-head .et_pb_column > :first-child { grid-column: 1; grid-row: 1; }
#acms-news-head .et_pb_column .acms-h2 { grid-column: 1; grid-row: 2; }
#acms-news-head .et_pb_column .acms-news-all { grid-column: 2; grid-row: 1 / 3; justify-self: end; }
#acms-news-head { margin-bottom: 42px !important; }
#acms-news .acms-news-all p { padding-bottom: 0; }
#acms-news .acms-news-all a {
  color: var(--acms-navy);
  font: 700 16px/1 var(--acms-font);
  text-decoration: none;
  border-bottom: 2px solid var(--acms-yellow);
  padding-bottom: 4px;
}
#acms-news .acms-news-all a:hover { color: var(--acms-navy-dark); }

/* Divi 5 blog markup (NOT Divi 4 — no .et_pb_salvattore_content here):
   .et_pb_blog > .et_pb_ajax_pagination_container > .et_pb_posts > article.et_pb_post */
#acms-news .et_pb_blog .et_pb_posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
#acms-news article.et_pb_post {
  background: var(--acms-white);
  box-shadow: 0 2px 10px rgba(21,89,122,.08);
  border: 0;
  margin: 0 !important;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#acms-news article.et_pb_post .entry-featured-image-url {
  display: block; margin: 0;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--acms-img-bg);
}
#acms-news article.et_pb_post .entry-featured-image-url img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
#acms-news article.et_pb_post .entry-title {
  font: 700 20px/1.35 var(--acms-font);
  color: var(--acms-navy);
  margin: 0;
  /* Top padding gives the title breathing room below the featured image. */
  padding: 26px 28px 14px;
  text-wrap: pretty;
}
#acms-news article.et_pb_post .entry-title a { color: inherit; text-decoration: none; }
#acms-news article.et_pb_post .entry-title a:hover { color: var(--acms-navy-dark); }
/* Colour must land on the <p> itself — Divi's base stylesheet sets #666 on paragraphs,
   which beats a colour inherited from .post-content. */
#acms-news article.et_pb_post .post-content,
#acms-news article.et_pb_post .post-content-inner,
#acms-news article.et_pb_post .post-content p {
  font: 400 15px/1.7 var(--acms-font);
  color: var(--acms-text-secondary);
}
/* Divi nests the auto-generated .more-link INSIDE .post-content (after .post-content-inner),
   not as a sibling — so post-content itself must be the flex column that grows the excerpt
   and pins the link below it, rather than post-content just growing into dead space. */
#acms-news article.et_pb_post .post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 28px 30px;
  margin: 0;
}
#acms-news article.et_pb_post .post-content-inner { flex: 1; }
#acms-news article.et_pb_post .post-content p { margin: 0; padding-bottom: 0; }

/* Read More link (enabled on the Blog module via readMore.advanced.enable). */
#acms-news article.et_pb_post .more-link {
  display: inline-block;
  align-self: flex-start;
  margin: 14px 0 0;
  font: 700 14px/1 var(--acms-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acms-brown);
  text-decoration: none;
}
#acms-news article.et_pb_post .more-link:hover { color: var(--acms-navy); }
#acms-news article.et_pb_post .post-meta {
  order: -1;
  margin: 0;
  padding: 22px 28px 10px;
  font: 700 11px/1 var(--acms-font);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acms-brown);
}
#acms-news article.et_pb_post .post-meta a { color: inherit; text-decoration: none; }
/* Image cards: chip overlays the image corner. */
#acms-news article.et_pb_post.has-post-thumbnail { position: relative; }
#acms-news article.et_pb_post.has-post-thumbnail .post-meta {
  position: absolute; top: 0; left: 0;
  order: 0;
  background: var(--acms-yellow);
  padding: 8px 14px;
  z-index: 2;
}
/* No featured image: navy tile carrying the category, per the brief. */
#acms-news article.et_pb_post:not(.has-post-thumbnail) { background: var(--acms-navy); }
#acms-news article.et_pb_post:not(.has-post-thumbnail) .entry-title,
#acms-news article.et_pb_post:not(.has-post-thumbnail) .entry-title a { color: var(--acms-white); }
#acms-news article.et_pb_post:not(.has-post-thumbnail) .entry-title { padding-top: 4px; }
#acms-news article.et_pb_post:not(.has-post-thumbnail) .post-content,
#acms-news article.et_pb_post:not(.has-post-thumbnail) .post-content-inner,
#acms-news article.et_pb_post:not(.has-post-thumbnail) .post-content p { color: var(--acms-hero-muted); }
#acms-news article.et_pb_post:not(.has-post-thumbnail) .more-link { color: var(--acms-yellow); }
#acms-news article.et_pb_post:not(.has-post-thumbnail) .more-link:hover { color: var(--acms-white); }
#acms-news article.et_pb_post:not(.has-post-thumbnail) .post-meta {
  align-self: flex-start;
  background: var(--acms-yellow);
  color: var(--acms-brown);
  margin: 30px 28px 0;
  padding: 7px 13px;
}

/* ---------- STATS ---------- */
#acms-stats > .et_pb_row { display: flex; align-items: center; }
#acms-stats-headline { display: flex; flex-direction: column; gap: 10px; }
#acms-stats .acms-stat-big p {
  font: 700 76px/1 var(--acms-font);
  color: var(--acms-yellow);
  padding-bottom: 0;
}
#acms-stats .acms-stat-sub p {
  font: 400 19px/1.6 var(--acms-font);
  color: var(--acms-white);
  padding-bottom: 0;
}
#acms-stats .acms-stat {
  border-left: 3px solid var(--acms-yellow);
  padding: 6px 0 6px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
#acms-stats .acms-stat-n p {
  font: 700 44px/1 var(--acms-font);
  color: var(--acms-white);
  padding-bottom: 0;
}
#acms-stats .acms-stat-l p {
  font: 700 14px/1 var(--acms-font);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acms-cream);
  padding-bottom: 0;
}

/* ---------- STUDY ---------- */
#acms-study > .et_pb_row { display: flex; align-items: center; }
#acms-study-left { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
#acms-study .acms-study-intro p {
  font: 400 19px/1.7 var(--acms-font);
  color: var(--acms-body);
  max-width: 520px;
  padding-bottom: 0;
}
#acms-study .acms-degrees {
  width: 100%; max-width: 520px;
  border-collapse: collapse;
  border-top: 1px solid var(--acms-line);
}
#acms-study .acms-degrees th,
#acms-study .acms-degrees td {
  padding: 16px 0;
  border-bottom: 1px solid var(--acms-line);
  text-align: left;
  vertical-align: middle;
}
#acms-study .acms-degrees th {
  font: 700 13px/1.4 var(--acms-font);
  letter-spacing: .12em;
  color: var(--acms-brown);
  width: 110px;
}
#acms-study .acms-degrees td { font: 400 16px/1.5 var(--acms-font); color: var(--acms-body); }
#acms-study .acms-study-img .et_pb_image_wrap { display: block; width: 100%; }
#acms-study .acms-study-img img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- RESEARCH THEMES ---------- */
#acms-research-head .et_pb_column { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; }
#acms-research-head { margin-bottom: 44px !important; }
#acms-theme-grid { display: flex; gap: 34px; }
#acms-theme-grid .et_pb_column.acms-theme-card {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  margin: 0 !important;
  flex: 1 1 0;
  width: auto !important;
  background-color: var(--acms-navy);
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 14px;
  padding: 34px 30px;
  cursor: pointer;
}
/* Same containing-block trap as the hero: Divi's `.et_pb_code_inner` is position:relative and
   collapses to the height of its content, so an absolute scrim inside it rendered ~341x5 instead
   of covering the card. `display: contents` removes both boxes so the scrim resolves to the
   card column itself. */
#acms-theme-grid .acms-theme-card > .et_pb_code,
#acms-theme-grid .acms-theme-card > .et_pb_code > .et_pb_code_inner { display: contents; }
/* Photo sits at reduced opacity under the gradient scrim, per the prototype — Divi's own
   background-image decoration attribute has no opacity sub-field, so this is a real <img>
   layer instead, painted first so the scrim (next in source order) lands on top of it. */
#acms-theme-grid .acms-theme-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  z-index: 0;
}
/* The prototype's literal gradient (15% alpha for the top 30%) leaves the top of the photo
   almost untouched, which reads as a bright, un-scrimmed patch rather than an overlay covering
   the whole card. Darkened across the full height so the scrim reads as continuous and the
   yellow accent rule stays legible against it wherever it falls. */
#acms-theme-grid .acms-theme-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,57,79,.55) 0%, rgba(11,57,79,.92) 100%);
  z-index: 0;
}
#acms-theme-grid .acms-theme-card > .et_pb_module { position: relative; z-index: 1; }
#acms-theme-grid .acms-theme-card .acms-rule { position: relative; z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
#acms-theme-grid .acms-theme-title .et_pb_module_header {
  font: 700 24px/1.3 var(--acms-font);
  color: var(--acms-white);
  padding-bottom: 0;
  text-wrap: pretty;
}
#acms-theme-grid .acms-theme-more p {
  font: 700 14px/1 var(--acms-font);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--acms-yellow);
  padding-bottom: 0;
}

/* ---------- RESEARCH-LINKED PROJECTS ---------- */
#acms-projects-head .et_pb_column { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; }
#acms-projects-head { margin-bottom: 44px !important; }
/* Three separate row containers (for responsive wrapping) can't share one background the way
   a single CSS grid could — a background-in-the-gap hairline only shows up *within* a row;
   the seam *between* rows falls in a plain margin and reads as a gap, not a border. A real
   border on each cell is robust regardless of how the rows wrap, and adjoining cells sharing
   an edge just double up to a slightly thicker hairline, which is intentional-looking, not a bug. */
#acms-projects .acms-project-row {
  display: flex;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
#acms-projects .et_pb_column.acms-project {
  background: var(--acms-white);
  border: 1px solid var(--acms-line);
  padding: 34px 30px;
  margin: 0 !important;
  flex: 1 1 0;
  width: auto !important;
  min-height: 210px;
  display: flex; flex-direction: column; gap: 20px;
  cursor: pointer;
  transition: background-color .2s ease;
}
#acms-projects .et_pb_column.acms-project:hover { background: var(--acms-wash); }
#acms-projects .acms-project-logo { height: 64px; display: flex; align-items: center; margin: 0; }
#acms-projects .acms-project-logo img { max-height: 64px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
#acms-projects .acms-project-name p {
  font: 700 19px/1.4 var(--acms-font);
  color: var(--acms-navy);
  padding-bottom: 0;
}
#acms-projects .acms-project-name { flex: 1; }
#acms-projects .acms-project-more p {
  font: 700 13px/1 var(--acms-font);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--acms-brown);
  padding-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #acms-news .et_pb_blog .et_pb_posts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #acms-theme-grid,
  #acms-projects .acms-project-row { flex-wrap: wrap; }
  #acms-theme-grid .et_pb_column.acms-theme-card,
  #acms-projects .et_pb_column.acms-project { flex: 1 1 calc(50% - 34px); }
  #acms-intro > .et_pb_row,
  #acms-stats > .et_pb_row,
  #acms-study > .et_pb_row { flex-wrap: wrap; }
  #acms-intro .et_pb_column,
  #acms-study .et_pb_column { width: 100% !important; margin-right: 0 !important; margin-bottom: 40px !important; }
}

@media (max-width: 980px) {
  #acms-hero > .et_pb_row { padding: 56px 24px 62px !important; }
  #acms-hero .et_pb_column { gap: 22px; }
  #acms-hero .acms-hero-title .et_pb_module_header,
  #acms-hero h1.et_pb_module_header { font-size: 34px; }
  #acms-hero .et-pb-arrow-prev,
  #acms-hero .et-pb-arrow-next { display: none; }
  /* Mobile row padding is 24px, so match it (keep the centred box, just swap the inset). */
  #acms-hero .et-pb-controllers { bottom: 24px; padding: 0 24px; }
  .acms-h2 .et_pb_module_header, h2.acms-h2 { font-size: 30px; }
  #acms-intro .acms-intro-lead p { font-size: 20px; }
  #acms-stats .acms-stat-big p { font-size: 48px; }
  #acms-stats .acms-stat-n p { font-size: 30px; }
  #acms-stats .et_pb_column { margin-bottom: 24px !important; }
  #acms-theme-grid .et_pb_column.acms-theme-card { min-height: 300px; }
}

@media (max-width: 700px) {
  #acms-news .et_pb_blog .et_pb_posts { grid-template-columns: minmax(0,1fr); }
  #acms-theme-grid .et_pb_column.acms-theme-card,
  #acms-projects .et_pb_column.acms-project { flex: 1 1 100%; }
  #acms-stats > .et_pb_row { flex-wrap: wrap; }
  #acms-stats .et_pb_column { width: 100% !important; margin-right: 0 !important; }
  /* Not enough width for the rule+heading group and the link to sit side by side. */
  #acms-news-head .et_pb_column { grid-template-columns: 1fr; }
  #acms-news-head .et_pb_column > :first-child,
  #acms-news-head .et_pb_column .acms-h2 { grid-column: 1; }
  #acms-news-head .et_pb_column .acms-h2 { grid-row: 2; }
  #acms-news-head .et_pb_column .acms-news-all { grid-column: 1; grid-row: 3; justify-self: start; }
}

/* Divi's Blog module still renders its own WP-native prev/next pager (.pagination.clearfix,
   "Older Entries"/"Newer Entries") even with pagination.advanced.show set to off in the block
   JSON -- that attribute controls Divi's own numbered pager UI, not this fallback. Hide it directly. */
#acms-news .pagination { display: none !important; }