/* =============================================
   MOBILE RESPONSIVE STYLES
   ============================================= */

/* ---- Mobile navbar controls (hidden on desktop) ---- */
.nav-mobile-controls {
    display: none;
}

.mobile-menu {
    display: none;
}

/* =============================================
   DARK MODE SUPPORT
   ============================================= */

@media (prefers-color-scheme: dark) {

    /* ---- Base ---- */
    body {
        background-color: #121212;
        color: #e0e0e0;
    }

    /* ---- Header & navbar ---- */
    .site-header {
        background: #121212;
    }

    .navbar {
        background-color: #121212;
        border-bottom-color: #333;
    }

    .header-link {
        color: #e0e0e0;
    }

    .nav-link {
        color: #e0e0e0;
    }

    .nav-link::after {
        background: #e0e0e0;
    }

    .lang-toggle {
        border-color: #e0e0e0;
        color: #e0e0e0;
    }

    .lang-toggle:hover {
        background: #e0e0e0;
        color: #121212;
    }

    /* ---- Mobile menu ---- */
    .mobile-menu {
        background: #1a1a1a;
        border-bottom-color: #333;
    }

    .mobile-nav-link {
        color: #e0e0e0;
    }

    .mobile-nav-link:hover {
        background: #222;
    }

    .mobile-menu-btn {
        color: #e0e0e0;
    }

    /* ---- Home hero overlay ---- */
    .home-hero-btn {
        border-color: rgba(255,255,255,0.5);
        color: white;
    }

    .home-hero-btn:hover {
        background: rgba(255,255,255,0.15);
    }

    /* ---- Home about strip ---- */
    .home-about-strip {
        border-top-color: #333;
        border-bottom-color: #333;
    }

    .home-about-title {
        color: #e0e0e0;
    }

    .home-about-text {
        color: #aaa;
    }

    .home-about-label {
        color: #666;
    }

    .home-about-arrow {
        color: #555;
    }

    /* ---- Home nieuws ---- */
    .home-section-title {
        color: #666;
    }

    .home-nieuws-more {
        color: #666;
        border-bottom-color: #444;
    }

    .home-nieuws-item {
        border-bottom-color: #333;
    }

    .home-nieuws-heading {
        color: #e0e0e0;
    }

    .home-nieuws-text {
        color: #aaa;
    }

    /* ---- Gallery hero ---- */
    .hero-title {
        color: #e0e0e0;
    }

    .hero-title::after {
        background: #333;
    }

    .hero-intro {
        color: #aaa;
    }

    /* ---- Gallery grid ---- */
    .separating-quote {
        color: #ddd;
    }

    .separating-quote::before,
    .separating-quote::after {
        color: rgba(255, 255, 255, 0.05);
    }

    .quote-author {
        color: #888;
    }

    /* ---- Works page ---- */
    .hover-text {
        color: rgba(255,255,255,0.97);
    }

    /* ---- Bio page ---- */
    .bio-text {
        color: #bbb;
    }

    .bio-section-title {
        color: #e0e0e0;
        border-bottom-color: #333;
    }

    /* ---- Contact page ---- */
    .contact-intro {
        color: #aaa;
    }

    .contact-email {
        color: #e0e0e0;
        border-bottom-color: #555;
    }

    /* ---- News page ---- */
    .news-item {
        border-bottom-color: #333;
    }

    .news-date {
        color: #666;
    }

    .news-heading {
        color: #e0e0e0;
    }

    .news-text {
        color: #aaa;
    }

    .news-link {
        color: #e0e0e0;
        border-bottom-color: #555;
    }

    /* ---- Page titles ---- */
    .page-title {
        color: #e0e0e0;
    }

    /* ---- Lightbox ---- */
    .lightbox-overlay {
        background-color: #121212;
    }

    .lightbox-image {
        border-color: #333;
        box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    }

    .lightbox-caption {
        color: #aaa;
    }

    .lightbox-caption strong {
        color: #e0e0e0;
    }

    .lightbox-side-text {
        background-color: #1e1e1e;
        color: #ccc;
    }

    .lightbox-metadata {
        background-color: #1e1e1e;
    }

    .lightbox-metadata-inner {
        border-top-color: #333;
    }

    .lightbox-metadata-inner span {
        color: #777;
    }

    .lightbox-close-btn {
        color: #e0e0e0;
    }

    .lightbox-info-btn {
        background: #1e1e1e;
        border-color: #555;
        color: #e0e0e0;
    }

    .lightbox-info-btn:hover {
        background-color: #2a2a2a;
    }

    .lightbox-thumbnails img {
        opacity: 0.4;
    }

    .lightbox-thumbnails img.active {
        opacity: 1;
    }

    .lightbox-counter {
        color: #777;
    }

    .thumb-nav-btn {
        color: rgba(255,255,255,0.25);
    }

    .thumb-nav-btn:hover {
        color: rgba(255,255,255,0.9);
    }

    /* ---- Footer ---- */
    .footer {
        border-top-color: #333;
        color: #666;
    }

    .footer-dot {
        color: #444;
    }

    .footer a {
        color: #666;
    }
}

