/*
    Gift Cards promo - index.html only.

    Scoped to the .gift_card_* classes, which are used nowhere else on the
    site. Loaded after style/sft.css.

    Shares the card language and the type/button scale of the Training Aids
    and Swim Sessions cards on the same page.
*/

.gift_card_card {
    box-sizing: border-box;
    width: 90%;
    max-width: 620px;
    margin: 60px auto 0;
    padding: 28px;

    text-align: center;

    background-color: #fff;
    border: 1px solid #e6e6e6;
    /* 12px to match the Swim Sessions and Training Aids cards */
    border-radius: 12px;

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

.gift_card_row {
    display: grid;
    /* 50/50 split for image and text columns */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

/*
    sft.css lays these two out as 50% floats. The grid above replaces that,
    so both the widths and the floats have to be cleared here or the text
    column collapses to half its track.
*/
.gift_card_image {
    display: block;
    box-sizing: border-box;
    width: 100%;
    float: none;
    /* Source is 1192x1195, so a square frame crops nothing */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    margin: 0;
}

.gift_card_text {
    width: auto;
    float: none;
    min-width: 0;
}

.gift_card_body {
    margin: 0 0 20px;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #3a3f4a;
}

/* .main_btn already supplies 18px / 8px 15px / 10px radius site-wide */
.gift_card_card .main_btn {
    margin: 0;
}


@media only screen and (max-width: 700px) {
    .gift_card_card {
        max-width: 340px;
        padding: 20px;
    }
    .gift_card_row {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift_card_card {
        transition: none;
    }
    .gift_card_card:hover {
        transform: none;
    }
}