/*
 * Fuwari for Emlog — selectable layout presets and sidebar placement.
 * Loaded after the official-fidelity layer so the default preset remains intact.
 */

.compact-stat {
    display: none;
}

/* Shared desktop sidebar placement. */
.site-grid > .content-column {
    grid-area: content;
}

.site-grid > .sidebar,
.article-shell > .sidebar {
    grid-area: sidebar;
}

.site-grid.sidebar-left {
    grid-template-areas: "sidebar content";
    grid-template-columns: 17.5rem minmax(0, 1fr);
}

.site-grid.sidebar-right {
    grid-template-areas: "content sidebar";
    grid-template-columns: minmax(0, 1fr) 17.5rem;
}

.site-grid.sidebar-none {
    grid-template-areas: "content";
    grid-template-columns: minmax(0, 1fr);
}

.article-shell.has-sidebar.sidebar-left {
    grid-template-areas: "sidebar article";
    grid-template-columns: 17.5rem minmax(0, 1fr);
}

.article-shell.has-sidebar.sidebar-right {
    grid-template-areas: "article sidebar";
    grid-template-columns: minmax(0, 1fr) 17.5rem;
}

.article-shell.no-sidebar {
    grid-template-areas: "article";
    grid-template-columns: minmax(0, 1fr);
}

/* Screenshot-style compact banner/card preset. */
.layout-compact {
    --page-width: 59.125rem;
    --header-height: 3.625rem;
    --banner-height-home: 13rem;
    --banner-height: 13rem;
    --banner-home-height: var(--banner-height-home);
    --banner-inner-height: var(--banner-height);
    --radius-large: 0.875rem;
    min-height: 100vh;
    background-color: var(--page-bg);
    background-image:
        radial-gradient(circle at 14% 8%, oklch(0.97 0.035 var(--hue)), transparent 31rem),
        radial-gradient(circle at 88% 10%, oklch(0.975 0.025 var(--hue)), transparent 28rem);
    background-attachment: fixed;
}

html[data-theme="dark"] .layout-compact {
    background-image:
        radial-gradient(circle at 14% 8%, oklch(0.21 0.035 var(--hue)), transparent 31rem),
        radial-gradient(circle at 88% 10%, oklch(0.19 0.025 var(--hue)), transparent 28rem);
}

.layout-compact .site-header {
    width: min(calc(100% - 2rem), var(--page-width));
}

.layout-compact .site-header,
.layout-compact .page-shell,
.layout-compact .article-shell {
    padding-right: 0;
    padding-left: 0;
}

.layout-compact .nav-card {
    border-radius: 0 0 var(--radius-large) var(--radius-large);
}

.layout-compact .brand-button,
.layout-compact .nav-item > a {
    height: 2.5rem;
    min-height: 2.5rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
    font-size: 0.8125rem;
}

.layout-compact .brand-button .brand-icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.375rem;
    margin-bottom: 0;
}

.layout-compact .icon-button {
    width: 2.25rem;
    height: 2.25rem;
}

.layout-compact .icon-button svg {
    width: 1.125rem;
    height: 1.125rem;
}

.layout-compact .nav-search {
    display: none;
}

.layout-compact .mobile-search-button {
    display: inline-flex;
}

.layout-compact.has-site-banner .site-banner {
    position: relative;
    top: auto;
    left: auto;
    width: min(calc(100% - 2rem), var(--page-width));
    height: var(--banner-height-home);
    margin: 0.875rem auto 0;
    overflow: hidden;
    border-radius: var(--radius-large);
    background: var(--card-bg);
}

.layout-compact .site-banner-shade {
    background: linear-gradient(90deg, rgba(15, 19, 22, 0.46), rgba(15, 19, 22, 0.10) 54%, rgba(255, 255, 255, 0.34));
}

.layout-compact .compact-banner-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 2.125rem;
    max-width: 45%;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    transform: translateY(-50%);
}

