/* Dealerdesk Custom Styles */

/* ==========================================================================
   Features Ticker  (builder/partials/feature-ticker.php)

   DOM structure:
   .features-ticker
     .slider.slider--features-ticker          (Swiper slider, theme-initialized)
       .swiper-container.slider__container
         .swiper-wrapper.slider__wrapper
           .swiper-slide.slider__item         (one per repeater row)
             .features-ticker__chip
               .features-ticker__icon
                 img.features-ticker__icon-img
               span.features-ticker__text
             span.features-ticker__sep        (divider between chips)
   ========================================================================== */

.features-ticker {
    border-top: 1px solid var(--line, rgba(0,0,0,.1));
    border-bottom: 1px solid var(--line, rgba(0,0,0,.1));
    overflow: hidden;
}

.features-ticker .features-ticker__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 28px;
    white-space: nowrap;
}

.features-ticker .features-ticker__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.features-ticker .features-ticker__icon-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.features-ticker .features-ticker__text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, inherit);
}

.features-ticker .features-ticker__sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--line, rgba(0,0,0,.1));
    vertical-align: middle;
    flex-shrink: 0;
}

.features-ticker .slider--features-ticker .swiper-slide {
    display: flex;
    flex-direction: row; /* theme app.css forces column on .slider__item */
    align-items: center;
    /* !important needed: theme forces width:15rem on [data-slider-grid="auto"]
       sliders, but ticker chips must size to their content */
    width: auto !important;
    flex-shrink: 0;
}

/* Hide the divider after the last chip */
.features-ticker .slider--features-ticker .swiper-slide:last-child .features-ticker__sep {
    display: none;
}

/* Center the chips when everything fits — .features-ticker--centered is
   toggled by the inline script in feature-ticker.php whenever Swiper
   locks (all slides fit) / unlocks (ticker scrolls) */
.features-ticker.features-ticker--centered .swiper-wrapper {
    justify-content: center;
}

/* ==========================================================================
   Animated Stats  (builder/partials/animated-stats.php)

   DOM structure:
   section.animated-stats
     .container
       .animated-stats__head
         p.animated-stats__eyebrow
         h2.animated-stats__title             (<em> = accent colour)
         p.animated-stats__intro              (optional intro line under title)
       .animated-stats__grid.colNspan         (col2span / col3span / col4span)
         .animated-stats__item                (one per repeater row)
           p.animated-stats__value            (numbers count up on scroll)
           h3.animated-stats__heading
           p.animated-stats__description
           p.animated-stats__src              (small attribution line)
       p.animated-stats__foot                 (optional footnote / caveat)
   ========================================================================== */

.animated-stats {
    /* recolour the whole section by changing these */
    --as-bg: #f8f7fc;
    --as-accent: #214a8b;
    --as-text: #0a071b;
    --as-text-soft: #0a071b;
    --as-text-mute: #214a8b;

    background: var(--as-bg);
    color: var(--as-text);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* Section background option — ACF "background" (grey is default, white = #fff) */
.animated-stats.animated-stats--bg-white {
    --as-bg: #fff;
}

.animated-stats .animated-stats__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
    position: relative;
}

.animated-stats .animated-stats__eyebrow {
    color: var(--as-accent);
    font-family: Inter, sans-serif;
    font-size: 1.125rem;
    line-height: 1.78;
    letter-spacing: -.02em;
    font-weight: 500;
    /* no text-transform: editors control capitalisation in the CMS */
    margin: 0 0 14px;
}

/* Size/weight/responsive scaling come from the theme's heading classes
   (text-style text-style--h4 text-style--section) on the h2 itself,
   matching other section headings like the FAQ header */
.animated-stats .animated-stats__title {
    color: var(--as-text);
    margin: 0 0 18px;
}

.animated-stats .animated-stats__title em {
    color: var(--as-accent);
    font-style: italic;
}

.animated-stats .animated-stats__intro {
    font-size: 18px;
    color: var(--as-text);
    font-weight: 500;
    margin: 0;
}

.animated-stats .animated-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* fallback; overridden by .colNspan */
    gap: 44px;
    position: relative;
}

