/* Block: Progressive Commitment. All selectors scoped under .progressive-commitment (BEM).

   Two editor-only hazards shape this file, both from editor-style.css:
   1. `.block-editor-writing-flow h2 { color/font-size !important }` — beaten by
      doubling the section-title selector AND restating those two properties as
      !important (see __title below).
   2. `.editor-styles-wrapper * { color: var(--main-color) }` — a universal rule
      that repaints every wrapper and every shape inside an inline SVG. So on
      this dark section the text colour is stated on each leaf element (never
      `color: inherit`) and the glyphs are painted from CSS, not currentColor.
   Both are invisible on the front end and only break the Gutenberg preview. */

.progressive-commitment {
    background: var(--main-color);
    padding: 80px 0;
}

.progressive-commitment__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
}

/* ---- Header --------------------------------------------------------------- */
.progressive-commitment__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.progressive-commitment__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);
}

/* Doubled selector + !important: see the file header. */
.progressive-commitment .progressive-commitment__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;
}

.progressive-commitment__description {
    /* Figma wraps the lead paragraph well before the container edge. */
    max-width: 832px;
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
}

/* ---- CTA ------------------------------------------------------------------ */
.progressive-commitment__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;
    transition: opacity 0.2s ease;
}

.progressive-commitment__btn:hover,
.progressive-commitment__btn:focus {
    opacity: 0.9;
    text-decoration: none;
}

.progressive-commitment__btn-label {
    color: var(--main-color);
}

.progressive-commitment__btn-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--main-color);
}

