/*
    Training Aids strip - index.html only.

    Scoped to the .suggestion_* classes, which are used nowhere else on the
    site. Loaded after style/sft.css so these rules win the cascade.

    Type, spacing and button treatment are matched to the Swim Sessions cards
    at the top of the same page (.services_card.sideways_scrolling_card), so
    the two sections read as one family:
        title   20px / 700 / 10px vertical padding
        body    16px / 90% width
        button  18px / 8px 15px / 10px radius, 20px clear above and below
*/

.suggestion_container {
    --tas_border: #e6e6e6;
    --tas_navy: #1F2240;
    --tas_body: #3a3f4a;

    /* Fade widths, flipped on and off as you reach either end - zero on
       both sides at once if the row never actually overflows */
    --tas_fade_left: 60px;
    --tas_fade_right: 60px;

    /* Grid rather than flex: a single scrolling row of fixed-width columns,
       with every card stretched to the row's own height by default */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    align-items: stretch;
    justify-content: start;
    gap: 16px;

    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    padding: 4px 16px 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;

    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--tas_fade_left),
        #000 calc(100% - var(--tas_fade_right)),
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--tas_fade_left),
        #000 calc(100% - var(--tas_fade_right)),
        transparent 100%);
}
.suggestion_container::-webkit-scrollbar {
    display: none;
}
.suggestion_container.tas_at_start {
    --tas_fade_left: 0px;
}
.suggestion_container.tas_at_end {
    --tas_fade_right: 0px;
}


/* Card */

.suggestion_card {
    scroll-snap-align: start;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    /* Flex only for the internal stack (image / title / text / button) -
       the grid above is what makes every card the same height */
    display: flex;
    flex-direction: column;
    text-align: center;

    background-color: #fff;
    border: 1px solid var(--tas_border);
    /* 12px to match the Swim Sessions cards on this page */
    border-radius: 12px;
    /* clips the full-bleed image to the card's rounded top corners */
    overflow: hidden;

    transition: transform .2s ease, box-shadow .2s ease;
}
.suggestion_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(31, 34, 64, 0.10);
}

.suggestion_image {
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    /* Full-bleed to the card edges, like the Swim Sessions images */
    width: 100%;
    margin: 0;
    /* All three product photos are square sources, and the Intro to Fitness
       one has its title baked into the top - a landscape crop would clip it */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
}

.suggestion_title {
    margin: 0;
    padding: 10px 20px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tas_navy);
}

.suggestion_text {
    width: 90%;
    margin: 0 auto 20px;
    padding: 10px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tas_body);
}

/*
    Centred, and pushed to the bottom of the card so a shorter blurb on one
    card doesn't leave its button sitting higher than its neighbours'. The
    20px clear above comes from .suggestion_text's own bottom margin, which
    matches the Swim Sessions gap (15px on the paragraph + 5px on the button).
*/
.suggestion_card .main_btn {
    align-self: center;
    margin: auto 20px 20px;
}


@media only screen and (max-width: 700px) {
    .suggestion_container {
        gap: 12px;
        scroll-padding-left: 12px;
        padding-left: 12px;
        padding-right: 12px;
        --tas_fade_left: 24px;
        --tas_fade_right: 24px;
        /* min() rather than a bare vw unit, so the column still caps at the
           card's natural 300px on a wide "mobile" viewport (e.g. landscape) */
        grid-auto-columns: min(78vw, 300px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .suggestion_container {
        scroll-behavior: auto;
    }
    .suggestion_card {
        transition: none;
    }
    .suggestion_card:hover {
        transform: none;
    }
}