/* ==========================================================
   HOMEPAGE — PRODUCT SHOWCASE
   Asymmetric 1 + 3 Product Layout

   Gutenberg Structure:

   Group
   .td-home-product-showcase

       Cover
       .td-image-card
       .td-home-product-showcase__featured

       Group
       .td-home-product-showcase__secondary

           Cover
           .td-image-card

           Cover
           .td-image-card

           Cover
           .td-image-card

   Responsibility:
   - Homepage asymmetric product layout
   - Featured DTH visual priority
   - Secondary product stack
   - Responsive transformation

   Reuses:
   - .td-image-card
   - .td-image-card__content
========================================================== */


/* ==========================================================
   Main Showcase
========================================================== */

.td-home-product-showcase {

    display:grid;

    grid-template-columns:
        minmax(0,3fr)
        minmax(0,2fr);

    gap:16px;

    width:100%;

}


/* ==========================================================
   Featured Product
   DTH Drilling Tools
========================================================== */

.td-home-product-showcase__featured {

    width:100%;

    height:100%;

    aspect-ratio:auto !important;

}


/* ==========================================================
   Secondary Product Stack
========================================================== */

.td-home-product-showcase__secondary {

    display:grid;

    grid-template-rows:
        repeat(3,minmax(0,1fr));

    gap:16px;

    min-width:0;

}


/*
 Ensure all secondary image cards
 fill their available row height.
*/

.td-home-product-showcase__secondary
> .td-image-card {

    width:100%;

    height:100%;

    aspect-ratio:auto;

}


/* ==========================================================
   Showcase Height
========================================================== */

.td-home-product-showcase {

    min-height:680px;

}


/* ==========================================================
   Interactive Image Cards
========================================================== */

.td-home-product-showcase
.td-image-card {

    cursor:pointer;

}


/*
 Smooth image zoom on hover
*/

.td-home-product-showcase
.td-image-card
.wp-block-cover__image-background {

    transition:
        transform .45s ease;

}


.td-home-product-showcase
.td-image-card:hover
.wp-block-cover__image-background {

    transform:
        scale(1.035);

}


/* ==========================================================
   PRODUCT CARD STRETCHED LINK
========================================================== */

.td-home-product-showcase__link {

    position:absolute;

    inset:0;

    z-index:3;

    margin:0 !important;

    padding:0;

}


/*
 Entire anchor fills the Cover.
*/

.td-home-product-showcase__link a {

    display:block;

    width:100%;

    height:100%;

    font-size:0;

    line-height:0;

    text-decoration:none;

}


/*
 Keep title content above the gradient,
 but below the stretched link.
*/

.td-home-product-showcase
.td-image-card__content {

    position:relative;

    z-index:2;

    pointer-events:none;

}

/* ==========================================================
   PRODUCT TITLE ARROW
========================================================== */

.td-home-product-showcase
.td-image-card__content h3::after {

    content:"→";

    display:inline-block;

    margin-left:10px;

    color:
        var(--theme-palette-color-1);

    transition:
        transform .25s ease;

}


.td-home-product-showcase
.td-image-card:hover
.td-image-card__content h3::after {

    transform:
        translateX(4px);

}


/* ==========================================================
   Tablet
========================================================== */

@media(max-width:999px){

    .td-home-product-showcase {

        grid-template-columns:
            minmax(0,1.15fr)
            minmax(0,1fr);

        min-height:600px;

        gap:16px;

    }


    .td-home-product-showcase__secondary {

        gap:16px;

    }

}


/* ==========================================================
   Mobile
========================================================== */

@media(max-width:767px){

    .td-home-product-showcase {

        display:grid;

        grid-template-columns:1fr;

        min-height:0;

        gap:12px;

    }


    /*
     Featured DTH returns to
     normal image-card proportion.
    */

    .td-home-product-showcase__featured {

        height:auto;

        aspect-ratio:16 / 9 !important;

    }


    .td-home-product-showcase__secondary {

        display:grid;

        grid-template-rows:none;

        grid-template-columns:1fr;

        gap:12px;

    }


    .td-home-product-showcase__secondary
    > .td-image-card {

        height:auto;

        aspect-ratio:16 / 9;

    }

}


/* ==========================================================
   Reduced Motion
========================================================== */

@media(prefers-reduced-motion:reduce){

    .td-home-product-showcase
    .td-image-card
    .wp-block-cover__image-background {

        transition:none;

    }


    .td-home-product-showcase
    .td-image-card:hover
    .wp-block-cover__image-background {

        transform:none;

    }


    .td-home-product-showcase
    .td-image-card__content h3 a::after {

        transition:none;

    }

}