/* Column layout options — ACF field "layout" (col2span / col3span / col4span),
   value added directly as a grid class (mirrors features-benefits). col2span is
   the default; selectors scoped under .animated-stats__grid to avoid collisions. */
.animated-stats .animated-stats__grid.col2span { grid-template-columns: repeat(2, 1fr); }
.animated-stats .animated-stats__grid.col3span { grid-template-columns: repeat(3, 1fr); }
.animated-stats .animated-stats__grid.col4span { grid-template-columns: repeat(4, 1fr); }

.animated-stats .animated-stats__value {
    font-family: Heebo, sans-serif; /* same family as the theme's headings */
    font-size: 62px;
    font-weight: 700;
    line-height: 1;
    color: var(--as-accent);
    margin: 0 0 12px;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; /* digits stay equal-width while counting */
}

.animated-stats .animated-stats__heading {
    color: var(--as-text);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 4px;
}

.animated-stats .animated-stats__description {
    font-size: 16px;
    color: var(--as-text-soft);
    font-weight: 500;
    margin: 0;
}

.animated-stats .animated-stats__src {
    font-size: 15px;
    color: var(--as-text-mute);
    margin: 10px 0 0;
}

.animated-stats .animated-stats__foot {
    max-width: 760px;
    margin: 40px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--as-text-mute);
}

/* Responsive collapse per layout. col4span steps 4 → 2 → 1; the 2- and 3-up
   layouts collapse straight to a single column at 800px. The divider only
   appears once items are stacked in a single column. */
