/*
Theme Name:  CMG Kadence 2026
Template:    kadence
Description: CMG child theme for Pumps & Systems, based on Kadence.
Version:     1.0.0
Author:      Cahaba Media Group
*/

/* cmg-gradient-overlay — bottom-to-top dark gradient on Kadence imageoverlay cards.
   Kadence sets opacity:0 on .kt-image-overlay-color-wrapper via scoped block CSS;
   we override that and hide the solid color layer so only our gradient shows. */
.cmg-gradient-overlay .kt-image-overlay-color-wrapper {
    opacity: 1 !important;
}
.cmg-gradient-overlay .kt-image-overlay-color {
    display: none;
}
.cmg-gradient-overlay .kt-image-overlay-color-wrapper::before,
.cmg-gradient-overlay .kt-image-overlay-color-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.cmg-gradient-overlay .kt-image-overlay-color-wrapper::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.80) 0px,
        rgba(0, 0, 0, 0.65) 40px,
        rgba(0, 0, 0, 0.35) 110px,
        rgba(0, 0, 0, 0.10) 190px,
        transparent 270px
    );
}
.cmg-gradient-overlay .kt-image-overlay-color-wrapper::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.90) 0px,
        rgba(0, 0, 0, 0.80) 60px,
        rgba(0, 0, 0, 0.50) 140px,
        rgba(0, 0, 0, 0.15) 220px,
        transparent 310px
    );
    opacity: 0;
    transition: opacity 0.5s ease;
}
.cmg-gradient-overlay:hover .kt-image-overlay-color-wrapper::after {
    opacity: 1;
}

/* Topics mega menu (Kadence element "Mega Menu - Topics", left pane gpmt_left).
   The topic links fill down each column (A–G left, G–W right) instead of across rows,
   so the alphabetical order reads naturally. #main-header outranks Kadence's
   navigation grid rule. */
#main-header .kadence-columngpmt_left ul.kb-navigation.menu {
    display: block;
    columns: 2;
    column-gap: 20px;
}
#main-header .kadence-columngpmt_left ul.kb-navigation.menu > li {
    break-inside: avoid;
}

/* Hero image — a fixed 16:9 box at every breakpoint
   (the ratios set on the hero Image Card, whose "Use ratio size" must stay OFF: the
   absence of kt-over-set-ratio is how this rule and cmg_thumbnail_override() tell the
   hero from grid cards).
   With a dynamic featured image Kadence ignores the card's fixed size and writes
   .kt-img-overlay{blockId}{postId} .kt-image-overlay-wrap .kt-block-intrisic { padding-bottom: <image h/w> }
   per post, so the hero took each lead image's own shape (78% for a 768x600 photo).
   aspect-ratio loses to padding-bottom+height:0, so padding-bottom is overridden
   directly with !important, and the image covers the box. */
.kb-query-item .kt-image-overlay-wrap .kt-block-intrisic:not(.kt-over-set-ratio) {
    padding-bottom: 56.25% !important;
}
.kb-query-item .kt-block-intrisic:not(.kt-over-set-ratio) img.kt-img-overlay {
    height: 100%;
    object-fit: cover;
}
/* cmg_thumbnail_override() wraps the hero <img> in <picture>, so Kadence's
   `.kt-block-intrisic > img` rules (absolute position, hover zoom) no longer match.
   Without position:absolute the height:100% above resolves to 0 and the image vanishes. */
.kt-block-intrisic > picture > img.kt-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
}
.kt-image-overlay-wrap.kt-over-image-zoomin .kt-block-intrisic > picture > img {
    transform: scale(1);
    transition: transform .35s ease-in-out;
}
.kt-image-overlay-wrap.kt-over-image-zoomin:is(:hover, :focus-within) .kt-block-intrisic > picture > img {
    transform: scale(1.05);
}

/* Sponsor badge — overlay hero cards (Image Card, Image Card Pair) */
.kb-query-item {
    position: relative;
}

.kb-query-item .cmg-sponsor-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.65);
    color: #fff !important;
    padding: 3px 10px;
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 2px;
    pointer-events: none;
    margin: 0 !important;
    line-height: 1.6;
}

