/* ============================================
   responsive.css — Adaptive layout for NiwadoBlog
   Refactored for Grid Areas & better adaptivity
   ============================================ */

/* ---- Grid Area Definitions ---- */
.aside-left {
    grid-area: nav;
}

.hot-news {
    grid-area: news;
}

.main,
.feed,
.profile-main {
    grid-area: feed;
}

.divider {
    grid-area: div;
}

.aside {
    grid-area: sidebar;
}

/* ---- Touch devices ---- */
@media (hover: none) and (pointer: coarse) {

    .rating-btn,
    .action-toggle,
    .pagination a,
    .card-footer button,
    .bookmark-btn,
    .comment-btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }
}

/* ============================================
       DESKTOP (≥1026px)
       4-column grid: nav | content | divider | sidebar
       ============================================ */
@media (min-width: 1026px) {
    .page {
        grid-template-columns: var(--aside-narrow-width, 240px) 1fr 1px 310px;
        /* Default layout (e.g. Article, Profile) */
        grid-template-areas: "nav feed div sidebar";
        gap: var(--spacing-lg);
    }

    .page.page-home {
        /* Home layout with Hot News */
        grid-template-areas:
            "nav news div sidebar"
            "nav feed div sidebar";
    }

    .divider {
        display: block;
    }

    .aside-left {
        display: block;
        position: sticky;
        top: var(--topbar-height, 3.75rem);
        padding-top: var(--spacing-lg);
        max-height: calc(100vh - var(--topbar-height, 3.75rem));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(107, 114, 128, 0.3) transparent;
    }

    .aside-left::-webkit-scrollbar {
        width: 5px;
    }

    .aside-left::-webkit-scrollbar-track {
        background: transparent;
    }

    .aside-left::-webkit-scrollbar-thumb {
        background: rgba(107, 114, 128, 0.3);
        border-radius: 3px;
    }

    .aside-left::-webkit-scrollbar-thumb:hover {
        background: rgba(107, 114, 128, 0.5);
    }

    .aside {
        position: sticky;
        top: var(--topbar-height, 3.75rem);
        max-height: calc(100vh - var(--topbar-height, 3.75rem));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(107, 114, 128, 0.3) transparent;
    }
}

/* ============================================
       COMPACT DESKTOP (1026px – 1360px)
       Optimization for narrower desktop screens
       ============================================ */
@media (min-width: 1026px) and (max-width: 1360px) {
    .page {
        grid-template-columns: 210px 1fr 1px 280px;
    }
}

/* ============================================
   TABLET & MOBILE SHARED (<1026px)
   ============================================ */
