/**
 * Blog Single Post — Responsive Overrides
 * Theme: astra-child
 *
 * Single mobile breakpoint: ≤ 768px.
 * All screens > 768px use default desktop styles from blog-detail.css.
 */

/* ======================================================================
   ≤ 768px — Mobile & Tablet
====================================================================== */

@media screen and (max-width: 768px) {

    .blog-detail-page .container {
        --container-padding: 16px;
    }

    /* Hero */
    .blog-detail-page .blog-hero {
        padding-top: 16px !important;
        padding-bottom: 12px;
    }

    .blog-hero__image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1.126 / 1 !important;
        max-height: none !important;
    }

    .blog-hero__image img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1.126 / 1 !important;
        object-fit: cover !important;
    }

    .blog-hero__content {
        padding-block: 20px 16px;
        gap: 12px;
        width: 100%;
    }

    .blog-hero__title {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.01em;
    }

    .blog-hero__meta {
        font-size: 14px;
        font-weight: 400;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .blog-hero__meta time svg {
        width: 16px;
        height: 16px;
    }

    .blog-hero__category {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* Article body */
    .blog-content-section {
        padding: 16px 0 32px;
    }

    .blog-article > p:first-of-type {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .blog-article p {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .blog-article h2 {
        font-size: 22px;
        margin: 32px 0 16px;
    }

    .blog-article h3 {
        font-size: 18px;
        margin: 24px 0 14px;
    }

    .blog-article blockquote {
        padding: 16px 20px;
        font-size: 16px;
    }

    /* Grids & Cards */
    .article-tags-grid {
        grid-template-columns: 1fr;
        gap: 16px 12px;
    }

    .shop-staples__products {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 6px;
    }

    .shop-staples__products::-webkit-scrollbar {
        display: none;
    }

    .staple-product {
        flex: 0 0 calc((100% - 20px) / 3);
        min-width: calc((100% - 20px) / 3);
        scroll-snap-align: start;
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: 16px 12px;
    }

    /* Tags / Share */
    .blog-tags,
    .blog-share {
        flex-wrap: wrap;
    }

    .blog-tag {
        min-width: auto;
        padding: 10px 14px;
        font-size: 13px;
    }

    .blog-share__list a {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* Related products */
    .section-heading {
        margin-bottom: 32px;
    }

    .section-heading h2 {
        font-size: 22px;
    }

    .slider {
        gap: 16px;
    }

    .slide {
        width: 75%;
    }

    .product-card {
        padding: 6px 6px 12px;
        gap: 10px;
    }

    .product-title a {
        font-size: 15px;
    }

    .product-button {
        padding: 6px 18px;
        font-size: 12px;
    }

    /* Navigation */
    .blog-navigation__wrapper {
        flex-direction: column;
    }

    .blog-navigation__item {
        padding: 12px;
        gap: 12px;
        flex: 1;
    }

    .blog-navigation__next {
        flex-direction: row;
        text-align: left;
    }

    html[dir="rtl"] .blog-navigation__next {
        flex-direction: row-reverse;
        text-align: right;
    }

    .blog-navigation__image {
        width: 56px;
        height: 56px;
    }

    .blog-navigation__title {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }

    .blog-navigation__date {
        font-size: 12px;
    }

    /* Related articles */
    .related-articles {
        padding: 48px 0 64px;
    }

    .related-articles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .related-article-content {
        padding: 16px;
        gap: 8px;
    }

    .related-article-content h3 {
        font-size: 17px;
    }

    .related-article-content p {
        font-size: 13px;
    }
    .shop-staples {
        padding: 24px 0 20px;
    }

    .shop-staples__title {
        font-size: 20px;
        font-weight: 600;
        line-height: 125%;
        letter-spacing: -0.01em;
        margin: 0 0 16px;
        padding-left: 10px;
        color: #2B2523;
    }

    .staple-product__image {
        border: 1px solid rgba(0, 0, 0, 0.3);
    }

    .staple-product__image img {
        aspect-ratio: 0.69 / 1;
        object-fit: cover;
    }

    .staple-product__content {
        padding: 8px 0 0;
    }

    .staple-product__name {
        font-size: 13px;
        font-weight: 600;
        line-height: 130%;
        color: #2B2523;
        text-align: center;
    }
    .blog-detail-page section{
        padding-top: 10px !important;
    }
}