/* Font imports */
@font-face {
    font-family: 'Arreia';
    src: url('res/fonts/ArreiaBlackHeavy.ttf') format('truetype');
    font-display: swap;
}

/* Prevent horizontal scroll on mobile */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

*:not(.absolute):not([class*="absolute"]) {
    max-width: 100%;
}

img, video {
    max-width: 100%;
    height: auto;
}

/* Ensure containers have max-width on desktop */
.container,
section > div.container,
section > div.relative.z-5,
section > div.relative.z-10 {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Header and bottom player containers should be full width */
header .container,
#bottom-player .container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure hero carousel remains full width */
#hero,
#hero .carousel-inner,
#hero .hero-carousel {
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure hero section is below header in stacking order */
#home.hero-carousel {
    z-index: 0 !important;
}

/* Custom Scrollbar for Playlist */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(209, 167, 83, 0.1);
    border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(245, 110, 110, 0.1);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(209, 167, 83, 0.5);
    border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(245, 110, 110, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(209, 167, 83, 0.8);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 110, 110, 0.8);
}

/* Bottom Player Styles */
#bottom-player {
    -webkit-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    transform: translateY(0) !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 80px !important;
    z-index: 50 !important;
    -webkit-transition: bottom 0.5s ease, -webkit-transform 0.3s ease;
    transition: bottom 0.5s ease, -webkit-transform 0.3s ease;
    -o-transition: bottom 0.5s ease, transform 0.3s ease;
    transition: bottom 0.5s ease, transform 0.3s ease;
    transition: bottom 0.5s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

/* Adjust body padding when player is visible */
body.player-active {
    padding-bottom: 80px;
}

/* Music Player Artwork Fix */
#current-track-artwork,
#bottom-track-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none; /* Remove the max-width constraint */
}

#current-track-icon,
#bottom-track-icon {
    pointer-events: none;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: black;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#main-content {
    display: none;
}

#loading-bar-container {
    width: 60%;
    height: 10px;
    background: #333;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
}

#loading-bar {
    width: 0%;
    height: 100%;
    background: #fff;
    transition: width 0.3s ease;
}

/* Animations */
@keyframes fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fade-in {
  animation: fade-in 1.2s ease-out forwards;
}

#enter-button {
  transition: opacity 0.5s ease;
}

