/* ==========================================================================
   DenverNerd Engine — Layout Tokens & Dynamic Article Layout Engine
   File: site.css
   ========================================================================== */

:root {
    --site-max-width: 1440px;
    --page-max-width: var(--site-max-width, 1440px);
    --content-max-width: 960px;
    --sidebar-width: 320px;
    --hero-image-max-height: 480px;
}

/* --------------------------------------------------------------------------
   Article Container & Layout Tokens
   -------------------------------------------------------------------------- */
.article-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--site-max-width, 1440px);
    transition: max-width 0.2s ease-in-out;
}

.article-container[data-layout="Default"],
[data-layout="Default"] {
    --page-max-width: 1440px;
    --site-max-width: 1440px;
    --content-max-width: 960px;
    --hero-image-max-height: 480px;
}

.article-container[data-layout="Wide"],
[data-layout="Wide"] {
    --page-max-width: 1720px;
    --site-max-width: 1720px;
    --content-max-width: 1200px;
    --hero-image-max-height: 540px;
}

.article-container[data-layout="FullWidth"],
[data-layout="FullWidth"] {
    --page-max-width: 100%;
    --site-max-width: 100%;
    --content-max-width: 100%;
    --hero-image-max-height: 600px;
}

/* --------------------------------------------------------------------------
   Article Grid Layout (Content + Sticky ToC)
   -------------------------------------------------------------------------- */
.article-container .article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .article-container .article-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 2rem;
    }
}

@media (min-width: 1280px) {
    .article-container .article-grid {
        gap: 3.5rem;
    }
}

.article-container[data-layout="FullWidth"] .article-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
}

/* --------------------------------------------------------------------------
   Article Main Column & Body Width Uncapping
   -------------------------------------------------------------------------- */
.article-main {
    min-width: 0;
    width: 100%;
    max-width: var(--content-max-width, 960px);
}

.article-container .article-body,
.article-container .article-prose {
    max-width: 100%;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Featured Image & Media in Detail View
   -------------------------------------------------------------------------- */
.featured-image-wrapper {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid var(--border, #334155);
    background: var(--bg-card, #141c2e);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
}

.featured-image-wrapper img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Sticky Table of Contents Sidebar
   -------------------------------------------------------------------------- */
.article-sidebar {
    position: sticky;
    top: 6rem;
    width: 320px;
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .article-sidebar {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .article-sidebar {
        display: block;
    }
}