/**
 * Modern & Minimalist Single Post Styles (Single Column Layout)
 * For model3d and asset2d post types.
 */

/* 1. Layout Container - Centered Single Column */
.single-model-detail__layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px; /* Optimized width for single-column readability */
    /* No horizontal padding: the container (.ct-container.single-model-detail-container)
       already provides the page gutter, so the old 1.5rem inset pushed the body
       cards 24px right of the page title. Cards keep their own internal padding. */
    padding: 0;
}

/* 2. Main Content Area */
.single-model-detail__main-rail {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
}

/* 3. Cards (Modern Minimalism: Soft shadows, slight borders, white background) */
.detail-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Special case for hero (image should fill or have minimal padding) */
.single-model-detail__hero {
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 16px;
}

.single-model-detail__hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 4. Typography */
.single-model-detail__article h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
    color: #111827;
    line-height: 1.1;
}

.single-model-detail__type {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--catalog-accent);
    margin-bottom: 0.75rem;
    display: block;
}

.single-model-detail__body {
    line-height: 1.7;
    font-size: 16px;
    color: #334155;
}

.single-model-detail__body h2, 
.single-model-detail__body h3 {
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 6. Sidebar Elements (Now stacked below content) */
.single-model-detail__side-rail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

/* 7. Download CTA */
.single-model-download-cta {
    border-top: 4px solid var(--catalog-accent) !important;
    background: #ffffff !important;
}

.single-model-download-cta__content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #111827;
}

.single-model-download-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.single-model-download-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--catalog-accent);
    color: #ffffff !important;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(var(--catalog-accent-rgb), 0.3), 0 2px 4px -1px rgba(var(--catalog-accent-rgb), 0.1);
}

.single-model-download-cta__button:hover {
    background: var(--catalog-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(var(--catalog-accent-rgb), 0.4);
}

/* 8. Mobile Tweaks */
@media (max-width: 768px) {
    .detail-card {
        padding: 1.5rem;
    }
    
    .single-model-detail__article h1 {
        font-size: 1.75rem;
    }
}

/* CPT UI polish additions */
.single-model-detail__body {
    text-wrap: pretty;
}

.single-model-detail__article h1,
.single-model-detail__body h2,
.single-model-detail__body h3 {
    text-wrap: balance;
}

.detail-card {
    font-variant-numeric: tabular-nums;
}

.single-model-detail :is(a, button):focus-visible {
    outline: 2px solid var(--catalog-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.single-model-download-cta__button:active {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .single-model-detail *,
    .single-model-detail__layout * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Layout density pass (single model / asset)
   Loaded after child-catalog.min.css for these templates only, so these
   declarations win at equal specificity. Goal: less dead space around the
   page and a wider content column, without touching the card visual language.
   ========================================================================== */

/* 1. Wider container, tighter outer padding. */
body.single-model3d .single-model-detail-container,
body.single-asset2d .single-model-detail-container {
    box-sizing: border-box;
    width: min(1360px, calc(100% - 24px));
    max-width: 1360px;
    padding: 16px 12px 28px;
}

/* 2. Narrower sidebar + smaller gutter => more room for the content column. */
@media (min-width: 1000px) {
    body.single-model3d .single-model-detail-container[data-sidebar="right"],
    body.single-asset2d .single-model-detail-container[data-sidebar="right"] {
        --sidebar-width: clamp(260px, 22%, 300px);
        --sidebar-gap: clamp(16px, 1.6vw, 24px);
    }
}

/* 3. The container already provides the page gutter; the inner 12px doubled it. */
body.single-model3d .single-model-detail,
body.single-asset2d .single-model-detail {
    padding: 0;
}

/* 4. Content uses the full column instead of a hard 900px cap. */
.single-model-detail__layout {
    max-width: 100%;
    margin-top: 1rem;
    gap: 1.75rem;
}

.single-model-detail__main-rail {
    gap: 1.5rem;
}

.single-model-detail__side-rail {
    gap: 1.5rem;
}

.detail-card {
    padding: 1.5rem;
}

/* 5. Smaller breaks between header, body and the specs/download rail. */
body.single-model3d .single-model-detail__header,
body.single-asset2d .single-model-detail__header {
    margin-bottom: 16px;
}

body.single-model3d .single-model-detail__body + .single-model-detail__side-rail,
body.single-asset2d .single-model-detail__body + .single-model-detail__side-rail {
    margin-top: 28px;
}

body.single-model3d .single-model-detail .model-gallery-related,
body.single-asset2d .single-model-detail .model-gallery-related {
    margin-top: 20px !important;
}

/* 6. Tighter prose rhythm inside the body card. */
body.single-model3d .single-model-detail__body :is(p, ul, ol),
body.single-asset2d .single-model-detail__body :is(p, ul, ol) {
    margin-bottom: 18px;
}

body.single-model3d .single-model-detail__body :is(h2, h3),
body.single-asset2d .single-model-detail__body :is(h2, h3) {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

body.single-model3d .single-model-detail__body .model-gallery-block,
body.single-asset2d .single-model-detail__body .model-gallery-block {
    margin-top: 16px;
}

@media (max-width: 768px) {
    .detail-card {
        padding: 1.25rem;
    }

    body.single-model3d .single-model-detail-container,
    body.single-asset2d .single-model-detail-container {
        padding: 12px 10px 24px;
    }
}

/* ==========================================================================
   Sticky sidebar fix (single model / asset)

   assets/js/models.js pins `.ct-sidebar` to the bottom of the viewport while
   the page scrolls, and computes where to stop from the ASIDE's own height:
   `stopY = asideTop + aside.offsetHeight - stickyBottomLine`. models.css sets
   `align-items: start` on this grid, so the aside collapses to the sidebar's
   own height and the "fixed" window becomes a ~24px sliver — the sidebar just
   scrolls away instead of sticking. Stretching the aside to the grid row (the
   content column) gives the engine the full scroll range it expects.
   ========================================================================== */
@media (min-width: 1000px) {
    body.single-model3d .single-model-detail-container[data-sidebar="right"] > #sidebar,
    body.single-asset2d .single-model-detail-container[data-sidebar="right"] > #sidebar {
        align-self: stretch;
        min-width: 0;
    }
}