@charset "utf-8";
/* CSS Document */


/* =========================================================
   MUSKEGON FLORIST - CATEGORY CTA SECTION
   =========================================================

   IMPORTANT:
   Everything in this stylesheet uses the "mfcta-" namespace
   so it does not interfere with the previous hero section.

   Cards:
   #mfcta-card-everyday
   #mfcta-card-sympathy
   #mfcta-card-greenhouse
   #mfcta-card-weddings

   Main section:
   #mfcta-category-section
   ========================================================= */


/* =========================================================
   FONT SETUP
   ========================================================= */

@import url(
    'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&display=swap'
);


/* =========================================================
   SECTION WRAPPER
   ========================================================= */

#mfcta-category-section {

    /*Four cards across the page.*/
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    /*Small gaps between the cards.*/
    gap: 7px;
    /*Overall width.Remove max-width if this should always spanthe entire browser window.
    */
    width: 100%;
    box-sizing: border-box;
    /*Small amount of breathing room around the cards.*/
    padding: 6px;
}

/* =========================================================
   INDIVIDUAL CARD
   ========================================================= */

.mfcta-card {

    /*Needed so the image, overlay, and content can all be positioned on top of one another.
    */
    position: relative;
    /*Controls the height of the cards.The original image is approximately 3.5:1 overall, but each individual card is much taller than wide.*/
    aspect-ratio: 0.92 / 1;
    /*Prevents anything from spilling outside the rounded corners.*/
    overflow: hidden;
    /*Rounded corners seen in the reference image.*/
    border-radius: 4px;
    /*Makes the card a clickable-feeling UI element.*/
    background: #ddd;
}

/* =========================================================
   IMAGE AREA
   ========================================================= */

.mfcta-image {

    /*Fill the entire card.*/
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /*Makes the placeholder behave like a real photograph.*/
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* =========================================================
   TEMPORARY IMAGE PLACEHOLDER
   =========================================================

   These are only here until you provide the actual photos.
   ========================================================= */

/*.mfcta-image-placeholder {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;


    background:
        linear-gradient(
            135deg,
            #b8b8b8,
            #e5e5e5 50%,
            #999
        );

    color: rgba(255,255,255,.75);

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}*/


/* =========================================================
   INDIVIDUAL IMAGE PLACEHOLDERS
   =========================================================

   You can replace the background-image on each of these
   selectors with your actual images.
   ========================================================= */



/* Everyday flowers */

.mfcta-image-everyday {

  /*  
        Example:

        background-image:
            url("everyday-flowers.jpg");
    */

}


/* Sympathy and funeral */

.mfcta-image-sympathy {

    /*
        Example:

        background-image:
            url("sympathy-flowers.jpg");
    */

}


/* Greenhouse and garden */

.mfcta-image-greenhouse {

    /*
        Example:

        background-image:
            url("greenhouse.jpg");
    */

}


/* Weddings */

.mfcta-image-weddings {

    /*
        Example:

        background-image:
            url("weddings.jpg");
    */

}


/* =========================================================
   DARK IMAGE OVERLAY
   ========================================================= */

.mfcta-overlay {

    /*
        Positioned over the photograph but underneath
        the text.

        The reference image uses a fairly strong dark
        overlay so the white text remains readable.
    */
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.24) 40%,
            rgba(0,0,0,.60) 100%
        );

    /*
        Overlay must remain behind the content.
    */
    z-index: 2;

}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.mfcta-content {

    /*
        Position content over the image.
    */
    position: absolute;

    inset: 0;

    z-index: 3;

    /*
        Vertical arrangement:
        title toward the middle,
        button toward the bottom.
    */
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    /*
        Space around the content.
    */
    padding:
        30px 15px 12px;

    box-sizing: border-box;

}


/* =========================================================
   CARD TITLE
   ========================================================= */