@media (max-width: 1024px) {
    .animated-stats .animated-stats__grid.col4span {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .animated-stats .animated-stats__grid.col2span,
    .animated-stats .animated-stats__grid.col3span {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Divider between stacked items (2-/3-up layouts, now single column) */
    .animated-stats .animated-stats__grid.col2span .animated-stats__item,
    .animated-stats .animated-stats__grid.col3span .animated-stats__item {
        padding-bottom: 30px;
        margin-bottom: 20px;
        border-bottom: 2px solid #8c87a6;
    }
    .animated-stats .animated-stats__grid.col2span .animated-stats__item:last-child,
    .animated-stats .animated-stats__grid.col3span .animated-stats__item:last-child {
        border-bottom: none;
    }
}

@media (max-width: 650px) {
    .animated-stats .animated-stats__grid.col4span {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Divider for the 4-up layout once it's a single column */
    .animated-stats .animated-stats__grid.col4span .animated-stats__item {
        padding-bottom: 30px;
        margin-bottom: 20px;
        border-bottom: 2px solid #8c87a6;
    }
    .animated-stats .animated-stats__grid.col4span .animated-stats__item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   Feature Split  (builder/partials/feature-split.php)

   Two-column section: text block one side, card the other.
   .feature-split--card-left / --card-right controls which side the card sits.

   DOM structure:
   section.feature-split.feature-split--card-(left|right)
     .container.feature-split__grid
       .feature-split__content
         p.feature-split__eyebrow
         h2.feature-split__title              (<em> = accent colour)
         p.feature-split__intro
         ul|ol.feature-split__list.feature-split__list--(ticks|numbers)
           li.feature-split__list-item
             .feature-split__list-body
               strong.feature-split__list-heading   (optional)
               span.feature-split__list-text
       .feature-split__card
         p.feature-split__badge               (--pulse modifier = live dot)
           span.feature-split__badge-icon     (optional, when no pulse)
         .feature-split__nodes
           div|a.feature-split__node          (a when a link is set)
             span.feature-split__node-text
             span.feature-split__node-desc    (optional)
           .feature-split__connector          (arrow + caption BELOW its node, optional)
         p.feature-split__closing             (optional callout box at card foot)
   ========================================================================== */

.feature-split {
    /* recolour the whole section by changing these */
    --fs-bg: #f8f7fc;
    --fs-accent: #214a8b;
    --fs-accent-dark: #16356a;
    --fs-accent-pale: #eaf0fa;
    --fs-text: #0a071b;
    --fs-mute: #8c87a6;
    --fs-line: #e5e9f0;
    --fs-card-bg: #ffffff;
    --fs-pulse: #00d4a0; /* the "live" dot on the badge */

    background: var(--fs-bg);
    color: var(--fs-text);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* Section background option — ACF "background" (grey is default, white = #fff).
   On a white section the card flips to grey so it stays distinct (otherwise a
   white card would disappear into the white background). */
.feature-split.feature-split--bg-white {
    --fs-bg: #fff;
    --fs-card-bg: #f8f7fc;
}

.feature-split .feature-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Card on the left = content moves to the right column */
.feature-split.feature-split--card-left .feature-split__card {
    order: -1;
}

/* ----- Text column ----- */

.feature-split .feature-split__eyebrow {
    color: var(--fs-accent);
    font-family: Inter, sans-serif;
    font-size: 1.125rem;
    line-height: 1.78;
    letter-spacing: -.02em;
    font-weight: 500;
    margin: 0 0 14px;
}

/* Size/weight/responsive scaling come from the theme's heading classes
   (text-style text-style--h4 text-style--section) on the h2 itself */
.feature-split .feature-split__title {
    color: var(--fs-text);
    margin: 0 0 18px;
}

.feature-split .feature-split__title em {
    color: var(--fs-accent);
    font-style: italic;
}

.feature-split .feature-split__intro {
    font-size: 16px;
    color: var(--fs-text);
    margin: 0;
}

.feature-split .feature-split__list {
    list-style: none;
    counter-reset: fs-step;
    padding: 0;
    margin: 22px 0 0;
}

.feature-split .feature-split__list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    font-size: 16px;
    color: var(--fs-text);
}

.feature-split .feature-split__list--numbers .feature-split__list-item {
    border-bottom: 1px solid var(--fs-line);
}

.feature-split .feature-split__list--numbers .feature-split__list-item:last-child {
    border-bottom: none;
}

/* The circle: white tick or white number on accent background */
.feature-split .feature-split__list-item::before {
    content: '';
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fs-accent);
    color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-split .feature-split__list--ticks .feature-split__list-item::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.feature-split .feature-split__list--numbers .feature-split__list-item {
    counter-increment: fs-step;
}

.feature-split .feature-split__list--numbers .feature-split__list-item::before {
    content: counter(fs-step);
    font-weight: 700;
    font-size: 14px;
}

.feature-split .feature-split__list-heading {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.feature-split .feature-split__list-text {
    display: block;
    font-size: 15px;
    color: var(--fs-text);
}

/* ----- Card column ----- */

.feature-split .feature-split__card {
    background: var(--fs-card-bg);
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(10, 7, 27, .06);
    position: relative;
    overflow: hidden;
}

.feature-split .feature-split__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fs-accent);
    background: rgba(33, 74, 138, .08);
    padding: 6px 14px;
    border-radius: 100px;
    margin: 0 0 24px;
}

.feature-split .feature-split__badge-icon-img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: block;
}

/* Pulsing "live" dot variant */
.feature-split .feature-split__badge--pulse::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fs-pulse);
    animation: fs-pulse 1.8s infinite;
    flex-shrink: 0;
}

@keyframes fs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 212, 160, .7); }
    70%  { box-shadow: 0 0 0 12px rgba(0, 212, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 212, 160, 0); }
}

.feature-split .feature-split__node {
    display: block;
    border: 1.5px solid var(--fs-line);
    border-radius: 10px;
    padding: 16px 18px;
    font-weight: 600;
    font-size: 15px;
    color: var(--fs-text);
    text-decoration: none;
}

/* Whole node is clickable when a link is set in the CMS */
a.feature-split__node--link {
    transition: border-color .2s, box-shadow .2s;
}

a.feature-split__node--link:hover,
a.feature-split__node--link:focus-visible {
    border-color: var(--fs-accent);
    box-shadow: 0 4px 14px rgba(33, 74, 138, .15);
}

/* Emphasised node — e.g. a formatted phone number */
.feature-split .feature-split__node--emphasis {
    text-align: center;
}

.feature-split .feature-split__node--emphasis .feature-split__node-text {
    font-family: Heebo, sans-serif;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--fs-accent);
    line-height: 1.1;
}

/* Accented node — solid accent background, white text */
.feature-split .feature-split__node--accent {
    background: #214a8b;
}

.feature-split .feature-split__node-text {
    display: block;
}

