/* Block: AI Delivery Problem. All selectors scoped under .ai-delivery-problem (BEM). */

/* Figma greys with no theme variable: #F0F3F6 is the section ground (same one
   service-coverage-cards uses), #E2E8F0 / #D2DFE8 are the benefit-card hairlines. */
.ai-delivery-problem {
    background: #F0F3F6;
    color: var(--main-color);
    padding: 80px 0;
}

.ai-delivery-problem__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* ---- Header --------------------------------------------------------------- */
.ai-delivery-problem__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}

.ai-delivery-problem__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. Only `color` and `font-size` need it. (h3 is
   not forced, so the card titles below need none of this.) */
.ai-delivery-problem .ai-delivery-problem__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: var(--main-color) !important;
}

.ai-delivery-problem__description {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    color: var(--main-color);
}

/* The short copy only exists when the editor filled it in; it takes over from
   the full copy on the mobile board. */
.ai-delivery-problem__text--short {
    display: none;
}

/* ---- Comparison panels ---------------------------------------------------- */
.ai-delivery-problem__compare {
    display: flex;
    /* Both panels match the taller one. Figma fakes this with a big
       padding-bottom on the solution card — that is not carried over. */
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.ai-delivery-problem__panel {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 50px;
    border-radius: 24px;
}

.ai-delivery-problem__panel--problem {
    background: var(--main-color);
    color: #fff;
}

.ai-delivery-problem__panel--solution {
    background: #fff;
    border: 2px solid var(--green-2, #7AE567);
    color: var(--main-color);
}

/* The text colour is restated on the leaf elements instead of being inherited
   from the panel. `editor-style.css` carries `.editor-styles-wrapper *
   { color: var(--main-color) }`, which repaints every intermediate wrapper —
   so in the Gutenberg preview an inherited white would be swallowed on the way
   down and the dark panel's copy would go invisible. These pairs are (0,2,0)
   and win over that universal rule regardless of load order. */
.ai-delivery-problem__panel--problem .ai-delivery-problem__panel-title,
.ai-delivery-problem__panel--problem .ai-delivery-problem__panel-text {
    color: #fff;
}

.ai-delivery-problem__panel--solution .ai-delivery-problem__panel-title,
.ai-delivery-problem__panel--solution .ai-delivery-problem__panel-text {
    color: var(--main-color);
}

.ai-delivery-problem__panel-header {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.ai-delivery-problem__panel-eyebrow {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--lightblue);
}

.ai-delivery-problem__panel-title {
    margin: 0;
    padding: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: inherit;
}

.ai-delivery-problem__panel-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Font metrics live on the row so the icon offset below can be expressed in em
   and follow every breakpoint on its own. */
.ai-delivery-problem__panel-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
}

/* Centres the 14px glyph on the first line of text rather than on the whole
   (possibly multi-line) row. */
.ai-delivery-problem__panel-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: calc((1.4em - 14px) / 2);
}

/* Glyph paint comes from CSS, not from `currentColor` on the SVG.
   `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 every icon silently vanishes into its own background. These
   selectors are (0,2,1), which beats both that rule and the presentation
   attribute on the element. The stroke="currentColor" left in the markup stays
   as a sane default for anything that renders the SVG without this stylesheet. */
.ai-delivery-problem__panel--problem .ai-delivery-problem__panel-icon g,
.ai-delivery-problem__panel--problem .ai-delivery-problem__panel-icon line,
.ai-delivery-problem__panel--problem .ai-delivery-problem__panel-icon path {
    stroke: var(--red);
}

/* Figma stroke colour of the check glyph; it is a lighter green than --green-2
   and has no theme variable. */
.ai-delivery-problem__panel--solution .ai-delivery-problem__panel-icon g,
.ai-delivery-problem__panel--solution .ai-delivery-problem__panel-icon line,
.ai-delivery-problem__panel--solution .ai-delivery-problem__panel-icon path {
    stroke: #26C485;
}

.ai-delivery-problem__panel-text {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
}

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

.ai-delivery-problem__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 34px;
    border: 2px solid #E2E8F0;
    border-radius: 24px;
    background: #fff;
}

