/*------------------------------------*\

    Product Showcase block (Featured Products V2)

    Registered as "acf/sponsorship-featured-products", built for the
    sponsorship pages. Every selector here is scoped under `.product-showcase`
    so it can never match markup outside this block - the original
    "acf/homepage-featured-products" block (products-cards.css) is untouched,
    and the shared WooCommerce product-card partial it reuses
    (assets/css/blocks/homepage/products-cards.css, pulled in as the
    fx_woocommerce_product_item dependency) is only ever adjusted here through
    `.product-showcase` descendant selectors.

    Colours/spacing reuse the sponsorship tokens from sponsorship.css
    (fx_sponsorship, loaded as a css_deps dependency) - nothing here
    redefines `.sponsorship-veil`, `.sub-heading` or `.sponsorship-title`.

    Band geometry, measured off the comp at 1440px:

        band top      ---------------------------------
                      |            100px              |
        card top      |   ....[ card ]............    |   card 450, band 450
                      |       [ card ]                |
        band bottom   ---------[ card ]----------------
                              100px overhang

    The cards drop `--showcase-drop` below the top of the band and hang the
    same distance past its bottom edge, which makes the band exactly as tall
    as a card. That falls out of the drop/negative-margin pair below without
    hard-coding either height, so the band still fits if a card grows.

\*------------------------------------*/

.product-showcase {
    /* Distance the cards drop below the top of the band = their overhang below it */
    --showcase-drop: 0px;

    /* Breathing room inside the slick viewport so the cards' drop shadow isn't clipped */
    --showcase-shadow-room: 40px;

    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: var( --showcase-drop );
}

/* The cards hang past the bottom of the band, so the section must not clip them.
   .sponsorship-veil sets overflow:hidden to contain its background, but the veil
   image and tint are both inset:0 and can't escape the section box anyway. */
.product-showcase.sponsorship-veil {
    overflow: visible;
}

.product-showcase__row {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.product-showcase__intro {
    flex-shrink: 0;
}

.product-showcase__intro .sponsorship-title {
    margin-bottom: 12px;
}

.product-showcase__intro .sponsorship-intro {
    max-width: 40ch;
}

.product-showcase__nav {
    display: flex;
    gap: 20px;
    margin-top: 32px;
}

.product-showcase__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}

.product-showcase__arrow--prev {
    background: transparent;
    border: 2px solid var( --color-white );
    color: var( --color-white );
}

.product-showcase__arrow--next {
    background: var( --color-red );
    border: 2px solid var( --color-red );
    color: var( --color-white );
}

.product-showcase__arrow:hover {
    opacity: 0.8;
}

.product-showcase__arrow.slick-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.product-showcase__cards {
    min-width: 0;

    /* Cancels the drop so the band ends level with where the cards started, plus the
       shadow room below, leaving the cards hanging `--showcase-drop` past the band. */
    margin-bottom: calc( -1 * ( var( --showcase-drop ) + var( --showcase-shadow-room ) ) );

    /* The slick viewport is 12px wider than this column at each edge (see .slick-list
       below), which is enough for the leading edge of the next card to show past the
       last one. Clipping to the column hides it; the cards themselves end exactly on
       these edges, so nothing of them is cut. Vertically the column is as tall as its
       own content, so the cards still hang below the band. */
    overflow: hidden;
}

.product-showcase__slider {
    display: flex;
}

.product-showcase__slider .slick-list {
    overflow: hidden;
    padding-bottom: var( --showcase-shadow-room );

    /* Cancels the 12px gutter the outermost slides would otherwise hold against the
       edges of the column, so the row starts and ends flush with it and the 24px
       gutter is only ever spent between two cards. */
    margin-left: -12px;
    margin-right: -12px;
}

.product-showcase__slider .slick-track {
    display: flex;
}

.product-showcase__slider .slick-slide {
    height: auto;
}

.product-showcase__slider .slick-slide > div,
.product-showcase__slider .slick-slide > div > div {
height: 100%;
}

/* The card partial is shared site-wide (inc/theme/woocommerce/product-listing.php)
   and normally sits in a Bootstrap grid column - reset that here so it behaves as a
   plain slick slide, without touching the shared classes themselves. The 12px of
   padding either side is what opens the 24px gutter between cards in the comp. */
.product-showcase .products-cards__item {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    flex: none;
    margin-top: 0;
    padding: 0 12px;
}

.product-showcase .products-card {
    background: var( --color-gray );
    height: 100%;
}

/* "Subscribe & Save" flag. Whether it renders at all stays with the shared card partial
   (fx_render_subscribe_save_badge() / fx_product_has_subscription_discount()) - this only
   restyles it to the design: red text above the image, right aligned, no pill background. */
.product-showcase .subscribe-save-badge {
    top: -15px;
    right: -9px;
    padding: 0;
    background-color: transparent;
    color: var( --color-red );
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: normal;
    white-space: nowrap;
}


/**
 * Tablet
 *
 * The intro stays above the cards until there is room for a column beside them:
 * below 992px the slider is showing two cards and splitting the row as well would
 * leave each of them too narrow to hold a product title on two lines.
 */

@media ( min-width: 992px ) {

    .product-showcase {
        --showcase-drop: 60px;

        padding-top: var( --showcase-drop );
    }

    section.product-showcase+section {
        margin-top: 70px;
    }

    .product-showcase__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }

    .product-showcase__intro {
        width: 320px;
    }

    .product-showcase__cards {
        flex: 1;
    }
}


/**
 * Desktop
 */

@media ( min-width: 1200px ) {

    .product-showcase {
        --showcase-drop: 100px;
    }

    section.product-showcase+section {
        margin-top: 120px;
    }

    .product-showcase__intro {
        width: 380px;
        padding-bottom: 48px;
    }

    .product-showcase__nav {
        margin-top: 40px;
    }

    /* The comp holds the shared card's hover underline - red to the left, navy to the
       right - as the resting state, so the two segments are opened up here and the
       solid rule they sit on is dropped. Both only exist from 1200px in the shared
       stylesheet, so the override is confined to the same breakpoint. */
    .product-showcase .products-card__image {
        border-bottom-color: transparent;
    }

    .product-showcase .products-card__image::before,
    .product-showcase .products-card__image::after {
        width: calc( 50% - 15px );
    }
}


/**
 * Wide desktop
 *
 * The comp runs the card row past the container and on toward the right edge of the
 * screen, the row carrying on off-screen the way a carousel should. This is also what
 * buys the cards their last few pixels: at 1440 it puts them at the comp's 286px, the
 * width at which a two-line product title stops becoming a three-line one.
 *
 * 46px is sized against the tightest viewport this applies to. At 1400 the container
 * has 68px of margin either side, and the row also reaches 12px further right than the
 * column (see .slick-list above), so 46 + 12 keeps 10px clear of the viewport edge and
 * the page never picks up a horizontal scrollbar.
 */

@media ( min-width: 1400px ) {

    .product-showcase__cards {
        margin-right: -46px;
    }
}