/* ---------------------------------------------------------
   FONT IMPORTS
--------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* ---------------------------------------------------------
   ROOT TOKENS (admin + public unified)
--------------------------------------------------------- */
:root {
    /* Colors */
    --bg-0: #515151;;
    --surface: #1f2933;
    --surface-2: #2d3741;
    --surface-light: #2d3741;
    --text-1: #DFDDDE;
    --text-2: #b5b5b5;
    --accent: #2481C7;
    --border: rgba(255, 255, 255, 0.08);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* Radius */
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
    --shadow-lg: 0 6px 18px rgba(0,0,0,0.35);
    --shadow-xl: 0 10px 28px rgba(0,0,0,0.45);

    /* Logo scaling */
    --logo-width: 100px;
    --logo-height: 122px;

    /* Menu item scaling */
    --menu-width: 180px;
    --menu-height: 50px;

    /* Animation */
    --dropdown-duration: 0.22s;
    --dropdown-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

/* Tablet scaling */
@media (max-width: 768px) {
    :root {
        --logo-width: 70px;
        --logo-height: 85px;
        --menu-width: 150px;
        --menu-height: 42px;
    }
}

/* Mobile scaling */
@media (max-width: 480px) {
    :root {
        --logo-width: 55px;
        --logo-height: 68px;
        --menu-width: 130px;
        --menu-height: 36px;
    }
}

/* ---------------------------------------------------------
   GLOBAL RESET
--------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    background: var(--bg-0);
    color: var(--text-1);
    font-family: 'Inter', sans-serif;
}

/* ---------------------------------------------------------
   ACCENT BAR (PUBLIC + ADMIN UNIFIED)
--------------------------------------------------------- */
.gradient-line {
    height: 4px;
    border: none;
    background-image: linear-gradient(
        to right,
        var(--bg-0),
        var(--bg-0),
        var(--accent),
        var(--accent)
    );
    border-radius: 2px;
    margin: var(--space-md) 0;
}

/* ---------------------------------------------------------
   MASTHEAD (CHARLESF2.COM)
--------------------------------------------------------- */
.site-masthead {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    letter-spacing: 0.05em;
    margin: var(--space-md) 0 var(--space-sm) 0;
    color: var(--text-1);
}

/* ---------------------------------------------------------
   PUBLIC HEADER LAYOUT
--------------------------------------------------------- */
.public-header {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
}

.public-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.page-title {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin: 0;
    padding-left: var(--space-xs);
    color: var(--text-1);
}

/* ---------------------------------------------------------
   LOGO DROPDOWN
--------------------------------------------------------- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background: url('/assets/images/in_btn_cf2logo_v003.png') no-repeat 0 0;
    width: var(--logo-width);
    height: var(--logo-height);
    background-size: auto var(--logo-height);
    cursor: pointer;
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    background: var(--surface-2);
    padding: var(--space-sm) 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 999;
    animation: dropdownSlide var(--dropdown-duration) var(--dropdown-ease);
}

@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-content a {
    display: block;
    width: var(--menu-width);
    height: var(--menu-height);
    background-size: auto var(--menu-height);
    margin: var(--space-xs) auto;
}

/* Mobile dropdown */
@media (max-width: 768px) {
    .dropdown-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: var(--space-lg) 0;
        background: var(--surface);
        border-radius: 0;
        box-shadow: none;
        display: none;
    }

    .dropdown-content a {
        margin: var(--space-sm) auto;
    }
}

/* ---------------------------------------------------------
   PROJECTS GRID (PUBLIC + PROJECT PAGE)
--------------------------------------------------------- */
.projects-grid,
.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
}

/* Breakpoints */
@media (max-width: 1100px) {
    .projects-grid,
    .project-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 760px) {
    .projects-grid,
    .project-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 420px) {
    .projects-grid,
    .project-gallery {
        grid-template-columns: 1fr;
    }
}

/* Card layout */
.project-card {
    text-decoration: none;
    color: inherit;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.project-card:hover {
    transform: translateY(-4px);
}

/* Thumbnail container */
.project-thumb {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #222;
    margin: 0 auto;
}

.project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------------------------------------------------------
   PROJECT DETAIL PAGE
--------------------------------------------------------- */
.project-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-lg);
    color: var(--text-1);
}

.project-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.project-title {
    font-family: "Cinzel", serif;
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.project-description {
    font-size: 1.1rem;
    color: var(--text-2);
    line-height: 1.6;
}

/* Hero image */
.project-hero {
    width: 100%;
    margin: var(--space-lg) 0;
    text-align: center;
}

.project-image-hero {
    width: 100%;
    max-width: 900px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   LIGHTBOX
--------------------------------------------------------- */
/* LIGHTBOX OVERLAY */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    overflow: hidden;
}

.lightbox.open {
    display: flex;
}

/* CONTENT BOX (scrolls internally for tall images) */
.lb-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* IMAGE BEHAVIOR */
#lb-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* FIXED CONTROLS */
.lb-close,
.lb-prev,
.lb-next {
    position: fixed;
    z-index: 2100;
    color: white;
    font-size: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    opacity: 1;
}

/* Close button (top-right) */
.lb-close {
    top: 20px;
    right: 30px;
}

/* Prev button (left-center) */
.lb-prev {
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}

/* Next button (right-center) */
.lb-next {
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

/* ---------------------------------------------------------
   UTILITY
--------------------------------------------------------- */
.hidden {
    display: none !important;
}

.collections-page {
    padding: 4rem 2rem;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.collection-card {
    display: block;
    padding: 1.5rem;
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: #fff;
}

.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.collection-card .meta {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ---------------------------------------------------------
   VIDEO
--------------------------------------------------------- */

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    margin-bottom: 24px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}