/* Image placeholder while loading */
img[loading="lazy"] {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.dark img[loading="lazy"] {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

img[loading="lazy"].loaded {
    animation: none;
    background: none;
}

/* Photography items */
.photography-item {
    min-height: 300px;
}

@media (min-width: 768px) {
    .photography-item {
        min-height: 400px;
    }
}

.photography-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Dark mode styles */
.dark body {
    background-color: #000000;
    color: #E5E5E5;
}

.dark .gradient-bg {
    background: linear-gradient(135deg, #F56E6E 0%, #FF1616 100%);
}

.dark .text-gradient {
    background: linear-gradient(135deg, #F56E6E 0%, #FF1616 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Light mode styles */
body {
    background-color: #FDF2E4;
    color: #333333;
}

.gradient-bg {
    background: linear-gradient(135deg, #D1A753 0%, #BF8C30 100%);
}

.text-gradient {
    background: linear-gradient(135deg, #D1A753 0%, #BF8C30 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Navigation links */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    transition: width 0.3s ease;
}

.dark .nav-link::after {
    background-color: #F56E6E;
}

.nav-link::after {
    background-color: #D1A753;
}

.nav-link:hover::after {
    width: 100%;
}

/* Service cards */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Portfolio items */
.portfolio-item {
    overflow: hidden;
}

.portfolio-item img {
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

/* Theme toggle animation */
.theme-toggle {
    transition: transform 0.5s ease;
}

.theme-toggle.rotate {
    transform: rotate(360deg);
}

/* Carousel styles */
@media (max-width: 768px) { 
    .hero-carousel { 
        height: 100vh; /* Fallback for older browsers */
        height: 100dvh; /* Use dynamic viewport height for mobile browsers */ 
        min-height: 100vh; /* Fallback */
        min-height: 100dvh; 
    } 
}

#hero-gesture-zone,
.gesture-zone {
    pointer-events: auto; /* allow taps to pass through */
    touch-action: manipulation;
}


.carousel {
    position: relative;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.8s ease-in-out;
    touch-action: pan-y;
}

.carousel-item {
    min-width: 100%;
    position: relative;
}

.carousel-item img {
    backface-visibility: hidden;
}

.carousel-control {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 35 !important;
    transition: all 0.3s ease !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.carousel-control:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.carousel-control-prev {
    left: 20px !important;
}

.carousel-control-next {
    right: 20px !important;
}

.carousel-indicators {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 35 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.carousel-indicator {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.carousel-indicator.active {
    background-color: white;
    transform: scale(1.2);
}

/* Carousel touch optimization */
.gesture-zone {
    pointer-events: auto;
    touch-action: pan-y; /* Allow vertical scroll, capture horizontal */
    -ms-touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 10 !important;
}

/* Ensure gesture zone doesn't block controls and indicators */
.gesture-zone:has(+ .carousel-control),
.gesture-zone:has(+ .carousel-indicators) {
    pointer-events: none;
}

/* Better: explicitly allow pointer events through for controls */
.carousel-control,
.carousel-indicator,
.carousel-indicators {
    pointer-events: auto !important;
}

.carousel-inner {
    touch-action: pan-y;
    -ms-touch-action: pan-y;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
}

.carousel-item img {
    pointer-events: none; /* Prevent image drag interfering */
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-select: none;
}

@media (max-width: 768px) {
    .gesture-zone {
        /* Increase touch area on mobile */
        z-index: 15;
    }
}

.dark .carousel-indicator {
    background-color: rgba(245, 110, 110, 0.5);
}

.dark .carousel-indicator.active {
    background-color: #F56E6E;
}

.carousel-indicator {
    background-color: rgba(209, 167, 83, 0.5);
}

.carousel-indicator.active {
    background-color: #D1A753;
}

.hero-text h1 {
    font-size: clamp(2.5rem, 7vw, 4rem) !important;
    line-height: clamp(1.1, 7vw, 1.2) !important;
}

.hero-text p {
    font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
    line-height: 1.5 !important;
}

.button-row {
    z-index: 35 !important;
    pointer-events: auto !important;
    position: relative !important;
}

.button-row a {
    font-size: clamp(0.9rem, 1.5vw, 1.125rem) !important;
    z-index: 35 !important;
    pointer-events: auto !important;
    position: relative !important;
    touch-action: manipulation !important;
}

@media (max-width: 768px) {
    .carousel-control {
        background-color: rgba(255, 255, 255, 0.6) !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 50 !important;
        pointer-events: auto !important;
    }
    
    .carousel-control i {
        font-size: 1.125rem !important;
        color: rgba(0, 0, 0, 0.9) !important;
    }
    #hero-prev-btn,
    #hero-next-btn,
    .carousel-nav-btn {
        /* Scale button size based on viewport width (vw) */
        width: 10vw !important; 
        height: 10vw !important; 
        /* Ensure a minimum size to prevent them from becoming too small */
        min-width: 30px !important; 
        min-height: 30px !important;
        padding: 0 !important; 
    }

    /* Scale the icon inside the button */
    #hero-prev-btn i, #hero-prev-btn svg,
    #hero-next-btn i, #hero-next-btn svg,
    .carousel-nav-btn i, .carousel-nav-btn svg {
        font-size: 5vw !important; /* Scale icon size based on viewport width */
        font-size: max(5vw, 16px) !important; /* Fallback with max() */
    }
}

/* Accordion */
.accordion-closed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.accordion-open {
    max-height: 300px;
    opacity: 1;
    pointer-events: auto;
}

.hero-text {
    pointer-events: none;
    touch-action: none;
}

/* Section spacing */
section {
    scroll-margin-top: 80px;
}

@media (max-width: 768px) {
    section {
        scroll-margin-top: 100px;
    }
}

/* Desktop/Tablet Modal Sizing - Based on Now Playing Modal */
@media (min-width: 769px) {
    /* Now Playing Modal */
    #now-playing-modal > div:last-child {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 900px !important;
        width: 90% !important;
        max-height: 85vh !important;
        border-radius: 1rem !important;
        bottom: auto !important;
    }
    
    /* Services Modal - Match Now Playing sizing */
    #services-modal > div {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 900px !important;
        width: 90% !important;
        max-height: 85vh !important;
        border-radius: 1rem !important;
        margin: 0 !important;
    }
    
    /* Remove slide animation on desktop/tablet */
    #services-modal > div.translate-y-full {
        transform: translate(-50%, -50%) !important;
    }
    
    /* Services modal content padding */
    #services-modal-content {
        padding: 1.5rem !important;
    }
    
    /* Ensure close button is visible on desktop/tablet */
    #services-modal #close-services-modal-desktop {
        display: block !important;
        z-index: 50 !important;
    }
    
    /* Gallery Modal - Match Now Playing sizing */
    #gallery-modal > div.relative {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 900px !important;
        width: 90% !important;
        max-height: 85vh !important;
        margin: 0 !important;
    }

    /* Gallery modal content - add space for close button */
    #gallery-modal-content {
        padding-top: 1.5rem !important;
    }

    /* 2. Inner Container Layout (Sets up full height for children) */
    #now-playing-modal .w-full.max-w-4xl {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important; 
        overflow: hidden !important;
    }

    #now-playing-modal .flex-1.overflow-hidden.flex.min-h-0 {
        flex-direction: row !important;
        height: 100% !important;
    }

    #now-playing-view {
        width: 50% !important;
        height: 100% !important;
        border-right: 1px solid;
    }

    #queue-view {
        display: flex !important;
        flex-direction: column !important;
        width: 50% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    
    #queue-view > div:first-child {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    #now-playing-view > div:first-child {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    #now-playing-view .max-w-sm {
        flex-shrink: 1 !important; 
        width: 20vmin !important; 
        height: 20vmin !important;
        max-height: 100% !important; 
        max-width: 100% !important;
    }
    
    #now-playing-view #modal-track-artwork {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important; 
    }

    #now-playing-view > div:nth-last-child(-n+3) {
        flex-shrink: 0 !important;
    }
}