/* Every glyph is normalised into a 40x40 viewBox in view.php, so one rule
   sizes all three while each keeps its designed proportions inside the box. */
.ai-delivery-problem__card-icon {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--lightblue);
}

.ai-delivery-problem__card-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Painted from CSS for the same reason as the bullet glyphs above. */
.ai-delivery-problem__card-icon svg g,
.ai-delivery-problem__card-icon svg path {
    fill: var(--lightblue);
}

.ai-delivery-problem__card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.ai-delivery-problem__card-title {
    margin: 0;
    padding: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: var(--main-color);
}

.ai-delivery-problem__card-text {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--main-color);
}

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

@media (max-width: 1499px) {
    .ai-delivery-problem {
        padding: 60px 0;
    }

    .ai-delivery-problem__inner {
        gap: 40px;
    }

    .ai-delivery-problem__header {
        gap: 14px;
    }

    .ai-delivery-problem__eyebrow {
        font-size: 16px;
        letter-spacing: 0.32px;
    }

    .ai-delivery-problem .ai-delivery-problem__title {
        font-size: 50px !important;
        letter-spacing: -0.5px;
    }

    .ai-delivery-problem__description {
        font-size: 20px;
    }

    .ai-delivery-problem__compare {
        gap: 17px;
    }

    .ai-delivery-problem__panel {
        gap: 22px;
        padding: 40px;
        border-radius: 20px;
    }

    .ai-delivery-problem__panel-header {
        gap: 24px;
    }

    .ai-delivery-problem__panel-eyebrow {
        font-size: 14px;
    }

    .ai-delivery-problem__panel-title {
        font-size: 22px;
    }

    .ai-delivery-problem__panel-list {
        gap: 20px;
    }

    .ai-delivery-problem__panel-item {
        gap: 10px;
        font-size: 16px;
    }

    .ai-delivery-problem__cards {
        gap: 17px;
    }

    .ai-delivery-problem__card {
        gap: 14px;
        padding: 28px;
        border-radius: 20px;
    }

    .ai-delivery-problem__card-icon {
        width: 30px;
        height: 30px;
    }

    .ai-delivery-problem__card-title {
        font-size: 20px;
    }

    .ai-delivery-problem__card-text {
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    .ai-delivery-problem {
        padding: 30px 0;
    }

    .ai-delivery-problem__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;
    }

    .ai-delivery-problem__eyebrow {
        font-size: 14px;
        letter-spacing: normal;
    }

    .ai-delivery-problem .ai-delivery-problem__title {
        font-size: 26px !important;
        letter-spacing: normal;
    }

    .ai-delivery-problem__description {
        font-size: 16px;
    }

    .ai-delivery-problem__text--full {
        display: none;
    }

    .ai-delivery-problem__text--short {
        display: inline;
    }

    .ai-delivery-problem__compare {
        flex-direction: column;
        gap: 20px;
    }

    .ai-delivery-problem__panel {
        gap: 20px;
        padding: 30px 24px;
        border-radius: 16px;
    }

    .ai-delivery-problem__panel-header {
        gap: 16px;
    }

    .ai-delivery-problem__panel-eyebrow {
        letter-spacing: 0.28px;
    }

    .ai-delivery-problem__panel-title {
        font-size: 20px;
    }

    .ai-delivery-problem__panel-list {
        gap: 16px;
    }

    .ai-delivery-problem__panel-item {
        font-size: 15px;
        line-height: 1.3;
    }

    .ai-delivery-problem__panel-icon {
        margin-top: calc((1.3em - 14px) / 2);
    }

    .ai-delivery-problem__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ai-delivery-problem__card {
        gap: 16px;
        padding: 24px;
        border-width: 1px;
        border-color: #D2DFE8;
        border-radius: 16px;
    }

    .ai-delivery-problem__card-body {
        gap: 8px;
    }

    .ai-delivery-problem__card-title {
        line-height: 1.12;
    }

    .ai-delivery-problem__card-text {
        font-size: 15px;
    }
}