/* Homepage: Popular Topics intro (bordered lead-in) */
.gp26_pt_intro {
    max-width: 68ch;
    margin: 0 0 40px;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--global-palette1);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--global-palette5);
}

/* Homepage section header: title | short vertical rule | intro. Stacks on mobile. */
.cmg-section-head {
  align-items: center;
  gap: var(--global-kb-spacing-sm, 1.5rem);
  margin-bottom: var(--global-kb-spacing-lg, 2.5rem);
}
.cmg-section-head > .wp-block-kadence-advancedheading { margin: 0 !important; max-width: none; }
.cmg-section-head > h2.wp-block-kadence-advancedheading {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--global-kb-spacing-sm, 1.5rem);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.cmg-section-head > h2.wp-block-kadence-advancedheading::after {
  content: "";
  width: 2px;
  height: 2.5rem;
  background: var(--global-palette1);
}
.cmg-section-head > p.wp-block-kadence-advancedheading { flex: 1 1 0; min-width: 0; }
@media (max-width: 781px) {
  .cmg-section-head { flex-direction: column; align-items: flex-start; gap: var(--global-kb-spacing-xs, 1rem); }
  .cmg-section-head > h2.wp-block-kadence-advancedheading::after { display: none; }
}

/* Sponsored single: stand-in for the gate form until gp26's Formidable gate
   forms exist (see cmg_gate_form_placeholder() in functions.php). */
