/*
Theme Name: Aktuell
Description: A minimal, custom creative portfolio theme built for contemporary digital experiences.
Author: Aktuell Studio
Version: 1.0
*/

/* Custom Fonts */
@font-face {
    font-family: 'HaasGrotTextR-55Roman';
    src: url('/fonts/HaasGrotTextR-55Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InspirationFont';
    src: url('/fonts/bbe0068e6a910003-s.p.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Legacy fonts - keeping for fallback */
@font-face {
    font-family: 'Aktuell-Regular';
    src: url('/fonts/a1d2a6c40cd8551c-s.p.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktuell-Medium';
    src: url('../../../fonts/0daaad169a541695-s.p.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktuell-Bold';
    src: url('../../../fonts/bbe0068e6a910003-s.p.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktuell-Light';
    src: url('../../../fonts/ee42aa98e9a220f1-s.p.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Initialize CSS custom property for smooth hover animations */
:root {
    --hover-progress: 0;
}

/* Website links styling (2manybooks.com, artand.services, trulytype.com) */
/* Ultra-specific selectors to override any conflicting styles */
.page-about .grid-module .grid-container .grid-item a.website-link,
.page-about .grid-module .grid-container .grid-item a.website-link:link,
.page-about .grid-module .grid-container .grid-item a.website-link:visited,
.page-about .grid-module .grid-container .grid-item a.website-link:active,
.page-about .grid-module .grid-container .grid-item a.website-link:focus,
.grid-item a.website-link,
.grid-item a.website-link:link,
.grid-item a.website-link:visited,
.grid-item a.website-link:active,
.grid-item a.website-link:focus {
    color: #000 !important; /* Black default state - override browser defaults */
    text-decoration: none !important; /* Remove underline */
    text-decoration-line: none !important; /* Extra override */
    text-decoration-color: transparent !important; /* Make underline invisible */
    border-bottom: none !important; /* Remove any bottom borders */
    outline: none !important; /* Remove focus outlines */
    transition: color 0.3s ease !important;
    /* Nuclear option - inline style override */
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
}

.page-about .grid-module .grid-container .grid-item a.website-link:hover,
.grid-item a.website-link:hover {
    color: #808080 !important; /* Grey on hover - same as nav links */
    text-decoration: none !important; /* Keep no underline on hover */
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
}

body {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.6;
    color: #000;
    background: #fff;
    overflow-x: hidden; /* Prevent horizontal scroll during animations */
    transition: background-color 0.8s ease, color 0.8s ease;
}

/* Dark background state for scroll */
body.dark-background {
    background: #000 !important;
    color: #fff !important;
}

/* Test to make sure the class is being applied */
body.dark-background * {
    color: #fff !important;
}



/* Navigation */
.main-nav {
    position: fixed;
    left: 50%;
    z-index: 1000;
    transition: all 1.8s cubic-bezier(0.16, 1, 0.3, 1); /* Smoother easing */
    will-change: transform, opacity;
    visibility: visible; /* Ensure nav is visible by default */
}

/* Animation states */
.main-nav.first-visit {
    top: 50vh;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.main-nav.fade-in {
    top: 50vh;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.main-nav.slide-to-top {
    top: 40px;
    transform: translate(-50%, 0);
    opacity: 1;
}

/* Default state for pages */
.main-nav:not(.first-visit):not(.fade-in):not(.slide-to-top) {
    top: 40px;
    transform: translate(-50%, 0);
    opacity: 1;
}

/* Ensure nav items are visible in default state */
.main-nav:not(.first-visit) .nav-links li {
    opacity: 1;
    transform: translateY(0);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 8px; /* Reduced gap for tighter spacing */
    white-space: nowrap; /* Prevent wrapping on mobile */
}

/* Staggered fade-up animation for nav items */
.nav-links li {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links li.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Nav link styles with sweep animation */
.nav-links a {
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* Increased from 10px */
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 8px 12px; /* Added padding for better hover target */
    display: inline-block; /* Ensure transform works */
    white-space: nowrap; /* Keep text and pills on same line */
    color: #808080; /* Start as 50% grey (#808080) for intro animation */
    transition: color 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 1; /* Default opacity */
}

.nav-links a.sweep-animation,
.main-nav.first-visit .nav-links a.sweep-animation {
    color: #000 !important; /* Final state is black - override first-visit grey */
    transition: color 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Faster transition for cycling */
}

/* First visit state - start as light grey for maximum dramatic effect */
.main-nav.first-visit .nav-links a {
    color: #cccccc !important; /* Force light grey (~80%) for maximum contrast */
}

/* First visit state - pills start as light grey too */
.main-nav.first-visit #projectCount,
.main-nav.first-visit #imageCount {
    background: #cccccc !important; /* Start with light grey background */
    color: #000 !important; /* Black text on light grey background */
    transition: background-color 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth transitions for both background and text */
}

/* Pills sweep to black - white text for readability */
.main-nav.first-visit #projectCount.sweep-animation,
.main-nav.first-visit #imageCount.sweep-animation {
    background: #000 !important; /* Final state is black background */
    color: #fff !important; /* White text for readability on black background */
}

/* Default state for pages (non-intro) - ensure links are 100% black */
.main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]) {
    color: #000 !important; /* Force 100% black for non-active links only */
    opacity: 1; /* 100% opacity for non-active links */
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
    color: #000; /* Ensure black color */
    opacity: 0.4; /* 40% opacity for active link */
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth transition for active state */
}

/* Active state fade animation */
.nav-links a.fade-to-active {
    opacity: 0.4; /* Fade to active state - matches active opacity */
    transition: opacity 0.8s ease; /* Smooth fade transition */
}

.nav-links a:hover:not(.active):not([aria-current="page"]) {
    opacity: 0.3 !important; /* Hover effect for non-active links */
}

.nav-links a.active:hover,
.nav-links a[aria-current="page"]:hover {
    opacity: 1; /* Turn black on hover for active links */
}

/* Ensure active nav link pills are visible with proper contrast */
.main-nav .nav-links a.active #projectCount,
.main-nav .nav-links a.active #imageCount,
.main-nav .nav-links a[aria-current="page"] #projectCount,
.main-nav .nav-links a[aria-current="page"] #imageCount {
    color: #fff !important; /* White text on black background */
    background: #000 !important; /* Black background */
}

/* Dark mode - keep the same contrast */
body.dark-background .main-nav .nav-links a.active #projectCount,
body.dark-background .main-nav .nav-links a.active #imageCount,
body.dark-background .main-nav .nav-links a[aria-current="page"] #projectCount,
body.dark-background .main-nav .nav-links a[aria-current="page"] #imageCount {
    color: #000 !important; /* Black text on white background for contrast */
    background: #fff !important; /* White background in dark mode */
}

/* Dark background navigation styles */
body.dark-background .nav-links a {
    color: #ccc !important; /* Light grey by default */
}

body.dark-background .main-nav:not(.first-visit) .nav-links a:not(.active):not([aria-current="page"]) {
    color: #fff !important; /* Pure white for non-active links */
    opacity: 1;
}

body.dark-background .nav-links a.active,
body.dark-background .nav-links a[aria-current="page"] {
    color: #fff !important; /* Pure white for active link */
    opacity: 0.4; /* Maintain 40% opacity */
}

body.dark-background .nav-links a:hover:not(.active):not([aria-current="page"]) {
    opacity: 0.3 !important; /* Hover effect for non-active links */
}

body.dark-background .nav-links a.active:hover,
body.dark-background .nav-links a[aria-current="page"]:hover {
    opacity: 1 !important; /* Full opacity on hover for active links */
}

/* Dark background count pills - invert colors */
body.dark-background #imageCount,
body.dark-background #projectCount {
    background: #fff !important;
    color: #000 !important;
}

/* Mobile navigation - white background */
@media (max-width: 768px) {
    .main-nav {
        background: white;
        padding: 8px 16px;
        border-radius: 30px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .nav-links {
        gap: 6px; /* Slightly tighter spacing on mobile */
    }
    
    .nav-links a {
        padding: 6px 10px; /* Slightly smaller padding on mobile */
        font-size: 11px; /* Slightly smaller font on mobile */
    }
    
    /* Ensure dark mode nav has white background on mobile too */
    body.dark-background .main-nav {
        background: white !important;
    }
    
    /* Placeholder - mobile dark mode overrides moved to end of file */
}

/* List view borders - light mode */
.projects-grid.list-view .project-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.projects-grid.list-view .project-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
}

/* List view awards styling - white dash for projects without awards */
.projects-grid.list-view .project-awards-list {
    color: #fff !important; /* White dash for projects without awards */
}

.projects-grid.list-view .project-item .project-awards-list {
    color: #fff !important; /* White dash for projects without awards */
}

/* Fix list view borders in dark mode */
body.dark-background .projects-grid.list-view .project-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

body.dark-background .projects-grid.list-view .project-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Grey outline for thumbnails on dark background */
body.dark-background .project-thumbnail {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-background .projects-grid.list-view .project-item:hover .project-meta,
body.dark-background .projects-grid.list-view .project-item:hover .project-thumbnail,
body.dark-background .projects-grid.list-view .project-item:hover .project-awards-list {
    opacity: 0.4;
}

body.dark-background .projects-grid.list-view .project-item:hover .project-category {
    opacity: 0.2;
}

body.dark-background .projects-grid.list-view .project-item:hover {
    border-top: 1px solid #32cd32 !important; /* Lime green border on hover in dark mode too */
}

/* Hero Text Line Animation */
.hero-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), 
                transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero-line.reveal {
    opacity: 1;
    transform: translateY(0px);
}

/* Dark background view controls - same hover behavior as nav */
body.dark-background .view-toggle {
    color: #ccc;
}

body.dark-background .view-toggle:hover:not(.active) {
    opacity: 0.3 !important; /* Same as nav hover */
}

body.dark-background .view-toggle.active {
    color: #ccc; /* Keep same color as default */
    opacity: 0.3; /* Same as hover state */
    text-decoration: none;
}

body.dark-background .view-toggle.active:hover {
    opacity: 1 !important; /* Same as nav active hover */
}

/* Count pills */
#imageCount, #projectCount {
    background: #000;
    color: #fff;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    min-width: 12px;
    text-align: center;
}

/* Inspiration Thumbnail Strip */
.inspiration-nav-strip {
    position: fixed;
    top: 70px; /* Just below the navigation */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 600px; /* Constrain to reasonable width */
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    overflow: hidden;
    transition: opacity 0.3s ease; /* Smooth appearance */
}

.inspiration-nav-strip.loading {
    opacity: 0; /* Hide during initial load */
}

.thumbnail-container {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 10px 15px;
    gap: 2px; /* Much tighter spacing - buttoned up */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.thumbnail-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for cleaner look */
}

.nav-thumbnail {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    cursor: pointer !important;
    transition: all 0.3s ease;
    border: none; /* Remove grey outline */
    box-shadow: none; /* Remove shadow initially */
}

.nav-thumbnail:hover {
    transform: scale(1.05); /* Subtle scale */
    border: 2px solid #000; /* Clean black border on hover */
}

.nav-thumbnail.active {
    border: 2px solid #000; /* Clean black border when active */
    transform: scale(1.05);
}

.nav-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Adjust page content to account for thumbnail strip */
.inspiration-nav-strip + .page-content {
    padding-top: 150px; /* Reduced padding - better balance */
    margin-top: 0; /* Ensure no conflicting margins */
}

/* Animation Reset Button */
.reset-animation-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    color: #666;
    cursor: pointer !important;
    z-index: 999;
    transition: all 0.2s ease;
}

.reset-animation-btn:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #000;
}

/* Page Content */
.page-content {
    padding: 120px 0 40px;
    width: 100%;
    opacity: 1;
    transform: translateX(0) translateY(0);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.page-content.content-hidden {
    opacity: 0;
}

.page-content.content-visible {
    opacity: 1;
}

/* Slide transition states */
.page-content.slide-out-left {
    transform: translateX(-100vw);
    opacity: 0;
}

.page-content.slide-out-right {
    transform: translateX(100vw);
    opacity: 0;
}

.page-content.slide-in-left {
    transform: translateX(-100vw);
    opacity: 0;
}

.page-content.slide-in-right {
    transform: translateX(100vw);
    opacity: 0;
}

.page-content.slide-active {
    transform: translateX(0);
    opacity: 1;
}

.page-article {
    width: 100%;
}

.page-title {
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.page-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    font-weight: normal;
    letter-spacing: 0.5px;
    text-transform: lowercase;
}

.page-text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    line-height: 1.8;
    letter-spacing: 0.3px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-text p {
    margin-bottom: 20px;
}

/* Projects Hero Module */
.projects-hero-module {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 40px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 60px;
    gap: 40px; /* Space between the two hero texts */
}

.hero-text {
    text-align: left;
    padding: 0 30px;
    max-width: 600px;
    margin: 0;
}

.hero-text p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
    letter-spacing: 0;
    margin: 0;
}

.hero-text {
    transition: opacity 0.1s ease-out; /* Smooth fade transition */
}

/* Blinking animation for the time - DISABLED */
.blinking-time {
    /* animation: clock-blink 1s steps(1, end) infinite; */
    opacity: 1; /* Keep time visible without blinking */
}

@keyframes clock-blink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Projects Section */
.projects-section {
    max-width: 1400px;
    margin: 80px auto 0;
    padding: 0 30px;
}

.projects-subheadline-container {
    text-align: left;
    margin: 0 0 60px 0;
}

.projects-subheadline {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    letter-spacing: 0.5px;
    margin: 0;
    display: inline-block;
}

body.dark-background .projects-subheadline {
    color: #fff;
}

.projects-footer-container {
    position: fixed;
    bottom: 20px;
    left: 40px;
    text-align: left;
    z-index: 1000;
}

.projects-footer {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: normal;
    color: #fff !important;
    letter-spacing: 0.5px;
    margin: 0;
    background: none !important;
    padding: 0;
    border-radius: 0;
    display: inline-block;
    cursor: default;
    transition: none;
    text-decoration: none;
}

.projects-footer:hover {
    /* No hover effects - just clean white text */
}

.projects-footer:active {
    /* No active effects */
}

/* Dark background support - keep white text */
body.dark-background .projects-footer {
    background: none !important;
    color: #fff !important;
}

body.dark-background .projects-footer:hover {
    /* No hover effects */
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px; /* Increased from 60px to 80px for more white space */
    padding-bottom: 200px; /* Added padding after thumbnails */
}

.project-item {
    position: relative; /* For overlay positioning */
    width: 100%;
}

.project-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10; /* Changed from 16/9 to 16/10 */
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 4px; /* Reduced from 8px to 4px */
    margin-bottom: 10px; /* Reduced from 30px to 10px for closer text */
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Slower, smoother transition */
    cursor: pointer !important;
    border: 1px solid rgba(0, 0, 0, 0.03); /* Grey outline at 3% */
    outline: none; /* Remove any outlines */
    box-shadow: none; /* Remove any box shadows that might look like borders */
}