@media (max-width: 1025px) {
    .menu {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .action-divider {
        display: block;
    }

    .card-footer-tags {
        display: none;
    }

    .card-tags-mobile {
        display: block;
        position: relative;
    }

    .card-tags-popup {
        top: auto;
        bottom: 100%;
        right: auto;
        left: 0;
        margin-top: 0;
        margin-bottom: 0.35rem;
    }

    .card-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .scroll-top {
        inset: auto;
        right: 1rem;
        bottom: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
    }

    .scroll-top .scroll-top-icon {
        position: static;
        transform: none;
    }

    .aside .widget:first-child {
        border-radius: 6px;
    }

    /* Hide divider on smaller screens */
    .divider {
        display: none;
    }
}

/* ============================================
       TABLET LANDSCAPE (768px – 1025px)
       2-column: nav | content
       Sidebar moves to bottom
       ============================================ */
@media (min-width: 768px) and (max-width: 1025px) {
    .page {
        padding: 0 1.5rem;
        grid-template-columns: 200px 1fr;
        /* Default tablet */
        grid-template-areas:
            "nav feed"
            "sidebar sidebar";
        column-gap: 1rem;
    }

    .page.page-home {
        /* Home tablet */
        grid-template-areas:
            "nav news"
            "nav feed"
            "sidebar sidebar";
    }

    .aside-left {
        display: block;
        padding-top: 1rem;
        /* Remove sticky for tablet to avoid overlap issues */
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 1rem;
    }

    .aside {
        margin-top: 0.5rem;
        display: block;
        column-count: 2;
        column-gap: 1rem;
    }

    .aside .widget {
        margin-bottom: 1rem;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .card-image {
        height: 200px;
    }

    .card--full .card-image {
        height: min(45vw, 300px);
    }

    .topbar-inner {
        padding: var(--spacing-sm) 1.5rem;
    }
}

/* ============================================
   MOBILE & TABLET PORTRAIT (<768px)
   Single column stack: News -> Nav -> Feed -> Sidebar
   ============================================ */
@media (max-width: 767px) {
    .page {
        grid-template-columns: 1fr;
        /* Default mobile */
        grid-template-areas:
            "nav"
            "feed"
            "sidebar";
        gap: 1rem;
    }

    .page.page-home {
        /* Home mobile */
        grid-template-areas:
            "news"
            "nav"
            "feed"
            "sidebar";
    }

    .aside-left {
        display: none;
    }

    .page.page-home .aside-left {
        display: block;
        margin-bottom: var(--spacing-lg);
        padding: 0;
        background: none;
        box-shadow: none;
        /* Reset sticky for mobile flow */
        position: static;
        max-height: none;
        overflow: hidden;
        /* Changed from visible to prevent grid blowout */
        margin-left: -0.5rem;
        /* Visual alignment compensation */
        margin-right: -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        min-width: 0;
        /* Critical for Grid Item to allow shrinking */
        width: auto;
    }

    .aside-left .aside-left-title {
        display: none;
    }

    .aside-left-menu.widget-menu {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.35rem;
        /* Slightly tighter gap */
        overflow-x: auto;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
        max-width: 100%;
        /* Ensure flex container doesn't force width */
    }

    .aside-left-menu.widget-menu::-webkit-scrollbar {
        display: none;
    }

    .aside-left-menu.widget-menu li {
        margin: 0;
        flex-shrink: 0;
    }

    .aside-left-menu.widget-menu li:not(:last-child) {
        margin-bottom: 0;
    }

    .aside-left-menu.widget-menu li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8125rem;
        padding: 0.35rem 0.75rem;
        min-height: auto;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.04);
        /* Minimalist gray bg */
        border: none;
        /* Removed border */
        color: var(--text);
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: none;
        /* Removed shadow */
        transition: all var(--transition-fast);
    }

    /* Reset padding for the first item (Digital) */
    .aside-left-menu.widget-menu li:first-child a {
        padding-left: 0.75rem;
    }

    .aside-left-menu.widget-menu li a:hover {
        background: rgba(0, 0, 0, 0.08);
        /* Slightly darker on hover */
        color: var(--text);
        transform: none;
        /* Removed movement */
    }

    .aside-left-menu.widget-menu .aside-left-menu-icon,
    .aside-left-footer,
    .aside-left-category-tooltip {
        display: none;
    }
}

/* ============================================
   TABLET PORTRAIT (480px – 767px)
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {
    .page {
        padding: 0 1rem;
    }

    .aside {
        margin-top: 0.5rem;
    }

    .card-image {
        display: none;
    }

    .card {
        padding: 1rem 1.25rem;
    }

    .card h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .card p {
        font-size: 0.875rem;
        -webkit-line-clamp: 4;
    }

    .card-footer {
        margin: 0.75rem -1.25rem -1rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.8125rem;
    }

    .card--full .card-title {
        font-size: 1.25rem;
    }

    .card--full .card-image {
        display: block;
        height: min(55vw, 220px);
    }

    .hot-news {
        padding: 0.875rem 1.25rem;
    }

    .topbar-inner {
        padding: var(--spacing-sm) 1rem;
    }

    .search-popup-sections-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MOBILE (360px – 479px)
   ============================================ */