/* Photography Masonry Grid - Fixed spacing */
#photography .columns-1,
#photography .sm\\:columns-2,
#photography .md\\:columns-3 {
    column-gap: 1rem;
    row-gap: 0; /* CSS columns don't use row-gap, ensure it's not set */
}

/* Override general photography-item min-height - let items be natural height */
#photography .photography-item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
    display: block;
    min-height: 0; /* Remove min-height constraint */
    margin-top: 0; /* Ensure no top margin */
    margin-left: 0; /* Ensure no left margin */
    margin-right: 0; /* Ensure no right margin */
}

#photography .photography-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    margin: 0; /* Ensure no margins on images */
    padding: 0; /* Ensure no padding on images */
}

#cinematography .space-y-4 > * + * {
    margin-top: 1rem !important;
}

#cinematography .flex {
    gap: 1rem !important;
}

.cinematography-item {
    margin-bottom: 0 !important;
}

/* Now Playing Modal - Mobile */
@media (max-width: 768px) {
    #now-playing-modal {
        top: 0 !important;
        bottom: 80px !important;
    }
    
    #now-playing-modal > div:last-child {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        transform: translateY(100%) !important;
    }
    
    #now-playing-modal > div:last-child.translate-y-0 {
        transform: translateY(0) !important;
    }
    
    #now-playing-view {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 1rem !important;
    }
    
    #now-playing-view > .flex.items-center.gap-3:last-child {
        display: none !important;
    }
    
    #now-playing-view .max-w-sm {
        max-width: 280px !important;
        width: 280px !important;
        height: 280px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    #modal-track-artwork {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    #queue-view.mobile-visible {
        display: block !important;
        height: 100% !important;
    }
    
    #now-playing-view.mobile-hidden {
        display: none !important;
    }
}

/* Modal scroll prevention */
#services-modal.open,
#gallery-modal.open {
  overflow: hidden;
  height: 100%;
}