/* Black overlay for hover effect - covers entire project item */
.project-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 999;
    pointer-events: none; /* Allow clicks to pass through to thumbnail */
}

/* Black overlay system - Two-stage hover progression */
/* Stage 1: Initial hover - medium black overlay */
.projects-grid.thumbnail-hovered .project-item:not(.hovered) .project-hover-overlay {
    opacity: 1;
    visibility: visible;
    /* Smooth interpolation from 15% to 90% black based on progress (less dramatic start) */
    background: rgba(0, 0, 0, calc(0.15 + (var(--hover-progress, 0) * 0.75)));
    transition: opacity 1.2s ease, visibility 1.2s ease; /* Much slower, more dramatic fade-in */
}

/* Debug info removed - hover animation working perfectly! */

/* Gradual title opacity change */
.projects-grid.thumbnail-hovered .project-item.hovered .project-meta .project-title {
    /* Smooth interpolation from 0.7 to 1.0 based on progress */
    opacity: calc(0.7 + (var(--hover-progress, 0) * 0.3)) !important;
    transition: opacity 0.1s ease;
}

/* Gradual category opacity change */
.projects-grid.thumbnail-hovered .project-item.hovered .project-meta .project-category {
    /* Smooth interpolation from 0.5 to 0.2 based on progress (gets dimmer) */
    opacity: calc(0.5 - (var(--hover-progress, 0) * 0.3)) !important;
    transition: opacity 0.1s ease;
}

