/* ============================================
   SECTION: Parent Coaching — Benefits
   Header (title left, intro right), a row of four benefit
   cards with colored icon circles, and a pink summary
   banner underneath.
   ============================================ */

.pc-benefits {
    padding: 100px var(--section-side-padding);
    background: var(--color-white);
}

.pc-benefits__inner {
    max-width: var(--container-max);
    margin-inline: auto;
}

/* ----- Header ----- */
.pc-benefits__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px;
}

.pc-benefits__heading-block {
    flex: 0 1 552px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pc-benefits__heading {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-normal);
    line-height: 50px;
    letter-spacing: -1.26px;
    color: var(--color-text-heading);
    margin: 0;
}

.pc-benefits__heading .accent-script {
    color: var(--color-accent-yellow);   /* #e09b2b */
}

.pc-benefits__intro {
    flex: 0 1 400px;
    align-self: center;
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
    margin: 0;
}

/* ----- Benefit cards ----- */
.pc-benefits__grid {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pc-benefits__card {
    min-height: 240px;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.pc-benefits__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 60px;
}

.pc-benefits__icon--a { background: #ffda8c; }   /* amber */
.pc-benefits__icon--b { background: #ff98c6; }   /* pink */
.pc-benefits__icon--c { background: #8cdcff; }   /* blue */
.pc-benefits__icon--d { background: #ff6485; }   /* primary pink */

.pc-benefits__card-title {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    color: var(--color-text-heading);
    margin: 0;
}

/* Scroll-position bars — phones only */
.pc-benefits__bars {
    display: none;
    gap: 7px;
    margin: 24px 0 20px;
}

.pc-benefits__bar {
    flex: 1 1 0;
    height: 4px;
    border-radius: 100px;
    background: var(--color-primary-light);
    transition: background-color var(--transition-fast);
}

.pc-benefits__bar.is-active {
    background: var(--color-primary);
}

/* ----- Summary banner ----- */
.pc-benefits__banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 19px 20px;
    background: var(--color-primary-light);   /* #ffebf0 */
    border-radius: 12px;
    box-shadow: 0 11px 14px rgba(255, 100, 133, 0.05);
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
}

.pc-benefits__banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.pc-benefits__banner-text strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .pc-benefits__header {
        flex-direction: column;
        gap: 24px;
    }
    .pc-benefits__heading-block,
    .pc-benefits__intro {
        flex: initial;
        max-width: none;
        align-self: auto;
    }
    .pc-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pc-benefits {
        padding: 60px var(--section-side-padding);
    }
    .pc-benefits__heading {
        font-size: 32px;
        line-height: 38px;
    }
    .pc-benefits__grid {
        grid-template-columns: 1fr;
    }
    .pc-benefits__card {
        min-height: 0;
    }
}

/* ----- Phones: the cards become a horizontal, snapping scroller -----
   The grid gives way to a flex row that bleeds to the section edges so the
   next card peeks in from the right, with position bars underneath.
   Card width matches the How It Works scroller on this page. */
@media (max-width: 600px) {
    .pc-benefits__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;         /* equal heights; ragged looks broken */
        gap: 16px;
        margin-bottom: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--section-side-padding));
        padding-inline: var(--section-side-padding);
        /* keeps the snap point from cancelling the padding above */
        scroll-padding-inline: var(--section-side-padding);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pc-benefits__grid::-webkit-scrollbar {
        display: none;
    }

    .pc-benefits__card {
        flex: 0 0 288px;
        scroll-snap-align: start;
    }

    .pc-benefits__bars {
        display: flex;
    }
}