.cmg-gate-form-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 1.5em;
  border: 2px dashed var(--global-palette7, #dee2e6);
  border-radius: 4px;
  color: var(--global-palette6, #777);
  font-size: 0.9em;
  text-align: center;
}

/* Homepage Products carousel. A Kadence query block with the "cmg-carousel"
   class scrolls sideways instead of wrapping; js/cmg-carousel.js adds the
   prev/next arrows. Without JS the row still scrolls by swipe/trackpad. */
.cmg-carousel { position: relative; --cmg-carousel-gap: 1.5rem; --cmg-carousel-per-view: 3; }
.cmg-carousel .kb-query-grid-wrap.kb-query-grid-wrap {
  display: flex;
  /* !important: the query card's own inline CSS sets column-gap with equal
     specificity, and the card widths below depend on this gap. */
  gap: var(--cmg-carousel-gap) !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cmg-carousel .kb-query-grid-wrap::-webkit-scrollbar { display: none; }
.cmg-carousel .kb-query-grid-wrap > .kb-query-item {
  flex: 0 0 calc((100% - (var(--cmg-carousel-per-view) - 1) * var(--cmg-carousel-gap)) / var(--cmg-carousel-per-view));
  min-width: 0;
  padding-bottom: var(--global-kb-spacing-xs, 1rem);
  scroll-snap-align: start;
}
@media (max-width: 1024px) { .cmg-carousel { --cmg-carousel-per-view: 2.3; --cmg-carousel-gap: 1rem; } }
@media (max-width: 767px)  { .cmg-carousel { --cmg-carousel-per-view: 1.6; } }

.cmg-carousel-btn {
  position: absolute;
  top: var(--cmg-carousel-arrow-top, 30%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--global-palette7, #dee2e6);
  border-radius: 50%;
  background: var(--global-palette9, #fff);
  color: var(--global-palette3, #1a202c);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.cmg-carousel-btn:hover,
.cmg-carousel-btn:focus-visible { background: var(--global-palette1, #12bfb8); border-color: var(--global-palette1, #12bfb8); color: #fff; }
.cmg-carousel-btn[disabled] { opacity: 0; pointer-events: none; }
.cmg-carousel-btn svg { width: 20px; height: 20px; }
.cmg-carousel-prev { left: -20px; }
.cmg-carousel-next { right: -20px; }
@media (max-width: 767px) { .cmg-carousel-btn { display: none; } }

/* Clamp a card description to two lines. */
.cmg-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* News images that don't suit a cover crop (small, or the wrong shape) are shown
   whole, never above their own size (--cmg-fi-w/-h), over a blurred copy of
   themselves (--blur), or on a flat panel when they have transparent areas
   (--flat). Classes are added in functions.php (cmg_news_image_treatment). */
.cmg-image-backdrop {
    position: absolute;
    inset: -48px;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(.85) saturate(1.15);
}

/* News single (16:9) and archive cards (--card, ratio from --cmg-fi-ratio):
   Kadence image blocks. Sets its own aspect ratio rather than relying on
   Kadence's padding-bottom box, since the image is taken out of flow. */
.cmg-featured-image--contain .kb-is-ratio-image {
    position: relative;
    height: auto;
    padding-bottom: 0;
    aspect-ratio: var(--cmg-fi-ratio, 16 / 9);
    overflow: hidden;
    border-radius: inherit;
    background: var(--global-palette7);
}
.cmg-featured-image--contain .kb-is-ratio-image img.kb-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto;
    min-width: 0;
    width: min(100%, var(--cmg-fi-w));
    height: min(100%, var(--cmg-fi-h));
    object-fit: contain;
}
/* The caption overlay (below) has no z-index; keep it above the raised image. */
.cmg-featured-image--contain figcaption {
    z-index: 2;
}
.cmg-featured-image--flat .kb-is-ratio-image {
    background: var(--global-palette8);
}
.cmg-featured-image--flat .kb-is-ratio-image img.kb-img {
    width: min(88%, var(--cmg-fi-w));
    height: min(80%, var(--cmg-fi-h));
}
/* Card-sized blur, as on the homepage cards. The card image's own border and
   radius would outline the shrunken image, so the frame takes the radius. */
.cmg-featured-image--card .cmg-image-backdrop {
    inset: -24px;
    filter: blur(12px) brightness(.85) saturate(1.15);
}
.cmg-featured-image--card .kb-is-ratio-image {
    border-radius: 5px;
}
.cmg-featured-image--card .kb-is-ratio-image img.kb-img {
    border: 0 !important;
    border-radius: 0 !important;
}

/* Homepage news cards: 3:2 Kadence Post Grid thumbnails. Chained onto
   .kadence-post-image-intrisic to outrank Kadence Pro's post grid CSS, which
   loads after this file. */
.kadence-post-image-intrisic.cmg-thumb--contain .kadence-post-image-inner-intrisic {
    background: var(--global-palette7);
}
.kadence-post-image-intrisic.cmg-thumb--flat .kadence-post-image-inner-intrisic {
    background: var(--global-palette8);
}
.kadence-post-image-intrisic.cmg-thumb--contain .cmg-image-backdrop {
    inset: -24px;
    filter: blur(12px) brightness(.85) saturate(1.15);
}
.kadence-post-image-intrisic.cmg-thumb--contain .kadence-post-image-inner-intrisic a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kadence-post-image-intrisic.cmg-thumb--contain .kadence-post-image-inner-intrisic img {
    flex: none;
    width: auto;
    height: auto;
    max-width: min(100%, var(--cmg-fi-w));
    max-height: min(100%, var(--cmg-fi-h));
}
.kadence-post-image-intrisic.cmg-thumb--flat .kadence-post-image-inner-intrisic img {
    max-width: min(86%, var(--cmg-fi-w));
    max-height: min(78%, var(--cmg-fi-h));
}

/* Image captions — minimal overlay along the bottom of the image.
   Covers the featured image in the single-post Elements (its <figcaption> is
   added by cmg_featured_image_caption() in functions.php) plus captions on
   core Image, Kadence Image and classic [caption] images in post content.
   The figure shrinks to the image so the overlay never runs past its edges. */
figure.wp-block-image:has(> figcaption),
figure.wp-block-kadence-image:has(figcaption),
.wp-caption {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

figure.wp-block-kadence-image.cmg-article-featured-image {
    width: auto;
}

figure.wp-block-image:has(> figcaption) img,
figure.wp-block-kadence-image:has(figcaption) img,
.wp-caption img {
    display: block;
}

figure.wp-block-image > figcaption,
figure.wp-block-kadence-image figcaption,
.wp-caption .wp-caption-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 24px 14px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) calc(100% - 24px), rgba(0, 0, 0, 0));
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    border-radius: 0 0 5px 5px;
    pointer-events: none;
}

figure.wp-block-image > figcaption a,
figure.wp-block-kadence-image figcaption a,
.wp-caption .wp-caption-text a {
    color: #fff;
    pointer-events: auto;
}

/* Sponsored single, "No Gate": the sidebar keeps a sponsor card (logo, byline,
   who provides it, optional link) in place of the gate form. See
   cmg_gate_form_placeholder() in functions.php. */
.cmg-cg-sponsor-card .cmg-cg-sponsor-logo { display: block; margin: 0 0 1em; }
.cmg-cg-sponsor-card .cmg-cg-download-intro { margin-bottom: 0; }
.cmg-cg-sponsor-card .cmg-cg-sponsor-visit { margin: 1em 0 0; font-weight: 600; }

/* Mobile/tablet menu drawer (Kadence popup, shown below the 1280px header switch).
   Each top-level item reuses its desktop mega-menu Element (Topics, The Latest,
   Learning Opportunities, Connect). Here we strip the desktop panel chrome so they
   read as plain lists under their accordion headings. */
#mobile-drawer .drawer-inner {
    background: #fff !important; /* Customizer has 0.97 alpha; page bled through */
}
#mobile-drawer .mobile-navigation ul.sub-menu {
    padding-left: 0;
}
/* Panel boxes: no borders, fills, padding or column gaps; every row stacks. */
#mobile-drawer .sub-menu .wp-block-kadence-rowlayout,
#mobile-drawer .sub-menu .kt-row-column-wrap,
#mobile-drawer .sub-menu .wp-block-kadence-column,
#mobile-drawer .sub-menu .kt-inside-inner-col {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}
#mobile-drawer .sub-menu .kt-row-column-wrap {
    display: block !important;
}
#mobile-drawer .sub-menu .kt-inside-inner-col {
    align-items: flex-start !important;
}
#mobile-drawer .sub-menu > li {
    padding: 0 0 12px 12px;
    margin: 0;
}
/* An open section keeps its divider under its sub-items, not under its title. */
#mobile-drawer .mobile-menu-container > ul.menu > li:has(> .sub-menu.show-drawer) > .drawer-nav-drop-wrap {
    border-bottom-color: transparent;
}
#mobile-drawer .mobile-menu-container > ul.menu > li > .sub-menu.show-drawer {
    border-bottom: 1px solid var(--global-palette7);
}
/* Section labels ("BROWSE BY TOPIC", "THE LATEST"…) */
#mobile-drawer .sub-menu h2.wp-block-kadence-advancedheading {
    text-align: left !important;
    margin: 12px 0 4px !important;
    padding: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.4 !important;
}
/* The Topics panel's Subscribe promo repeats the top-level Subscribe item. */
#mobile-drawer .sub-menu .kb-row-layout-idgpsub_row_3col {
    display: none !important;
}

