/**
 * Francesca Polizzi - Frontend CSS
 * Frontend-only styles: site header/footer, pages, galleries
 * Requires: base.css
 */

/* ============================================
   SITE HEADER (FRONTEND)
   ============================================ */
.site-header {
    /* P3.1 layout baseline - sticky header, reduced height */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-border-strong);
    background-color: var(--color-background);
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.site-logo {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.main-menu {
    list-style: none;
    display: flex;
    gap: var(--space-xl);
}

.main-menu a {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--space-sm) 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-base);
}

.main-menu a:hover {
    opacity: 1;
    border-bottom-color: var(--color-black);
}

.main-menu a.active {
    border-bottom-color: var(--color-black);
}

/* ============================================
   BURGER MENU (MOBILE/TABLET)
   ============================================ */

/* Burger button - hidden on desktop */
.burger-button {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.burger-line {
    width: 100%;
    height: 2px;
    background-color: var(--color-black);
    transition: all 0.3s ease;
}

/* Show burger on tablet/mobile */
@media (max-width: 1023px) {
    .burger-button {
        display: flex;
    }
    
    /* Hide desktop menu by default */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        border-bottom: var(--border-width) solid var(--color-border-strong);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    /* Show menu when open */
    body.menu-open .main-nav {
        max-height: 500px;
    }
    
    /* Vertical menu layout */
    .main-menu {
        flex-direction: column;
        gap: 0;
        padding: var(--space-md) 0;
    }
    
    .main-menu li {
        border-bottom: var(--border-width) solid var(--color-border);
    }
    
    .main-menu li:last-child {
        border-bottom: none;
    }
    
    .main-menu a {
        display: block;
        padding: var(--space-md) var(--space-lg);
        border-bottom: 2px solid transparent;
    }
    
    /* Animate burger to X when open */
    body.menu-open .burger-button .burger-line:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    
    body.menu-open .burger-button .burger-line:nth-child(2) {
        opacity: 0;
    }
    
    body.menu-open .burger-button .burger-line:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.container {
    /* P3.1 layout baseline - reduced vertical padding */
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    min-height: 60vh;
}

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer {
    /* P3.1 layout baseline - reduced spacing */
    padding: var(--space-lg) var(--space-lg);
    margin-top: var(--space-2xl);
    border-top: var(--border-width) solid var(--color-border-strong);
    background-color: var(--color-background);
}

.footer-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ============================================
   HOME PAGE
   P4: Homepage cover mode - museum editorial layout
   ============================================ */
.home-hero {
    margin-bottom: var(--space-3xl);
}

/* Desktop: Cover visually centered, responsive scaling */
.cover-image {
    max-width: clamp(360px, 46vw, 800px);
    width: 100%;
    height: auto;
    margin: var(--space-2xl) auto var(--space-sm);
    display: block;
}

/* Caption: left-aligned below cover, tight museum spacing */
.cover-caption {
    max-width: clamp(360px, 46vw, 800px);
    margin: 0 auto var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: left;
}

.home-intro {
    max-width: var(--content-max-width);
    margin: 0 auto var(--space-3xl);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

/* News: aligned via container gutter (no extra padding) */
.home-news {
    max-width: var(--container-max-width);
    margin: var(--space-3xl) auto 0;
    padding-left: 0;
    padding-right: 0;
}

/* Unified title system - baseline for all page titles */
.home-news h2,
.container > h1,
.content-text h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-list {
    list-style: none;
}

.news-item {
    padding: var(--space-lg) 0;
    border-bottom: var(--border-width) solid var(--color-border);
    display: flex;
    gap: var(--space-lg);
}

.news-item:first-child {
    padding-top: 0;
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    min-width: 100px;
    flex-shrink: 0;
}

.news-text {
    flex: 1;
    font-size: var(--font-size-base);
}

.news-text a {
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
}

.news-text a:hover {
    text-decoration-color: var(--color-black);
}

/* ============================================
   HOMEPAGE VIDEO BACKGROUND (LAYER 2)
   Museum-grade, subtle, low-fi aesthetic
   ============================================ */
.home-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.home-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.3;
}

.home-bg__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

/* Ensure content remains readable above video */
.container {
    position: relative;
    z-index: 1;
}

.site-footer {
    position: relative;
    z-index: 1000;
}

/* ============================================
   WORKS GALLERY - MASONRY LAYOUT
   P3.2: Museum/editorial grid rhythm + unified page alignment
   ============================================ */
.works-grid.masonry-container {
    position: relative;
    margin-top: var(--space-lg);
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Desktop: generous gap for breathing room */
.masonry-container .work-item {
    box-sizing: border-box;
    padding: var(--space-md);
}

.work-item picture,
.work-item .work-thumbnail {
    width: 100%;
    display: block;
    cursor: pointer;
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.work-item img,
.work-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-base);
}

.work-item:hover img {
    transform: scale(1.02);
}

/* Caption: tight museum spacing, consistent with cover */
.work-caption {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    font-weight: var(--font-weight-normal);
}

/* Ensure work items remain clickable in masonry */
.work-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.work-item:hover {
    opacity: 1;
}

.work-item .work-thumbnail {
    cursor: pointer;
}

/* ============================================
   CONTENT TEXT PAGES
   Unified page alignment + title system
   ============================================ */

/* CV PDF Links - Museum-grade text-button style */
.cv-pdf-links {
    max-width: var(--content-max-width);
    margin: 0 auto var(--space-2xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cv-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    padding: var(--space-xs) 0;
    transition: text-decoration-color var(--transition-base);
}

.cv-pdf-link:hover {
    text-decoration-color: var(--color-black);
}

.cv-pdf-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--transition-base);
}

.cv-pdf-link:hover .cv-pdf-icon {
    opacity: 1;
}

/* Responsive: mobile tighter spacing */
@media (max-width: 768px) {
    .cv-pdf-links {
        margin-bottom: var(--space-xl);
        gap: var(--space-xs);
    }
    
    .cv-pdf-link {
        font-size: var(--font-size-sm);
    }
    
    .cv-pdf-icon {
        width: 14px;
        height: 14px;
    }
}

.content-text {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.content-text h2 {
    font-size: var(--font-size-xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.content-text p {
    margin-bottom: var(--space-lg);
}

.content-text ul,
.content-text ol {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.content-text li {
    margin-bottom: var(--space-sm);
}

.content-text a {
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
}

.content-text a:hover {
    text-decoration-color: var(--color-black);
}

/* ============================================
   INQUIRY MODAL - MUSEUM GRADE
   ============================================ */
.inquiry-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001; /* P2.1 INQUIRE above PhotoSwipe */
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    pointer-events: none; /* P2.1 INQUIRE interaction fix (click/focus) */
}

.inquiry-modal-content {
    background: var(--color-white);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--color-black);
    pointer-events: auto; /* P2.1 INQUIRE interaction fix (click/focus) */
}

.inquiry-modal-header {
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inquiry-modal-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

.inquiry-modal-close {
    background: transparent;
    border: 1px solid var(--color-border);
    width: 44px;
    height: 44px;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.inquiry-modal-close:hover {
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
}

.inquiry-modal-body {
    padding: var(--space-xl);
    pointer-events: auto; /* P2.1 INQUIRE inputs focus fix */
}

/* Inquiry Form */
.inquiry-form-group {
    margin-bottom: var(--space-lg);
}

.inquiry-form-group label {
    display: block;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.02em;
}

.inquiry-form-group input,
.inquiry-form-group textarea {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-base);
}

/* P2.1 INQUIRE inputs focus fix - Force focusability */
.inquiry-modal input,
.inquiry-modal textarea {
    pointer-events: auto !important;
    user-select: text;
}

.inquiry-form-group input:focus,
.inquiry-form-group textarea:focus {
    outline: none;
    border-color: var(--color-black);
}

.inquiry-form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.inquiry-char-count {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
}

/* Honeypot - hidden from users */
.inquiry-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Form Actions */
.inquiry-form-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.inquiry-btn {
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--color-black);
    cursor: pointer;
    transition: all var(--transition-base);
}

.inquiry-btn-send {
    background: var(--color-black);
    color: var(--color-white);
}

.inquiry-btn-send:hover:not(:disabled) {
    background: var(--color-white);
    color: var(--color-black);
}

.inquiry-btn-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.inquiry-btn-cancel {
    background: var(--color-white);
    color: var(--color-black);
}

.inquiry-btn-cancel:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* Inquiry Messages */
.inquiry-message {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    border: 1px solid;
}

.inquiry-message--success {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.inquiry-message--error {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-black);
    border-width: 2px;
}

/* Lightbox INQUIRE button styling */
.lightbox-inquire {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    padding: 0 var(--space-md);
}

/* ============================================
   PHOTOSWIPE v5 - MINIMAL MONOCHROME SKIN
   ============================================ */

/* White Theme - Full opaque white background */
.pswp--theme-white {
    --pswp-bg: #FFFFFF;
    --pswp-icon-color: #000000;
    --pswp-icon-color-secondary: #666666;
}

.pswp--theme-white .pswp__bg {
    background: #FFFFFF !important;
    opacity: 1 !important;
}

.pswp--theme-white .pswp__button,
.pswp--theme-white .pswp__custom-caption {
    color: #000000;
}

/* Black Theme - Full opaque black background */
.pswp--theme-black {
    --pswp-bg: #000000;
    --pswp-icon-color: #FFFFFF;
    --pswp-icon-color-secondary: #CCCCCC;
}

.pswp--theme-black .pswp__bg {
    background: #000000 !important;
    opacity: 1 !important;
}

.pswp--theme-black .pswp__button,
.pswp--theme-black .pswp__custom-caption {
    color: #FFFFFF;
}

/* PhotoSwipe Button Styling - Minimal, Borderless, Museum-grade */
.pswp__button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: opacity var(--transition-base) !important;
}

.pswp__button:hover {
    opacity: 0.6 !important;
}

.pswp__button:focus {
    opacity: 0.8 !important;
}

/* INQUIRE button styling - Borderless with perfect alignment */
.pswp__button--inquire-button {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 var(--space-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transform: translateY(7px) !important;
}

/* Custom Caption - Museum style */
.pswp__custom-caption {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    max-width: var(--content-max-width);
    padding: 0 var(--space-lg);
    pointer-events: none;
}

/* Hide default PhotoSwipe caption */
.pswp__caption {
    display: none !important;
}

/* Top bar positioning */
.pswp__top-bar {
    background: transparent !important;
}

/* Counter styling */
.pswp__counter {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* Zoom indicator */
.pswp__zoom-wrap {
    transition: transform 0.3s ease-out !important;
}

/* Loading indicator - minimal */
.pswp__preloader {
    color: var(--pswp-icon-color) !important;
}

/* Remove default button backgrounds and make minimal */
.pswp__button--close,
.pswp__button--zoom,
.pswp__button--arrow {
    background: transparent !important;
}

/* Arrow buttons - minimal hairline style */
.pswp__button--arrow--prev,
.pswp__button--arrow--next {
    width: 60px !important;
    height: 60px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
    /* Header remains horizontal on tablet/mobile with burger */
    .header-container {
        flex-direction: row;
    }
    
    .container {
        padding: var(--space-2xl) var(--space-md);
    }
    
    .footer-container {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
    
    .news-item {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .news-date {
        min-width: auto;
    }
    
    /* Gallery: tighter rhythm for tablet */
    .masonry-container .work-item {
        padding: var(--space-sm);
    }
    
    .work-caption {
        margin-top: var(--space-sm);
        font-size: 0.8125rem;
    }
    
    .inquiry-modal {
        padding: var(--space-sm);
    }
    
    .inquiry-modal-content {
        max-height: 95vh;
    }
    
    .inquiry-modal-header,
    .inquiry-modal-body {
        padding: var(--space-lg);
    }
    
    .inquiry-form-actions {
        flex-direction: column;
    }
    
    .inquiry-btn {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    /* Gallery: minimal gap for mobile */
    .masonry-container .work-item {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .work-caption {
        margin-top: var(--space-xs);
        margin-bottom: var(--space-xs);
    }
}

/* ============================================
   DETAIL PAGES (P6.8 + P6.8.1)
   Works + Installation Views detail layout
   Sticky topbar + responsive header
   ============================================ */

/* CSS Variables for detail pages */
:root {
    --detail-thumb-size-desktop: 80px; /* Issue #5: Reduced 20% (100px -> 80px) */
    --detail-thumb-size-mobile: 65px; /* Reduced ~50% from baseline 125px */
}

/* Detail page container */
.detail-page {
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* STICKY TOPBAR - Full-width divider + aligned inner grid */
/* MICRO-FIX: (a) Sticky restored (b) Gap covered via box-shadow */
.detail-topbar {
    position: sticky;
    top: 64px;
    z-index: 100;
    background: var(--color-background);
    box-shadow: 0 -3px 0 var(--color-background); /* Cover pixel gap above topbar */
    padding: var(--space-md) 0;
    margin-bottom: var(--space-2xl);
    width: 100%; /* Full browser width */
}

.detail-topbar-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* EXACT match with .detail-content */
    gap: var(--space-2xl); /* EXACT match with .detail-content */
    align-items: center;
    max-width: var(--container-max-width); /* EXACT match */
    margin: 0 auto;
    padding: 0; /* Issue #2, #3, #4: Remove padding for flush left/right alignment */
}

/* Column alignment */
.detail-topbar-left {
    justify-self: start;
}

.detail-topbar-center {
    justify-self: start;
}

.detail-topbar-right {
    justify-self: end;
}

/* Link styling - museum editorial text links */
.detail-back-link,
.detail-inquire-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--color-text-primary);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-base);
    white-space: nowrap;
}

.detail-back-link:hover,
.detail-inquire-link:hover {
    border-bottom-color: var(--color-black);
}

/* H1 title in topbar - BOLD */
.detail-topbar .detail-title {
    font-size: var(--font-size-lg);
    font-weight: 700; /* Bold */
    margin: 0;
    line-height: 1.2;
}

/* 3-column layout (desktop) */
.detail-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
    margin-top: var(--space-xl); /* Issue #6: Prevent first thumbnail row hiding under sticky topbar */
}

/* Column 1: empty breathing space */
.detail-spacer {
    /* Empty column for breathing room */
}

/* Column 2: main image + description */
.detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.detail-main-image-container {
    width: 100%;
}

.detail-main-image {
    display: block;
    width: 100%;
}

.detail-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

.detail-description {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

.detail-description p {
    margin-bottom: var(--space-md);
}

.detail-description h2,
.detail-description h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-bold);
}

.detail-description ul,
.detail-description ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
}

/* Column 3: thumbnails grid */
.detail-thumbnails {
    position: sticky;
    top: calc(var(--space-2xl) + 60px); /* Sticky below header */
    padding-top: var(--space-lg); /* Fix D: Clearance so first row visible */
}

.detail-thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(2, var(--detail-thumb-size-desktop)); /* Fix B: Explicit 80px sizing */
    justify-content: end; /* Fix B: Align to right edge */
    gap: var(--space-md);
}

.detail-thumbnail-box {
    width: var(--detail-thumb-size-desktop); /* Fix B: Force exact size */
    height: var(--detail-thumb-size-desktop); /* Fix B: Force exact size */
    background: var(--color-gray-100);
    border: 1px solid var(--color-border);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-thumbnail-box:hover {
    border-color: var(--color-black);
}

.detail-thumbnail-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-thumbnail-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Inquire section - Works only */
.detail-inquire-section {
    max-width: var(--content-max-width);
    margin: var(--space-3xl) auto var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: var(--border-width) solid var(--color-border);
}

.detail-inquire-section h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-inquire-section p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.detail-inquire-section a {
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
}

.detail-inquire-section a:hover {
    text-decoration-color: var(--color-black);
}

/* Responsive: Tablet topbar + content */
/* TABLET THUMBNAILS: (a) Sticky restored (like desktop) (b) Mobile unchanged */
@media (max-width: 1023px) {
    /* Topbar: 2-row layout (back+inquire row | title row) */
    .detail-topbar-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "left right"
            "center center";
        gap: var(--space-md) var(--space-lg);
    }
    
    .detail-topbar-left {
        grid-area: left;
    }
    
    .detail-topbar-right {
        grid-area: right;
    }
    
    .detail-topbar-center {
        grid-area: center;
        justify-self: start;
    }
    
    /* Content: 2 columns (remove left spacer) */
    .detail-content {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-xl);
    }
    
    .detail-content > .detail-spacer:first-child {
        display: none;
    }
    
    /* Tablet thumbnails: sticky like desktop */
    .detail-thumbnails {
        position: sticky;
        top: calc(64px + 110px); /* Site header + detail topbar clearance */
    }
}

