/* =========================================
   BLOGS.CSS - Domain Sections & Carousels
   ========================================= */

.page-content {
    padding: 120px 10% 80px 10%; 
}

.page-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    margin-bottom: 60px;
    color: var(--text-color);
}

/* --- DOMAIN SECTIONS --- */
.domain-section {
    margin-bottom: 70px;
}

.domain-heading {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* A tiny aesthetic line next to the domain heading */
.domain-heading::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 3px;
    background-color: var(--accent-color);
}

/* --- THE BLOG CAROUSEL --- */
.blog-carousel {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 15px 10px 30px 10px; /* Padding for the hover shadows */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* The magic snapping feature */
}

.blog-carousel::-webkit-scrollbar {
    display: none; /* Keeps it clean by hiding the scrollbar */
}

/* --- THE TITLE-ONLY BLOG CARDS --- */
.blog-card {
    flex: 0 0 320px; /* Fixed width for the tiles */
    height: 200px; /* Fixed height to make them uniform rectangles */
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 30px;
    text-decoration: none; /* Removes the link underline */
    display: flex;
    align-items: center; /* Vertically centers the title */
    justify-content: center; /* Horizontally centers the title */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    scroll-snap-align: start;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    
    /* A subtle border that will turn Saffron on hover */
    border: 2px solid transparent; 
}

.blog-card h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-color);
    line-height: 1.4;
    transition: color 0.3s ease;
}

/* --- HOVER EFFECTS --- */
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(211, 84, 0, 0.1);
    border-color: var(--accent-color); /* The border lights up */
}

.blog-card:hover h3 {
    color: var(--accent-color); /* The text also lights up */
}

/* =========================================
   MOBILE RESPONSIVENESS (BLOGS PAGE)
   ========================================= */

@media (max-width: 768px) {
    /* --- General Page Spacing --- */
    .page-content {
        padding: 100px 7% 60px 7%; /* Matches the 7% global mobile padding */
    }

    .page-title {
        font-size: 2.5rem; /* Scaled down from 3.5rem */
        margin-bottom: 40px;
    }

    /* --- Domain Sections --- */
    .domain-section {
        margin-bottom: 50px; /* Tighter spacing for mobile scrolling */
    }

    .domain-heading {
        font-size: 1.6rem; /* Shrunk from 2rem */
        margin-bottom: 20px;
        gap: 10px;
    }

    .domain-heading::before {
        width: 30px; /* Slightly shorter aesthetic line for mobile */
    }

    /* --- The Blog Carousel & Peek Effect --- */
    .blog-carousel {
        gap: 15px; /* Brings cards slightly closer together */
        padding-bottom: 30px; /* Keeps room for the drop shadow */
        
        /* The magic trick to allow cards to touch the right edge 
           while maintaining the 7% padding everywhere else */
        margin-right: -7%; 
        padding-right: 7%; 
    }

    /* --- Blog Cards --- */
    .blog-card {
        flex: 0 0 75vw; /* Card takes up 75% of screen, showing 25% of the next card */
        height: 180px; /* Slightly shorter to fit mobile screens better */
        padding: 20px; /* Reduced inner padding */
    }

    .blog-card h3 {
        font-size: 1.2rem; /* Highly readable, but scaled down so long titles fit */
        line-height: 1.5;
    }
}