.feature-split .feature-split__node-desc {
    display: block;
    font-weight: 500;
    color: var(--fs-mute);
    font-size: 13px;
    margin-top: 2px;
}

/* White text inside accent nodes (incl. emphasised phone numbers) —
   kept scoped to --accent so emphasis/desc stay readable on white nodes */
.feature-split .feature-split__node--accent .feature-split__node-text,
.feature-split .feature-split__node--accent .feature-split__node-desc {
    color: #fff;
}

.feature-split .feature-split__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--fs-mute);
    font-size: 12px;
    padding: 10px 0;
}

.feature-split .feature-split__connector svg {
    width: 20px;
    height: 20px;
}

/* Space nodes without connectors apart slightly */
.feature-split .feature-split__node + .feature-split__node {
    margin-top: 12px;
}

.feature-split .feature-split__closing {
    margin: 22px 0 0;
    border-radius: 8px;
    font-size: 16px;
    color: #000;
}

@media (max-width: 900px) {
    .feature-split .feature-split__grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    /* Stacked: content reads first regardless of card side */
    .feature-split.feature-split--card-left .feature-split__card {
        order: 0;
    }

    .feature-split .feature-split__card {
        padding: 28px 22px;
    }
}

/* ==========================================================================
   Features and Benefits  (builder/partials/features-benefits.php)

   DOM structure:
   section.features-benefits
     .container
       header.features-benefits__header       (centered)
         p.features-benefits__eyebrow
         h2.features-benefits__title          (<em> = accent colour)
         p.features-benefits__intro
       .features-benefits__grid               (2 columns, 1 on mobile)
         article.features-benefits__item      (one per repeater row)
           img.features-benefits__icon-img    (icon, no container box)
           h3.features-benefits__heading
           div.features-benefits__text          (contains CMS-generated <p> tags)
           ol.features-benefits__flow         (optional pill chips; single
             li.features-benefits__flow-step   entry = one pill, no arrows)
   ========================================================================== */

.features-benefits {
    /* recolour the whole section by changing these */
    --fb-bg: #ffffff;
    --fb-card-bg: #f8f7fc;
    --fb-accent: #214a8b;
    --fb-accent-pale: #eaf0fa;
    --fb-text: #0a071b;
    --fb-mute: #8c87a6;
    --fb-line: #eee;

    background: var(--fb-bg);
    color: var(--fb-text);
    padding: 60px 0;
}

/* Section background option — ACF "background". This component defaults to a
   white section with grey cards, so white is the default (no override needed);
   grey swaps them (grey section, white cards) to keep the cards distinct. */
.features-benefits.features-benefits--bg-grey {
    --fb-bg: #f8f7fc;
    --fb-card-bg: #fff;
}

.features-benefits .features-benefits__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}

.features-benefits .features-benefits__eyebrow {
    color: var(--fb-accent);
    font-family: Inter, sans-serif;
    font-size: 1.125rem;
    line-height: 1.78;
    letter-spacing: -.02em;
    font-weight: 500;
    margin: 0 0 14px;
}

/* Size/weight/responsive scaling come from the theme's heading classes
   (text-style text-style--h4 text-style--section) on the h2 itself */
.features-benefits .features-benefits__title {
    color: var(--fb-text);
    margin: 0 0 18px;
}

.features-benefits .features-benefits__title em {
    color: var(--fb-accent);
    font-style: italic;
}

.features-benefits .features-benefits__intro {
    font-size: 18px;
    color: var(--fb-text);
    max-width: 640px;
    margin: 0 auto;
}

.features-benefits .features-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.features-benefits .features-benefits__item {
    background: var(--fb-card-bg);
    border: 1px solid var(--fb-line);
    border-radius: 16px;
    padding: 34px;
}

/* Icon sits on its own — no container box. The wrapper div and its
   rounded/pale-bg styling were removed; the <img> is the icon itself. */
.features-benefits .features-benefits__icon-img {
    display: block;
    width: 80px;
    height: auto;
    object-fit: contain;
}

.features-benefits .features-benefits__heading {
    font-size: 21px;
    font-weight: 700;
    color: var(--fb-text);
    margin: 14px 0 10px;
}

/* Wrapper div — the <p> tags inside come from the CMS (ACF "add paragraphs"),
   so editors can write multiple semantically correct paragraphs */
