/*
Theme Name: Hotspot Digital Child Theme
Theme URI: https://www.hotspot.digital
Version: 1.0
Description: Child Theme developed by Hotspot Digital
Author: Hotspot Digital
Author URI: https://www.hotspot.digital
Template: Divi
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*____________________ STANDARD CSS TO REMAIN ____________________*/

.et_pb_contact_right p input {
    max-width: 55px !important;
}
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: normal !important;
}

/* Change these px values for Jumping posts 
#page-container {
    padding-top: 114px !important;
}
/* if you have top header remove this comment
   #main-header {
    top: 32px !important;
} */

/* Force footer on short pages to fill the screen. */
#page-container:not(.et-tb-has-template) {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.et-tb-has-template #page-container #et-boc {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
#et-main-area {
    display: flex;
    flex-flow: column;
}
#et-main-area, #main-content {
    flex: 1 0 auto;
}
.logged-in #page-container:not(.et-tb-has-template) {
    min-height: calc(100vh - 30px);
}
.logged-in.et-tb-has-template #page-container #et-boc {
    min-height: calc(100vh - 30px);
}

/* correcting spacing for lists */
.entry-content ol, .entry-content ul {
    padding: 30px 0px 30px 50px;
    list-style-position: outside;
}
.entry-content ol li, .entry-content ul li {
    margin-bottom: 10px;
}

/* Forminator Float Button Right */
.forminator-row-last .forminator-field {
    display: flex;
    justify-content: flex-end;
}

/*_________________MEDIA QUERIES IF YOU WANT TO USE___________________*/

/* Responsive Styles Large Desktop And Above */
@media all and (min-width: 1405px) {
}

/* Responsive Styles Smartphone Portrait */
@media all and (max-width: 479px) {
}

/* Responsive Styles Smartphone Only */
@media all and (max-width: 767px) {
}

/* Responsive Styles Tablet Only */
@media all and (min-width: 768px) and (max-width: 980px) {
}

/* Responsive Styles Tablet And Below */
@media all and (max-width: 980px) {
}

/* Responsive Styles 981px – 1100px */
@media all and (min-width: 981px) and (max-width: 1100px) {
}

/* Responsive Styles Desktop Only */
@media all and (min-width: 981px) {
}

/* Responsive Styles Standard Desktop Only */
@media all and (min-width: 981px) and (max-width: 1405px) {
}

/*____________________ ADD CSS AFTER THIS ____________________*/ 
/*____________________ DESIGN SYSTEM (Task 4) ____________________*/
/* Source of truth: build/design_system.py — a rebrand is a one-value change here
   plus the matching Divi Design Variables (Colors/Fonts/Text groups, see
   build/reference/variables-schema.json for the harvested option shape). */

:root {
  /* Palette */
  --color-primary: #C63170;
  --color-primary-dark: #A6265C;
  --color-plum: #2B1220;
  --color-ink: #14161A;
  --color-muted: #6B6560;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F4F1;
  --color-line: #E4DFDA;
  --color-solar-blue: #002B7F;
  --color-solar-yellow: #FFC20E;

  /* Fonts */
  --font-heading: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max). h1 is the spec value; h2-h6
     interpolate down to the fixed small/caption size. */
  --text-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --text-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --text-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-h5: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-h6: 1rem;
  --text-body: 1.0625rem; /* 17px */
  --text-small: 0.875rem; /* 14px */

  /* Generous section spacing */
  --space-section-desktop: clamp(96px, 8vw, 140px);
  --space-section-mobile: clamp(64px, 12vw, 80px);

  /* Body copy measure */
  --measure-body: 68ch;
}