/* Plain link lists (topic list, Connect links) */
#mobile-drawer .sub-menu .kb-navigation.menu {
    display: block !important;
    margin: 0;
    padding: 0;
}
#mobile-drawer .sub-menu .kb-navigation.menu > li {
    border: 0;
}
#mobile-drawer .sub-menu .kb-navigation.menu > li > .kb-link-wrap > a,
#mobile-drawer .sub-menu .kb-navigation.menu > li > a {
    display: block;
    padding: 9px 0 !important;
    border: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* Info-box cards (The Latest, Learning Opportunities, industries): icon + title only. */
#mobile-drawer .sub-menu .wp-block-kadence-infobox,
#mobile-drawer .sub-menu .kt-blocks-info-box-link-wrap {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
}
#mobile-drawer .sub-menu .kt-blocks-info-box-link-wrap {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0 !important;
    border-bottom: 0 !important;
}
#mobile-drawer .sub-menu .kt-blocks-info-box-media-container,
#mobile-drawer .sub-menu .kt-blocks-info-box-media {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
#mobile-drawer .sub-menu .kt-blocks-info-box-media .kb-svg-icon-wrap {
    font-size: 20px !important;
}
#mobile-drawer .sub-menu .kt-blocks-info-box-title strong {
    font-weight: inherit;
}
#mobile-drawer .sub-menu .kt-blocks-info-box-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}
#mobile-drawer .sub-menu .kt-blocks-info-box-text {
    display: none;
}
/* Tablets get the phone layout: anything a panel hides on phones (Kadence
   "hide on mobile", e.g. the latest-issue cover) is hidden in the drawer too. */
