/* Mirai Theme - Phase 2 Bug Fixes & UI Optimizations */

/* Phase 7: Global page margin settings */
.main-inner {
    max-width: var(--gt-page-max-width, 1200px);
    margin-left: var(--gt-page-margin-left, 0px);
    margin-right: var(--gt-page-margin-right, 0px);
}

/* 2.2 Fix: Mobile sidebar bottom nav overlap - add padding to avoid content hidden behind bottom tab */
.gt-mobile-sidebar-body {
    padding-bottom: 70px !important;
}

/* 2.4 Optimize: Breadcrumb position - move visually above main-inner content */
.gt-breadcrumb {
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0;
}
.gt-breadcrumb .breadcrumb-sep {
    margin: 0 0.15rem;
    opacity: 0.5;
}
.breadcrumb-format-dot .breadcrumb-sep {
    font-size: 1.2em;
    vertical-align: middle;
}
.breadcrumb-format-slash .breadcrumb-sep {
    font-weight: 300;
    font-size: 0.95em;
}
.breadcrumb-format-chevron .breadcrumb-sep {
    font-size: 1.1em;
    font-weight: 600;
}
@media (min-width: 768px) {
    .gt-breadcrumb {
        margin-bottom: 1rem;
    }
}

/* 2.5 Optimize: Homepage Tab card frame wrapper */
.home-tab-card {
    background: var(--gt-card-bg);
    border-radius: var(--gt-main-radius, 0.5rem);
    box-shadow: var(--gt-box-shadow, 0 3px 8px 6px rgba(7,17,27,0.05));
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.home-tab-card .gt-cms-title-h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* 2.6 Optimize: Article excerpt inline layout */
.article-excerpt {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.875rem 1rem;
    background: var(--gt-card-bg);
    border: 1px solid var(--gt-border-color, rgba(0,0,0,0.1));
    border-radius: var(--gt-main-radius, 0.5rem);
    line-height: 1.7;
    font-size: 0.9rem;
}
.article-excerpt .article-excerpt-title {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--gt-main-color, #007fff);
    margin-bottom: 0;
    font-size: 0.85rem;
}
.article-excerpt .article-excerpt-content {
    color: var(--gt-font-66, rgba(52,73,94,0.66));
    line-height: 1.7;
}

/* Phase 6: Empty state recommended articles */
.empty-recommend-section {
    margin-top: 1.5rem;
}
.empty-recommend-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gt-font-color);
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    position: relative;
}
.empty-recommend-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2em;
    background: var(--gt-main-color, #007fff);
    border-radius: 2px;
}
.empty-recommend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}
.empty-recommend-card {
    background: var(--gt-card-bg, #fff);
    border-radius: var(--gt-main-radius, 0.5rem);
    overflow: hidden;
    box-shadow: var(--gt-box-shadow, 0 3px 8px 6px rgba(7,17,27,0.05));
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
}
.empty-recommend-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(7,17,27,0.1);
}
.empty-recommend-cover {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.empty-recommend-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.empty-recommend-card:hover .empty-recommend-cover img {
    transform: scale(1.05);
}
.empty-recommend-info {
    padding: 0.75rem 1rem;
}
.empty-recommend-info h4 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gt-font-color);
    margin: 0 0 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.empty-recommend-info time {
    font-size: 0.75rem;
    color: var(--gt-font-56, rgba(52,73,94,0.56));
}