.features-benefits .features-benefits__text {
    font-size: 15px;
    color: var(--fb-text);
}

.features-benefits .features-benefits__text p {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

.features-benefits .features-benefits__text p + p {
    margin-top: 10px;
}

/* Flow chips — an ordered sequence, arrows drawn in the gaps between steps.
   The column-gap holds the space the arrow is centred within. */
.features-benefits .features-benefits__flow {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    align-items: center;
}

.features-benefits .features-benefits__flow-step {
    background: #fff;
    border: 1px solid var(--fb-line);
    padding: 5px 11px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--fb-text);
}

.features-benefits .features-benefits__flow-step:not(:last-child) {
    position: relative;
}

/* Arrow sits in the column-gap, outside the pill, centred horizontally
   (calc places it at the mid-point of the 26px gap) and vertically. */
.features-benefits .features-benefits__flow-step:not(:last-child)::after {
    content: '→' / ''; /* decorative; alternative text empty for screen readers */
    content: '→';
    position: absolute;
    left: calc(100% + 13px);
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--fb-mute);
}

/* ==========================================================================
   Column layout options — ACF field "layout" (col2span / col3span / col4span)
   The chosen value is added directly as a class on the grid, so the markup
   reads clearly. Selectors are scoped under .features-benefits__grid so these
   generic-looking class names can't collide with anything else in the theme.
   col2span is the default and reproduces the original layout exactly.
   ========================================================================== */

/* 2 columns (default) → 1 column at 820px */
.features-benefits .features-benefits__grid.col2span {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 820px) {
    .features-benefits .features-benefits__grid.col2span {
        grid-template-columns: 1fr;
    }
}

/* 3 columns → 2 columns at 940px → 1 column at 650px */
.features-benefits .features-benefits__grid.col3span {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 940px) {
    .features-benefits .features-benefits__grid.col3span {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 650px) {
    .features-benefits .features-benefits__grid.col3span {
        grid-template-columns: 1fr;
    }
}

/* 4 columns → 2 columns at 1268px → 1 column at 650px.
   Tighter 20px card padding applies at all widths for this layout. */
.features-benefits .features-benefits__grid.col4span {
    grid-template-columns: repeat(4, 1fr);
}
.features-benefits .features-benefits__grid.col4span .features-benefits__item {
    padding: 20px;
}
@media (max-width: 1268px) {
    .features-benefits .features-benefits__grid.col4span {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 650px) {
    .features-benefits .features-benefits__grid.col4span {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Call Recordings  (builder/partials/call-recordings.php)

   DOM structure:
   section.call-recordings
     .container
       header.call-recordings__header           (centred)
         p.call-recordings__eyebrow
         h2.call-recordings__title               (<em> = accent colour)
         p.call-recordings__intro
       .recordings-grid.colNspan                 (1/2/3/4 columns)
         article.recording-card                   (one per repeater row)
           img.recording-card__icon-img          (optional uploaded icon, no
                                                   box; colour baked into file)
           .recording-text
             p.recording-type
             h3.recording-title
             p.recording-description
           .recording-player                     (audio + custom controls)
             button.play-toggle (.ico-play/.ico-pause)
             .player-bars > span*22               (equaliser)
             span.player-time
             audio

   article.recording-card--full = the one card promoted to full width by the
   section "feature_item" radio (first|last); spans the whole row and switches
   to the horizontal icon | text | player layout.
   ========================================================================== */

.call-recordings {
    /* recolour the whole section by changing these */
    --cr-bg: #ffffff;
    --cr-card-bg: #f6f8fc;
    --cr-accent: #214a8b;
    --cr-accent-pale: #eaf0fa;
    --cr-text: #0d1424;
    --cr-text-soft: #4a5469;
    --cr-mute: #8a93a8;
    --cr-line: #e5e9f0;

    background: var(--cr-bg);
    color: var(--cr-text);
    padding: 60px 0;
}

/* Section background option — ACF "section_background". Defaults to white;
   grey swaps the section bg and flips the cards to white so they stay distinct. */
.call-recordings.call-recordings--bg-grey {
    --cr-bg: #f6f8fc;
    --cr-card-bg: #ffffff;
}

.call-recordings .call-recordings__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.call-recordings .call-recordings__eyebrow {
    color: var(--cr-accent);
    font-family: Inter, sans-serif;
    font-size: 1.125rem;
    line-height: 1.78;
    letter-spacing: -.02em;
    font-weight: 500;
    margin: 0 0 14px;
}

/* Size/weight/responsive scaling come from the theme heading classes on the h2 */
.call-recordings .call-recordings__title {
    color: var(--cr-text);
    margin: 0 0 18px;
}
.call-recordings .call-recordings__title em {
    color: var(--cr-accent);
    font-style: italic;
}

.call-recordings .call-recordings__intro {
    font-size: 18px;
    color: var(--cr-text-soft);
    max-width: 640px;
    margin: 0 auto;
}

/* ---- Grid. Column count from the layout class. ---- */
.call-recordings .recordings-grid {
    display: grid;
    gap: 16px;
}
.call-recordings .recordings-grid.col1span { grid-template-columns: 1fr; }
.call-recordings .recordings-grid.col2span { grid-template-columns: repeat(2, 1fr); }
.call-recordings .recordings-grid.col3span { grid-template-columns: repeat(3, 1fr); }
.call-recordings .recordings-grid.col4span { grid-template-columns: repeat(4, 1fr); }

/* ---- Card (stacked layout, used in every multi-column cell) ---- */
.call-recordings .recording-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--cr-line);
    border-radius: 22px;
    background: var(--cr-card-bg);
}

/* Icon sits on its own — no container box. Colour is baked into the icon file
   (matches the theme's other icon partials). Only output when one is uploaded. */
.call-recordings .recording-card__icon-img {
    display: block;
    width: 80px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.call-recordings .recording-text { min-width: 0; flex: 1; }

.call-recordings .recording-type {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cr-accent);
    margin: 0 0 5px;
}

.call-recordings .recording-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--cr-text);
    margin: 0 0 6px;
}
/* Wrapper div — the <p> tags inside come from the CMS (ACF "add paragraphs"),
   so editors can write multiple semantically correct paragraphs. */