/* Keep hovered thumbnail clear (no overlay) */
.projects-grid.thumbnail-hovered .project-item.hovered .project-hover-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Stage 2: Keep category at same opacity as Stage 1 (no change) */

/* Subtle loading blink effect - 60% to 100% opacity */
.project-thumbnail.loading {
    animation: project-blink 1.2s ease-in-out infinite;
}

@keyframes project-blink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1.0; }
}

/* Project items - dramatic opacity animation tied to scroll */
.project-item {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Add smooth transitions to the existing dark-background class */
body.dark-background {
    background: #000 !important;
    color: #fff !important;
    transition: background-color 0.8s ease !important;
}

/* Add transitions to all elements that change in dark mode */
.nav, .nav a, .nav .pill, .hero-module, .projects-subheadline, .view-toggle {
    transition: color 0.8s ease, background 0.8s ease;
}

/* Make sure nav pills transition smoothly */
#imageCount, #projectCount {
    transition: background 0.8s ease, color 0.8s ease;
}

/* Project thumbnail hover effects */
.project-thumbnail {
    position: relative; /* For award icon positioning */
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.3s ease; /* Added filter transition */
}

/* Mini slideshow for multiple images */
.project-thumbnail .slideshow-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-thumbnail .slideshow-images img,
.project-thumbnail .slideshow-images video,
.project-thumbnail .slideshow-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1; /* Behind active element */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    transform: translateZ(0); /* Hardware acceleration */
    cursor: pointer !important;
}