/* Responsive: Mobile topbar + content */
@media (max-width: 768px) {
    /* Topbar remains 2-row but tighter */
    .detail-topbar {
        top: 56px; /* Slightly lower for mobile header */
        padding: var(--space-md) 0; /* Fix E: More vertical padding for tap comfort */
    }
    
    .detail-topbar-grid {
        padding: 0; /* Fix C: Remove horizontal padding for flush alignment */
        gap: var(--space-sm) var(--space-md);
    }
    
    .detail-topbar .detail-title {
        font-size: var(--font-size-base);
    }
    
    /* Content: 1 column stack with MOBILE ORDER: main image -> thumbnails -> description */
    .detail-content {
        display: flex; /* Change to flex for order control */
        flex-direction: column;
        gap: var(--space-xl);
    }
    
    .detail-spacer {
        display: none;
    }
    
    /* Main container: display contents to allow reordering of children */
    .detail-main {
        display: contents; /* Children become direct flex items */
    }
    
    /* Order: 1) main image, 2) thumbnails, 3) description */
    .detail-main-image-container {
        order: 1;
    }
    
    .detail-thumbnails {
        order: 2;
    }
    
    .detail-description {
        order: 3;
    }
    
    /* Issue #7: Thumbnails single-row flex layout (wrap when needed) + flush alignment */
    .detail-thumbnails {
        padding: 0; /* Flush with main image column */
        position: static; /* Mobile: Override tablet sticky */
        top: auto;
    }
    
    .detail-thumbnails-grid {
        display: flex; /* Change from grid to flex */
        flex-wrap: wrap; /* Allow wrapping */
        gap: var(--space-sm);
    }
    
    .detail-thumbnail-box {
        width: var(--detail-thumb-size-mobile);
        height: var(--detail-thumb-size-mobile);
        max-width: var(--detail-thumb-size-mobile);
        max-height: var(--detail-thumb-size-mobile);
        flex-shrink: 0; /* Prevent shrinking */
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .site-header,
    .site-footer {
        display: none;
    }
    
    body {
        color: var(--color-black);
        background: var(--color-white);
    }
    
    a {
        text-decoration: underline;
    }
}