/* Block: ServiceNow Efficiency. All selectors scoped under .servicenow-efficiency (BEM). */

/* editor-style.css only ships a subset of the :root palette (no --middle-blue,
   no --green-2), so every use of those two carries the literal as a fallback —
   otherwise the Gutenberg preview loses the background and the accent. */
.servicenow-efficiency {
    background: var(--middle-blue, #0A3253);
    color: #fff;
    padding: 80px 0;
}

.servicenow-efficiency__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* ---- Header: eyebrow / title / description -------------------------------- */
.servicenow-efficiency__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-align: center;
}

.servicenow-efficiency__eyebrow {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    color: var(--lightblue);
}

/* The theme's global h2 rules set their own family/size/margins, so the block
   restates all of them.
   Two extra hoops, both aimed at the Gutenberg preview: `editor-style.css`
   declares `.block-editor-writing-flow h2 { color: var(--main-color)
   !important; font-size: 32px !important; }`. !important cannot be beaten by
   specificity alone, and at equal priority that selector is (0,1,1) — so the
   two forced properties are restated as !important AND the selector is doubled
   up to (0,2,0) to outrank it. Without this the heading renders dark navy on
   the navy section and is essentially unreadable while editing. Only `color`
   and `font-size` need it; everything else wins at normal priority. */
.servicenow-efficiency .servicenow-efficiency__title {
    margin: 0;
    padding: 0;
    font-family: "Zurich", sans-serif;
    font-weight: bold;
    font-size: 60px !important;
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: #fff !important;
}

.servicenow-efficiency__description {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
}

/* ---- Check bullets -------------------------------------------------------- */
.servicenow-efficiency__bullets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.servicenow-efficiency__bullet {
    display: flex;
    align-items: center;
    /* In the design the icon+text row is a fixed-width block centred inside the
       card, not a full-bleed row — hence the inner __bullet-body wrapper. */
    justify-content: center;
    padding: 30px 24px;
    border-radius: 10px;
    background: var(--main-color, #0C3C60);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.servicenow-efficiency__bullet-body {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 600px;
}

/* Figma stroke colour of the check glyph; it is a lighter green than --green-2
   and has no theme variable. */
.servicenow-efficiency__bullet-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #26C485;
}

/* The glyph is painted here rather than left to `currentColor`.
   `editor-style.css` carries `.editor-styles-wrapper * { color:
   var(--main-color) }`, and that universal rule also matches the shapes inside
   an inline SVG — so in the Gutenberg preview currentColor resolves to the
   theme blue and the check disappears. This selector is (0,1,1) and wins. */
.servicenow-efficiency__bullet-icon path {
    stroke: #26C485;
}

.servicenow-efficiency__bullet-text {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
}

/* ---- Note ----------------------------------------------------------------- */
.servicenow-efficiency__note {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    letter-spacing: 0.5px;
    text-align: center;
    color: #fff;
}

/* ---- Metric cards --------------------------------------------------------- */
.servicenow-efficiency__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.servicenow-efficiency__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 30px 24px;
    border: 1px solid var(--lightblue);
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.04);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    text-align: center;
}

/* Figma keeps a 40px icon slot with a 33.333px glyph inside it. */
.servicenow-efficiency__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #D2DFE8;
}

.servicenow-efficiency__card-icon svg {
    display: block;
    width: 33.333px;
    height: 33.333px;
}

/* Painted from CSS for the same reason as the bullet check above. */
.servicenow-efficiency__card-icon svg path {
    fill: #D2DFE8;
}

.servicenow-efficiency__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.servicenow-efficiency__card-label {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-transform: uppercase;
    color: #fff;
}

.servicenow-efficiency__card-metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Chalet Custom at weight 700 is chalet_ny.otf — the same New York cut the
   design uses for this figure. */
.servicenow-efficiency__card-value {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: normal;
    color: var(--green-2, #7AE567);
}

.servicenow-efficiency__card-text {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
}

/* ---- CTA ------------------------------------------------------------------ */
.servicenow-efficiency__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 16px;
}

/* The lead-in line only exists on the mobile board. */
.servicenow-efficiency__cta-note {
    display: none;
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    color: #fff;
}

