/*
    Styles for Apex blocks whose stylesheets were never captured in the site rip.

    templates/index.html renders four blocks whose build/blocks/<name>/style-view.css
    was never downloaded -- those directories contain only the view*.js. WordPress had
    inlined that CSS into each page's <head>, and the homepage lost its copy when it
    was refactored to extend base_public.html (which was cut from the privacy-policy
    page, so it carries that page's inlined block CSS instead).

    Rebuilt here from the live DOM structure, in the theme's own idiom:
      - vw-based scale with a px floor, matching --wp--preset--font-size--* clamps
      - palette from the theme's CSS custom properties, with literal fallbacks
    Layout only. Colours/typography already come from the has-*-color utility classes.
*/

:root {
    --apex-gap: clamp(16px, 1.25vw, 1.25vw);
    --apex-pad: clamp(20px, 1.6667vw, 1.6667vw);
    --apex-radius: clamp(8px, 0.625vw, 0.625vw);
}

/* ---------------------------------------------------------------
   Stats block  --  three cobalt counter tiles
   Was: bare <ul> with visible markers, each <li> full-width.
   --------------------------------------------------------------- */
/* The block is a direct sibling of the hero with no spacing wrapper of its own,
   so the tiles butted straight up against the banner. 4.1667vw matches the
   theme's --wp--preset--spacing--80, which sets the rhythm for the sections
   further down the page. */
.apex-stats-block {
    margin-top: clamp(32px, 4.1667vw, 4.1667vw);
}

.apex-stats-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--apex-gap);
}

.apex-stats-block li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--apex-pad);
    border-radius: var(--apex-radius);
    background-color: var(--wp--preset--color--cobalt, #0026ff);
    color: #fff;
    text-align: center;
}

.apex-stats-block .counter-wrapper {
    color: #fff;
    font-weight: 800;
    line-height: 1.15;
}

.apex-stats-block .counter-text {
    margin-top: 0.45em;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   Benefits block  --  card grid ("The All New Summit")
   Was: five full-width cards stacked down the page.
   auto-fit keeps the last row balanced whatever the card count.
   --------------------------------------------------------------- */
.apex-benefits-block__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 17vw, 17vw), 1fr));
    gap: var(--apex-gap);
    margin-top: clamp(24px, 2vw, 2vw);
}

.apex-benefits-block__card-wrapper {
    display: flex;
}

.apex-benefits-block__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--apex-pad);
    border-radius: var(--apex-radius);
}

.apex-benefits-block__card figure {
    margin: 0 0 clamp(12px, 0.9vw, 0.9vw);
}

.apex-benefits-block__card-logo {
    width: clamp(52px, 3.6vw, 3.6vw);
    height: auto;
}

.apex-benefits-block__card-heading {
    margin: 0 0 clamp(8px, 0.5vw, 0.5vw);
    line-height: 1.25;
}

.apex-benefits-block__card-description {
    margin: 0;
    line-height: 1.6;
    /* the source copy carries hard newlines; keep them from collapsing oddly */
    white-space: pre-line;
}

/* ---------------------------------------------------------------
   Cloud systems showcase  --  media beside copy
   Was: display:block, so the 1018x1024 bull rendered at natural size
   above the text and left ~700px of dead space.
   --------------------------------------------------------------- */
.apex-cloud-systems-showcase-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 2.5vw, 2.5vw);
}

.apex-cloud-systems-showcase-block__video {
    flex: 1 1 48%;
    min-width: min(100%, 280px);
}

.apex-cloud-systems-showcase-block__video-thumbnail-wrapper {
    position: relative;
    line-height: 0;
}

.apex-cloud-systems-showcase-block__video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

.apex-cloud-systems-showcase-block__content {
    flex: 1 1 40%;
    min-width: min(100%, 280px);
}

.apex-cloud-systems-showcase-block__features {
    margin: 0 0 clamp(16px, 1.25vw, 1.25vw);
    padding: 0;
    list-style: none;
}

.apex-cloud-systems-showcase-block__features li {
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.apex-cloud-systems-showcase-block__link {
    display: inline-block;
}

/* ---------------------------------------------------------------
   Description block  --  standalone paragraph
   --------------------------------------------------------------- */
.apex-description-block {
    max-width: 68ch;
    margin-inline: 0;
}

.apex-description-block.text-center {
    margin-inline: auto;
}

/* ---------------------------------------------------------------
   Narrow screens: collapse the multi-column blocks.
   --------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .apex-stats-block ul {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .apex-cloud-systems-showcase-block {
        flex-direction: column;
    }

    .apex-cloud-systems-showcase-block__video,
    .apex-cloud-systems-showcase-block__content {
        flex-basis: 100%;
    }
}
