/**
 * Four Steps Block Styles
 */

/* Container */
.block-four-steps {
    background-color: #f7f7f5;
    padding: 120px 58px;
    min-height: 834px;
    height: auto;
    /* Background spans full width ("infinite"); the inner .four-steps__container
       (max-width:1440) keeps the content contained. */
}

.four-steps__container {
    max-width: calc(1440px - 116px); /* 1324 content — same as header/megamenu/1vs2 (1440 minus 58px gutters); bg stays full width */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 82px;
}

/* In post content (.entry-content) the block's own side padding is zeroed by a
   shared `padding-inline: 0 !important` rule in site.css, which pushes the title,
   cards and descriptions edge-to-edge on mobile. Give the inner container its
   own horizontal breathing room in that context. */
@media (max-width: 820px) {
    .entry-content .block-four-steps .four-steps__container {
        padding-inline: 20px;
    }
}

@media (max-width: 393px) {
    .entry-content .block-four-steps .four-steps__container {
        padding-inline: 16px;
    }
}

/* Header */
.four-steps__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.four-steps__icon--left,
.four-steps__icon--right {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.four-steps__icon--left svg,
.four-steps__icon--right svg {
    width: 100%;
    height: 100%;
}

.four-steps__title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    color: black;
    text-align: center;
    margin: 0;
}

/* Content Section */
.four-steps__content {
    display: flex;
    gap: 62px;
    align-items: flex-start;
}

/* Left Column - Card */
.four-steps__left-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex-shrink: 0;
}

.four-steps__card {
    background-color: black;
    width: 513px;
    height: 350px;
    position: relative;
    overflow: hidden;
}

.four-steps__card-background {
    position: absolute;
    width: 381.706px;
    height: 381.706px;
    left: 65.29px;
    top: -15.71px;
    transition: opacity 0.3s ease;
}

.four-steps__card-background svg {
    width: 100%;
    height: 100%;
}

.four-steps__card-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    color: white;
    transition: opacity 0.3s ease;
}

.four-steps__card-description {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #141414;
    max-width: 513px;
    margin: 0;
    transition: opacity 0.3s ease;
}

/* Right Column - Steps */
.four-steps__right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0; /* steps stack flush so 4 items fit exactly the card height (350px) */
}

