/* ========================================
   Desktop (1024px and below)
   ======================================== */
@media screen and (max-width: 1024px) {
    .site-content-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-sidebar {
        width: 100%;
    }

    /* Single page: sidebar below content */
    .single-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-sidebar {
        position: static;
    }

    .article-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-card__thumb {
        height: 180px;
    }

    /* Category showcase: 3 cols */
    .category-showcase__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero: タブレット幅でスライドを少し広げる */
    .hero-slide {
        width: 70vw;
    }
    /* .hero-slider__track の transform は JS が管理するため CSS では設定しない */
    .hero-slide__title {
        font-size: 20px;
    }
    .hero-slide__content {
        padding: 28px 32px;
    }
}

/* ========================================
   Tablet (768px and below)
   ======================================== */
@media screen and (max-width: 768px) {
    .site-header__inner {
        height: 56px;
    }

    .site-description { display: none; }
    .header-search { display: none; }
    .header-nav { display: none; }
    .menu-toggle { display: inline-flex; }

    .article-list {
        grid-template-columns: 1fr;
    }

    .article-header { padding: 22px; }
    .article-header__title { font-size: 22px; }

    .matome-comment { padding: 16px 18px; margin-bottom: 10px; }
    .matome-comment--op,
    .matome-comment--highlight { padding-left: 18px; }

    .article-source { padding: 14px 18px; }

    /* Category showcase: 2 cols */
    .category-showcase__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero: モバイルではほぼ全幅 */
    .hero-slide {
        width: 86vw;
    }
    /* .hero-slider__track の transform は JS が管理するため CSS では設定しない */
    .hero-slide__title {
        font-size: 17px;
    }
    .hero-slide__content {
        padding: 22px 24px;
    }
    .hero-slider__btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* Trending cards */
    .trending-card {
        flex: 0 0 220px;
    }

    .trending-card__thumb {
        height: 120px;
    }

    /* Mega dropdown full width */
    .mega-dropdown {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0 0 16px 16px;
    }
}

/* ========================================
   Mobile (520px and below)
   ======================================== */
@media screen and (max-width: 520px) {
    body { font-size: 14px; }

    .site-wrapper { padding: 0 12px; }

    .site-title { font-size: 19px; }

    .article-card__thumb {
        height: 170px;
    }

    .article-card__content { padding: 16px 18px; }
    .article-card__title { font-size: 15px; }

    .article-header { padding: 18px; }
    .article-header__title { font-size: 20px; }
    .article-header__meta { gap: 12px; }

    .matome-comment {
        padding: 14px 14px;
        margin-bottom: 8px;
    }

    .matome-comment__header {
        gap: 6px;
        font-size: 11px;
    }

    .matome-comment__number { font-size: 12px; }
    .matome-comment__body { font-size: 13.5px; }

    .matome-comment--op,
    .matome-comment--highlight { padding-left: 14px; }

    .sidebar-widget { border-radius: var(--radius); }

    .page-title-bar { padding: 16px; }
    .page-title-bar h1 { font-size: 17px; }

    .pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .site-footer__inner {
        flex-direction: column;
        text-align: center;
    }

    /* Mobile menu full width on small screens */
    .mobile-menu {
        max-width: 100%;
    }

    /* Hero: 小画面ほぼ全幅 */
    .hero-slide {
        width: 90vw;
        aspect-ratio: 4 / 3;
    }
    /* .hero-slider__track の transform は JS が管理するため CSS では設定しない */
    .hero-slide__title {
        font-size: 15px;
    }
    .hero-slide__content {
        padding: 18px 20px;
        gap: 7px;
    }
    .hero-slide__badge {
        font-size: 9px;
        padding: 3px 9px;
    }
    .hero-slide__meta {
        font-size: 11px;
    }
    .hero-slider__btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .hero-slider__btn--prev { left: 6px; }
    .hero-slider__btn--next { right: 6px; }

    /* Category showcase: 2 cols, smaller */
    .category-showcase__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .category-showcase__card {
        min-height: 90px;
        padding: 18px 12px;
    }

    .category-showcase__card-name {
        font-size: 13px;
    }

    .category-showcase__card-icon {
        font-size: 18px;
    }

    /* Trending */
    .trending-card {
        flex: 0 0 190px;
    }

    .trending-card__thumb {
        height: 110px;
    }

    .trending-card__body {
        padding: 10px 12px 14px;
    }

    .trending-card__title {
        font-size: 13px;
    }

    .trending-scroll__btn {
        display: none;
    }

    /* Section headings */
    .section-heading__title {
        font-size: 17px;
    }
}