#mobile-drawer .sub-menu .kvs-sm-false {
    display: none !important;
}
/* Pull an open section's items up toward its title. */
#mobile-drawer .mobile-menu-container > ul.menu > li:has(> .sub-menu.show-drawer) > .drawer-nav-drop-wrap > a {
    padding-bottom: 12px;
}
#mobile-drawer .sub-menu .kt-inside-inner-col > h2.wp-block-kadence-advancedheading:first-child,
#mobile-drawer .sub-menu > li .kt-inside-inner-col:first-child > h2.wp-block-kadence-advancedheading {
    margin-top: 4px !important;
}
/* Panel heading that just repeats its section title ("THE LATEST" under
   "The Latest"); flagged by cmg_drawer_dup_headings() in functions.php. */
#mobile-drawer .sub-menu .cmg-drawer-dup-heading {
    display: none !important;
}
/* Topics panel: Browse by Industry first (three items), then the long topic list. */
#mobile-drawer .sub-menu .kb-row-layout-idgpmt_panes > .kt-row-column-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
#mobile-drawer .sub-menu .kb-row-layout-idgpmt_panes .kadence-columngpmt_right {
    order: -1;
}

/* ── Homepage hero ─────────────────────────────────────────────────────────
   cmg-hero-lead / cmg-hero-pair and .cmg-card-kicker are added by
   cmg_home_hero_cards() in functions.php. */