/* =============================================
   TABLET (max 1024px)
   ============================================= */
@media (max-width: 1024px) {

    /* Hero: stack image above text */
    .hero-section {
        grid-template-columns: 1fr;
        gap: 40px;
        margin: 80px auto 80px auto;
    }

    .hero-image {
        max-height: 60vh;
        width: 100%;
        object-fit: contain;
    }

    .hero-intro {
        max-width: 100%;
    }

    /* Works + gallery grids: 2 columns */
    .works-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin: 60px auto;
    }

    .image-wrapper img,
    .gallery-image {
        width: 100%;
        height: 220px;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Bio: stack on tablet */
    .bio-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Lightbox side panel narrower */
    .lightbox-side-panel {
        flex: 0 0 280px;
    }

    /* Quote */
    .separating-quote {
        font-size: 22px;
        padding: 60px 24px;
        margin: 80px auto;
    }

    .separating-quote::before,
    .separating-quote::after {
        font-size: 160px;
    }

    /* Home hero */
    .home-hero {
        height: 55vh;
        margin-top: 32px;
        margin-bottom: 60px;
    }

    .home-about-inner {
        gap: 24px;
    }

    .home-about-copy {
        max-width: 100%;
    }
}

/* =============================================
   MOBILE (max 768px)
   ============================================= */
