/* Blog Index Page Styles - Equal Heights and Contain Images */

/* Breadcrumb'un banner'ın üstünde görünmesi için */
.breadcrumb-wrapper {
    position: relative;
    z-index: 10;
}

/* Blog Page Title Banner - Container içinde */
.blog-page-title {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
}

.blog-page-title .container {
    position: relative;
    z-index: 0;
}

.blog-page-title .title-bg {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    height: 16rem;
    overflow: hidden;
    margin-bottom: 0;
    z-index: 0;
}

.blog-page-title .title-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 576px) {
    .blog-page-title .title-bg {
        height: 27.5rem;
    }
}

.blog-page-title .page-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    font-size: calc(1.5rem + 3vw);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    width: 100%;
    color: #222222;
}

@media (min-width: 1200px) {
    .blog-page-title .page-title {
        font-size: 3.75rem;
    }
}

/* Blog Grid Container - Bootstrap row already uses flexbox */
.blog-page .blog-grid.row {
    align-items: stretch;
}

/* Blog Item - Equal Heights */
.blog-page .blog-grid__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 2.75rem;
}

/* Blog Item Image Container - Fixed Height with Contain */
.blog-page .blog-grid__item-image {
    margin-bottom: 1.25rem;
    height: 400px;
    width: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-page .blog-grid__item-image a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.blog-page .blog-grid__item-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center;
    max-width: 100%;
    max-height: 100%;
}

/* Blog Item Detail - Flex Grow */
.blog-page .blog-grid__item-detail {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Blog Item Title - 2 satır sınırlaması */
.blog-page .blog-grid__item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: 3em; /* 2 satır için (1.5 line-height * 2) */
    height: 3em;
    flex-shrink: 0;
    margin-bottom: 1.25rem;
}

.blog-page .blog-grid__item-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    line-height: 1.5;
    max-height: 3em;
    width: 100%;
}

/* Blog Item Content - Flex Grow */
.blog-page .blog-grid__item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-page .blog-grid__item-content p {
    margin-bottom: 0.625rem;
    height: 6em; /* 4 satır için (1.5 line-height * 4) */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: 6em;
    flex-shrink: 0;
}

/* Continue Reading Link - Remove underline and position at bottom */
.blog-page .blog-grid__item-content .readmore-link {
    margin-top: auto;
    text-transform: uppercase;
    text-decoration: none !important;
    font-weight: 500;
    display: inline-block;
    flex-shrink: 0;
    padding-top: 0.625rem;
}

/* Remove the underline effect */
.blog-page .blog-grid__item-content .readmore-link:after {
    display: none !important;
}

.blog-page .blog-grid__item-content .readmore-link:hover:after {
    display: none !important;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .blog-page .blog-grid__item-image {
        height: 300px;
    }
}

@media (max-width: 767.98px) {
    .blog-page .blog-grid__item-image {
        height: 250px;
    }
}