/* Block: AI SDLC Hero. All selectors scoped under .ai-sdlc-hero (BEM). */

.ai-sdlc-hero {
    position: relative;
    overflow: hidden;
    /* Flat dark-blue base with a soft glow behind the visual
       (Figma background "Vector", approximated as a gradient). */
    background:
        radial-gradient(48% 52% at 73% 12%, rgba(67, 151, 210, 0.55) 0%, rgba(12, 60, 96, 0) 62%),
        var(--main-color);
    color: #fff;
    padding: 80px 0;
}

/* One grid drives the whole block. The DOM order is the mobile order
   (intro > media > actions > badges > cards), and the desktop layout is
   rebuilt here with named areas — so the mobile stack needs no re-ordering. */
.ai-sdlc-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* Figma column proportions: 712 / 606 with a 120px gutter. */
    grid-template-columns: minmax(0, 712fr) minmax(0, 606fr);
    grid-template-areas:
        "intro   media"
        "badges  media"
        "cards   cards"
        "actions actions";
    column-gap: 120px;
    row-gap: 50px;
    align-items: start;
}

/* ---- Intro: title / description / tag pills ------------------------------ */
.ai-sdlc-hero__intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-sdlc-hero__title {
    margin: 0;
    padding: 0;
    font-family: "Zurich", sans-serif;
    font-weight: bold;
    font-size: 64px;
    line-height: 1.1;
    color: #fff;
}

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

.ai-sdlc-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Figma measures the pill box without its stroke, so every horizontal padding
   below is the design value minus the 1px border — otherwise each pill is 2px
   too wide and the row of seven wraps one pill earlier than in the design. */
.ai-sdlc-hero__tag {
    padding: 7px 17px;
    border: 1px solid var(--lightblue);
    border-radius: 20px;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    text-transform: capitalize;
    color: var(--lightblue);
}

/* ---- Visual --------------------------------------------------------------- */
.ai-sdlc-hero__media {
    grid-area: media;
    /* Spans the intro + badges rows and stretches to their full height, so its
       bottom edge lines up with the badge row exactly as in the design. The
       aspect ratio still sets the minimum height when the text column is short. */
    align-self: stretch;
    /* Width stays pinned to the grid column; the height comes from the text
       column next to it. min-height guards a very short heading. */
    position: relative;
    width: 100%;
    min-height: 400px;
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
}

/* Absolutely positioned so the artwork's own aspect ratio never inflates the
   slot — it is cropped to fill it, exactly as in the design. */
.ai-sdlc-hero__media-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- CTA pair ------------------------------------------------------------- */
.ai-sdlc-hero__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.ai-sdlc-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 38px;
    border-radius: 8px;
    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, background 0.2s ease, color 0.2s ease;
}

.ai-sdlc-hero__btn--primary {
    background: var(--green-2);
    color: var(--main-color);
}

.ai-sdlc-hero__btn--primary:hover,
.ai-sdlc-hero__btn--primary:focus {
    opacity: 0.9;
    color: var(--main-color);
    text-decoration: none;
}

.ai-sdlc-hero__btn--secondary {
    /* 1px border → 20px padding keeps both buttons the same height. */
    padding: 20px 38px;
    background: transparent;
    border: 1px solid var(--green-2);
    color: var(--green-2);
}

.ai-sdlc-hero__btn--secondary:hover,
.ai-sdlc-hero__btn--secondary:focus {
    background: var(--green-2);
    color: var(--main-color);
    text-decoration: none;
}

.ai-sdlc-hero__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. */
.ai-sdlc-hero__btn-label--short {
    display: none;
}

/* ---- Partner badges + certificate ----------------------------------------- */
.ai-sdlc-hero__badges {
    grid-area: badges;
    /* Sits at the bottom of the left column, level with the visual. */
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    /* The certificate is shorter than the square badges (90 vs 110), and the
       design lines the two up on their bottom edge, not their centres — Figma
       offsets it by 19px inside a 110px row. The mobile board switches this
       container to a column, where its own rule re-centres on the cross axis. */
    align-items: flex-end;
    gap: 16px;
}

.ai-sdlc-hero__badge-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-sdlc-hero__badge-img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 8px;
}