.call-recordings .recording-description {
    font-size: 14px;
    color: var(--cr-text-soft);
}
.call-recordings .recording-description p {
    margin: 0;
    font-size: inherit;
    color: inherit;
}
.call-recordings .recording-description p + p {
    margin-top: 10px;
}

/* ---- Player ---- */
.call-recordings .recording-player { display: flex; align-items: center; gap: 14px; width: 100%; }
.call-recordings .recording-player audio { display: none; }
.call-recordings .play-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--cr-accent);
    border: none;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .2s;
    box-shadow: 0 8px 18px rgba(33,74,138,.22);
}
.call-recordings .play-toggle:hover { transform: scale(1.06); }
.call-recordings .play-toggle .ico-play,
.call-recordings .play-toggle .ico-pause { fill: #fff; }
.call-recordings .play-toggle .ico-pause { display: none; }
.call-recordings .play-toggle.playing .ico-play { display: none; }
.call-recordings .play-toggle.playing .ico-pause { display: block; }

.call-recordings .player-bars { display: flex; align-items: center; gap: 3px; height: 36px; flex: 1; overflow: hidden; }
.call-recordings .player-bars span { width: 3px; background: var(--cr-mute); opacity: .35; border-radius: 2px; height: 22%; }
.call-recordings .recording-player.playing .player-bars span { opacity: 1; background: var(--cr-accent); animation: cr-bar 1s ease-in-out infinite; }
@keyframes cr-bar { 0%,100%{ transform: scaleY(.4); } 50%{ transform: scaleY(1); } }

.call-recordings .player-time {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--cr-mute);
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
}

/* ---- Horizontal row layout ----
   Used by (a) the whole grid when layout = 1 column, and
   (b) a single featured card promoted to full width. */
.call-recordings .recordings-grid.col1span .recording-card,
.call-recordings .recording-card--full {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 24px 28px;
}
.call-recordings .recordings-grid.col1span .recording-player,
.call-recordings .recording-card--full .recording-player {
    width: 300px;
    flex: none;
}