body, p, li, a, span, input, textarea, select, button {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

body, p {
  font-size: var(--text-body);
  line-height: 1.65;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

small, .text-small { font-size: var(--text-small); }

/* Body copy measure — a ceiling, not a fixed width, so it never fights a narrower
   column. */
.entry-content p,
.entry-content li,
.et_pb_post_content p,
.measure-body {
  max-width: var(--measure-body);
}

/* Keyboard-navigation focus ring, in the brand accent — never suppressed. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/*____________________ TARGER PROPERTIES — LAYOUT ____________________*/

/* Header ------------------------------------------------------------ */
/* Divi's native header, wearing the brand. The menu lives in Appearance >
   Menus so Neil can reorder it without touching a builder. */
#main-header {
  box-shadow: 0 1px 0 var(--color-line);
}
#logo { max-height: 62px !important; }
#top-menu li a { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.01em; }
#top-menu li.current-menu-item > a,
#top-menu li.current_page_parent > a { color: var(--color-primary) !important; }

/* The last nav item is the call to action, so it should look like one. */
#top-menu li:last-child > a {
  background: var(--color-primary);
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: 4px;
  transition: background 0.18s ease;
}
#top-menu li:last-child > a:hover { background: var(--color-primary-dark); opacity: 1; }

/* Heroes ------------------------------------------------------------ */
/* A scrim, not a wash: the photographs are 2013 phone snapshots with flat
   light, and white type sitting straight on them is unreadable. The gradient
   is weighted to the left, where the headline sits and the sky is clearest. */
#home-hero {
  position: relative;
  min-height: min(76vh, 640px);
  display: flex;
  align-items: center;
  background-size: cover !important;
  background-position: center 62% !important;
}
#home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(43, 18, 32, 0.92) 0%,
              rgba(43, 18, 32, 0.72) 42%,
              rgba(43, 18, 32, 0.28) 100%);
  pointer-events: none;
}
#home-hero > .et_pb_row { position: relative; z-index: 1; width: 90%; max-width: 1180px; }
#home-hero h1 {
  /* Wide enough for "townhouses," to sit on one line at desktop — a five-line
     headline reads as a wall, not a statement. */
  font-size: clamp(2rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.08;
  max-width: 22ch;
  margin-bottom: 0.55em;
}
#home-hero .standfirst {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.55;
  max-width: 46ch;
  opacity: 0.94;
}
#home-hero .et_pb_button { margin-top: 1.6rem; }

/* Inside pages: a quiet band, not a second hero competing with the home page. */
#page-hero, #solar-hero { padding: clamp(56px, 7vw, 88px) 0 clamp(48px, 6vw, 72px); }
#page-hero h1, #solar-hero h1 { margin-bottom: 0.35em; }
#page-hero .standfirst, #solar-hero .standfirst {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.5;
}

/* Trust bar --------------------------------------------------------- */
#trust-bar { padding: clamp(40px, 4vw, 56px) 0; border-bottom: 1px solid var(--color-line); }
#trust-bar .et_pb_column { display: flex; flex-direction: column; gap: 0.2rem; }
#trust-bar h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--color-primary);
  margin: 0;
}
#trust-bar p { margin: 0; color: var(--color-muted); font-size: 0.95rem; line-height: 1.45; }

/* Help cards -------------------------------------------------------- */
/* Equal height with the button pinned to the bottom, so four cards of unequal
   copy still line up. This is the pattern the client will duplicate, so it has
   to survive him writing a longer sentence than we did.
   Scoped to the cards row only — the section heading sits in its own row and
   must not inherit the card frame. */
#how-can-we-help .et_pb_row:last-child { align-items: stretch; }
#how-can-we-help .et_pb_row:last-child .et_pb_column {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
#how-can-we-help .et_pb_row:last-child .et_pb_column:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -18px rgba(43, 18, 32, 0.5);
}
#how-can-we-help .et_pb_row:last-child h3 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.55rem;
}
#how-can-we-help .et_pb_row:last-child .et_pb_text {
  flex: 1 0 auto;
}
#how-can-we-help .et_pb_row:last-child p {
  color: var(--color-muted);
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
}
#how-can-we-help .et_pb_button_module_wrapper { margin-top: auto; padding-top: 1.15rem; }
#how-can-we-help .et_pb_button {
  border: 0;
  padding: 0 !important;
  background: transparent;
  color: var(--color-primary);
  font-weight: 500;
}
#how-can-we-help .et_pb_button:hover { background: transparent; color: var(--color-primary-dark); }
#how-can-we-help > .et_pb_row:first-child { margin-bottom: 8px; }

