/* Hafiz Tours editorial pages — additive stylesheet, safe to load alongside hafiz.css. */
.blog-page .container, .blog-related .container {
    max-width: 1180px
}

.blog-hero p {
    max-width: 720px
}

.blog-filters {
    display: grid;
    grid-template-columns:minmax(180px, 1.5fr) minmax(180px, .8fr) auto auto;
    gap: 12px;
    align-items: end;
    padding: 20px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid #e0e6ee;
    border-radius: 18px
}

.blog-search-label {
    display: block;
    grid-column: auto;
    font-size: 12px;
    font-weight: 700;
    color: #66748a;
    margin-bottom: -7px
}

.blog-filters .form-control {
    min-width: 0;
    height: 46px
}

.blog-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 22px
}

.blog-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e6ee;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(19, 41, 67, .035);
    transition: transform .18s ease, box-shadow .18s ease
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(19, 41, 67, .09)
}

.blog-card-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #e8eef5;
    text-decoration: none
}

.blog-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.025)
}

.blog-image-placeholder {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 24px;
    background: linear-gradient(135deg, #132943, #2c5a7b);
    color: #fff
}

.blog-image-placeholder span {
    font-size: 10px;
    letter-spacing: .18em;
    font-weight: 800;
    opacity: .7
}

.blog-image-placeholder strong {
    font-size: 24px;
    line-height: 1.1
}

.blog-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #718096
}

.blog-category {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid #d7e2ef;
    border-radius: 999px;
    background: #f4f7fa;
    color: #284c6e;
    font-weight: 700;
    font-size: 11px
}

.blog-card h2, .blog-card h3 {
    margin: 14px 0 9px;
    color: #132943;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.025em
}

.blog-card h2 a, .blog-card h3 a {
    color: inherit;
    text-decoration: none
}

.blog-card h2 a:hover, .blog-card h3 a:hover {
    color: #356c99
}

.blog-card-content > p {
    margin: 0 0 20px;
    color: #627187;
    line-height: 1.7;
    font-size: 14px
}

.blog-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eef1f5;
    color: #8290a2;
    font-size: 12px
}

.blog-read-link {
    color: #214f79;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none
}

.blog-read-link:hover {
    text-decoration: underline
}

.blog-pagination {
    margin: 28px 0 48px
}

.blog-empty {
    max-width: 650px;
    margin: 24px auto 55px;
    padding: 46px 24px;
    text-align: center;
    border: 1px solid #e0e6ee;
    border-radius: 20px;
    background: #fff
}

.blog-empty p {
    color: #66748a;
    line-height: 1.7
}

.blog-cta, .blog-article-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 30px;
    margin: 45px 0 15px;
    border-radius: 20px;
    background: #edf3f8;
    border: 1px solid #dde7f1
}

.blog-cta h2, .blog-article-cta h2 {
    margin: 9px 0;
    color: #132943;
    font-size: clamp(23px, 3vw, 32px);
    line-height: 1.2
}

.blog-cta p, .blog-article-cta p {
    max-width: 620px;
    margin: 0;
    color: #5b6b7e;
    line-height: 1.65
}

.blog-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0
}

.blog-article-hero-inner {
    max-width: 920px
}

.blog-back-link {
    display: inline-block;
    margin-bottom: 24px;
    color: #d8e5f1;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none
}

.blog-back-link:hover {
    color: #fff
}

.blog-article-meta {
    margin-bottom: 16px;
    color: #d6e1ec
}

.blog-article-hero h1 {
    max-width: 900px;
    font-size: clamp(34px, 5.5vw, 58px);
    line-height: 1.08;
    letter-spacing: -.045em
}

.blog-article-hero-inner > p {
    max-width: 760px
}

.blog-author {
    font-size: 13px;
    opacity: .8
}

.blog-article-container {
    max-width: 850px
}

.blog-feature-figure {
    margin: 0 0 36px
}

.blog-feature-figure img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 20px
}

.blog-feature-figure figcaption {
    margin-top: 8px;
    font-size: 12px;
    color: #7a8899
}

.blog-body-copy {
    color: #34465c;
    font-size: 17px;
    line-height: 1.9;
    overflow-wrap: anywhere
}

.blog-body-copy p {
    margin: 0 0 1.35em
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 28px 0 10px;
    font-size: 12px;
    color: #718096
}

.blog-tags span {
    padding: 5px 9px;
    background: #f2f5f8;
    border: 1px solid #e0e6ee;
    border-radius: 999px
}

.blog-article-cta {
    display: block;
    margin-top: 40px
}

.blog-article-cta .blog-cta-actions {
    margin-top: 22px
}

.blog-section-heading {
    margin-bottom: 20px
}

.blog-section-heading h2 {
    margin: 8px 0;
    color: #132943;
    font-size: 30px
}

.blog-related {
    background: #f7f9fb
}

.blog-grid-related {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

.blog-grid-related .blog-card h3 {
    font-size: 18px
}

.blog-admin-layout {
    align-items: start
}

.blog-body-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.65
}

.blog-featured-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 43px
}

.blog-featured-check input {
    width: 17px;
    height: 17px;
    accent-color: #17365d
}

.blog-list-filters {
    display: grid;
    grid-template-columns:1fr 160px;
    gap: 12px
}

.blog-list-filters .form-group {
    margin: 0
}

@media (max-width: 1000px) {
    .blog-grid, .blog-grid-related {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .blog-cta {
        align-items: flex-start;
        flex-direction: column
    }
}

@media (max-width: 680px) {
    .blog-filters {
        grid-template-columns:1fr 1fr;
        padding: 14px
    }

    .blog-filters .blog-search-label:first-child {
        grid-column: 1/-1
    }

    .blog-filters input[type=search] {
        grid-column: 1/-1
    }

    .blog-filters button, .blog-filters > a {
        width: 100%;
        text-align: center;
        justify-content: center
    }

    .blog-grid, .blog-grid-related {
        grid-template-columns:1fr
    }

    .blog-card-content {
        padding: 18px
    }

    .blog-article-hero h1 {
        font-size: 36px
    }

    .blog-body-copy {
        font-size: 16px;
        line-height: 1.8
    }

    .blog-cta, .blog-article-cta {
        padding: 22px
    }

    .blog-cta-actions {
        width: 100%
    }

    .blog-cta-actions .btn {
        flex: 1;
        text-align: center;
        justify-content: center
    }

    .blog-list-filters {
        grid-template-columns:1fr
    }

    .blog-admin-layout {
        grid-template-columns:1fr
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card, .blog-card-image img {
        transition: none
    }
}