/* ========================================
   Z-INDEX HIERARCHY (for reference)
   ======================================== 
   9999 - Loading screen
   60   - Landscape modals (mobile)
   50   - Header, Bottom player, Scroll-to-top button, Modals (portrait)
   40   - Mobile menu
   35   - Carousel controls, indicators, hero buttons
   15   - Gesture zone (mobile)
   10   - Gesture zone (desktop)
   5    - Section containers (relative z-5, z-10)
   0    - Hero carousel section
   ======================================== */

/* Basic header/player heights and z-index */
header {
    height: 80px;
    z-index: 50 !important;
}

/* Blog Modal - Fit between header and music player */
#blog-modal {
    top: 80px !important; /* Account for header */
    bottom: 80px !important; /* Account for music player */
    padding: 0 !important;
}

#blog-modal > div.relative {
    max-height: 100% !important;
    height: 100% !important;
}

#blog-modal-content {
    max-height: 100% !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    overscroll-behavior: contain !important; /* Prevent scroll chaining */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #blog-modal {
        top: 0 !important; /* Full screen on mobile */
        bottom: 80px !important; /* Only account for player */
    }
    
    #blog-modal > div.relative {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}

/* Services Modal - Mobile (Centered like gallery modal) */
@media (max-width: 768px) {
    #services-modal {
        align-items: center !important;
        justify-content: center !important;
    }
    
    #services-modal > div {
        margin: 12px !important;
        width: calc(100% - 24px) !important;
        border-radius: 10px !important;
        max-height: calc(100vh - 160px) !important; /* Fallback */
        max-height: calc(100dvh - 160px) !important;
        min-height: auto !important;
        overflow-y: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
    
    #services-modal-content {
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Remove extra space at bottom - ensure modal card has no extra padding */
    #services-modal > div {
        padding-bottom: 0 !important;
        margin-bottom: 12px !important;
    }
    
    #services-modal-content {
        padding-bottom: 1rem !important;
        flex: 0 1 auto !important; /* Don't stretch, allow shrink */
        min-height: 0 !important;
    }
    
    /* Remove any flex spacing that might add extra space */
    #services-modal > div.flex-col {
        gap: 0 !important;
    }
    
    /* Close button positioning on mobile */
    #services-modal-content #close-services-modal {
        top: 1rem !important;
        right: 1rem !important;
    }

}

/* Desktop/Tablet - Gallery modal close button */
@media (min-width: 769px) {
    #gallery-modal #close-gallery-modal-desktop {
        display: block !important;
        z-index: 50 !important;
    }
}

/* Scroll to top button visibility */
#scrollToTopBtn {
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    position: fixed !important;
    bottom: 90px !important;
    right: 24px !important;
    z-index: 50 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-transform: translateZ(0) !important;
    -ms-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

#scrollToTopBtn.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