/* Footer template --------------------------------------------------- */
.et-l--footer h2, .et-l--footer h3 { color: #fff; }
.et-l--footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.et-l--footer a:hover { border-bottom-color: #fff; }
.et-l--footer .footer-nav { list-style: none !important; padding: 0 !important; }
.et-l--footer .footer-nav li { line-height: 2; }

/* The solar band is the sub-brand's, so it keeps the sub-brand's colours. */
#solar-band h2, .et-l--footer .et_pb_section:first-child h2 { color: var(--color-solar-yellow); }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.35rem !important;
}

/* Team ------------------------------------------------------------- */
/* Monogram cards. Real headshots drop straight in above the name later
   without the layout changing. */
.et_pb_column .team-role { color: var(--color-muted); font-size: 0.9rem; margin: 0; }

/* Buttons ----------------------------------------------------------- */
.et_pb_button {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 4px;
}

/* Mobile ------------------------------------------------------------ */
@media (max-width: 980px) {
  #home-hero { min-height: 60vh; }
  #home-hero::before {
    background: linear-gradient(180deg, rgba(43,18,32,0.86) 0%, rgba(43,18,32,0.78) 100%);
  }
  #how-can-we-help .et_pb_column { margin-bottom: 18px; }
  #how-can-we-help .et_pb_column h3 { min-height: 0; }
  #trust-bar .et_pb_column { margin-bottom: 22px; text-align: center; }
}


/* Divi's page template prints the post title above the builder content. Every page
   here opens with its own hero carrying the h1, so the template title is a duplicate
   heading — bad for a screen reader and worse for the design. Divi's _et_pb_show_title
   meta does not suppress it on this template, so it goes here. */
.page .et_post_meta_wrapper > h1.entry-title,
.page h1.main_title {
  display: none;
}

/*____________________ SECTION BACKGROUNDS ____________________*/
/* Divi scopes some generated section rules to `.et-l--post > .et_builder_inner_content`
   wrappers that this theme does not emit, so those rules never match and the section
   renders white. Rather than fight the scoping, the backgrounds that matter are pinned
   here against CSS IDs the build controls. Divi's own attributes stay in place so the
   builder still shows the right colour to whoever opens it. */

#solar-band {
  background-color: var(--color-solar-blue) !important;
  padding: clamp(56px, 6vw, 80px) 0;
}
#solar-band h2 { color: var(--color-solar-yellow) !important; }
#solar-band p, #solar-band .et_pb_text { color: #fff; }
#solar-band .et_pb_row { align-items: center; }

#partner-strip {
  background-color: var(--color-bg-alt) !important;
  border-top: 1px solid var(--color-line);
}
#partner-strip p { margin: 0; }
#partner-strip strong { color: var(--color-ink); }

#site-footer {
  background-color: var(--color-plum) !important;
  padding: clamp(56px, 6vw, 84px) 0 clamp(28px, 3vw, 40px);
  color: #fff;
}
#site-footer p, #site-footer li, #site-footer h3 { color: #fff; }
#site-footer .et_pb_row:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 22px;
  margin-top: 34px;
}
#site-footer .et_pb_row:last-child p { font-size: 0.86rem; opacity: 0.75; margin: 0; }

/* Alternating content bands. */
[id^="band-alt-"] { background-color: var(--color-bg-alt) !important; }

/* Section rhythm: generous, and consistent between bands. */
.et-db #et-boc .et_pb_section { padding: clamp(56px, 6vw, 92px) 0; }
.et-db #et-boc #home-hero { padding: 0; }
.et-db #et-boc #trust-bar { padding: clamp(40px, 4vw, 56px) 0; }

/*____________________ CORRECTIONS ____________________*/

/* The hero section is display:flex to centre its content vertically, which made the
   row a flex item that shrank to its widest word — a headline 145px wide wrapping
   every two words. The row has to be told to take the full line. */
#home-hero .et_pb_row {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 90%;
  max-width: 1180px;
}
#home-hero h1 { max-width: 20ch; }

/* The help band is an alternating band but carries its own ID, so it misses the
   [id^="band-alt-"] rule. */
