/* ==========================================================================
   Responsive — mobile & tablet overrides
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* Disable hover transform effects on touch-capable devices */
    .post-card:hover,
    .btn-primary:hover,
    .category-item__link:hover,
    .recent-post-item__link:hover,
    .product-card:hover,
    .tag-center-card:hover,
    .collection-card:hover {
        transform: none;
    }

    /* .sidebar-widget,
    .content-widget,
    .sidebar .widget {
        padding: 1rem 0rem;
    } */

    .post-card--list {
        flex-direction: column;
        align-items: stretch;
    }

    .post-card--list .post-card__cover-link {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .post-card--list .post-card__cover-frame::before {
        display: block;
    }

    .post-card--list .post-card__cover {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .floating-actions__qrcode {
        right: 0;
        bottom: calc(100% + 0.5rem);
        transform: translateY(8px) scale(0.96);
    }

    .floating-actions__qrcode-wrap:hover .floating-actions__qrcode,
    .floating-actions__qrcode-wrap:focus-within .floating-actions__qrcode,
    .floating-actions__qrcode-wrap.is-open .floating-actions__qrcode,
    .floating-actions__wechat:hover .floating-actions__qrcode,
    .floating-actions__wechat:focus-within .floating-actions__qrcode,
    .floating-actions__wechat.is-open .floating-actions__qrcode {
        transform: translateY(0) scale(1);
    }

    .page-hero {
        --page-hero-padding-y: 1.75rem;
    }

    .page-hero--has-cover {
        --page-hero-cover-min-height: 240px;
        padding: 2rem 0 1.75rem;
    }

    .content {
        font-size: 1rem;
    }

    .floating-actions {
        right: calc(0.75rem + env(safe-area-inset-right, 0px));
    }

    .floating-actions--bottom {
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Better spacing for articles on tablet/mobile */
    .article-actions {
        gap: 0.75rem;
    }

    .article-body {
        padding: 1rem 0;
    }

    /* Reduce post-card body padding on mobile */
    .post-list .post-card--list .card-body {
        padding: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Tablet portrait (768-991px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    h1, .page-hero__title {
        font-size: clamp(1.25rem, 4vw, 1.5rem);
    }

    h2 {
        font-size: clamp(1.125rem, 3.5vw, 1.375rem);
    }

    h3 {
        font-size: clamp(1rem, 3vw, 1.125rem);
    }

    .page-content .card-body {
        padding: 1rem;
    }

    .content {
        font-size: 0.9375rem;
        line-height: 1.75;
    }

    .content h2 {
        font-size: 1.25rem;
        margin-top: 1.5rem;
    }

    .content h3 {
        font-size: 1.1rem;
    }

    /* Reduce hero padding */
    .page-hero {
        --page-hero-padding-y: 1.25rem;
    }

    .page-hero--has-cover {
        --page-hero-cover-min-height: 200px;
        padding: 1.5rem 0 1.25rem;
    }

    .page-hero__desc {
        font-size: 0.875rem;
    }

    .page-hero__meta {
        font-size: 0.8125rem;
    }

    /* Article improvements */
    .article-meta {
        gap: 0;
        font-size: 0.8125rem;
    }

    .article-excerpt {
        padding: 1rem;
        margin-bottom: 1.25rem;
    }

    .article-excerpt__text {
        font-size: 0.9375rem;
    }

    .article-actions {
        gap: 0.5rem;
    }

    .article-action {
        min-width: 3rem;
    }

    .article-action__icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .article-action__text {
        font-size: 0.75rem;
    }

    /* Sidebar spacing */
    .sidebar {
        margin-top: 1.5rem;
    }

    /* Footer spacing */
    .site-footer {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Small phone (<576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    h1, .page-hero__title {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.125rem;
    }

    .page-content .card-body {
        padding: 0.875rem;
    }

    .content {
        font-size: 0.875rem;
        line-height: 1.7;
    }

    .content p {
        margin-bottom: 1rem;
    }

    .content h2 {
        font-size: 1.15rem;
        margin-top: 1.25rem;
        padding-bottom: 0.375rem;
    }

    .content h3 {
        font-size: 1rem;
    }

    .content blockquote {
        padding: 0.75rem 1rem;
        margin: 1rem 0;
    }

    .content ul, .content ol {
        padding-left: 1.25rem;
    }

    /* Smaller padding everywhere */
    .page-hero {
        --page-hero-padding-y: 1rem;
    }

    .page-hero__desc {
        font-size: 0.8125rem;
    }

    .page-hero .breadcrumb {
        font-size: 0.8125rem;
    }

    /* Article list layout - single column on small screens */
    .post-card--list {
        flex-direction: column;
    }

    .post-card--list .post-card__cover-link {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    .post-card--list .post-card__cover {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .post-list .post-card--list .card-body {
        padding: 0.875rem;
    }

    /* Grid items: 2-col on small screens */
    .post-card__excerpt {
        font-size: 0.8125rem;
    }

    /* Article actions compact */
    .article-actions {
        gap: 0.35rem;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .article-action {
        min-width: 2.75rem;
    }

    .article-action__icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.9375rem;
    }

    .article-action__text {
        font-size: 0.6875rem;
    }

    /* Article nav */
    .article-nav {
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .article-nav__item {
        padding: 0.75rem 0.875rem;
    }

    .article-nav__title {
        font-size: 0.8125rem;
    }

    /* Table overflow */
    .content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Image margins */
    .content img {
        margin-bottom: 0.75rem;
    }

    /* Footer smaller */
    .site-footer {
        font-size: 0.875rem;
    }

    .site-footer__title {
        font-size: 1rem;
    }

    /* Post card titles smaller */
    .post-card__title {
        font-size: 0.9375rem;
    }

    /* Breadcrumb smaller */
    .breadcrumb {
        font-size: 0.8125rem;
    }

    .section-header__title {
        font-size: 1.125rem;
    }

    .section-header__desc {
        font-size: 0.875rem;
    }
}

/* --------------------------------------------------------------------------
   Ultra-narrow screen (<380px)
   -------------------------------------------------------------------------- */
@media (max-width: 379.98px) {
    .content {
        font-size: 0.8125rem;
        line-height: 1.65;
    }

    .content h2 {
        font-size: 1.05rem;
    }

    .content h3 {
        font-size: 0.9375rem;
    }

    /* Grid: force single column */
    .row.g-4 > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* 2-col grids force 1-col */
    .home-products__grid,
    .home-cards__grid {
        grid-template-columns: 1fr !important;
    }

    /* Article actions extra compact */
    .article-actions {
        gap: 0.25rem;
    }

    .article-action {
        min-width: 2.5rem;
    }

    .article-action__icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.875rem;
    }

    .article-action__text {
        font-size: 0.625rem;
    }

    /* Reduce gap between items */
    .post-card__title {
        font-size: 0.875rem;
    }

    .post-card__excerpt {
        font-size: 0.75rem;
        -webkit-line-clamp: 1;
    }

    /* Smaller card body padding */
    .card-body {
        padding: 0.75rem !important;
    }

    /* Article excerpt */
    .article-excerpt {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    .article-excerpt__text {
        font-size: 0.8125rem;
    }
}