@media (max-width: 768px) {

    /* ---- Navbar ---- */
    .navbar {
        padding: 8px 16px;
        font-size: 15px;
        position: relative;
    }

    .nav-left,
    .nav-right {
        display: none;
    }

    .nav-mobile-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
    }

    .mobile-menu-btn {
        background: none;
        border: none;
        font-size: 22px;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        color: #222;
    }

    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-bottom: 1px solid #eee;
        flex-direction: column;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        z-index: 999;
    }

    .mobile-menu.open {
        display: flex;
        max-height: 400px;
        padding: 12px 0;
    }

    .mobile-nav-link {
        padding: 14px 20px;
        font-size: 17px;
        display: block;
        color: #222;
        text-decoration: none;
    }

    .mobile-nav-link::after {
        display: none;
    }

    .mobile-nav-link:hover {
        background: #fafafa;
    }

    /* ---- Header ---- */
    .header {
        font-size: 22px;
        margin: 12px auto;
        padding: 0 16px;
    }

    .site-header.shrink .header {
        font-size: 16px;
        margin: 6px auto;
    }

    .site-header.shrink .navbar {
        padding: 4px 16px;
    }

    /* ---- Container ---- */
    .container {
        padding: 0 16px;
    }

    .home-container {
        padding: 0 16px;
    }

    /* ---- Home hero ---- */
    .home-hero {
        height: 50vh;
        margin-top: 24px;
        margin-bottom: 60px;
    }

    .home-hero-overlay {
        bottom: 28px;
        left: 24px;
        gap: 14px;
    }

    .home-hero-sub {
        font-size: 12px;
    }

    .home-hero-btn {
        font-size: 12px;
        padding: 10px 20px;
    }

    /* ---- Home about strip ---- */
    .home-about-strip {
        padding: 32px 0;
        margin-bottom: 60px;
    }

    .home-about-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .home-about-arrow {
        display: none;
    }

    .home-about-title {
        font-size: 18px;
    }

    .home-about-text {
        font-size: 15px;
    }

    /* ---- Home nieuws ---- */
    .home-section {
        margin: 60px 0;
    }

    .home-nieuws-heading {
        font-size: 17px;
    }

    .home-nieuws-text {
        font-size: 15px;
    }

    /* ---- Gallery hero ---- */
    .hero-section {
        grid-template-columns: 1fr;
        gap: 28px;
        margin: 60px auto 60px auto;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-intro {
        font-size: 16px;
    }

    /* ---- Works grid: single column ---- */
    .works-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 40px auto;
    }

    .image-wrapper {
        width: 100%;
    }

    .image-wrapper img {
        width: 100%;
        height: 240px;
    }

    .hover-text {
        opacity: 1;
        transform: translateY(0);
        background: rgba(0, 0, 0, 0.35);
    }

    /* ---- Gallery grid: 1 column ---- */
    .grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-image {
        width: 100%;
        height: 260px;
        object-fit: cover;
    }

    /* ---- Quote ---- */
    .separating-quote {
        font-size: 18px;
        padding: 40px 16px;
        margin: 60px auto;
    }

    .separating-quote::before,
    .separating-quote::after {
        font-size: 100px;
    }

    .quote-author {
        font-size: 16px;
        margin-right: 0;
    }

    /* ---- Bio ---- */
    .bio-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .page-section {
        margin: 80px auto;
    }

    /* ---- Contact ---- */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* ---- News ---- */
    .news-list {
        margin: 60px auto 100px auto;
        gap: 50px;
    }

    .news-heading {
        font-size: 20px;
    }

    /* ---- Lightbox: mobile layout ---- */
    .lightbox-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .lightbox-container {
        flex-direction: column;
        padding: 12px 12px 16px 12px;
        gap: 4px;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lightbox-main {
        flex: 0 0 200px;
        margin: 0;
        padding: 0;
    }

    .lightbox-image-wrapper {
        height: 45vh;
    }

    .lightbox-image {
        max-height: 45vh;
        border-radius: 6px;
    }

    .lightbox-side-panel {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        max-height: none;
    }

    .lightbox-side-text {
        max-height: 180px;
        border-radius: 5px;
    }

    .lightbox-thumbnails {
        max-width: 100%;
    }

    .lightbox-caption {
        font-size: 13px;
        height: auto;
        padding: 2px 0;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
        gap: 2px;
        margin: 0;
    }

    .lightbox-corner-controls {
        top: 8px;
        right: 8px;
    }

    .lightbox-close-btn {
        font-size: 24px;
    }

    .lightbox-info-btn {
        display: none;
    }

    #lightbox-side-wrapper.hidden {
        opacity: 1;
        transform: none;
        visibility: visible;
    }

    .lightbox-metadata {
        padding: 6px 12px 10px 12px;
    }
}

/* =============================================
   SMALL PHONES (max 480px)
   ============================================= */
@media (max-width: 480px) {

    .navbar {
        font-size: 13px;
    }

    .header {
        font-size: 18px;
    }

    .site-header.shrink .header {
        font-size: 14px;
        margin: 4px auto;
    }

    .home-hero {
        height: 45vh;
    }

    .hero-title {
        font-size: 20px;
    }

    .hero-intro {
        font-size: 15px;
        line-height: 1.7;
    }

    .lightbox-image-wrapper {
        height: 38vh;
    }

    .lightbox-image {
        max-height: 38vh;
    }

    .lightbox-side-text {
        font-size: 13px;
        max-height: 160px;
    }

    .page-title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .separating-quote {
        font-size: 16px;
    }

    .news-heading {
        font-size: 18px;
    }

    .news-text {
        font-size: 15px;
    }

    .home-hero-overlay {
        bottom: 20px;
        left: 16px;
    }

    .home-about-label {
        font-size: 11px;
    }
}

/* =============================================
   fix for quote visibility
   ============================================= */

@media (prefers-color-scheme: dark) {
    .separating-quote::before,
    .separating-quote::after {
        color: rgba(255, 255, 255, 0.05) !important;
    }
}