.mfcta-title {

    /*
        Remove browser default margins.
    */
    margin: auto 0 12px;

    /*
        White text from the reference.
    */
    color: #fff;

    /*
        Serif display typeface.
    */
    font-family:
        "DM Serif Display",
        Georgia,
        "Times New Roman",
        serif;

    /*
        Responsive title size.
    */
    font-size:
        clamp(23px, 2.25vw, 31px);

    /*
        Tight line spacing gives the stacked appearance
        from the original.
    */
    line-height: .98;

    /*
        Center the title.
    */
    text-align: center;

    /*
        Slight text shadow improves readability over
        photographs.
    */
    text-shadow:
        0 2px 3px rgba(0,0,0,.55);

    /*
        Keep the title from becoming too wide.
    */
    max-width: 100%;

}


/* =========================================================
   BUTTON - GENERAL
   ========================================================= */

.mfcta-button {

    /*
        Button dimensions.
    */
    min-width: 126px;

    min-height: 38px;

    padding:
        9px 22px;

    box-sizing: border-box;

    /*
        Center button text.
    */
    display: inline-flex;

    align-items: center;
    justify-content: center;

    /*
        Button typography.
    */
    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    /*
        Rounded corners.
    */
    border-radius: 4px;

    /*
        Prevent text selection when clicking.
    */
    user-select: none;

    /*
        Smooth hover animation.
    */
    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;

}


/* =========================================================
   PINK BUTTON
   ========================================================= */

.mfcta-button-pink {

    color: #fff;

    background:
        #f51d61;

    border:
        1px solid #f51d61;

}


/* Pink button hover */

.mfcta-button-pink:hover {

    background:
        #df1453;

    border-color:
        #df1453;

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 12px rgba(0,0,0,.25);

}


/* =========================================================
   WHITE BUTTON
   ========================================================= */

.mfcta-button-white {

    color: #111;

    background:
        #fff;

    border:
        1px solid #fff;

}


/* White button hover */

.mfcta-button-white:hover {

    background:
        #f3f3f3;

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 12px rgba(0,0,0,.25);

}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.mfcta-button-outline {

    color: #fff;

    background:
        rgba(0,0,0,.12);

    border:
        1px solid #fff;

}


/* Outline button hover */

.mfcta-button-outline:hover {

    color: #111;

    background:
        #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 12px rgba(0,0,0,.25);

}


/* =========================================================
   CARD IMAGE HOVER EFFECT
   ========================================================= */

/*
   A subtle zoom makes the cards feel more interactive
   without changing the basic appearance.
*/

.mfcta-card .mfcta-image {

    transition:
        transform .5s ease;

}


.mfcta-card:hover .mfcta-image {

    transform:
        scale(1.04);

}


/*
   Slightly strengthen the overlay when hovering.
*/

.mfcta-card .mfcta-overlay {

    transition:
        background .3s ease;

}


.mfcta-card:hover .mfcta-overlay {

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.16) 0%,
            rgba(0,0,0,.28) 40%,
            rgba(0,0,0,.64) 100%
        );

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #mfcta-category-section {

        /*
            Two cards per row on tablets.
        */
        grid-template-columns:
            repeat(2, 1fr);

    }


    .mfcta-card {

        /*
            Make the cards slightly shorter on tablets.
        */
        aspect-ratio:
            1.15 / 1;

    }


    .mfcta-title {

        font-size:
            clamp(25px, 4vw, 34px);

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #mfcta-category-section {

        /*
            One card per row on mobile.
        */
        grid-template-columns:
            1fr;

        /*
            Slightly larger gaps on mobile.
        */
        gap: 8px;

        padding: 8px;

    }


    .mfcta-card {

        /*
            Taller mobile cards.
        */
        aspect-ratio:
            1.45 / 1;

    }


    .mfcta-content {

        padding:
            25px 20px 18px;

    }


    .mfcta-title {

        font-size:
            clamp(28px, 9vw, 40px);

        margin-bottom:
            15px;

    }


    .mfcta-button {

        min-width:
            135px;

        min-height:
            42px;

        font-size:
            13px;

    }

}


/* =========================================================
   SMALL MOBILE PHONES
   ========================================================= */

@media (max-width: 400px) {

    .mfcta-card {
        aspect-ratio:1.25 / 1;

    }

    .mfcta-title {
        font-size:29px;
    }

}