/*
 * "What you get" benefits + certificate samples (sections/home-certificate.php).
 *
 * Written against the sections above it: muted section background and
 * rhythm from .about-teaser, centered 1.88vw heading from .advantages /
 * .audience, benefit cards are the same white shadow card as .course-card,
 * and each one opens with a round tinted icon - the hero trust strip's
 * construction (.hero-bullets__icon), same 24x24 outline icon set idea.
 *
 * The sample column is a .slider (00-slider.css) with one slide in view.
 * The column is too narrow for the skin's default arrow gutter (-6.3vw
 * would land inside the benefit cards), so this section moves the arrows
 * inset over the slide edges - the one override the component contract
 * allows, per static-site-components.
 *
 * .certificate__slider needs `min-width: 0` (static-site-css.md #7): as a
 * `1fr` grid item it would otherwise size itself to the flex track's
 * automatic minimum width, which sums the min-content width of every
 * cloned slide (slider.js clones the whole set for the infinite loop) and
 * blows the column out far past its fair share of the grid.
 */

.certificate {
    padding: 4.5vw 0;
    background: var(--color-surface-muted);
}

.certificate__title {
    font-size: 1.88vw;
    margin: 0 0 2.08vw;
}

.certificate__grid {
    --bs-gutter-x: 3.33vw;
    --bs-gutter-y: 3.33vw;
}

.certificate__checklist {
    --bs-gutter-x: 1.25vw;
    --bs-gutter-y: 1.25vw;
}

.certificate__benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.83vw;
    padding: 1.25vw;
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.certificate__icon {
    flex: 0 0 auto;
    width: 1.98vw;
    height: 1.98vw;
    padding: 0.42vw;
    border-radius: 50%;
    background: rgba(47, 111, 237, 0.1);
    color: var(--color-accent);
}

.certificate__slider {
    min-width: 0;
}

.certificate__slide {
    flex: 0 0 100%;
}

.certificate__image {
    width: 100%;
    height: auto;
    align-self: flex-start;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.certificate__slider .slider__arrow--prev {
    left: 0.63vw;
}

.certificate__slider .slider__arrow--next {
    right: 0.63vw;
}

/* The column split is 1.6:1, which no 12-column step reproduces (7/5 shifts
   the checklist by ~3%). Bootstrap keeps the row, gutter and the mobile
   stack; only the exact desktop ratio is restored here. */
@media only screen and (min-width: 768px) {
    .certificate__grid > .certificate__checklist {
        flex: 0 0 auto;
        width: 61.54%;
    }

    .certificate__grid > .certificate__slider {
        flex: 0 0 auto;
        width: 38.46%;
    }
}

@media only screen and (max-width: 767.98px) {
    .certificate__title {
        font-size: 6.4vw;
        margin: 0 0 5.33vw;
    }

    .certificate {
        padding: 9vw 0;
    }

    .certificate__grid {
        --bs-gutter-x: 6.4vw;
        --bs-gutter-y: 6.4vw;
    }

    .certificate__checklist {
        --bs-gutter-x: 4vw;
        --bs-gutter-y: 4vw;
    }

    .certificate__benefit {
        gap: 4vw;
        padding: 4vw;
        font-size: 3.73vw;
    }

    .certificate__icon {
        width: 10.13vw;
        height: 10.13vw;
        padding: 2.13vw;
    }
}