#scrollToTopBtn:not(.opacity-0) {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile landscape - Fullscreen modals above header and player */
/* Use both orientation and height-based queries for better compatibility */
@media (max-width: 768px) and (orientation: landscape),
       (max-width: 768px) and (max-height: 500px),
       (max-height: 500px) and (max-width: 1024px) {
    #services-modal:not(.hidden),
    #gallery-modal:not(.hidden) {
        z-index: 60 !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide decorative background elements in landscape */
    #gallery-modal:not(.hidden) > div.absolute {
        display: none !important;
    }

    /* Target the modal card - the only relative child */
    #gallery-modal:not(.hidden) > div.relative,
    #services-modal:not(.hidden) > div {
        position: relative !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* Target the padding wrapper inside when visible */
    #gallery-modal:not(.hidden) .p-6,
    #services-modal:not(.hidden) > div > div {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 1rem !important;
    }

    #services-modal:not(.hidden) #services-modal-content {
        max-height: none !important;
        height: auto !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }

    /* Gallery modal - Use desktop layout in landscape, no scrolling */
    #gallery-modal:not(.hidden) #gallery-modal-content {
        max-height: 100% !important;
        height: 100% !important;
        flex: 1 !important;
        overflow: hidden !important;
        padding: 0.75rem !important;
        padding-top: 1.5rem !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    /* Force desktop grid layout in landscape */
    /* Fallback for IE11 */
    #gallery-modal:not(.hidden) #gallery-modal-content .grid {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: start !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    
    #gallery-modal:not(.hidden) #gallery-modal-content .grid > div:first-child {
        -webkit-box-flex: 2 !important;
        -ms-flex: 2 1 0% !important;
        flex: 2 1 0% !important;
    }
    
    #gallery-modal:not(.hidden) #gallery-modal-content .grid > div:last-child {
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
        flex: 1 1 0% !important;
    }
    
    /* Modern browsers */
    @supports (display: grid) {
        #gallery-modal:not(.hidden) #gallery-modal-content .grid {
            display: -ms-grid !important;
            display: grid !important;
            -ms-grid-columns: 2fr 1fr !important;
            grid-template-columns: 2fr 1fr !important;
            gap: 1rem !important;
            -webkit-box-align: start !important;
            -ms-flex-align: start !important;
            align-items: start !important;
            height: 100% !important;
            max-height: 100% !important;
            overflow: hidden !important;
        }
        
        #gallery-modal:not(.hidden) #gallery-modal-content .grid > div:first-child {
            -webkit-box-flex: initial !important;
            -ms-flex: initial !important;
            flex: initial !important;
        }
        
        #gallery-modal:not(.hidden) #gallery-modal-content .grid > div:last-child {
            -webkit-box-flex: initial !important;
            -ms-flex: initial !important;
            flex: initial !important;
        }
    }

    /* Image/video column - take 2/3 width */
    #gallery-modal:not(.hidden) #gallery-modal-content .lg\\:col-span-2,
    #gallery-modal:not(.hidden) #gallery-modal-content > .grid > div:first-child {
        -ms-grid-column: 1 !important;
        grid-column: 1 !important;
        height: 100% !important;
        max-height: 100% !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    /* Info column - take 1/3 width */
    #gallery-modal:not(.hidden) #gallery-modal-content .grid > div:last-child {
        -ms-grid-column: 2 !important;
        grid-column: 2 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Images and videos - fit within available space */
    #gallery-modal:not(.hidden) #gallery-modal-content img,
    #gallery-modal:not(.hidden) #gallery-modal-content video,
    #gallery-modal:not(.hidden) #gallery-modal-content iframe {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        -o-object-fit: contain !important;
    }

    /* Remove aspect-video constraint in landscape */
    #gallery-modal:not(.hidden) #gallery-modal-content .aspect-video {
        aspect-ratio: auto !important;
        height: 100% !important;
    }

    /* Scale down text to fit */
    #gallery-modal:not(.hidden) #gallery-modal-content h1,
    #gallery-modal:not(.hidden) #gallery-modal-content h2,
    #gallery-modal:not(.hidden) #gallery-modal-content h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem !important;
    }

    #gallery-modal:not(.hidden) #gallery-modal-content p {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.25rem !important;
    }

    /* Scale down gallery info section */
    #gallery-modal:not(.hidden) #gallery-section-badge,
    #gallery-modal:not(.hidden) #gallery-counter {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* Scale down navigation buttons */
    #gallery-modal:not(.hidden) #gallery-prev,
    #gallery-modal:not(.hidden) #gallery-next {
        width: 2rem !important;
        height: 2rem !important;
    }

    #gallery-modal:not(.hidden) #gallery-prev i,
    #gallery-modal:not(.hidden) #gallery-next i {
        font-size: 0.875rem !important;
    }

    /* Gallery info section at bottom - minimize space */
    #gallery-modal:not(.hidden) .mt-6 {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    /* Ensure padding wrapper doesn't add extra space */
    #gallery-modal:not(.hidden) .p-6 {
        padding: 0.5rem !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        height: 100% !important;
        gap: 0.5rem !important;
    }
}

/* Mobile menu fullscreen - Only on mobile/tablet (below lg breakpoint) */
@media (max-width: 1023px) {
    #mobile-menu:not(.hidden) {
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        z-index: 40 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    }

    #mobile-menu:not(.hidden) > div {
        min-height: calc(100vh - 80px) !important;
    }
}

