/* ============================================
   SECTION: Parent Coaching — How it works
   A cream rounded panel with a decorative swirl behind,
   a centered header, and five tilted step cards laid out
   in a staggered 3 + 2 arrangement.
   ============================================ */

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

.pc-how__panel {
    position: relative;
    overflow: clip;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 80px 40px 88px;
    border-radius: 12px;
    background-color: var(--color-accent-yellow-bg-soft);   /* #fffbf1 */
}

/* Decorative swirl backdrop, behind the content */
.pc-how__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../../../images/ndbi-therapy/bg-omparision.77b4eba313d9.png") no-repeat center center / cover;
    opacity: 0.5;
    pointer-events: none;
}

/* ----- Header ----- */
.pc-how__header {
    position: relative;
    z-index: 1;
    max-width: 688px;
    margin: 0 auto 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pc-how__header .eyebrow {
    margin-bottom: 18px;
}

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

.pc-how__accent {
    color: var(--color-primary);   /* pink, same display font */
}

.pc-how__lede {
    max-width: 488px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-faint);
    margin: 0;
}

/* ----- Step cards (staggered 3 + 2) ----- */
.pc-how__steps {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1002px;             /* fits 3 cards (310) + 2 gaps → 5 wrap to 3 + 2 */
    margin-inline: auto;
}

.pc-how__step {
    width: 310px;
    min-height: 284px;
    padding: 24px;
    background: var(--color-white);
    border: 2px solid var(--color-surface-line-soft);   /* #f6f6f6 */
    border-radius: 12px;
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

/* Alternating tilt to match the design's playful stagger */
.pc-how__step:nth-child(1),
.pc-how__step:nth-child(3),
.pc-how__step:nth-child(4) { transform: rotate(-3deg); }
.pc-how__step:nth-child(2),
.pc-how__step:nth-child(5) { transform: rotate(3deg); }

.pc-how__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 67px;
    height: 67px;
    flex-shrink: 0;
    background: var(--color-primary-light);   /* #ffebf0 */
    border-radius: 60px;
}

.pc-how__step-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-how__step-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;
}

.pc-how__step-desc {
    font-size: 16px;
    line-height: 26px;
    color: #776d79;
    margin: 0;
}

/* Scroll-position bars — phones only */
.pc-how__bars {
    position: relative;
    z-index: 1;
    display: none;
    gap: 7px;
    margin-top: 24px;
}

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

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

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .pc-how {
        padding: 56px var(--section-side-padding);
    }
    .pc-how__panel {
        padding: 48px 20px 56px;
    }
    .pc-how__heading {
        font-size: 32px;
        line-height: 38px;
    }
    /* Drop the tilt on small screens so stacked cards read cleanly */
    .pc-how__step {
        transform: none !important;
        width: 100%;
        max-width: 340px;
    }
}

/* ----- Phones: the steps become a horizontal, snapping scroller -----
   The track bleeds to the panel's edges so the next card peeks in from
   the right, with position bars underneath. The panel's own padding is
   20px at this width, so that is what the track reclaims. */
@media (max-width: 600px) {
    .pc-how__steps {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;         /* equal heights; ragged looks broken */
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: -20px;
        padding-inline: 20px;
        /* keeps the snap point from cancelling the padding above */
        scroll-padding-inline: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

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

    .pc-how__step {
        flex: 0 0 288px;
        width: auto;
        max-width: none;
        min-height: 0;
        scroll-snap-align: start;
    }

    .pc-how__bars {
        display: flex;
    }
}