/*
*********************************************************************************************
* File: explore.css
* Author: Madhurima Rawat
* Date: October 31, 2026
* Description: This is the dedicated stylesheet for the "Explore the Blog" page of
*              "Madhurima Mindscape". It defines the visual presentation of categorized
*              blog post cards, including responsive layouts, glossy card effects,
*              preview images, typography, and interactive button styling.
*              The stylesheet uses a flexible, centered card layout to ensure consistent
*              alignment across different screen sizes and category groupings.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/Madhurima-Mindscape
* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section.
* Comments:
    - The Explore page layout is fully responsive, adapting to desktop, tablet, and mobile screens.
    - Flexbox is used to center blog preview cards within their respective category sections.
    - Glossy card styling includes translucent backgrounds, subtle borders, shadows, and blur effects.
    - Preview images use object-fit and smooth hover zoom transitions for an enhanced visual experience.
    - Card titles and descriptions have consistent vertical alignment.
    - Read More buttons are aligned at the bottom of cards.
    - Accessibility features include visible keyboard focus indicators and reduced-motion support.
* Dependencies:
    - Bootstrap 4.6.1: Supports the website's existing layout and responsive framework.
    - Font Awesome 5.15.4: Provides icons used within blog preview cards and navigation elements.
    - Custom CSS: index.css, contents.css.
    - Custom JavaScript (explore.js): Dynamically generates categorized blog preview cards using
      Open Graph metadata retrieved from the corresponding blog pages.
*********************************************************************************************
*/

/* =========================================
   EXPLORE BLOG - MAIN CONTAINER
========================================= */

.explore-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 25px 30px 55px;
}


/* =========================================
   CATEGORY SECTIONS
========================================= */

.explore-container .explore-section {
    width: 100%;
    margin-bottom: 75px;
}

.explore-container .explore-section h3 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 28px;
}


/* =========================================
   CARD GRID - CENTER ALL CARDS
========================================= */

.explore-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;

    width: 100%;
    gap: 27px;
}


/* =========================================
   GLOSSY CARD
========================================= */

.explore-card {
    display: flex;
    flex-direction: column;

    flex: 0 1 350px;
    width: 100%;
    max-width: 350px;
    min-width: 0;

    overflow: hidden;

    background: linear-gradient(140deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.035));

    border: 1px solid rgba(91, 225, 216, 0.35);
    border-radius: 16px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition: all 0.35s ease;
}

.explore-card:hover {
    transform: translateY(-8px);

    border-color: rgba(91, 225, 216, 0.9);

    box-shadow:
        0 12px 32px rgba(0, 220, 210, 0.2),
        0 0 15px rgba(0, 220, 210, 0.12);
}


/* =========================================
   PREVIEW IMAGE
========================================= */

.explore-card-image {
    width: 100%;
    height: 190px;

    overflow: hidden;
    background: #353535;

    position: relative;
    margin-bottom: 5px;
}

.explore-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    transition: transform 0.5s ease;
}

.explore-card:hover .explore-card-image img {
    transform: scale(1.07);
}

.explore-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(to bottom,
            transparent 55%,
            rgba(0, 0, 0, 0.3));

    pointer-events: none;
}


/* =========================================
   CARD CONTENT - CONSISTENT ALIGNMENT
========================================= */

.explore-card-content {
    display: grid;
    grid-template-rows: 65px 1fr auto;

    padding: 21px;
    flex: 1;
}

/* Card Titles */
.explore-card-content h4 {
    display: flex;
    align-items: center;

    margin: 0 0 12px;

    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Card Descriptions */
.explore-card-content p {
    margin: 0 0 22px;

    font-size: 0.92rem;
    line-height: 1.7;
    margin-top: 10px;
}

/* =========================================
   READ MORE BUTTON
========================================= */

/* Read More Button */
.explore-read-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;

    gap: 10px;
    padding: 10px 17px;

    margin: 0;

    border: 1px solid rgba(91, 225, 216, 0.55);
    border-radius: 8px;

    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: none !important;

    transition: all 0.3s ease;
}

.explore-read-button:hover {

    box-shadow: 0 0 15px rgba(75, 225, 215, 0.3);

    transform: translateX(4px);
}

.explore-read-button i {
    transition: transform 0.3s ease;
}

.explore-read-button:hover i {
    transform: translateX(4px);
}

#footer-container {
    margin-top: -86px;
}


/* =========================================
   RESPONSIVE DESIGN - TABLETS
========================================= */

@media (max-width: 991px) {

    .explore-card-grid {
        gap: 22px;
    }

    .explore-card {
        flex-basis: 320px;
        max-width: 380px;
    }

    .explore-container .explore-section h3 {
        margin-bottom: 30px;
    }

    .explore-container .explore-section {
        margin-bottom: 90px;
    }

    .explore {
        margin-top: -30px;
    }

    .explore-container .explore-card .explore-card-content .explore-card-title {
        font-size: 1.15rem;
    }

    .explore-container .explore-card .explore-card-content .explore-card-description {
        font-size: 1rem;
    }

    /* Card Descriptions */
    .explore-card-content p {
        margin-top: 6px;
    }
}


/* =========================================
   RESPONSIVE DESIGN - MOBILE
========================================= */

@media (max-width: 600px) {

    .explore-container {
        padding: 20px 16px 40px;
    }

    .explore-container .explore-section {
        margin-bottom: 65px;
    }

    .explore {
        margin-top: -30px;
    }

    .explore-container .explore-section h3 {
        font-size: 1.55rem;
        margin-bottom: 25px;
    }

    .explore-container .explore-card .explore-card-content .explore-card-title {
        font-size: 1.15rem;
    }

    .explore-container .explore-card .explore-card-content .explore-card-description {
        font-size: 1rem;
    }

    /* Card Descriptions */
    .explore-card-content p {
        margin-top: 1px;
    }

    .explore-card-grid {
        gap: 22px;
    }

    .explore-card {
        flex: 1 1 100%;

        width: 100%;
        max-width: 420px;
    }

    .explore-card-image {
        height: 205px;
    }

    .explore-card-content {
        padding: 18px;
    }

}


/* =========================================
   ACCESSIBILITY
========================================= */

.explore-read-button:focus-visible {
    outline: 2px solid #72ded5;
    outline-offset: 4px;
}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .explore-card,
    .explore-card-image img,
    .explore-read-button,
    .explore-read-button i {
        transition: none;
    }

    .explore-card:hover,
    .explore-read-button:hover,
    .explore-read-button:hover i {
        transform: none;
    }
}