.servicenow-efficiency__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 38px;
    border-radius: 8px;
    background: var(--green-2, #7AE567);
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    color: var(--main-color, #0C3C60);
    transition: opacity 0.2s ease;
}

.servicenow-efficiency__btn:hover,
.servicenow-efficiency__btn:focus {
    opacity: 0.9;
    color: var(--main-color, #0C3C60);
    text-decoration: none;
}

.servicenow-efficiency__btn-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

/* The short label only exists when the editor filled it in; it takes over from
   the full label on the mobile board. */
.servicenow-efficiency__btn-label--short {
    display: none;
}

/* ---- Responsive -----------------------------------------------------------
   Three tiers matching the Figma frames:
   base >=1500px = 1920 frame, <=1499px = 1440 frame, <=1023px = 375 frame. */

@media (max-width: 1499px) {
    .servicenow-efficiency {
        padding: 60px 0;
    }

    .servicenow-efficiency__inner {
        gap: 40px;
    }

    .servicenow-efficiency__header {
        gap: 14px;
    }

    .servicenow-efficiency__eyebrow {
        font-size: 16px;
        letter-spacing: 0.32px;
    }

    .servicenow-efficiency .servicenow-efficiency__title {
        font-size: 50px !important;
        letter-spacing: -0.5px;
    }

    .servicenow-efficiency__description {
        font-size: 20px;
    }

    .servicenow-efficiency__bullet {
        padding: 25px 20px;
    }

    .servicenow-efficiency__bullet-body {
        gap: 8px;
        max-width: 500px;
    }

    .servicenow-efficiency__bullet-text {
        font-size: 16px;
    }

    .servicenow-efficiency__note {
        font-size: 16px;
        letter-spacing: 0.4167px;
    }

    .servicenow-efficiency__cards {
        gap: 17px;
    }

    .servicenow-efficiency__card {
        gap: 14px;
        padding: 26px 20px;
        border-radius: 20px;
    }

    .servicenow-efficiency__card-body {
        gap: 15px;
    }

    .servicenow-efficiency__card-label {
        font-size: 14px;
    }

    .servicenow-efficiency__card-metric {
        gap: 7px;
    }

    .servicenow-efficiency__card-value {
        font-size: 22px;
    }

    .servicenow-efficiency__card-text {
        font-size: 16px;
    }

    /* The 1440 board drops the extra lead-in above the button — the section gap
       alone carries the spacing. */
    .servicenow-efficiency__cta {
        padding-top: 0;
    }

    .servicenow-efficiency__btn {
        gap: 8px;
        padding: 13px 32px;
        border-radius: 7px;
        font-size: 18px;
    }

    .servicenow-efficiency__btn-icon {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 1023px) {
    .servicenow-efficiency {
        padding: 30px 0;
    }

    .servicenow-efficiency__inner {
        /* Overrides align-items: center, which would otherwise shrink every row
           to its content width instead of the full column. */
        align-items: stretch;
        gap: 30px;
    }

    .servicenow-efficiency__eyebrow {
        font-size: 14px;
        letter-spacing: normal;
    }

    .servicenow-efficiency .servicenow-efficiency__title {
        font-size: 26px !important;
        letter-spacing: normal;
    }

    .servicenow-efficiency__description {
        font-size: 16px;
    }

    .servicenow-efficiency__bullets {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .servicenow-efficiency__bullet {
        justify-content: flex-start;
        padding: 16px;
        border-radius: 8px;
    }

    .servicenow-efficiency__bullet-body {
        gap: 12px;
        max-width: none;
    }

    .servicenow-efficiency__bullet-text {
        font-size: 15px;
    }

    .servicenow-efficiency__note {
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: normal;
    }

    .servicenow-efficiency__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .servicenow-efficiency__card {
        gap: 16px;
        padding: 24px;
        border-radius: 16px;
    }

    .servicenow-efficiency__card-body {
        gap: 8px;
    }

    .servicenow-efficiency__card-metric {
        gap: 8px;
    }

    .servicenow-efficiency__card-value {
        font-size: 28px;
    }

    .servicenow-efficiency__card-text {
        font-size: 15px;
    }

    /* The long label moves out of the button and onto its own line here, so the
       two need the same 30px seam the rest of the mobile stack uses. */
    .servicenow-efficiency__cta {
        gap: 30px;
        padding-top: 0;
    }

    .servicenow-efficiency__cta-note {
        display: block;
    }

    .servicenow-efficiency__btn {
        width: 100%;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
    }

    .servicenow-efficiency__btn-label--full {
        display: none;
    }

    .servicenow-efficiency__btn-label--short {
        display: inline;
    }

    .servicenow-efficiency__btn-icon {
        width: 26px;
        height: 26px;
    }
}