/* Ensure mobile menu is hidden on desktop (lg and above) */
@media (min-width: 1024px) {
    #mobile-menu {
        display: none !important;
    }

    /* Ensure mobile menu button is hidden on desktop */
    #mobile-menu-button {
        display: none !important;
    }

    /* Ensure desktop navigation is visible on desktop */
    /* Target nav that's a direct child of the header container, not the mobile menu */
    header > div > div:last-child > nav {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

/* Very small screens (iPhone 5 and similar) - Scale down content */
@media (max-width: 320px) {
    #services-modal-content {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    #services-modal-content h3 {
        font-size: 1rem !important;
    }
    
    #services-modal-content p,
    #services-modal-content li {
        font-size: 0.8125rem !important;
    }
    
    #services-modal-content .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    #services-modal-content button {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}
/* Gallery Modal - Mobile (Consolidated) */
@media (max-width: 768px) {
    /* Target the ACTUAL modal card */
    #gallery-modal .relative.bg-light-surface {
        margin: 12px !important;
        width: calc(100% - 24px) !important;
        border-radius: 10px !important;
        max-height: calc(100vh - 160px) !important; /* Fallback */
        max-height: calc(100dvh - 160px) !important;
        min-height: auto !important;
        overflow-y: auto !important;
    }

    #gallery-modal-content {
        padding: 0.5rem !important;
        padding-top: 1.5rem !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    #gallery-modal .lg\\:col-span-2 {
        min-height: 50vh !important;
        max-height: 60vh !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
        order: -1 !important; /* Make media appear first */
    }

    #gallery-modal-content img,
    #gallery-modal-content video,
    #gallery-modal-content iframe {
        width: 100% !important; 
        height: 100% !important; 
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        -o-object-fit: contain !important;
        display: block !important; 
        border-radius: 8px !important;
    }

    #gallery-modal-content .grid {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    #gallery-modal-content .space-y-4 {
        -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Compact text */
    #gallery-modal-content h1,
    #gallery-modal-content h2,
    #gallery-modal-content h3 {
        font-size: 0.9rem !important;
    }
    
    #gallery-modal-content p {
        font-size: 0.8rem !important;
    }
}

/* Smooth transitions for all interactive elements */
.carousel-inner,
.modal-content,
.gallery-content,
.player-container {
    transition: all 0.3s ease-in-out;
}

/* Fullscreen styles for gallery modal containers */
#gallery-modal-content .lg\\:col-span-2:fullscreen,
#gallery-modal-content .lg\\:col-span-2:-webkit-full-screen,
#gallery-modal-content .lg\\:col-span-2:-moz-full-screen,
#gallery-modal-content .lg\\:col-span-2:-ms-fullscreen {
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#gallery-modal-content .lg\\:col-span-2:fullscreen img,
#gallery-modal-content .lg\\:col-span-2:-webkit-full-screen img,
#gallery-modal-content .lg\\:col-span-2:-moz-full-screen img,
#gallery-modal-content .lg\\:col-span-2:-ms-fullscreen img {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Utility classes for landscape modal management */
.landscape-mode {
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 0 !important;
}

.landscape-mode > div {
    margin: 0 auto !important;
    max-height: calc(100lvh - 160px) !important;
}

/* Smooth transitions for modal repositioning */
#services-modal,
#gallery-modal,
#now-playing-modal {
    transition: padding 0.3s ease-in-out;
}

#services-modal > div,
#gallery-modal > div:last-child,
#now-playing-modal > div:last-child {
    transition: all 0.3s ease-in-out;
}

/* Landscape mode - optimize for low height screens */
@media screen and (orientation: landscape) and (max-height: 600px) {
    #services-modal > div {
        max-height: 90vh !important;
    }
    
    #gallery-modal > div.relative {
        max-height: 90vh !important;
        margin: 1rem !important;
    }
    
    #services-modal-content,
    #gallery-modal-content {
        overflow-y: auto !important;
        font-size: 0.85rem !important;
    }
    
    #services-modal-content h1,
    #services-modal-content h2,
    #services-modal-content h3,
    #gallery-modal-content h1,
    #gallery-modal-content h2,
    #gallery-modal-content h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    #services-modal-content p,
    #services-modal-content li,
    #gallery-modal-content p {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.3rem !important;
    }
    
    #services-modal-content img {
        max-height: 15vh !important;
    }
    
    #gallery-modal-content img,
    #gallery-modal-content video,
    #gallery-modal-content iframe {
        max-height: 55vh !important;
    }
}

