/* ============================================================
   TABLET (≤1024px)
   Canvas masonry + Lightbox split
   ============================================================ */
@media (max-width: 1024px) {

    /* ---- PORTFOLIO CANVAS (accueil) — Bascule en mode masonry ---- */
    .draggable-item.no-mobile {
        display: none !important;
    }

    .no-mobile {
        display: none !important;
    }

    .desktop-only-excerpt {
        display: none !important;
    }

    #portfolio-canvas {
        height: auto !important;
        overflow: visible !important;
        padding: 80px 40px;
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
    }

    #portfolio-canvas.masonry-loaded {
        opacity: 1 !important;
    }

    /* Grille masonry 3 colonnes sur tablette */
    .masonry-row {
        display: flex;
        gap: 20px;
        width: 100%;
        align-items: flex-start;
    }

    .masonry-col {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: calc(33.333% - 13.33px);
    }

    .galerie-studio .size-full {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    .galerie-studio .wp-block-gallery,
    .galerie-studio .blocks-gallery-grid {
        gap: 40px !important;
    }

    .draggable-item[data-post-id="1035"] img {
        padding: 0 30px;
    }

    /* Les items draggables redeviennent statiques sur tablette/mobile */
    .draggable-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: auto !important;
        box-sizing: border-box;
        display: block !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .draggable-item.is-full-width {
        width: 100% !important;
    }

    .is-full-width {
        grid-column: 1 / -1 !important;
    }

    video {
        background-color: transparent !important;
        max-height: 100% !important;
    }

    /* Vidéo desktop cachée → on affiche le fallback image + vidéo mobile */
    .desktop-video-wrapper {
        display: none !important;
    }

    .mobile-media-wrapper {
        display: block !important;
    }

    /* ---- LIGHTBOX / SINGLE (page projet) — Layout empilé ---- */
    .lightbox-split {
        flex-direction: column;
        height: auto !important;
        min-height: auto !important;
        overflow: visible;
    }

    .lightbox-left {
        width: 100%;
        height: auto !important;
        /* variable fixée en px par JS au chargement — stable au scroll */
        min-height: var(--featured-container-min-h) !important;
        padding: 90px 20px 20px 20px;
        align-items: center !important;
        justify-content: center !important;
    }

    .lightbox-left img,
    .lightbox-left video {
        max-width: 100% !important;
        /* variable fixée en px par JS — ne change pas lors du scroll */
        max-height: var(--featured-media-max-h) !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .lightbox-right {
        width: 100%;
        height: auto !important;
        padding: 10px 50px 30px;
        overflow-y: visible !important;
        justify-content: flex-start;
    }

    #lb-content-container {
        padding: 30px 50px 50px 50px !important;
        border-top: none !important;
    }

    #prev-btn,
    #next-btn {
        display: block !important;
        font-size: 22px;
    }

    #prev-btn { left: 15px; }
    #next-btn { right: 15px; }

    .single-header {
        padding: 15px 21px;
    }

    .lb-desktop-logo {
        display: none !important;
    }

    .lb-mobile-logo {
        width: auto;
        height: 50px;
        display: block !important;
    }

    .btn-more {
        display: none !important;
    }

    /* Visuels dans le contenu : pleine largeur sur tablette/mobile (1 seule colonne) */
    #lb-content img,
    #lb-content figure,
    #lb-content .wp-block-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

}

/* ============================================================
   MOBILE (≤768px)
   Header sticky + logo monogramme + footer centré + nuancier caché
   + masonry 2 colonnes + overrides spécifiques petits écrans
   ============================================================ */
@media (max-width: 768px) {

    /* ---- HEADER — Sticky transparent + swap logo ---- */
    #header {
        position: sticky !important;
        top: 0;
        z-index: 9000;
        background-color: transparent !important;
        padding: 20px 20px 10px;
    }

    /* Remplacement du logo par le monogramme */
    #header .site-logo a,
    #header .custom-logo-link {
        display: block;
        width: 50px;
        height: 50px;
        background-image: url('/wp-content/uploads/2026/03/Logo-Monogramme-LDK-Fond-Rouge.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        text-indent: -9999px;
    }

    #header .site-logo a img,
    #header .custom-logo-link img {
        display: none !important;
    }

    #header .site-nav a {
        display: inline-block;
    }

    #header .site-navigation li,
    #header .main-menu li {
        margin-bottom: 10px;
    }

    /* ---- THEME SWITCHER — Masqué sur mobile ---- */
    .ldk-theme-switcher {
        display: none;
    }

    /* ---- OMBRES (version allégée sur petit écran) ---- */
    .draggable-item.ombredroite img {
        filter: drop-shadow(1px 2px 1px #00000057);
        padding: 0 3px 0 0;
    }

    .ombredroite #lb-featured-image {
        filter: drop-shadow(2px 3px 3px #00000057);
    }

    /* ---- FOOTER — Centré et flottant en bas ---- */
    footer#footer {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }

    /* ---- PORTFOLIO CANVAS — 2 colonnes sur mobile (au lieu de 3 sur tablette) ---- */
    .masonry-col {
        width: calc(50% - 10px);
    }

    #portfolio-canvas {
        padding: 10px 20px;
    }

    /* Troncature du texte intro sur mobile */
    .texte-intro {
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

}