#how-can-we-help { background-color: var(--color-bg-alt) !important; }
#how-can-we-help .et_pb_row:last-child .et_pb_column { background: #fff; }

/* Footer links inherit Divi's global link colour, which is the brand magenta — and
   magenta on plum is 2.2:1, well under AA. On a dark ground the links are white. */
#site-footer a { color: #fff !important; }
#site-footer a:hover { border-bottom-color: #fff; }
#site-footer .et_pb_image { margin-bottom: 1.1rem; }
#site-footer h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }

/* Solar band copy needs the same treatment on its blue ground. */
#solar-band a { color: #fff; }

/*____________________ BLOG ____________________*/
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-plum);
}
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Article measure and rhythm — a 958-word post needs to be readable, not wide. */
.single-post .et_pb_text_inner > p,
.single-post .et_pb_text_inner > ul { max-width: 72ch; }
.single-post .et_pb_text_inner h3 { margin-top: 2rem; }
.single-post .et_pb_text_inner h4,
.single-post .et_pb_text_inner h5,
.single-post .et_pb_text_inner h6 {
  margin-top: 1.6rem;
  font-size: 1.05rem;
  color: var(--color-ink);
}
.single-post .et_pb_text_inner strong { color: var(--color-ink); }

/* Blog index cards */
.et_pb_blog_grid .et_pb_post {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  overflow: hidden;
  padding: 0 0 22px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.et_pb_blog_grid .et_pb_post:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.et_pb_blog_grid .et_pb_post .entry-featured-image-url { margin-bottom: 18px; }
.et_pb_blog_grid .et_pb_post .entry-title { padding: 0 22px; font-size: 1.15rem; line-height: 1.3; }
.et_pb_blog_grid .et_pb_post .post-content { padding: 0 22px; color: var(--color-muted); }
.et_pb_blog_grid .et_pb_post .post-meta { padding: 0 22px; font-size: 0.82rem; }

/* Forminator ships a blue submit button; this site does not have a blue. */
.forminator-ui .forminator-button-submit,
.forminator-ui.forminator-custom-form .forminator-button-submit {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}
.forminator-ui .forminator-button-submit:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}
.forminator-ui .forminator-label { font-family: var(--font-heading) !important; }

/* Post title block */
.single-post .et_post_meta_wrapper h1 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.12;
  max-width: 22ch;
}
.single-post .et_post_meta_wrapper { padding-bottom: 8px; }

/*____________________ TEAM ____________________*/
/* Monogram cards. Without an explicit card box the columns are different heights and
   the two rows interleave — a name from row two riding up beside a role from row one. */
#team .et_pb_row { align-items: stretch; margin-bottom: 22px; }
/* The first row is the section heading, not a card — it must not get the card frame
   or the monogram circle treatment. */
#team .et_pb_row:first-child { margin-bottom: 10px; }
#team .et_pb_row:first-child .et_pb_column {
  background: none; border: 0; padding: 0; display: block; text-align: left;
}
#team .et_pb_row:first-child .et_pb_module_header {
  display: block; width: auto; height: auto; margin: 0; background: none;
  border-radius: 0; color: var(--color-ink); font-size: inherit;
}
#team .et_pb_row:not(:first-child) .et_pb_column {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 26px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#team .et_pb_row:not(:first-child) .et_pb_column .et_pb_heading:first-child .et_pb_module_header {
  /* the monogram tile */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 1.4rem;
  line-height: 1;
}
#team .et_pb_row:not(:first-child) h4 { font-size: 1.02rem; margin: 0 0 4px; line-height: 1.25; }
#team .team-role { color: var(--color-muted); font-size: 0.86rem; line-height: 1.35; margin: 0; }
#team .et_pb_heading, #team .et_pb_text { width: 100%; }

@media (max-width: 980px) {
  #team .et_pb_column { margin-bottom: 16px; }
}

/*____________________ BLOG POST TEMPLATE ____________________*/
/* The post layout now lives in the Theme Builder and the post itself is plain
   Gutenberg, so these rules style whatever Neil writes rather than a fixed structure. */