/* --- Fix for Flickering/Flashing on iOS Fullscreen --- */
#gallery-modal-content {
    /* 1. Request the browser to use hardware acceleration for these properties */
    /* This can help prevent the flash of content as the browser re-renders */
    will-change: transform, opacity; 
    
    /* 2. Create a new stacking context for this container */
    /* This can sometimes prevent content from temporarily disappearing behind the modal backdrop */
    isolation: isolate;
}

/* 3. Ensure the media elements themselves are accelerated (optional, but good practice) */
#gallery-modal-content img,
#gallery-modal-content video,
#gallery-modal-content iframe {
    /* Use translateZ(0) to force a 3D layer/hardware acceleration */
    transform: translateZ(0); 
}

/* Ensure modal backdrop covers properly */
@media screen and (orientation: landscape) and (max-width: 768px) {
    #services-modal::before,
    #gallery-modal::before,
    #now-playing-modal::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: -1;
    }
}

.portfolio-item {
    transition: opacity 0.3s ease-in-out;
}

.portfolio-item.is-hidden {
    opacity: 0;
    pointer-events: none;
    /*Use this if you need to completely remove it from layout after transition:
    // transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
    // visibility: hidden; 
    // display: none; */
}

/* For filter button styling, manage the active state in CSS: */
.portfolio-filter-btn.is-active {
    background-color: var(--light-primary); /* or Tailwind class bg-light-primary */
    color: white;
    /* ... remove border and background classes*/
}
.dark .portfolio-filter-btn.is-active {
    background-color: var(--dark-primary); /* or Tailwind class dark:bg-dark-primary*/
}

/* ===================================
   BLOG POST PAGE STYLES
   =================================== */

/* Blog Post Card Styles */
.blog-post-card {
    transform: translateY(0);
    transition: all 0.3s ease;
}

.blog-post-card:hover {
    transform: translateY(-8px);
}

/* Prose Styling for Blog Content */
.prose {
    color: #374151;
    line-height: 1.75;
}

.dark .prose {
    color: #d1d5db;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #1f2937;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #ffffff;
}

.prose h1 { font-size: 2.25em; }
.prose h2 { font-size: 1.875em; }
.prose h3 { font-size: 1.5em; }
.prose h4 { font-size: 1.25em; }

.prose p {
    margin-bottom: 1.5em;
    line-height: 1.75;
}

.prose a {
    color: #D1A753; /* Light mode primary */
    text-decoration: underline;
    transition: color 0.2s;
}

.prose a:hover {
    color: #BF8C30; /* Light mode secondary */
}

.dark .prose a {
    color: #F56E6E; /* Dark mode primary */
}

.dark .prose a:hover {
    color: #FF1616; /* Dark mode secondary */
}

.prose strong {
    color: #1f2937;
    font-weight: 600;
}

.dark .prose strong {
    color: #ffffff;
}

.prose em {
    font-style: italic;
}

.prose ul, .prose ol {
    margin: 1.5em 0;
    padding-left: 1.5em;
}

.prose li {
    margin: 0.5em 0;
    line-height: 1.75;
}

.prose ul li {
    list-style-type: disc;
}

.prose ol li {
    list-style-type: decimal;
}

.prose ul ul,
.prose ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose blockquote {
    border-left: 4px solid #D1A753;
    padding-left: 1.5em;
    margin: 2em 0;
    font-style: italic;
    color: #6b7280;
}

.dark .prose blockquote {
    border-left-color: #F56E6E;
    color: #9ca3af;
}

.prose code {
    background: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
    font-size: 0.875em;
    font-family: 'Courier New', monospace;
    color: #1f2937;
}

.dark .prose code {
    background: #374151;
    color: #e5e7eb;
}

.prose pre {
    background: #1f2937;
    color: #f3f4f6;
    padding: 1.5em;
    border-radius: 0.5em;
    overflow-x: auto;
    margin: 2em 0;
}

