.elementor-kit-1925{--e-global-color-primary:#386D81;--e-global-color-secondary:#386D814D;--e-global-color-text:#000000;--e-global-color-accent:#E1E103;--e-global-color-47997bf:#FFFFFF;--e-global-color-fda7c21:#363636;--e-global-typography-primary-font-family:"Lato";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Lato";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Beyond Infinity";--e-global-typography-accent-font-weight:500;--e-global-typography-03f9124-font-family:"Poppins";--e-global-typography-2f667b6-font-family:"Times New Roman";--e-global-typography-2f667b6-font-weight:600;--e-global-typography-12d4467-font-family:"DM Serif Display";--e-global-typography-12d4467-font-size:60px;--e-global-typography-12d4467-font-weight:400;--e-global-typography-dc25b98-font-family:"Lato";--e-global-typography-dc25b98-font-size:16px;--e-global-typography-dc25b98-font-weight:500;--e-global-typography-dc25b98-text-decoration:none;--e-global-typography-4d9627f-font-family:"Lato";--e-global-typography-4d9627f-font-size:11px;--e-global-typography-4d9627f-font-weight:700;--e-global-typography-4d9627f-text-transform:uppercase;--e-global-typography-4d9627f-line-height:1px;--e-global-typography-4d9627f-letter-spacing:2px;--e-global-typography-52961c7-font-family:"Lato";--e-global-typography-52961c7-font-size:22px;--e-global-typography-52961c7-font-weight:300;--e-global-typography-52961c7-text-transform:capitalize;--e-global-typography-52961c7-letter-spacing:1px;--e-global-typography-4e72a2c-font-family:"DM Sans";--e-global-typography-4e72a2c-font-size:19px;--e-global-typography-4e72a2c-font-weight:500;--e-global-typography-4e72a2c-text-transform:uppercase;--e-global-typography-4e72a2c-letter-spacing:2px;font-family:"Lato", Sans-serif;font-size:16px;font-weight:500;}.elementor-kit-1925 e-page-transition{background-color:#FFBC7D;}.site-header{background-color:var( --e-global-color-primary );padding-inline-end:0px;padding-inline-start:0px;}.elementor-kit-1925 a{color:#0000EE;}.elementor-kit-1925 h1{color:var( --e-global-color-text );font-family:"DM Serif Display", Sans-serif;font-size:60px;font-weight:400;line-height:1.5em;}.elementor-kit-1925 h2{font-family:"DM Serif Display", Sans-serif;font-size:40px;font-weight:400;line-height:1em;}.elementor-kit-1925 h3{font-family:"Lato", Sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;line-height:2em;letter-spacing:3.5px;}.elementor-kit-1925 h4{font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:600;letter-spacing:2px;}.elementor-kit-1925 h5{font-size:18px;font-weight:400;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-1925{--e-global-typography-12d4467-font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ════════════════════════════════════════════════════════════════
   Point Loma Life — Editorial styling for Elementor Posts widget
   (Cards skin)  —  SITE SETTINGS VERSION

   Paste this into:
     Elementor editor → hamburger menu (top-left) →
     Site Settings → Custom CSS

   This version uses `.pll-posts` (the class already on your widget,
   via Advanced → CSS Classes) instead of `.elementor-kit-1925`, so the styles
   load as part of the global Elementor CSS bundle and bypass the
   per-widget cache that was causing the editor and front-end to
   render differently.

   IMPORTANT — DELETE whatever CSS is currently in the Posts widget's
   own Advanced → Custom CSS field, otherwise both will apply.
   ════════════════════════════════════════════════════════════════ */


/* ── PARENT SECTION/COLUMN BACKGROUND ────────────────────────────
   The widget is constrained to 1360px wide and centered. The area
   to the LEFT and RIGHT of it shows whatever color the parent
   Section/Column has. Force any Section, Column, or Container that
   contains block1 OR the posts widget to be white so the sides
   match the widget background.

   :has() works in all modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+). If your readers' browsers are older, set the
   Section/Column background manually in Elementor UI instead. */
.elementor-section:has(.pll-posts),
.elementor-section:has(.pll-posts-list),
.elementor-section:has(.pll-b1),
.elementor-section:has(.pll-b2),
.elementor-section:has(.pll-b3),
.elementor-section:has(.pll-b4),
.elementor-section:has(.pll-about),
.elementor-section:has(.pll-buyers),
.elementor-section:has(.pll-contact),
.elementor-section:has(.pll-events),
.elementor-section:has(.pll-lifestyle),
.elementor-section:has(.pll-nbhd),
.elementor-section:has(.pll-outdoors),
.elementor-section:has(.pll-privacy),
.elementor-section:has(.pll-re),
.elementor-section:has(.pll-eats),
.elementor-section:has(.pll-sellers),
.elementor-column:has(.pll-posts),
.elementor-column:has(.pll-posts-list),
.elementor-column:has(.pll-b1),
.elementor-column:has(.pll-b2),
.elementor-column:has(.pll-b3),
.elementor-column:has(.pll-b4),
.elementor-column:has(.pll-about),
.elementor-column:has(.pll-buyers),
.elementor-column:has(.pll-contact),
.elementor-column:has(.pll-events),
.elementor-column:has(.pll-lifestyle),
.elementor-column:has(.pll-nbhd),
.elementor-column:has(.pll-outdoors),
.elementor-column:has(.pll-privacy),
.elementor-column:has(.pll-re),
.elementor-column:has(.pll-eats),
.elementor-column:has(.pll-sellers),
.elementor-element-populated:has(.pll-posts),
.elementor-element-populated:has(.pll-posts-list),
.elementor-element-populated:has(.pll-b1),
.elementor-element-populated:has(.pll-b2),
.elementor-element-populated:has(.pll-b3),
.elementor-element-populated:has(.pll-b4),
.elementor-element-populated:has(.pll-about),
.elementor-element-populated:has(.pll-buyers),
.elementor-element-populated:has(.pll-contact),
.elementor-element-populated:has(.pll-events),
.elementor-element-populated:has(.pll-lifestyle),
.elementor-element-populated:has(.pll-nbhd),
.elementor-element-populated:has(.pll-outdoors),
.elementor-element-populated:has(.pll-privacy),
.elementor-element-populated:has(.pll-re),
.elementor-element-populated:has(.pll-eats),
.elementor-element-populated:has(.pll-sellers),
.e-con:has(.pll-posts),
.e-con:has(.pll-posts-list),
.e-con:has(.pll-b1),
.e-con:has(.pll-b2),
.e-con:has(.pll-b3),
.e-con:has(.pll-b4),
.e-con:has(.pll-about),
.e-con:has(.pll-buyers),
.e-con:has(.pll-contact),
.e-con:has(.pll-events),
.e-con:has(.pll-lifestyle),
.e-con:has(.pll-nbhd),
.e-con:has(.pll-outdoors),
.e-con:has(.pll-privacy),
.e-con:has(.pll-re),
.e-con:has(.pll-eats),
.e-con:has(.pll-sellers) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Block 3b is special — its top section is navy. The navy needs to
   bleed edge-to-edge, so we force the parent Section/Container to
   navy AND remove any container width constraint on it. The Around
   section inside .pll-b3b has its own white treatment. */
.elementor-section:has(.pll-b3b),
.elementor-column:has(.pll-b3b),
.elementor-element-populated:has(.pll-b3b),
.e-con:has(.pll-b3b) {
  background: #154c79 !important;
  background-color: #154c79 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elementor-section:has(.pll-b3b) > .elementor-container,
.e-con:has(.pll-b3b) {
  max-width: none !important;
  width: 100% !important;
}

/* Also kill any background overlay on those parents (your column
   data showed a 50% white overlay set on it which can tint the
   appearance) */
.elementor-section:has(.pll-posts) > .elementor-background-overlay,
.elementor-section:has(.pll-posts-list) > .elementor-background-overlay,
.elementor-section:has([class*="pll-b"]) > .elementor-background-overlay,
.elementor-column:has(.pll-posts) > .elementor-element-populated > .elementor-background-overlay,
.elementor-column:has(.pll-posts-list) > .elementor-element-populated > .elementor-background-overlay,
.elementor-column:has([class*="pll-b"]) > .elementor-element-populated > .elementor-background-overlay {
  display: none !important;
}


/* ── WIDGET CONTAINER ────────────────────────────────────────────
   Force BOTH the widget wrapper AND its inner container to match
   block1's 1360px content width with 40px side padding. This works
   regardless of whatever Section/Column wraps the widget — no need
   to mess with Section settings.

   White background, overflow:visible, left-aligned text.
   margin/border zeroed on top so no beige line shows from the theme
   body color or default widget border. */
.pll-posts,
.pll-posts .elementor-widget-container {
  background: #ffffff !important;
  max-width: 1360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  overflow: visible !important;
  text-align: left !important;
  border: 0 !important;
  outline: 0 !important;
}
.pll-posts {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
.pll-posts .elementor-widget-container {
  padding: 40px 40px 96px !important;
}
@media (max-width: 960px) {
  .pll-posts .elementor-widget-container {
    padding: 32px 24px 64px !important;
  }
}

/* ── GRID ────────────────────────────────────────────────────────
   Desktop: 3 columns / Tablet: 2 columns / Mobile: 1 column. */
.pll-posts .elementor-posts.elementor-grid,
.pll-posts .elementor-posts-container {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
  display: grid !important;
}
/* Tablet (601px–960px) — 2 columns, hide 3rd post (and any after)
   so the row is balanced 2-up instead of leaving a lonely card */
@media (max-width: 960px) {
  .pll-posts .elementor-posts.elementor-grid,
  .pll-posts .elementor-posts-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  .pll-posts .elementor-post:nth-child(n+3) {
    display: none !important;
  }
}
/* Mobile (≤600px) — 1 column with shorter image so it isn't huge */
@media (max-width: 600px) {
  .pll-posts .elementor-posts.elementor-grid,
  .pll-posts .elementor-posts-container {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .pll-posts .elementor-post__thumbnail__link,
  .pll-posts .elementor-post__thumbnail {
    aspect-ratio: 3/2 !important; /* shorter, wider image on phones */
  }
}

/* ── CARD WRAPPER — strip Elementor's defaults ──────────────────── */
.pll-posts .elementor-post,
.pll-posts .elementor-post__card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Kill the Elementor "gradient" hover effect that fades over the card */
.pll-posts .elementor-post__card::before,
.pll-posts .elementor-post__card::after,
.pll-posts .elementor-post::before,
.pll-posts .elementor-post::after {
  display: none !important;
  content: none !important;
}

/* ── THUMBNAIL — 4:5 aspect, sits flush at top ─────────────────── */
.pll-posts .elementor-post__thumbnail__link {
  display: block !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.pll-posts .elementor-post__thumbnail {
  aspect-ratio: 4/5 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  background: #e6eef3 !important;
  border-radius: 0 !important;
  display: block !important;
  position: relative !important;
}
.pll-posts .elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important; /* kill Elementor's translate(-50%, -50%) */
  margin: 0 !important;
}

/* ── BADGE — repositioned inline as eyebrow text (not absolute) ── */
.pll-posts .elementor-post__badge {
  position: static !important;
  display: block !important;
  font-family: "Fraunces", "Times New Roman", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  color: rgba(106,106,102,0.6) !important;
  background: transparent !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
}

/* ── AVATAR — hide it (doesn't fit the editorial look) ─────────── */
.pll-posts .elementor-post__avatar,
.pll-posts .elementor-post__avatar img {
  display: none !important;
}

/* ── TEXT BLOCK ─────────────────────────────────────────────────── */
.pll-posts .elementor-post__text {
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
  flex: 1;
}

/* ── TITLE — Fraunces 300, navy, teal on hover ─────────────────── */
.pll-posts .elementor-post__title,
.pll-posts h2.elementor-post__title,
.pll-posts h3.elementor-post__title,
.pll-posts h4.elementor-post__title {
  font-family: "Fraunces", "Times New Roman", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  color: #154c79 !important;
}
.pll-posts .elementor-post__title a,
.pll-posts .elementor-post__title a:visited {
  color: #154c79 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 200ms;
}
.pll-posts .elementor-post:hover .elementor-post__title a,
.pll-posts .elementor-post__title a:hover {
  color: #386d81 !important;
}

/* ── EXCERPT (if you turn it on in the widget) ─────────────────── */
.pll-posts .elementor-post__excerpt { margin: 0 !important; padding: 0 !important; }
.pll-posts .elementor-post__excerpt p {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #6A6A66 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* ── META ROW — date + comments — eyebrow style ────────────────── */
.pll-posts .elementor-post__meta-data {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(106,106,102,0.6) !important;
  font-weight: 500 !important;
  text-align: left !important;
  display: block !important;
}
.pll-posts .elementor-post__meta-data span,
.pll-posts .elementor-post-date,
.pll-posts .elementor-post-avatar /* Elementor reuses this class for "No Comments" */ {
  color: rgba(106,106,102,0.6) !important;
  font-weight: 500 !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  display: inline !important;
}

/* ── READ MORE (if you turn it on) ─────────────────────────────── */
.pll-posts .elementor-post__read-more,
.pll-posts a.elementor-post__read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #386d81 !important;
  border-bottom: 1px solid rgba(56,109,129,0.4) !important;
  padding: 0 0 4px 0 !important;
  background: transparent !important;
  text-decoration: none !important;
}
.pll-posts .elementor-post__read-more::after { content: "→"; transition: transform 220ms; }
.pll-posts .elementor-post__read-more:hover { border-bottom-color: #386d81 !important; }
.pll-posts .elementor-post__read-more:hover::after { transform: translateX(4px); }

/* ── PAGINATION ─────────────────────────────────────────────────── */
.pll-posts .elementor-pagination {
  margin-top: 48px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}
.pll-posts .elementor-pagination .page-numbers {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6A6A66 !important;
  border: 1px solid #e6eef3 !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
}
.pll-posts .elementor-pagination .page-numbers.current,
.pll-posts .elementor-pagination .page-numbers:hover {
  color: #154c79 !important;
  border-color: #154c79 !important;
}

/* ── MOBILE ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pll-posts .elementor-post__title,
  .pll-posts h2.elementor-post__title,
  .pll-posts h3.elementor-post__title,
  .pll-posts h4.elementor-post__title { font-size: 22px !important; }
}


/* ════════════════════════════════════════════════════════════════
   .pll-posts-list — VERTICAL TEXT LIST (no images)
   For the Posts widget in the RIGHT column of block3. The widget
   should be configured as:
     • Skin: Classic
     • Image / Thumbnail: None
     • Show Title ✓, Show Excerpt ✗, Show Meta ✓, Show Read More ✓
     • Columns: 1
     • CSS Classes: pll-posts-list
   ════════════════════════════════════════════════════════════════ */

/* Widget container — flush, no extra padding (column already has it) */
.pll-posts-list,
.pll-posts-list .elementor-widget-container {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Single column, generous vertical spacing between items */
.pll-posts-list .elementor-posts-container,
.pll-posts-list .elementor-posts.elementor-grid {
  display: block !important;
  grid-template-columns: 1fr !important;
}

/* Each post is a vertical block with a hairline divider beneath */
.pll-posts-list .elementor-post {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e6eef3 !important;
  padding: 28px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
  transition: padding 220ms;
}
.pll-posts-list .elementor-post:first-child { padding-top: 0 !important; }
.pll-posts-list .elementor-post:last-child { border-bottom: 0 !important; }

/* Hide image, avatar, badge if accidentally enabled */
.pll-posts-list .elementor-post__thumbnail__link,
.pll-posts-list .elementor-post__thumbnail,
.pll-posts-list .elementor-post__avatar,
.pll-posts-list .elementor-post__badge {
  display: none !important;
}

/* Subtle hover indent for "this is clickable" */
.pll-posts-list .elementor-post:hover { padding-left: 12px !important; }
.pll-posts-list .elementor-post:hover .elementor-post__title a { color: #386d81 !important; }
.pll-posts-list .elementor-post:hover .elementor-post__read-more::after { transform: translateX(4px); }

/* Text block */
.pll-posts-list .elementor-post__text {
  padding: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

/* Title — Fraunces 300, navy, sentence case (mirrors block1's .article-title) */
.pll-posts-list .elementor-post__title,
.pll-posts-list h2.elementor-post__title,
.pll-posts-list h3.elementor-post__title,
.pll-posts-list h4.elementor-post__title {
  font-family: "Fraunces", "Times New Roman", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}
.pll-posts-list .elementor-post__title a,
.pll-posts-list .elementor-post__title a:visited {
  color: #154c79 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 200ms;
}

/* Meta row — eyebrow style */
.pll-posts-list .elementor-post__meta-data {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(106,106,102,0.6) !important;
  font-weight: 500 !important;
  display: block !important;
}
.pll-posts-list .elementor-post-date,
.pll-posts-list .elementor-post-author,
.pll-posts-list .elementor-post-avatar {
  color: rgba(106,106,102,0.6) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* Read More — small teal arrow link */
.pll-posts-list .elementor-post__read-more,
.pll-posts-list a.elementor-post__read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  padding: 0 !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #386d81 !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
}
.pll-posts-list .elementor-post__read-more::after {
  content: "→";
  transition: transform 220ms;
  font-size: 12px;
}
.pll-posts-list .elementor-post__read-more:hover { color: #154c79 !important; }

/* Tablet — give the list breathing room from the edges */
@media (max-width: 960px) {
  .pll-posts-list .elementor-widget-container {
    padding: 0 24px !important;
  }
  /* Disable the hover indent on touch devices so titles don't get
     pushed off-screen when finger lands on them */
  .pll-posts-list .elementor-post:hover {
    padding-left: 0 !important;
  }
}

/* Phone — slightly tighter padding + smaller title */
@media (max-width: 480px) {
  .pll-posts-list .elementor-widget-container {
    padding: 0 20px !important;
  }
  .pll-posts-list .elementor-post {
    padding: 22px 0 !important;
  }
  .pll-posts-list .elementor-post__title,
  .pll-posts-list h2.elementor-post__title,
  .pll-posts-list h3.elementor-post__title,
  .pll-posts-list h4.elementor-post__title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  .pll-posts-list .elementor-post__meta-data,
  .pll-posts-list .elementor-post__read-more {
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
  }
}




/* ════════════════════════════════════════════════════════════════
   .pll-posts-tinted — background MODIFIER
   Add this class IN ADDITION to `pll-posts` on a Posts widget when
   you want the widget background to be the soft blue tint
   (#f4f8fb) instead of white — so the widget visually flows under
   a tinted section above it (like the "Upcoming events" header on
   the Events page).

   On the widget Advanced → CSS Classes field, type both:
     pll-posts pll-posts-tinted
   ════════════════════════════════════════════════════════════════ */

/* Widget itself */
.pll-posts.pll-posts-tinted,
.pll-posts.pll-posts-tinted .elementor-widget-container {
  background: #f4f8fb !important;
  background-color: #f4f8fb !important;
}

/* Parent Section / Column / Container — override the white :has() rule */
.elementor-section:has(.pll-posts-tinted),
.elementor-column:has(.pll-posts-tinted),
.elementor-element-populated:has(.pll-posts-tinted),
.e-con:has(.pll-posts-tinted) {
  background: #f4f8fb !important;
  background-color: #f4f8fb !important;
}/* End custom CSS */