@media (min-width: 360px) and (max-width: 479px) {
    .page {
        padding: 0 0.75rem;
        gap: 0.75rem;
    }

    .card-image {
        display: none;
    }

    .card {
        padding: 0.875rem 1rem;
    }

    .card h2 {
        font-size: 0.9375rem;
        margin-bottom: 0.5rem;
    }

    .card p {
        font-size: 0.8125rem;
        -webkit-line-clamp: 3;
    }

    .card-footer {
        margin: 0.625rem -1rem -0.875rem;
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
    }

    .hot-news {
        padding: 0.75rem 1rem;
        border-radius: 0;
        margin-bottom: 0.75rem;
    }

    .hot-news h3 {
        font-size: 0.9375rem;
    }

    .hot-title {
        font-size: 0.8125rem;
    }

    .topbar-inner {
        padding: var(--spacing-sm) 0.75rem;
        gap: 0.375rem;
    }

    .brand-slogan-wrap,
    .brand-sep {
        display: none;
    }

    .card--full .card-title {
        font-size: 1.125rem;
    }

    .card--full .article-body,
    .card--full .article-body-lead {
        font-size: 0.875rem;
    }

    .card--full .card-image {
        display: block;
        height: min(60vw, 180px);
    }

    .search-popup-sections-grid,
    .similar-news-grid {
        grid-template-columns: 1fr;
    }

    .widget {
        padding: 0.875rem;
    }

    .pagination {
        gap: 0.125rem;
        margin: 1.25rem 0;
    }

    .pagination a {
        min-width: 2rem;
        height: 2rem;
        padding: 0 8px;
        font-size: 0.8125rem;
    }

    .scroll-top {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}

/* ============================================
   MOBILE SMALL (<360px)
   ============================================ */
@media (max-width: 359px) {
    html {
        font-size: 14px;
    }

    .page {
        padding: 0 0.5rem;
        gap: 0.5rem;
    }

    .card-image {
        display: none;
    }

    .card {
        padding: 0.75rem;
        border-radius: 0;
    }

    .card h2 {
        font-size: 0.8125rem;
        margin-bottom: 0.375rem;
    }

    .card p {
        font-size: 0.75rem;
        -webkit-line-clamp: 3;
    }

    .card-footer {
        margin: 0.5rem -0.75rem -0.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    .hot-news {
        padding: 0.625rem 0.75rem;
        border-radius: 0;
        margin-bottom: 0.5rem;
    }

    .hot-news h3 {
        font-size: 0.8125rem;
        margin-bottom: 0.375rem;
    }

    .hot-title {
        font-size: 0.75rem;
    }

    .topbar-inner {
        padding: var(--spacing-xs) 0.5rem;
        gap: 0.25rem;
    }

    .brand-slogan-wrap,
    .brand-sep {
        display: none;
    }

    .brand-word {
        font-size: 1.125rem;
    }

    .brand-hi {
        font-size: 1rem;
        padding: 2px 3px;
    }

    .brand-rest {
        font-size: 0.875rem;
    }

    .card--full .card-title {
        font-size: 1rem;
    }

    .card--full .article-body,
    .card--full .article-body-lead {
        font-size: 0.8125rem;
    }

    .card--full .card-image {
        display: block;
        height: min(70vw, 160px);
    }

    .search-popup-sections-grid,
    .similar-news-grid {
        grid-template-columns: 1fr;
    }

    .widget {
        padding: 0.75rem;
    }

    .pagination {
        gap: 0.125rem;
        margin: 1rem 0;
    }

    .pagination a {
        min-width: 1.75rem;
        height: 1.75rem;
        padding: 0 6px;
        font-size: 0.75rem;
    }

    .action-toggle {
        width: 2rem;
        height: 2rem;
    }

    .scroll-top {
        right: 0.5rem;
        bottom: 0.5rem;
        width: 2rem;
        height: 2rem;
    }
}