/* Topic label above each card headline */
.cmg-card-kicker {
    display: block;
    margin: 0 0 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
    /* one line: a wrapped label pushes the top of the card text out of view.
       width 0 / min-width 100%: the label takes the headline's width instead of
       widening the (shrink-to-fit) text box past the card edge. */
    width: 0;
    min-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lead story: bigger headline, excerpt always shown, darker gradient behind it */
.home-hero-articles .cmg-hero-lead .kt-image-overlay-wrap .kt-image-overlay-message .image-overlay-title {
    font-size: clamp(24px, 2.3vw, 34px);
    line-height: 1.15;
}
.home-hero-articles .cmg-hero-lead .cmg-hover-reveal .kt-image-overlay-wrap .kt-image-overlay-message .image-overlay-subtitle {
    max-height: none;
    opacity: 1;
    margin-top: 0.25em;
    font-size: 16px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 46em;
}
/* Hero image cards: one lighter, shorter fade than the site-wide card gradient,
   sized to the text block rather than the image, plus a soft text shadow so the
   white text still holds up on bright photos. The hover fade still applies. */
.home-hero-articles .cmg-gradient-overlay .kt-image-overlay-color-wrapper::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.5) 22%,
        rgba(0, 0, 0, 0.18) 42%,
        transparent 58%
    );
}
/* the smaller cards' text fills more of the image, so their fade reaches higher */
.home-hero-articles .cmg-hero-pair .cmg-gradient-overlay .kt-image-overlay-color-wrapper::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.2) 62%,
        transparent 80%
    );
}
.home-hero-articles .cmg-gradient-overlay .image-overlay-title,
.home-hero-articles .cmg-gradient-overlay .image-overlay-subtitle,
.home-hero-articles .cmg-gradient-overlay .cmg-card-kicker {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.home-hero-articles .cmg-hero-lead .kt-image-overlay-message {
    padding-bottom: 8px;
}
/* Hover: with the excerpt always shown, the card's headline-only lift pulled the
   headline away from its label and excerpt. Lift the whole text block instead. */
.home-hero-articles .cmg-hero-lead .cmg-hover-reveal .kt-image-overlay-wrap:is(:hover, :focus-within) .kt-image-overlay-message .image-overlay-title {
    transform: none;
}
.home-hero-articles .cmg-hero-lead .kt-image-overlay-inner {
    transition: transform 0.6s ease;
}
.home-hero-articles .cmg-hero-lead .kt-image-overlay-wrap:is(:hover, :focus-within) .kt-image-overlay-inner {
    transform: translateY(-0.4em);
}

/* Story cards under the lead: 3:2 (set on the card in Kadence), headline at most
   3 lines. Phones show these as rows (see below). */
@media (min-width: 768px) {
    .home-hero-articles .cmg-hero-pair .kt-image-overlay-wrap .kt-image-overlay-message .image-overlay-title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Billboard band above the header: half the padding */
.home .kb-row-layout-idgp26_ahd_row > .kt-row-column-wrap {
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (max-width: 767px) {
    .home-hero-articles .cmg-hero-lead .kt-image-overlay-wrap .kt-image-overlay-message .image-overlay-title {
        font-size: 24px;
    }
    /* at 16:9 on a phone the text fills most of the lead, so the fade reaches higher */
    .home-hero-articles .cmg-hero-lead .cmg-gradient-overlay .kt-image-overlay-color-wrapper::before {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.55) 35%,
            rgba(0, 0, 0, 0.2) 62%,
            transparent 80%
        );
    }
    .home-hero-articles .cmg-hero-lead .kt-image-overlay-message {
        left: 16px;
        right: 16px;
        padding-bottom: 0;
    }
    .home-hero-articles .cmg-hero-lead .cmg-hover-reveal .kt-image-overlay-wrap .kt-image-overlay-message .image-overlay-subtitle {
        display: none;
    }

    /* Story cards under the lead: compact rows, thumbnail left, headline right */
    .home-hero-articles .cmg-hero-pair .kb-query-item {
        border-radius: 0;
        border-top: 1px solid var(--global-palette7, #e2e8f0);
        padding: 12px 0;
    }
    .home-hero-articles .cmg-hero-pair .kt-block-intrisic.kt-over-set-ratio {
        display: grid;
        grid-template-columns: 112px 1fr;
        gap: 14px;
        align-items: center;
        height: auto;
        padding-bottom: 0 !important;
        overflow: visible;
    }
    .home-hero-articles .cmg-hero-pair .kt-block-intrisic img.kt-img-overlay {
        position: static;
        width: 112px !important;
        height: 75px; /* 3:2 */
        object-fit: cover;
        border-radius: 4px;
    }
    .home-hero-articles .cmg-hero-pair .kt-image-overlay-color-wrapper {
        display: none;
    }
    .home-hero-articles .cmg-hero-pair .cmg-gradient-overlay .image-overlay-title,
    .home-hero-articles .cmg-hero-pair .cmg-gradient-overlay .cmg-card-kicker {
        text-shadow: none;
    }
    .home-hero-articles .cmg-hero-pair .kt-image-overlay-wrap {
        background: none;
    }
    .home-hero-articles .cmg-hero-pair .kt-imageoverlay-link {
        position: static;
        text-decoration: none;
    }
    /* keep the whole row (thumbnail too) clickable */
    .home-hero-articles .cmg-hero-pair .kt-imageoverlay-link::after {
        content: '';
        position: absolute;
        inset: 0;
    }
    .home-hero-articles .cmg-hero-pair .kt-image-overlay-message {
        position: static;
        padding: 0;
        background: none;
    }
    .home-hero-articles .cmg-hero-pair .kt-image-overlay-wrap .kt-image-overlay-message .image-overlay-title {
        color: var(--global-palette3);
        font-size: 16px;
        line-height: 1.3;
        padding: 0;
        transform: none;
    }
    .home-hero-articles .cmg-hero-pair .cmg-hover-reveal .kt-image-overlay-wrap .kt-image-overlay-message .image-overlay-subtitle {
        display: none;
    }
    .home-hero-articles .cmg-hero-pair .cmg-card-kicker {
        margin-bottom: 4px;
        /* undo the one-line label: in a row there's room for it to wrap normally */
        width: auto;
        min-width: 0;
        white-space: normal;
        color: var(--global-palette1);
        opacity: 1;
    }

    /* Latest News straight after the stories, ahead of the ad and Trending:
       flatten the nested columns so all three sit in the hero's own grid. */
    .kb-row-layout-id18023_0c23e0-f5 .kadence-column18023_5df231-de,
    .kb-row-layout-id18023_0c23e0-f5 .kadence-column18023_5df231-de > .kt-inside-inner-col,
    .kb-row-layout-id18023_68af37-76,
    .kb-row-layout-id18023_68af37-76 > .kt-row-column-wrap {
        display: contents;
    }
    /* !important: Kadence's right-to-left collapse sets order on these columns.
       Negative, to stay ahead of the grid's ::before (order 0), which would
       otherwise add an empty row and a gap above the lead. */
    .kb-row-layout-id18023_0c23e0-f5 .home-hero-articles { order: -3 !important; }
    .kb-row-layout-id18023_0c23e0-f5 .home-hero-news { order: -2 !important; }
    .kb-row-layout-id18023_0c23e0-f5 .kadence-column18023_0e548e-9b { order: -1 !important; }
}

/* ---------------------------------------------------------------------------
   Author box at the end of articles (PublishPress Authors "Boxed" layout)

   The box editor prints its own CSS inline with !important on selectors three
   classes deep, and its settings live in the database, so they differ between
   environments. These rules carry the extra .single and .pp-multiple-authors-
   wrapper classes so they win wherever the box is configured differently.
   Scoped to single posts; the author archive header uses the same layout.
   --------------------------------------------------------------------------- */

/* "Author" label: same look as the "Share this article" label above it */
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .box-header-title {
    margin: 0 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: var(--global-palette6) !important;
}

/* The card */
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode li.pp-multiple-authors-boxes-li {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 24px;
    padding: 28px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--global-palette8) !important;
}

/* Photo: rounded square, cropped to fill */
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-avatar {
    flex: 0 0 88px;
    width: 88px !important;
    margin: 0 !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-avatar img {
    display: block;
    width: 88px !important;
    height: 88px !important;
    border: 0 !important;
    border-radius: 8px !important;
    object-fit: cover;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-avatar-details {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

/* Name */
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-name {
    margin: 0 0 8px !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-name a {
    font-size: inherit !important;
    font-weight: 700 !important;
    color: var(--global-palette3) !important;
    text-decoration: none !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-name a:hover {
    color: var(--global-palette1) !important;
}

/* Bio: body-size, darker, roomier */
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-description,
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-description p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #444 !important;
}

/* Links row: "View all posts" as an outlined button, then the profile icons
   as filled circles, all in the name's colour */
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-meta {
    display: inline-flex !important;
    align-items: center;
    margin: 16px 8px 0 0 !important;
    vertical-align: middle;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-meta a {
    display: inline-flex !important;
    align-items: center;
    height: 32px;
    padding: 0 14px !important;
    border: 1.5px solid var(--global-palette3) !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--global-palette3) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: background .2s, color .2s;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-meta a span {
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: inherit !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-meta a:hover {
    background: var(--global-palette3) !important;
    color: #fff !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .ppma-author-field-meta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    margin: 16px 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--global-palette3) !important;
    color: #fff !important;
    vertical-align: middle;
    text-decoration: none !important;
    transition: background .2s;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .ppma-author-field-meta:hover {
    background: var(--global-palette1) !important;
    color: #fff !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .ppma-author-field-meta .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

/* Recent posts: labelled list with dividers instead of underlined bullets */
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts {
    margin: 24px 0 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid var(--global-palette7) !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts-title {
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: var(--global-palette6) !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts-item {
    display: block !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--global-palette7) !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts-item:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts-item::before,
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts-item .dashicons {
    display: none !important;
    content: none !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts-item a {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--global-palette3) !important;
    text-decoration: none !important;
}
.single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-recent-posts-item a:hover {
    color: var(--global-palette1) !important;
    text-decoration: underline !important;
}

/* Phones: smaller photo beside the name instead of stacked above it */
@media (max-width: 600px) {
    .single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode li.pp-multiple-authors-boxes-li {
        display: block !important;
        padding: 20px !important;
    }
    .single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-avatar {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 60px !important;
    }
    .single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-avatar img {
        width: 60px !important;
        height: 60px !important;
        border-radius: 6px !important;
    }
    .single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-name {
        display: flex;
        align-items: center;
        min-height: 60px;
        margin: 0 0 14px 76px !important;
        font-size: 19px !important;
        text-align: left !important;
    }
    .single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-avatar-details,
    .single .pp-multiple-authors-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-shortcode .pp-author-boxes-description {
        text-align: left !important;
    }
}