.project-thumbnail .slideshow-images img.active,
.project-thumbnail .slideshow-images video.active,
.project-thumbnail .slideshow-video.active {
    opacity: 1;
    z-index: 10; /* On top of other elements */
}

/* Force pointer cursor on slideshow elements */
.project-thumbnail .slideshow-images,
.project-thumbnail .slideshow-images *,
.project-thumbnail .project-awards,
.project-thumbnail .project-awards *,
.project-thumbnail .award-icon {
    cursor: pointer !important;
}

.project-thumbnail:hover {
    transform: scale(1.015); /* Even more subtle scale on hover - will be overridden by cursor tracking */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* OLD OPACITY HOVER EFFECTS REMOVED - Now using black overlay system */

/* OLD KEEP HOVERED OPACITY RULES REMOVED - Now using black overlay system */

/* OLD CATEGORY OPACITY RULE REMOVED - Now using black overlay system */



/* Password Modal - Frosted Glass Effect */
.password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, backdrop-filter 0.4s ease;
}

.password-modal.active {
    opacity: 1;
    visibility: visible;
}

.password-content {
    text-align: center;
    max-width: 300px;
    width: 90%;
}

.password-content input {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
}

.password-content input:focus {
    outline: none;
}

.password-disclaimer {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #666 !important;
    margin-top: 20px;
    margin-bottom: 0;
    line-height: 1.4;
    text-align: center;
}

/* Ensure disclaimer text stays dark even in dark mode */
body.dark-background .password-disclaimer {
    color: #666 !important;
}

/* Draggable Music Widget */
.music-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 220px;
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 25px;
    z-index: 10000; /* Above easter egg */
    cursor: move;
    transition: all 0.3s ease;
    display: none !important; /* Completely hidden until intro completes */
    font-family: Helvetica, Arial, sans-serif;
}

/* Music widget visible state (after intro animation) */
.music-widget.intro-complete {
    display: block !important; /* Show the widget */
    opacity: 0.8;
    transform: translateY(0);
    visibility: visible;
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
    animation: slideInFromBottom 0.6s ease-out;
}

/* Slide in animation for the music widget */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

.music-widget.intro-complete:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.music-controls {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 100%;
    gap: 15px;
}

.music-btn {
    background: none;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #000;
    font-family: monospace;
}

.music-btn:hover {
    opacity: 0.6;
    transform: none;
}

.music-btn:focus,
.music-btn:active {
    outline: none;
    border: none;
}

.music-info {
    flex: 1;
    min-width: 0;
}