/* ---- Featured (full width): span the whole row whatever the column count ---- */
.call-recordings .recording-card--full { grid-column: 1 / -1; }

/* ---- Responsive ---- */
/* 4 columns → 2 columns at 1080px → 1 column at 700px */
@media (max-width: 1080px) {
    .call-recordings .recordings-grid.col4span {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 700px) {
    .call-recordings .recordings-grid.col4span {
        grid-template-columns: 1fr;
    }
}

/* 2- and 3-column grids collapse to a single column at 820px */
@media (max-width: 820px) {
    .call-recordings .recordings-grid.col2span,
    .call-recordings .recordings-grid.col3span {
        grid-template-columns: 1fr;
    }
}

/* Row-layout cards (1-column grid + the featured full-width card) stack on small screens */
@media (max-width: 820px) {
    .call-recordings .recordings-grid.col1span .recording-card,
    .call-recordings .recording-card--full {
        flex-direction: column;
        align-items: stretch;
    }
    .call-recordings .recordings-grid.col1span .recording-player,
    .call-recordings .recording-card--full .recording-player {
        width: 100%;
    }
}


/* ==========================================================================
   Multi-level navigation  (template-parts/blocks/navbar.php)

   Two levels (parent + child). A parent whose URL is "#" renders as a heading
   button (.navbar__menu-toggle) that opens the dropdown but doesn't navigate.
   Desktop (>= 62rem): hover / keyboard-focus dropdown panel.
   Mobile  (<  62rem): tap-to-expand accordion inside the burger overlay.
   Reuses the navbar's own tokens: #f5f4fb hover pill, 3.125rem pill radius.
   ========================================================================== */

/* Heading trigger reuses the pill link look — strip the native <button> chrome.
   Font size/colour/padding come from the theme's .navbar__menu-link rule. */
.navbar .navbar__menu-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.navbar .navbar__menu-item--has-children > .navbar__menu-link { gap: .35rem; }

.navbar .navbar__caret {
    width: .7rem;
    height: .7rem;
    flex-shrink: 0;
    transition: transform .25s ease;
}

/* Submenu reset + child-link styling (shared across breakpoints) */
.navbar .navbar__submenu { list-style: none; margin: 0; }
.navbar .navbar__submenu-link {
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1), color .3s;
    display: flex;
    align-items: center;
    color: #0a071b;
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 500;
    border-radius: 3.125rem;
    padding: .5rem .875rem;
    white-space: nowrap;
}
.navbar .navbar__submenu-link:hover,
.navbar .navbar__submenu-link.is-active { background-color: #f5f4fb; }

/* ---------- Desktop: hover / focus dropdown panel ---------- */
@media (min-width: 62rem) {
    .navbar .navbar__menu-item--has-children { position: relative; }

    .navbar .navbar__submenu {
        padding: .4rem;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 14rem;
        background: #fff;
        border: 1px solid #e5e3f0;
        border-radius: 14px;
        box-shadow: 0 12px 34px rgba(13, 20, 36, .14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
        z-index: 60;
    }
    /* invisible bridge over the gap so the panel stays open on the way down */
    .navbar .navbar__menu-item--has-children::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 14px;
    }
    .navbar .navbar__menu-item--has-children:hover > .navbar__submenu,
    .navbar .navbar__menu-item--has-children:focus-within > .navbar__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(8px);
    }
    .navbar .navbar__menu-item--has-children:hover .navbar__caret,
    .navbar .navbar__menu-item--has-children:focus-within .navbar__caret {
        transform: rotate(180deg);
    }
    .navbar .navbar__submenu-item + .navbar__submenu-item { margin-top: .1rem; }
}

/* ---------- Mobile: tap-to-expand accordion ---------- */
@media (max-width: 61.9375rem) {
    .navbar .navbar__menu-toggle {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }
    .navbar .navbar__submenu {
        padding: .25rem 0 .25rem .75rem;
        overflow: hidden;
        max-height: 0;
        opacity: .5;
        transition: max-height .3s ease, opacity .3s ease;
    }
    .navbar .navbar__menu-item.is-open > .navbar__submenu {
        max-height: 30rem;
        opacity: 1;
    }
    .navbar .navbar__menu-item.is-open .navbar__caret { transform: rotate(180deg); }
}