.four-steps__step {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 26px 0; /* 4 × (26+35+26)=348px ≈ card 350px */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.four-steps__step--border {
    border-bottom: 1px solid #bbbab6;
}

.four-steps__step--highlighted {
    background-color: white;
    padding: 26px 0; /* same as regular items — pill width = separator line width */
    margin: 0;
    border-bottom: none !important;
}

/* Active state — pill stays in place, only inner content shifts */
.four-steps__step--active {
    background-color: white !important;
    padding: 26px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
}

/* On active/hover: shift number + text 20px right, pill stays put */
.four-steps__step--active .four-steps__step-number,
.four-steps__step--active .four-steps__step-text,
.four-steps__step--highlighted .four-steps__step-number,
.four-steps__step--highlighted .four-steps__step-text {
    transform: translateX(20px);
}

.four-steps__step-number,
.four-steps__step-text {
    transition: transform 0.3s ease;
}

.four-steps__step-number {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    color: #bbbab6;
    width: 60px;
    flex-shrink: 0;
}

.four-steps__step-text {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    color: black;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .block-four-steps {
        padding: 80px 40px;
        height: auto;
        min-height: auto;
    }

    .four-steps__content {
        flex-direction: column;
        gap: 40px;
        /* Stretch columns to full width when stacked. The base rule uses
           align-items: flex-start (to top-align the two columns side-by-side on
           desktop); once stacked, flex-start makes each column shrink to its
           content width, leaving the step rows / highlight pill only ~64% wide
           with empty space on the right. Stretch makes the steps full width. */
        align-items: stretch;
    }

    .four-steps__card {
        width: 100%;
        max-width: 513px;
    }

    .four-steps__right-column {
        width: 100%;
    }

    .four-steps__card-description {
        max-width: 100%;
    }
}

/* Tablets and smaller - iPad portrait and below */
@media (max-width: 820px) {
    .block-four-steps {
        padding: 80px 30px;
        height: auto;
        min-height: auto;
    }

    .four-steps__container {
        gap: 50px;
    }

    /* Stack the header vertically on mobile: icon on top (centered), title in
       the middle, second icon at the bottom — all centered with an equal gap.
       (Was flex-wrap:wrap, which left the left icon stuck beside the wrapping
       title and dropped the second icon onto its own line.) */
    .four-steps__header {
        gap: 10px;
        flex-direction: column;
    }

    .four-steps__icon--left,
    .four-steps__icon--right {
        width: 50px;
        height: 50px;
    }

    .four-steps__title {
        font-size: 56px;
        letter-spacing: -2.8px;
    }

    .four-steps__card {
        width: 100%;
        max-width: 100%;
        height: 300px;
    }

    .four-steps__card-background {
        width: 300px;
        height: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .four-steps__card-number {
        font-size: 64px;
    }

    .four-steps__card-description {
        font-size: 17px;
    }

    .four-steps__step {
        gap: 25px;
        padding: 25px 0;
    }

    .four-steps__step-number {
        font-size: 26px;
        width: 55px;
    }

    .four-steps__step-text {
        font-size: 26px;
        letter-spacing: -1.3px;
    }

    .four-steps__step--highlighted,
    .four-steps__step--active {
        padding: 25px 0 !important;
        margin: 0 !important;
    }
}

/* Large phones - iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
    .block-four-steps {
        padding: 60px 20px;
    }

    .four-steps__container {
        gap: 40px;
    }

    .four-steps__header {
        gap: 7px;
    }

    .four-steps__icon--left,
    .four-steps__icon--right {
        width: 40px;
        height: 40px;
    }

    .four-steps__title {
        font-size: 26px;
        letter-spacing: -1.3px;
        overflow-wrap: anywhere;
    }

    .four-steps__card {
        height: 250px;
    }

    .four-steps__card-background {
        width: 250px;
        height: 250px;
    }

    .four-steps__card-number {
        font-size: 52px;
    }

    .four-steps__card-description {
        font-size: 16px;
    }

    .four-steps__step {
        gap: 20px;
        padding: 20px 0;
    }

    .four-steps__step-number {
        font-size: 22px;
        width: 50px;
    }

    .four-steps__step-text {
        font-size: 22px;
        letter-spacing: -1.1px;
    }

    .four-steps__step--highlighted,
    .four-steps__step--active {
        padding: 20px 0 !important;
        margin: 0 !important;
    }
}

/* Standard phones - iPhone 14 Pro, iPhone 13, iPhone 12 */
@media (max-width: 393px) {
    .block-four-steps {
        padding: 60px 18px;
    }

    .four-steps__title {
        font-size: 22px;
        letter-spacing: -1.1px;
        overflow-wrap: anywhere;
    }

    .four-steps__card {
        height: 230px;
    }

    .four-steps__card-background {
        width: 230px;
        height: 230px;
    }

    .four-steps__card-number {
        font-size: 48px;
    }

    .four-steps__step-number {
        font-size: 20px;
        width: 45px;
    }

    .four-steps__step-text {
        font-size: 20px;
        letter-spacing: -1px;
    }
}

/* Small phones - iPhone SE, iPhone 13 mini */
@media (max-width: 375px) {
    .block-four-steps {
        padding: 50px 16px;
    }

    .four-steps__container {
        gap: 35px;
    }

    .four-steps__icon--left,
    .four-steps__icon--right {
        width: 35px;
        height: 35px;
    }

    .four-steps__title {
        font-size: 20px;
        letter-spacing: -1px;
        overflow-wrap: anywhere;
    }

    .four-steps__card {
        height: 220px;
    }

    .four-steps__card-background {
        width: 220px;
        height: 220px;
    }

    .four-steps__card-number {
        font-size: 44px;
    }

    .four-steps__card-description {
        font-size: 15px;
    }

    .four-steps__step {
        gap: 15px;
        padding: 18px 0;
    }

    .four-steps__step-number {
        font-size: 18px;
        width: 40px;
    }

    .four-steps__step-text {
        font-size: 18px;
        letter-spacing: -0.9px;
    }

    .four-steps__step--highlighted,
    .four-steps__step--active {
        padding: 18px 0 !important;
        margin: 0 !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .block-four-steps {
        padding: 50px 14px;
    }

    .four-steps__title {
        font-size: 28px;
        letter-spacing: -1.4px;
    }

    .four-steps__card {
        height: 200px;
    }

    .four-steps__card-background {
        width: 200px;
        height: 200px;
    }

    .four-steps__card-number {
        font-size: 40px;
    }

    .four-steps__card-description {
        font-size: 14px;
    }

    .four-steps__step-number {
        font-size: 16px;
        width: 35px;
    }

    .four-steps__step-text {
        font-size: 16px;
        letter-spacing: -0.8px;
    }
}