.music-title {
    font-size: 11px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.music-title-scroll {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-endless 20s linear infinite;
}

@keyframes scroll-endless {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Dark mode support */
body.dark-background .music-widget {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-background .music-title {
    color: #fff;
}

body.dark-background .music-btn {
    color: #fff;
}

body.dark-background .music-btn:hover {
    opacity: 0.6;
}



/* Hidden YouTube player */
#youtubePlayer {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}



.password-content input::placeholder {
    color: #999;
    letter-spacing: normal;
}

/* Awards System */
.project-awards {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 50; /* Much higher z-index to stay above slideshow videos */
}

.award-icon {
    width: 32px; /* Bigger for better visibility */
    height: 32px;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.2s ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Removed background-color to let PNG transparency show */
    border-radius: 2px;
    /* Removed padding to show full icon */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); /* More spread and stronger drop shadow */
}

.award-icon:hover {
    opacity: 1;
}

.award-icon.cannes {
    background-image: url('/wp-content/uploads/awards/cannes.png');
}

.award-icon.emmy {
    background-image: url('/wp-content/uploads/awards/emmy.png');
}

.award-icon.clio {
    background-image: url('/wp-content/uploads/awards/clio.png');
    width: 48px !important;
    height: 48px !important;
    background-size: 120% !important; /* Moderate zoom to crop whitespace but keep logo intact */
    background-position: center -12px !important; /* Move logo much higher above the container */
}

.award-icon.dad {
    background-image: url('/wp-content/uploads/awards/dad.png');
    width: 36px !important;
    height: 36px !important;
    background-size: contain !important;
}

.award-icon.oneshow {
    background-image: url('/wp-content/uploads/awards/oneshow.png');
    width: 36px !important;
    height: 36px !important;
    background-size: contain !important;
}

/* Removed old opacity hover effects - now using overlay approach */

/* Fullscreen slideshow easter egg */
.fullscreen-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    cursor: pointer !important;
}

.fullscreen-slideshow.active {
    opacity: 1;
    visibility: visible;
}

.slideshow-content {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.slideshow-item {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.slideshow-item.active {
    opacity: 1;
}

.slideshow-counter {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: rgba(255, 255, 255, 0.7);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.slideshow-exit {
    position: absolute;
    top: 30px;
    right: 30px;
    color: rgba(255, 255, 255, 0.7);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer !important;
    transition: opacity 0.3s ease;
}

.slideshow-exit:hover {
    opacity: 1;
    color: #fff;
}

/* DISABLED: Thumbnail hover should only be triggered by thumbnail hover, not project item hover */
/* 
.project-item:hover .project-title {
    opacity: 0.5;
}

.project-item:hover .project-category {
    opacity: 0.3;
}
*/

/* Awards System */
.project-awards {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Mouse-following tooltip - Safari default style */
.tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: normal;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tooltip.show {
    opacity: 1;
}



@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.award-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.award-icon.cannes {
    background-image: url('/wp-content/uploads/awards/cannes.png');
}

.award-icon.emmy {
    background-image: url('/wp-content/uploads/awards/emmy.png');
}

.award-icon.clio {
    background-image: url('/wp-content/uploads/awards/clio.png');
    width: 48px !important;
    height: 48px !important;
    background-size: 120% !important; /* Moderate zoom to crop whitespace but keep logo intact */
    background-position: center -12px !important; /* Move logo much higher above the container */
}

.award-icon.dad {
    background-image: url('/wp-content/uploads/awards/dad.png');
    width: 36px !important;
    height: 36px !important;
    background-size: contain !important;
}

.award-icon.oneshow {
    background-image: url('/wp-content/uploads/awards/oneshow.png');
    width: 36px !important;
    height: 36px !important;
    background-size: contain !important;
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none !important; /* Force remove any default borders */
    outline: none !important; /* Force remove any default outlines */
    box-shadow: none !important; /* Force remove any box shadows */
    background: none !important; /* Remove any background that might show as border */
}

.project-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer !important;
    border: none !important; /* Force remove any default borders */
    outline: none !important; /* Force remove any default outlines */
    box-shadow: none !important; /* Force remove any box shadows */
    background: none !important; /* Remove any background that might show as border */
    display: block;
}

/* Force remove borders from any img or video inside project thumbnails */
.project-thumbnail img,
.project-thumbnail video {
    border: 1px solid rgba(0, 0, 0, 0.01) !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important; /* Ensure pointer cursor is maintained */
}

/* AGGRESSIVE border removal - debug mode - EXCLUDING award icons and main thumbnail */
.project-thumbnail *,
.project-thumbnail,
.project-thumbnail::before,
.project-thumbnail::after {
    cursor: pointer !important; /* Force pointer cursor on ALL elements */
}

.project-thumbnail *:not(.award-icon),
.project-thumbnail::before,
.project-thumbnail::after {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* Remove background-image from everything EXCEPT award icons */
.project-thumbnail *:not(.award-icon) {
    background-image: none !important;
}

/* Remove any WordPress default styling that might add borders */
.project-thumbnail img {
    box-sizing: border-box !important;
    vertical-align: top !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
}

/* Remove background from thumbnail container that might show as border */
.project-thumbnail {
    background: transparent !important;
}

.project-meta {
    padding: 0 5px; /* Removed top padding to bring text closer to thumbnail */
}

.project-title {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* Match Selected case studies */
    line-height: 1.2; /* Slightly increased for better readability */
    color: #000;
    letter-spacing: 0.5px; /* Match Selected case studies */
    margin: 0 0 2px 0;
    font-weight: normal;
    opacity: 1;
    transition: opacity 0.3s ease; /* Smooth opacity transition */
}

.project-category {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* Match Selected case studies */
    line-height: 1.2; /* Slightly increased for better readability */
    color: #000;
    letter-spacing: 0.5px; /* Match Selected case studies */
    margin: 0;
    font-weight: normal;
    opacity: 0.5;
    transition: opacity 0.3s ease; /* Smooth opacity transition */
}

/* Responsive adjustments for projects section */
@media (max-width: 1024px) {
    .projects-section {
        padding: 0 40px;
    }
    
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .projects-section {
        padding: 0 30px;
        margin-top: 60px;
    }
    
    .projects-subheadline {
        margin-bottom: 40px;
        font-size: 12px !important; /* Back to original size */
        white-space: nowrap;
    }
    
    /* Aggressive single line layout - force everything inline */
    .projects-subheadline-container {
        display: flex !important;
        flex-direction: row !important; /* Force horizontal */
        flex-wrap: nowrap !important; /* Never wrap */
        gap: 8px !important; /* Very tight spacing */
        align-items: center !important;
        overflow-x: auto !important; /* Scroll if needed */
        width: 100% !important;
    }
    
    /* Force h2 to be inline */
    .projects-subheadline {
        display: inline-block !important;
        flex-shrink: 0 !important; /* Don't shrink */
        margin: 0 !important; /* Remove margins */
    }
    
    /* Smaller view controls on mobile */
    .view-controls {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important; /* Very tight spacing between toggles */
        flex-shrink: 0 !important; /* Prevent shrinking */
        align-items: center !important;
    }
    
    .view-toggle {
        font-size: 12px !important; /* Back to original size */
        white-space: nowrap !important; /* Prevent wrapping */
        padding: 0 !important; /* Remove any padding */
        margin: 0 !important; /* Remove any margin */
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Extra small screens - even more aggressive */
@media (max-width: 480px) {
    .projects-subheadline {
        font-size: 12px !important; /* Keep original size */
        margin: 0 !important;
    }
    
    .projects-subheadline-container {
        gap: 6px !important; /* Ultra tight spacing */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    .view-controls {
        gap: 6px !important;
        display: flex !important;
        flex-direction: row !important;
    }
    
    .view-toggle {
        font-size: 12px !important; /* Keep original size */
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    .projects-section {
        padding: 0 20px;
    }
    
    .projects-grid {
        gap: 30px;
    }
}

/* Grid Module System */
.grid-module {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 1200px;
}

.grid-module.hero-module {
    /* Hero module styling - same as regular grid module now */
}

/* Copyright module - make it much shorter */
.page-about .grid-module:nth-child(3) {
    min-height: 60px; /* Ultra minimal height for just copyright */
}

.page-about .grid-module:nth-child(3) .grid-container {
    height: calc(60px - 40px); /* Adjust container height accordingly */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
    height: calc(1200px - 40px); /* Full height minus padding */
}

.grid-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px; /* Updated to match navigation font size */
    color: #000;
    height: 100%; /* Full height of the container */
    padding: 10px;
    transition: font-size 0.3s ease;
}

.grid-item.span-two {
    grid-column: span 2;
}

/* Mobile responsiveness for about page */
@media (max-width: 768px) {
    .page-about .grid-container {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        gap: 15px;
        padding: 20px;
    }
    
    .page-about .grid-item {
        height: auto;
        min-height: 150px;
        padding: 15px;
        font-size: 14px;
    }
    
    .page-about .grid-item.span-two {
        grid-column: span 2;
    }
    
    /* Hide empty grid items on mobile - only show items with content */
    .page-about .grid-item:empty {
        display: none;
    }
    
    /* Ensure image spans full width in mobile */
    .page-about .grid-item img {
    max-width: 100%;
    height: auto;
    }
    
    /* Adjust text content for mobile */
    .page-about .grid-item br {
        display: block;
        margin: 10px 0;
    }
}

/* About page specific - tighter spacing between image and text */
.page-about .hero-module .grid-container {
    grid-template-rows: auto auto 1fr 1fr 1fr 1fr; /* Auto-size first two rows for tighter spacing */
    gap: 2px; /* Very tight gap for about page */
    row-gap: 2px; /* Specifically reduce vertical spacing */
    column-gap: 10px; /* Keep horizontal spacing normal */
}

/* Force light grey border on about page image with thicker bottom */
.page-about img {
    border: 18px solid #f8f8f8 !important;
    border-bottom: 38px solid #f8f8f8 !important;
    box-sizing: border-box !important;
}

.page-about .hero-module .grid-item {
    height: auto; /* Allow natural height instead of fixed height */
}

/* Fix work experience layout - override flex to allow proper line breaks and make wider */
.page-about .grid-module:nth-child(2) .grid-container .grid-item:nth-child(2) {
    display: block !important;
    white-space: pre-line;
    grid-column: span 2; /* Make it span 2 columns for more width */
}

/* Date styling for work experience */
.work-date {
    color: #666 !important;
}


/* Random font size variations */
.grid-item.font-normal { font-size: 8px; }
.grid-item.font-medium { font-size: 12px; }
.grid-item.font-large { font-size: 16px; }
.grid-item.font-huge { font-size: 24px; }
.grid-item.font-massive { font-size: 32px; }
.grid-item.font-gigantic { font-size: 48px; }

/* Inspiration Gallery */
.inspiration-gallery {
    width: 100%;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    gap: 40px;
    align-items: start;
}

.inspiration-item {
    margin-bottom: 200px;
    padding: 0 50px;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity;
    display: block;
    width: 100%;
    contain: layout style;
}

.inspiration-image-container {
    margin-bottom: 20px;
    padding: 40px 0 0 0;
    text-align: center;
    contain: layout;
}

.inspiration-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: transform 1.5s ease;
    contain: layout;
}

.inspiration-item.loaded {
    opacity: 1;
}

/* Prevent layout shift during loading */
.inspiration-gallery {
    min-height: 100vh;
}

.inspiration-image-container {
    margin-bottom: 20px; /* Reduced margin for closer caption */
    padding: 40px 0 0 0; /* Only top padding */
    text-align: center;
}

.inspiration-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: transform 1.5s ease;
}

.inspiration-image:hover {
    transform: scale(1.02);
}

.inspiration-caption {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.inspiration-caption p {
    font-family: 'HaasGrotTextR-55Roman', Helvetica, Arial, sans-serif;
    font-size: 10px; /* Reduced by 2px */
    line-height: 1.6;
    color: #666;
    letter-spacing: 0.5px;
    font-style: normal; /* Removed italic */
    margin: 0;
}

.inspiration-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.inspiration-instructions {
    margin-top: 60px;
    padding: 40px;
    background: #fafafa;
    border: 1px solid #eee;
}

.inspiration-instructions p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    color: #666;
    margin-bottom: 20px;
}

.inspiration-instructions ol {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px;
    color: #666;
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

.inspiration-instructions li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Contact page centered layout */
.contact-centered {
    margin-top: 30vh;
}

/* Ensure contact page doesn't create excessive height */
body:has(.contact-centered) .page-content {
    max-height: 100vh;
    overflow: hidden;
}

/* Mobile responsive adjustments for inspiration */
@media (max-width: 768px) {
    .inspiration-gallery {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 60px;
        padding: 0 20px;
        columns: unset; /* Remove any column layout */
        column-gap: unset;
    }
    
    .inspiration-item {
        margin-bottom: 0; /* Remove extra margin since we're using gap */
        padding: 0;
    width: 100%;
        break-inside: unset; /* Remove column break properties */
    }
    
    .inspiration-image-container {
        padding: 20px 0 0 0; /* Reduced top padding for mobile */
    }
    
    .inspiration-caption {
        font-size: 10px; /* Slightly smaller on mobile */
        padding: 0 10px;
    }
}

/* Sort toggle styling */
.projects-subheadline-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* View Controls */
.view-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.view-toggle {
    background: none;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #666;
    cursor: pointer !important;
    padding: 0;
    text-decoration: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.3s ease;
}

.view-toggle:hover:not(.active) {
    opacity: 0.3 !important; /* Same as nav hover effect */
}

.view-toggle.active {
    color: #666; /* Keep same color as default */
    opacity: 0.3; /* Same as hover state */
    text-decoration: none;
}

.view-toggle.active:hover {
    opacity: 1; /* Same as nav active hover - turn fully black */
}

/* Ultra-smooth Grid Animations */
.projects-grid {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

.project-item {
    will-change: transform;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    background: transparent !important;
}

/* Smooth movement animation */
.project-item.moving {
    z-index: 100;
    background: transparent !important;
}

.project-item.moving .project-thumbnail {
    background: transparent !important;
}

.project-item.moving .project-title,
.project-item.moving .project-category {
    color: inherit !important;
    background: transparent !important;
}

/* Extra smooth transition for moving items */
.project-item.smooth-move {
    transition: transform 2.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Simple settling - no bounce */
.project-item.settling {
    animation: none;
}

/* List View */
.projects-grid.list-view {
    display: flex;
        flex-direction: column;
    gap: 0;
}

.projects-grid.list-view .project-item {
    display: grid;
    grid-template-columns: 100px 2fr 1fr 0.8fr 0.8fr;
    gap: 20px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
}

.projects-grid.list-view .project-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.projects-grid.list-view .project-item .project-meta,
.projects-grid.list-view .project-item .project-thumbnail,
.projects-grid.list-view .project-item .project-awards-list,
.projects-grid.list-view .project-item .project-category,
.projects-grid.list-view .project-item .project-count,
.projects-grid.list-view .project-item .project-year {
    transition: opacity 0.3s ease;
}

.projects-grid.list-view .project-item:hover .project-meta,
.projects-grid.list-view .project-item:hover .project-thumbnail,
.projects-grid.list-view .project-item:hover .project-awards-list,
.projects-grid.list-view .project-item:hover .project-count,
.projects-grid.list-view .project-item:hover .project-year {
    opacity: 0.4;
}

.projects-grid.list-view .project-item:hover .project-category {
    opacity: 0.2;
}

.projects-grid.list-view .project-item:hover {
    border-top: 1px solid #32cd32 !important; /* Lime green border on hover */
}

.projects-grid.list-view .project-thumbnail {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
}

.projects-grid.list-view .project-meta {
    display: contents; /* Make children participate in parent grid */
}

/* Column 2: Project Info */
.projects-grid.list-view .project-info {
    /* Title & Category column */
}

.projects-grid.list-view .project-title {
    margin: 0 0 3px 0;
    font-size: 12px; /* Match Selected case studies */
    font-weight: normal;
    letter-spacing: 0.5px; /* Match Selected case studies */
}

.projects-grid.list-view .project-category {
    margin: 0;
    font-size: 12px; /* Match Selected case studies */
    opacity: 0.6;
    letter-spacing: 0.5px; /* Match Selected case studies */
}

/* Column 3: Awards */
.projects-grid.list-view .project-awards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.projects-grid.list-view .award-badge {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
}

.projects-grid.list-view .no-awards {
    font-size: 12px;
    opacity: 0.3;
}

/* Hide additional columns in grid view */
.project-awards-list,
.project-count,
.project-year {
    display: none;
}

/* Hide thumbnail award icons in list view */
.projects-grid.list-view .project-awards {
    display: none !important;
}

/* Show and style additional columns only in list view */
.projects-grid.list-view .project-awards-list,
.projects-grid.list-view .project-count,
.projects-grid.list-view .project-year {
    display: block;
}

/* Columns 3-5: Align with project title */
.projects-grid.list-view .project-awards-list {
    margin-top: 1px; /* Align with title baseline */
}

.projects-grid.list-view .project-count {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 1px; /* Align with title baseline */
}

.projects-grid.list-view .project-year {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 1px; /* Align with title baseline */
    text-align: right;
}

/* Mobile list view adjustments */
@media (max-width: 768px) {
    .projects-grid.list-view .project-item {
        grid-template-columns: 80px 3fr 1fr 0.7fr 0.7fr;
        gap: 15px;
        padding: 12px 0;
    }
    
    .projects-grid.list-view .project-thumbnail {
        width: 80px;
        height: 55px;
    }
}

@media (max-width: 480px) {
    .projects-grid.list-view .project-item {
        grid-template-columns: 70px 4fr 0.8fr 0.6fr 0.6fr;
        gap: 10px;
        padding: 10px 0;
    }
    
    .projects-grid.list-view .project-thumbnail {
        width: 70px;
        height: 48px;
    }
    
    .projects-grid.list-view .project-title,
    .projects-grid.list-view .project-category,
    .projects-grid.list-view .project-count,
    .projects-grid.list-view .project-year {
        font-size: 11px;
    }
}

/* MOBILE NAVIGATION DARK MODE OVERRIDES - MAXIMUM PRIORITY */
@media (max-width: 768px) {
    /* AGGRESSIVE: Force mobile nav to stay white background always */
    body.dark-background .main-nav,
    body.dark-transition .main-nav,
    body[class*="dark"] .main-nav {
        background: white !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* AGGRESSIVE: Force ALL nav text to stay dark - maximum specificity */
    body.dark-background .main-nav .nav-links a,
    body.dark-background .main-nav .nav-links a.active,
    body.dark-background .main-nav .nav-links a[aria-current="page"],
    body.dark-background .main-nav .nav-links a:hover,
    body.dark-background .main-nav .nav-links a:visited,
    body.dark-background .main-nav .nav-links a:focus,
    body.dark-background .main-nav .nav-links a:not(.active):not([aria-current="page"]),
    body.dark-background .main-nav .nav-links a:hover:not(.active):not([aria-current="page"]),
    body.dark-transition .main-nav .nav-links a,
    body.dark-transition .main-nav .nav-links a.active,
    body.dark-transition .main-nav .nav-links a[aria-current="page"],
    body.dark-transition .main-nav .nav-links a:hover,
    body[class*="dark"] .main-nav .nav-links a,
    body[class*="dark"] .main-nav .nav-links a.active,
    body[class*="dark"] .main-nav .nav-links a[aria-current="page"],
    body[class*="dark"] .main-nav .nav-links a:hover {
        color: #000 !important;
        border-color: #000 !important;
    }
    
    /* Keep opacity effects but force dark text */
    body.dark-background .main-nav .nav-links a.active,
    body.dark-background .main-nav .nav-links a[aria-current="page"],
    body.dark-transition .main-nav .nav-links a.active,
    body.dark-transition .main-nav .nav-links a[aria-current="page"],
    body[class*="dark"] .main-nav .nav-links a.active,
    body[class*="dark"] .main-nav .nav-links a[aria-current="page"] {
        color: #000 !important;
        opacity: 0.4 !important;
    }
    
    body.dark-background .main-nav .nav-links a:hover:not(.active):not([aria-current="page"]),
    body.dark-transition .main-nav .nav-links a:hover:not(.active):not([aria-current="page"]),
    body[class*="dark"] .main-nav .nav-links a:hover:not(.active):not([aria-current="page"]) {
        color: #000 !important;
        opacity: 0.3 !important;
    }
    
    /* Count pills - keep dark background with white text */
    body.dark-background .main-nav #imageCount,
    body.dark-background .main-nav #projectCount,
    body.dark-transition .main-nav #imageCount,
    body.dark-transition .main-nav #projectCount,
    body[class*="dark"] .main-nav #imageCount,
    body[class*="dark"] .main-nav #projectCount {
        background: #000 !important;
        color: #fff !important;
    }
}