.progressive-commitment__btn-icon path {
    stroke: 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. */
.progressive-commitment__text--short {
    display: none;
}

/* ---- Phase 0 banner ------------------------------------------------------- */
.progressive-commitment__phase {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 49px 33px;
    border: 1px solid var(--green-2, #7AE567);
    border-radius: 24px;
    /* Figma's translucent card fill; there is no theme variable for it. */
    background: rgba(3, 22, 48, 0.2);
}

.progressive-commitment__phase-eyebrow {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--green-2, #7AE567);
}

.progressive-commitment__phase-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progressive-commitment__phase-title {
    margin: 0;
    padding: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
}

.progressive-commitment__phase-text {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
}

.progressive-commitment__phase-text-inner {
    color: #fff;
}

/* ---- Package cards -------------------------------------------------------- */
.progressive-commitment__packages {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.progressive-commitment__package {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 24px;
    padding: 48px 32px;
    border: 1px solid #fff;
    border-radius: 24px;
}

/* Figma gives this card padding 51/35 against a 3px stroke — the same content
   inset as the others once the border is counted, which border-box already
   does, so the padding stays shared. */
.progressive-commitment__package--highlighted {
    border: 3px solid var(--green-2, #7AE567);
    background: rgba(3, 22, 48, 0.2);
}

.progressive-commitment__package-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.progressive-commitment__package-eyebrow {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--green-2, #7AE567);
}

.progressive-commitment__package-title {
    margin: 0;
    padding: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: #fff;
}

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

.progressive-commitment__package-divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #fff;
}

.progressive-commitment__features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    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. */
.progressive-commitment__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
}

/* Centres the glyph on the first line rather than on a wrapped two-line row. */
.progressive-commitment__feature-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: calc((1.4em - 14px) / 2);
}

/* Figma's check green; a lighter tone than --green-2, with no theme variable. */
.progressive-commitment__feature-icon path {
    stroke: #26C485;
}

.progressive-commitment__feature-text {
    color: #fff;
}

/* ---- Adoption card -------------------------------------------------------- */
.progressive-commitment__adoption {
    display: grid;
    /* Figma column widths: 660 / 520 with a 146px gutter. */
    grid-template-columns: minmax(0, 660fr) minmax(0, 520fr);
    column-gap: 146px;
    width: 100%;
    padding: 48px;
    border: 1px solid #fff;
    border-radius: 24px;
}

.progressive-commitment__adoption-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.progressive-commitment__adoption-eyebrow {
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--green-2, #7AE567);
}

.progressive-commitment__adoption-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progressive-commitment__adoption-title {
    margin: 0;
    padding: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
}

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

.progressive-commitment__adoption-aside {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.progressive-commitment__adoption-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.progressive-commitment__adoption-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
}

/* Rough optical centring of the 4px dot on the first line; line-height here is
   `normal`, so this leans on the em box rather than an exact ratio. */
.progressive-commitment__adoption-dot {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    margin-top: calc(0.6em - 2px);
}

.progressive-commitment__adoption-dot circle {
    fill: var(--green-2, #7AE567);
}

.progressive-commitment__adoption-item-text {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
}

.progressive-commitment__adoption-note {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: var(--lightblue);
}

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

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

    .progressive-commitment__inner {
        gap: 47px;
    }

    .progressive-commitment__header {
        gap: 14px;
    }

    .progressive-commitment__eyebrow {
        font-size: 16px;
        letter-spacing: 0.32px;
    }

    .progressive-commitment .progressive-commitment__title {
        font-size: 50px !important;
        letter-spacing: -0.5px;
    }

    .progressive-commitment__description {
        max-width: 693px;
        font-size: 20px;
    }

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

    .progressive-commitment__btn-icon {
        width: 26px;
        height: 26px;
    }

    .progressive-commitment__phase {
        gap: 17px;
        padding: 41px 28px;
        border-radius: 20px;
    }

    .progressive-commitment__phase-eyebrow {
        font-size: 14px;
    }

    .progressive-commitment__phase-body {
        gap: 8px;
    }

    .progressive-commitment__phase-title {
        font-size: 22px;
    }

    .progressive-commitment__phase-text {
        font-size: 16px;
    }

    .progressive-commitment__packages {
        gap: 20px;
    }

    .progressive-commitment__package {
        gap: 20px;
        padding: 40px 27px;
        border-radius: 20px;
    }

    .progressive-commitment__package-header {
        gap: 10px;
    }

    .progressive-commitment__package-eyebrow {
        font-size: 14px;
    }

    .progressive-commitment__package-title {
        font-size: 30px;
    }

    .progressive-commitment__package-text {
        font-size: 16px;
    }

    .progressive-commitment__features {
        gap: 13px;
    }

    .progressive-commitment__feature {
        gap: 8px;
        font-size: 16px;
    }

    .progressive-commitment__adoption {
        column-gap: 122px;
        padding: 40px;
        border-radius: 20px;
    }

    .progressive-commitment__adoption-main {
        gap: 17px;
    }

    .progressive-commitment__adoption-eyebrow {
        font-size: 14px;
    }

    .progressive-commitment__adoption-body {
        gap: 8px;
    }

    .progressive-commitment__adoption-title {
        font-size: 22px;
    }

    .progressive-commitment__adoption-text {
        font-size: 16px;
    }

    .progressive-commitment__adoption-aside {
        gap: 25px;
    }

    .progressive-commitment__adoption-list {
        gap: 15px;
    }

    .progressive-commitment__adoption-item {
        gap: 10px;
        font-size: 16px;
    }

    .progressive-commitment__adoption-note {
        font-size: 16px;
    }
}

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

    .progressive-commitment__inner {
        /* Overrides align-items: flex-start, which would otherwise shrink every
           row to its content width instead of the full column. */
        align-items: stretch;
        gap: 32px;
    }

    /* The mobile board centres the heading group; the desktop one left-aligns it. */
    .progressive-commitment__header {
        align-items: center;
        text-align: center;
    }

    .progressive-commitment__eyebrow {
        font-size: 14px;
        letter-spacing: normal;
    }

    .progressive-commitment .progressive-commitment__title {
        font-size: 26px !important;
        letter-spacing: normal;
    }

    .progressive-commitment__description {
        max-width: none;
        font-size: 16px;
    }

    .progressive-commitment__btn {
        display: flex;
        width: 100%;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        text-transform: none;
    }

    .progressive-commitment__btn-icon {
        width: 26px;
        height: 26px;
    }

    .progressive-commitment__text--full {
        display: none;
    }

    .progressive-commitment__text--short {
        display: inline;
    }

    .progressive-commitment__phase {
        gap: 12px;
        padding: 30px 24px;
        border-radius: 16px;
    }

    .progressive-commitment__phase-eyebrow {
        line-height: 1.3;
    }

    .progressive-commitment__phase-body {
        gap: 6px;
    }

    .progressive-commitment__phase-title {
        font-size: 18px;
        line-height: normal;
    }

    /* The mobile board drops the body copy to 80% white throughout. */
    .progressive-commitment__phase-text {
        opacity: 0.8;
    }

    .progressive-commitment__packages {
        flex-direction: column;
        gap: 16px;
    }

    .progressive-commitment__package {
        gap: 20px;
        padding: 30px 24px;
        border-radius: 16px;
        /* On mobile every card gets the tint, not just the highlighted one. */
        background: rgba(3, 22, 48, 0.2);
    }

    .progressive-commitment__package--highlighted {
        border-width: 2px;
    }

    .progressive-commitment__package-header {
        gap: 6px;
    }

    .progressive-commitment__package-eyebrow {
        line-height: 1.3;
    }

    .progressive-commitment__package-title {
        font-size: 28px;
        line-height: normal;
    }

    .progressive-commitment__package-text {
        opacity: 0.8;
    }

    .progressive-commitment__features {
        gap: 10px;
    }

    .progressive-commitment__feature {
        font-size: 15px;
        opacity: 0.8;
    }

    .progressive-commitment__feature-icon {
        width: 12px;
        height: 12px;
        margin-top: calc((1.4em - 12px) / 2);
    }

    .progressive-commitment__adoption {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
        padding: 30px 24px;
        border-radius: 16px;
        background: rgba(3, 22, 48, 0.2);
    }

    .progressive-commitment__adoption-main {
        gap: 16px;
    }

    .progressive-commitment__adoption-eyebrow {
        line-height: 1.3;
    }

    .progressive-commitment__adoption-body {
        gap: 16px;
    }

    .progressive-commitment__adoption-title {
        font-size: 20px;
        line-height: normal;
    }

    .progressive-commitment__adoption-text {
        opacity: 0.8;
    }

    .progressive-commitment__adoption-aside {
        gap: 16px;
    }

    .progressive-commitment__adoption-list {
        gap: 10px;
    }

    .progressive-commitment__adoption-item {
        gap: 8px;
        font-size: 15px;
        line-height: 1.4;
        opacity: 0.8;
    }

    .progressive-commitment__adoption-dot {
        margin-top: calc(0.7em - 2px);
    }

    .progressive-commitment__adoption-note {
        font-size: 16px;
        line-height: 1.4;
        opacity: 0.8;
    }
}