/*
 * DT Blog Index Block Styles (v3 - Main Slider)
 */

/* 1. Main Wrapper & Widths */
.dtbi-wrapper {
    width: 100%;
    padding: 4rem 2rem;
    box-sizing: border-box;
    background-color: #f9f9f9;
}

.dtbi-container {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.dtbi-wrapper.dtbi-width-1200 .dtbi-container { max-width: 1200px; }
.dtbi-wrapper.dtbi-width-1400 .dtbi-container { max-width: 1400px; }
.dtbi-wrapper.dtbi-width-full .dtbi-container { max-width: 100%; padding: 0; }

/* 2. Two-Panel Grid Layout */
.dtbi-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: start;
}

/* 3. Left Panel (Info) */
.dtbi-panel-left {
    position: sticky;
    top: 160px; /* Adjust based on your floating header */
    padding-right: 2rem;
}
.dtbi-main-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: #111;
}
.dtbi-main-title * {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
}
.dtbi-main-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin: 0 0 2rem 0;
}
.dtbi-main-button {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #6a4c89;
    background-color: #6a4c89;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}
.dtbi-main-button:hover {
    background-color: #553b70;
    border-color: #553b70;
}
.dtbi-socials {
    margin-top: 3rem;
    border-top: 1px solid #e0e0e0;
    padding-top: 1.5rem;
}
.dtbi-socials span {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 1rem;
    display: block;
}
.dtbi-social-links {
    display: flex;
    gap: 1rem;
}
.dtbi-social-links a {
    color: #555;
    transition: color 0.3s ease;
}
.dtbi-social-links a:hover {
    color: #a987c2;
}
/* --- NEW SVG STYLES --- */
.dtbi-social-links a svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

/* 4. Right Panel (Slider) */
.dtbi-panel-right {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Important for Swiper */
}

/* 5. Swiper Slider Styles */
.dtbi-featured-slider {
    width: 100%;
    overflow: hidden; /* Swiper needs this */
    border-radius: 16px; /* Rounded corners for the whole slider */
}
.swiper-slide {
    height: auto; /* Let content define height */
}

/* 6. Featured Card (Inside the slide) */
.dtbi-featured-card {
    display: block;
    text-decoration: none;
    background: #fff;
    overflow: hidden;
    height: 100%; /* Make all slides equal height */
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
.dtbi-featured-image {
    width: 100%;
    height: 350px;
    overflow: hidden;
}
.dtbi-featured-image img,
.dtbi-placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dtbi-placeholder-image {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.dtbi-placeholder-image::before {
    content: "No Featured Image Set";
}
.dtbi-featured-content {
    padding: 2rem;
}
.dtbi-post-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: #f0eaf5;
    color: #6a4c89;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.dtbi-post-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
    margin: 0 0 1rem 0;
}
.dtbi-post-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #555;
}
.dtbi-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.dtbi-author-name {
    font-weight: 600;
}
.dtbi-post-date {
    color: #777;
}

/* 7. Swiper Pagination Dots */
.dtbi-featured-slider .swiper-pagination {
    position: static; /* Place dots below the card */
    padding-top: 1.5rem;
}
.dtbi-featured-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #ccc;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.dtbi-featured-slider .swiper-pagination-bullet-active {
    background-color: #333;
    width: 24px;
    border-radius: 4px;
    opacity: 1;
}


/* 8. Responsive */
@media (max-width: 900px) {
    .dtbi-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .dtbi-panel-left {
        position: static;
        padding-right: 0;
        text-align: center;
    }
    .dtbi-socials {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .dtbi-social-links {
        justify-content: center;
    }
    .dtbi-featured-image {
        height: 300px;
    }
}

@media (max-width: 600px) {
    .dtbi-wrapper {
        padding: 3rem 1.5rem;
    }
    .dtbi-main-title {
        font-size: 2rem;
    }
    .dtbi-featured-image {
        height: 250px;
    }
    .dtbi-post-title {
        font-size: 1.4rem;
    }
    .dtbi-post-meta {
        flex-wrap: wrap;
    }
}