#post-header { padding: clamp(48px, 5vw, 72px) 0 clamp(32px, 4vw, 48px); }
#post-header h1 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.12;
  max-width: 22ch;
  margin-bottom: 0.4em;
}
#post-header .et_pb_title_meta_container {
  color: var(--color-muted);
  font-size: 0.9rem;
}

#post-featured { padding: 0; }
/* Align the featured image with the article column rather than the page — a
   1180px image above an 820px article reads as two unrelated widths. */
#post-featured .et_pb_row { width: 100%; max-width: 820px; }
#post-featured img { width: 100%; height: auto; border-radius: 6px; display: block; }

#post-body { padding: clamp(40px, 4.5vw, 64px) 0 clamp(48px, 5vw, 72px); }
#post-body .et_pb_row { max-width: 820px; }

/* Gutenberg content inside Divi's post-content module. */
#post-body .et_pb_post_content > p,
#post-body .et_pb_post_content > ul,
#post-body .et_pb_post_content > ol {
  max-width: 72ch;
  margin-bottom: 1.15em;
}
#post-body .et_pb_post_content > h2 {
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
  margin: 2.4rem 0 0.7rem;
  line-height: 1.2;
}
#post-body .et_pb_post_content > h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  margin: 2rem 0 0.6rem;
}
#post-body .et_pb_post_content > h4,
#post-body .et_pb_post_content > h5,
#post-body .et_pb_post_content > h6 {
  font-size: 1.05rem;
  margin: 1.7rem 0 0.5rem;
  color: var(--color-ink);
}
#post-body .et_pb_post_content strong { color: var(--color-ink); }
#post-body .et_pb_post_content a { color: var(--color-primary); }
#post-body .et_pb_post_content ul { padding-left: 1.2em; }
#post-body .et_pb_post_content li { margin-bottom: 0.4em; }

/* A pasted YouTube link becomes a core/embed block — keep it 16:9 and tidy. */
#post-body .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
#post-body .wp-block-embed__wrapper iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px;
}
#post-body .wp-block-embed { margin: 2rem 0; max-width: 820px; }

#post-cta { padding: clamp(48px, 5vw, 72px) 0; }

/*____________________ BLOG INDEX GRID ____________________*/
/* Divi 5's grid blog module keeps three fixed columns at every width — at 390px the
   cards were 82px wide and titles wrapped to one or two characters per line. The
   wrapper is `.et_pb_blog_posts.et_grid_module`; there is no `.et_pb_blog_grid` class
   on this version, which is what an earlier attempt at this assumed. */
.et_pb_blog_posts.et_grid_module {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px;
}
.et_pb_blog_posts.et_grid_module .et_pb_post {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}
.et_pb_blog_posts.et_grid_module .et_pb_post .entry-featured-image-url img {
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .et_pb_blog_posts.et_grid_module {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 780px) {
  .et_pb_blog_posts.et_grid_module {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* SureCookie's blocked-content placeholder is a white card with a green button — on the
   plum footer it reads as a broken element. Make it belong. */
.et-l--footer [class*="surecookie"][class*="placeholder"],
#site-footer [class*="surecookie"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-radius: 6px;
}

/* Featured cards are typographic — the title is the artwork, so it must not be cropped.
   Divi's grid clips the image to its own ratio; `contain` on the card's own plum keeps
   the whole thing visible whichever size variant the browser picks. */
.et_pb_blog_posts.et_grid_module .entry-featured-image-url {
  display: block;
  aspect-ratio: 1200 / 750;
  background: var(--color-plum);
  overflow: hidden;
}
.et_pb_blog_posts.et_grid_module .entry-featured-image-url img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}

/*____________________ SURECOOKIE PLACEHOLDER ____________________*/
/* Blocked embeds show the real video thumbnail (placeholder_video_thumbnails is on),
   so they read as a video rather than an empty box. The default button is green,
   which belongs to no part of this brand. */
[class*="surecookie"] button,
[class*="surecookie"] .surecookie-placeholder__button,
[class*="surecookie"] a[class*="button"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}
[class*="surecookie"] button:hover,
[class*="surecookie"] .surecookie-placeholder__button:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}