.layout-compact .compact-banner-copy > span {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.layout-compact .compact-banner-copy strong {
    display: block;
    overflow: hidden;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-compact .compact-banner-copy p {
    margin: 0.375rem 0 0;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.84;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layout-compact .banner-credit {
    display: none;
}

.layout-compact.has-site-banner.is-home-page .page-shell,
.layout-compact.has-site-banner.is-inner-page .page-shell,
.layout-compact.no-site-banner .page-shell {
    margin-top: 1.25rem;
}

.layout-compact .site-grid,
.layout-compact .article-shell {
    gap: 1rem;
}

.layout-compact .site-grid.sidebar-left {
    grid-template-columns: 12.5rem minmax(0, 1fr);
}

.layout-compact .site-grid.sidebar-right {
    grid-template-columns: minmax(0, 1fr) 12.5rem;
}

.layout-compact .article-shell.has-sidebar.sidebar-left {
    grid-template-columns: 12.5rem minmax(0, 1fr);
}

.layout-compact .article-shell.has-sidebar.sidebar-right {
    grid-template-columns: minmax(0, 1fr) 12.5rem;
}

.layout-compact .post-list {
    gap: 0.75rem;
}

.layout-compact .post-card,
.layout-compact .post-card.has-cover {
    min-height: 11rem;
    border-radius: var(--radius-large);
}

.layout-compact .post-card:hover {
    box-shadow: 0 0.875rem 2rem rgba(20, 42, 34, 0.055);
    transform: translateY(-1px);
}

.layout-compact .post-title-row h2 {
    margin-bottom: 0.5rem;
    font-size: 1.375rem;
    line-height: 1.42;
}

.layout-compact .post-meta {
    gap: 0.375rem;
    margin-bottom: 0.625rem;
    font-size: 0.75rem;
}

.layout-compact .post-meta .meta-item:not(:first-child) {
    display: none;
}

.layout-compact .post-meta > span,
.layout-compact .post-meta > a {
    font-size: 0.75rem;
}

.layout-compact .meta-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.25rem;
    border-radius: 0.375rem;
    background: transparent;
}

.layout-compact .meta-icon svg,
.layout-compact .post-meta .meta-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.layout-compact .post-excerpt {
    display: -webkit-box;
    margin: 0 0 0.625rem;
    padding-right: 0;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.layout-compact .post-card-footer {
    gap: 0.5rem;
    font-size: 0.75rem;
}

.layout-compact .post-word-count,
.layout-compact .post-word-divider {
    display: none;
}

.layout-compact .compact-stat {
    display: inline;
}

.layout-compact .post-cover {
    top: 0.625rem;
    right: 0.625rem;
    bottom: 0.625rem;
    width: 29%;
    border-radius: 0.75rem;
}

.layout-compact .post-cover::before,
.layout-compact .post-cover::after,
.layout-compact .cover-arrow {
    display: none;
}

.layout-compact .post-cover:hover img {
    transform: scale(1.025);
}

.layout-compact .post-enter {
    top: 0.625rem;
    right: 0.625rem;
    bottom: 0.625rem;
    width: 2.75rem;
    border-radius: 0.75rem;
}

.layout-compact .sidebar > .profile-card {
    margin-bottom: 0.75rem;
}

.layout-compact .sidebar-sticky {
    gap: 0.75rem;
}

.layout-compact .side-card {
    border-radius: var(--radius-large);
}

.layout-compact .profile-card {
    padding: 0.75rem;
}

.layout-compact .profile-avatar {
    width: 100%;
    margin: 0 0 0.75rem;
    border-radius: 0.75rem;
    aspect-ratio: 1;
}

.layout-compact .profile-avatar img {
    height: 100%;
}

.layout-compact .profile-card h2 {
    font-size: 1rem;
    line-height: 1.5;
}

.layout-compact .profile-accent {
    width: 1rem;
    height: 0.1875rem;
    margin-bottom: 0.375rem;
}

.layout-compact .profile-card p {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.55;
}

.layout-compact .social-links a {
    width: 2rem;
    height: 2rem;
}

.layout-compact .social-links svg {
    width: 1.125rem;
    height: 1.125rem;
}

.layout-compact .compact-card {
    padding-bottom: 0.75rem;
}

.layout-compact .compact-card h2 {
    margin: 0.75rem 0 0.375rem 1.625rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.layout-compact .compact-card h2::before {
    top: 0.25rem;
    left: -0.75rem;
    width: 0.1875rem;
    height: 0.875rem;
}

.layout-compact .category-list,
.layout-compact .archive-card ul,
.layout-compact .plain-widget-list,
.layout-compact .tag-cloud,
.layout-compact .widget-content {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.layout-compact .category-list a,
.layout-compact .archive-card a {
    height: 2rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
}

.layout-compact .category-list em,
.layout-compact .archive-card em {
    min-width: 1.375rem;
    height: 1.375rem;
    font-size: 0.6875rem;
}

.layout-compact .tag-cloud a {
    font-size: 0.75rem;
}

.layout-compact .article-card,
.layout-compact .archive-page,
.layout-compact .comment-form-card,
.layout-compact .comments-list,
.layout-compact .neighbor-posts {
    border-radius: var(--radius-large);
}

@media (min-width: 768px) {
    .layout-compact .post-card-content,
    .layout-compact .post-card.has-cover .post-card-content {
        width: calc(100% - 3.5rem);
        padding: 1.25rem 0.75rem 1rem 1.5rem;
    }

    .layout-compact .post-card.has-cover .post-card-content {
        width: calc(100% - 29% - 0.75rem);
    }

    .layout-compact .post-title-row::before {
        top: 0.375rem;
        left: -0.75rem;
        width: 0.1875rem;
        height: 1.125rem;
    }
}

@media (max-width: 1023px) {
    .site-grid.has-sidebar.sidebar-left,
    .site-grid.has-sidebar.sidebar-right {
        grid-template-areas: "content" "sidebar";
        grid-template-columns: minmax(0, 1fr);
    }

    .article-shell.has-sidebar.sidebar-left,
    .article-shell.has-sidebar.sidebar-right {
        grid-template-areas: "article" "sidebar";
        grid-template-columns: minmax(0, 1fr);
    }

    .site-grid.sidebar-none {
        grid-template-areas: "content";
        grid-template-columns: minmax(0, 1fr);
    }

    .article-shell.no-sidebar {
        grid-template-areas: "article";
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .layout-compact {
        --header-height: 4rem;
        --banner-height-home: 10rem;
        --banner-height: 10rem;
    }

    .layout-compact .site-header,
    .layout-compact.has-site-banner .site-banner,
    .layout-compact .page-shell,
    .layout-compact .article-shell {
        width: calc(100% - 1rem);
    }

    .layout-compact .nav-card {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .layout-compact .brand-button {
        max-width: calc(100vw - 10rem);
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }

    .layout-compact.has-site-banner .site-banner {
        height: var(--banner-height-home);
        margin-top: 0.5rem;
    }

    .layout-compact .compact-banner-copy {
        left: 1.25rem;
        max-width: 68%;
    }

    .layout-compact .compact-banner-copy strong {
        font-size: 1.75rem;
    }

    .layout-compact.has-site-banner.is-home-page .page-shell,
    .layout-compact.has-site-banner.is-inner-page .page-shell,
    .layout-compact.no-site-banner .page-shell {
        margin-top: 0.75rem;
    }

    .layout-compact .post-list {
        gap: 0.75rem;
        padding: 0;
        overflow: visible;
        background: transparent;
    }

    .layout-compact .post-card,
    .layout-compact .post-card.has-cover {
        min-height: 0;
        overflow: hidden;
        border-radius: var(--radius-large);
        background: var(--card-bg);
    }

    .layout-compact .post-card:not(:first-child)::before {
        display: none;
    }

    .layout-compact .post-card-content,
    .layout-compact .post-card.has-cover .post-card-content {
        width: 100%;
        padding: 1rem 1rem 0.875rem;
    }

    .layout-compact .post-title-row h2 {
        padding-right: 0;
        font-size: 1.25rem;
        line-height: 1.45;
    }

    .layout-compact .post-cover {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: auto;
        max-height: none;
        margin: 0.625rem 0.625rem 0;
        border-radius: 0.75rem;
        aspect-ratio: 16 / 7;
    }

    .layout-compact .post-enter {
        display: none;
    }

    .layout-compact .sidebar {
        margin-top: 0;
    }
}