.ai-sdlc-hero__certificate-img {
    display: block;
    width: auto;
    height: 90px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* ---- Benefit cards -------------------------------------------------------- */
.ai-sdlc-hero__cards {
    grid-area: cards;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    /* Figma: 60px between the badge row and the cards, 50px at the other seams. */
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.ai-sdlc-hero__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 33px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

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

.ai-sdlc-hero__card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.ai-sdlc-hero__card-text {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
}

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

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

    .ai-sdlc-hero__inner {
        grid-template-columns: minmax(0, 593fr) minmax(0, 505fr);
        column-gap: 100px;
        row-gap: 38px;
    }

    .ai-sdlc-hero__intro {
        gap: 18px;
    }

    /* 18px gap + 6px = the 24px the 1440 board puts before the pills. */
    .ai-sdlc-hero__tags {
        margin-top: 6px;
        gap: 10px 6.667px;
    }

    .ai-sdlc-hero__title {
        font-size: 50px;
    }

    .ai-sdlc-hero__description {
        font-size: 20px;
    }

    .ai-sdlc-hero__tag {
        padding: 6px 14px;
        border-radius: 16px;
    }

    .ai-sdlc-hero__media {
        min-height: 340px;
        border-radius: 20px;
    }

    .ai-sdlc-hero__actions {
        margin-top: 10px;
        gap: 17px;
    }

    .ai-sdlc-hero__btn {
        padding: 13px 32px;
        border-radius: 7px;
        font-size: 18px;
    }

    .ai-sdlc-hero__btn--secondary {
        padding: 16px 32px;
    }

    .ai-sdlc-hero__btn-icon {
        width: 26px;
        height: 26px;
    }

    .ai-sdlc-hero__badges {
        gap: 13px;
    }

    .ai-sdlc-hero__badge-list {
        gap: 12px;
    }

    .ai-sdlc-hero__badge-img {
        width: 92px;
        height: 92px;
    }

    .ai-sdlc-hero__certificate-img {
        height: 75px;
    }

    .ai-sdlc-hero__cards {
        margin-top: 12px;
        gap: 17px;
    }

    .ai-sdlc-hero__card {
        gap: 20px;
        padding: 27px;
        border-radius: 20px;
    }

    .ai-sdlc-hero__card-eyebrow {
        font-size: 14px;
    }

    .ai-sdlc-hero__card-body {
        gap: 10px;
    }

    .ai-sdlc-hero__card-title {
        font-size: 20px;
    }

    .ai-sdlc-hero__card-text {
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    .ai-sdlc-hero {
        padding: 20px 0 30px;
    }

    /* Mobile board: a plain stack in DOM order —
       intro > visual > CTAs > badges > cards. */
    .ai-sdlc-hero__inner {
        display: flex;
        flex-direction: column;
        /* Overrides the desktop grid's align-items: start, which would otherwise
           shrink every row to its content width instead of the full column. */
        align-items: stretch;
        gap: 20px;
    }

    .ai-sdlc-hero__intro {
        gap: 16px;
    }

    .ai-sdlc-hero__tags {
        margin-top: 0;
        gap: 6px;
    }

    .ai-sdlc-hero__title {
        font-size: 30px;
    }

    .ai-sdlc-hero__description {
        font-size: 16px;
    }

    .ai-sdlc-hero__tag {
        padding: 7px 11px;
        border-radius: 20px;
        font-size: 12px;
        text-transform: none;
    }

    .ai-sdlc-hero__media {
        flex: 0 0 auto;
        height: 240px;
        min-height: 0;
        border-radius: 16px;
    }

    .ai-sdlc-hero__actions {
        margin-top: 0;
        flex-direction: column;
        /* A wrapping column would size its line to the widest button instead of
           the container, so the full-width CTAs of the mobile board need nowrap. */
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
    }

    .ai-sdlc-hero__btn {
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        text-transform: none;
    }

    .ai-sdlc-hero__btn--secondary {
        padding: 16px 24px;
    }

    .ai-sdlc-hero__btn-label--full {
        display: none;
    }

    .ai-sdlc-hero__btn-label--short {
        display: inline;
    }

    .ai-sdlc-hero__badges {
        /* Drop the desktop bottom-pinning, which would right-align the row here. */
        align-self: stretch;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .ai-sdlc-hero__badge-list {
        justify-content: center;
        gap: 12px;
    }

    .ai-sdlc-hero__badge-img {
        width: 80px;
        height: 80px;
    }

    .ai-sdlc-hero__certificate-img {
        height: 64px;
    }

    .ai-sdlc-hero__cards {
        margin-top: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ai-sdlc-hero__card {
        gap: 16px;
        padding: 24px;
        border-radius: 16px;
    }

    .ai-sdlc-hero__card-body {
        gap: 8px;
    }

    .ai-sdlc-hero__card-text {
        font-size: 15px;
    }
}