.dark .prose pre {
    background: #0a0a0a;
    border: 1px solid #374151;
}

.prose pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 0.9em;
}

.prose img {
    border-radius: 0.5em;
    margin: 2em 0;
    max-width: 100%;
    height: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dark .prose img {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.prose video {
    border-radius: 0.5em;
    margin: 2em 0;
    max-width: 100%;
    height: auto;
}

.prose iframe {
    margin: 2em 0;
    border-radius: 0.5em;
}

.prose table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
}

.prose th,
.prose td {
    padding: 0.75em;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.dark .prose th,
.dark .prose td {
    border-color: #374151;
}

.prose th {
    background: #f9fafb;
    font-weight: 600;
}

.dark .prose th {
    background: #1f2937;
}

.prose hr {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 3em 0;
}

.dark .prose hr {
    border-top-color: #374151;
}

/* Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Filter Buttons */
.blog-filter-btn {
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.blog-filter-btn:hover {
    transform: translateY(-2px);
}

/* Pagination Styles */
.pagination-btn {
    min-width: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-btn:disabled {
    cursor: not-allowed;
}

/* Breadcrumb Styles */
nav ol li:last-child {
    font-weight: 500;
}

/* Share Buttons Animation */
.share-button {
    transition: all 0.3s ease;
}

.share-button:hover {
    transform: scale(1.1);
}

/* Sidebar Sticky on Desktop */
@media (min-width: 1024px) {
    .lg\:sticky {
        position: sticky;
    }
    
    .lg\:top-32 {
        top: 8rem;
    }
}

/* Sidebar Hover Effects */
aside a {
    transition: all 0.2s ease;
}

aside a:hover {
    transform: translateX(4px);
}

/* Blog Post Page Layout */
.blog-post-content {
    max-width: 100%;
}

/* Related Posts Grid */
.related-posts-grid article {
    height: 100%;
}

/* Responsive Typography for Blog Posts */
@media (max-width: 1024px) {
    .prose {
        font-size: 1rem;
    }
    
    .prose h1 { font-size: 2em; }
    .prose h2 { font-size: 1.75em; }
    .prose h3 { font-size: 1.375em; }
}

@media (max-width: 768px) {
    .prose {
        font-size: 0.9375rem;
    }
    
    .prose h1 { font-size: 1.75em; }
    .prose h2 { font-size: 1.5em; }
    .prose h3 { font-size: 1.25em; }
    
    .prose img,
    .prose video {
        margin: 1.5em 0;
    }
}

/* Author Card */
.author-card {
    transition: all 0.3s ease;
}

/* Category Tags */
.category-tag {
    display: inline-block;
    transition: all 0.2s ease;
}

.category-tag:hover {
    transform: scale(1.05);
}

/* Blog Section Specific Gradient Backgrounds */
#blog .text-gradient {
    background: linear-gradient(135deg, #D1A753 0%, #BF8C30 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark #blog .text-gradient {
    background: linear-gradient(135deg, #F56E6E 0%, #FF1616 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Print Styles for Blog Posts */
@media print {
    aside,
    .share-button,
    header,
    footer,
    #bottom-player,
    nav.breadcrumb {
        display: none !important;
    }
    
    .prose {
        max-width: 100%;
        font-size: 12pt;
    }
    
    .prose h1 { font-size: 24pt; }
    .prose h2 { font-size: 20pt; }
    .prose h3 { font-size: 16pt; }
    
    article {
        width: 100% !important;
    }
}

/* Focus Styles for Accessibility (Blog Specific) */
.blog-post-card:focus,
.blog-filter-btn:focus,
.pagination-btn:focus {
    outline: 2px solid #D1A753;
    outline-offset: 2px;
}

.dark .blog-post-card:focus,
.dark .blog-filter-btn:focus,
.dark .pagination-btn:focus {
    outline-color: #F56E6E;
}

/* Smooth Transitions for Blog Elements */
.blog-post-card,
.blog-filter-btn,
.pagination-btn,
aside a {
    transition: all 0.3s ease;
}

/* Blog Post Featured Image */
article header img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Blog Metadata Icons */
.blog-meta i {
    opacity: 0.7;
}