/*
Theme Name: Robs Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team
Author URI: https://wordpress.org
Template: twentytwentyfour
Description: Twenty Twenty-Four Child
Requires at least: 6.1
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentyfour child
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/


@media (min-width: 1300px) and (max-width: 1500px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
        gap: calc((100vw - 204px) / 12 * 2 + 36px) !important; 
        margin-left: calc((100vw - 204px) / 12 * 2 + 12px) !important; 
        margin-right: calc((100vw - 204px) / 12 * 2 + 12px) !important;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) .wp-block-column { /* If has 4 columns  */
        max-width: calc(33.33% - var(--block-size) ) !important;
    }
}
@media (min-width: 1201px) and (max-width: 1299px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
        gap: calc((100vw - 204px) / 12 * 2 + 36px) !important; 
        margin-left: calc((100vw - 204px) / 12 * 1.5 + 12px) !important; 
        margin-right: calc((100vw - 204px) / 12 * 1.5 + 12px) !important;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) .wp-block-column { /* If has 4 columns  */
        max-width: calc(33.33% - var(--block-size) ) !important;
    }
}
@media (min-width: 1101px) and (max-width: 1200px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
        gap: var(--block-with-one-space) !important; 
        margin-left: var(--block-with-one-space) !important; 
        margin-right: var(--block-with-one-space) !important;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) .wp-block-column { /* If has 4 columns  */
        min-width: 310px;
        max-width: calc(33.33% - var(--block-size) ) !important;
    }
    footer .wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) .wp-block-column {margin-right: var(--block-with-one-space) !important; } /* If 3 columns IN FOOTER */
}
@media (min-width: 1001px) and (max-width: 1100px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
        gap: var(--block-with-one-space) !important; 
        margin-left: var(--block-with-one-space) !important; 
        margin-right: var(--block-with-one-space) !important;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) .wp-block-column { /* If has 4 columns  */
        min-width: 280px;
        max-width: calc(33.33% - var(--block-size) ) !important;
    }
    footer .wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) .wp-block-column {margin-right: var(--block-with-one-space) !important; } /* If 3 columns IN FOOTER */

}
@media (min-width: 901px) and (max-width: 1001px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
        gap: var(--block-with-one-space) !important; 
        margin-left: var(--block-with-one-space) !important; 
        margin-right: var(--block-with-one-space) !important;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) .wp-block-column { /* If has 4 columns  */
        min-width: 390px;
        max-width: calc(33.33% - var(--block-size) ) !important;
    }
    .wp-block-column h4 {font-size: 1.2rem;}
    footer .wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) .wp-block-column {margin-right: var(--block-with-one-space) !important; } /* If 3 columns IN FOOTER */
    header .wp-block-navigation {font-size:0.56rem !important;}
    .menu-2 {top:-37px;}
   

    .back-button {
        padding: 6px 15px;
        font-size: 12px;
    }
}

@media (min-width: 782px) and (max-width: 900px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
        gap: calc((100vw - 204px) / 12 * 1 + 24px) !important; 
        margin-left: calc((100vw - 204px) / 12 * 1 + 12px) !important; 
        margin-right: calc((100vw - 204px) / 12 * 1 + 12px) !important;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) .wp-block-column {
        min-width: 200px;
    }
    .wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) .wp-block-column { /* If has 4 columns  */
        min-width: 320px;
        max-width: calc(33.33% - var(--block-size) ) !important;
    }
    .wp-block-column h4 {font-size: 1rem;}
    footer .wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) .wp-block-column {margin-right: var(--block-with-one-space) !important; } /* If 3 columns IN FOOTER */
    header .wp-block-navigation {font-size:0.5rem !important;}
    .menu-2 {top:-36px;}

    .back-button {
        padding: 6px 15px;
        font-size: 12px;
    }

}

@media (min-width: 782px) and (max-width: 1200px) {
    .is-layout-grid > .row2 {grid-column: span 1;}
    .is-layout-grid > .column2 {grid-row: span 1;}


    .wp-block-post-content > .has-x-large-font-size {
        width: calc((100vw - 204px) / 12* 11 - 12px);
    }

    .wp-block-post-content > .has-large-font-size {
        width: calc((100vw - 204px) / 12* 10 - 12px);
    }

    .wp-block-post-content > .has-medium-font-size  {
        width: calc((100vw - 204px) / 12* 9 - 12px);
    }

    .wp-block-post-content > .has-small-font-size  {
        width: calc((100vw - 204px) / 12* 8 - 12px);
    }

  
}

@media screen and (max-width: 781px) {
    
    :root {

        --half-block-size: 40px;
        --block-size: 100%;
        --block-with-all-spacing: 100%;
        --block-with-one-space: 100%;
        --block-spacing:12px;

        --block-size-height: 80px;
        --block-with-all-spacing-height: 80px;
        --block-with-one-space-height: 80px;
    
        --two-blocks-with-all-spacing: 100%;
        --two-blocks-with-inner-spacing: 100%;
        --three-blocks-with-inner-spacing: 100%;
        --four-blocks-with-inner-spacing: 100%;
        --five-blocks-with-inner-spacing: 100%;
        --six-blocks-with-inner-spacing: 100%;


    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

    html {font-size: 22px;}
    .main {padding-top: var(--block-size-height) !important;}
    .wp-site-blocks, .editor-styles-wrapper {
        margin: 0 auto;
        padding: 0;
        width:100%;
        max-width: 1920px;
        padding: 0px;
    }


    header .wp-block-site-title, header .main-menu-inner {
        width: 100%;
    }
    header .wp-block-site-title {
        padding-top: 20px;
        height: 75px;
    }

    .filmmaker-and-photography {font-size: 13px; position: relative; display: inline-block; top:-1px;}
    .center-dot {top:-4px !important; font-size: 25px;}
    .main-menu-inner, .wp-block-site-title {padding-left: 20px; padding-right: 20px;}
    .contact-left-menu {display: block !important;}
    .menu-2 nav {display: none;}
    .menu-2 {top:-38px;}

    .photography-filter-menu {
        margin-top: calc(-1 * var(--half-block-size) + 15px);
    }

    .wp-block-post-content > .has-x-large-font-size {width: 100% !important;}
    .wp-block-post-content > .has-large-font-size {width: 90% !important; }
    .wp-block-post-content > .has-medium-font-size {width: 80% !important; }
    .wp-block-post-content > .has-small-font-size {width: 70% !important; }
        
    footer .empty {display: none;}


.is-layout-grid > * {
    min-height: 150px;
}

.is-layout-grid .wp-block-spacer {
    display: none;
}
:root :where(.wp-block-post-content .is-layout-flex):not(.narrowgap):not(.media):not(.wp-block-buttons)  {
    gap: 20px !important;
}

.menu-1, .menu-2 {
    padding-top: 9px;
}

.wp-block-column {

    max-width: 100%;
}


.wp-block-columns > .wp-block-column + .wp-block-column + .wp-block-column:last-child {margin-right: 0px;}  /* If 3 columns - makes each column 3 blocks  */

.wp-block-columns .wp-block-column {margin-bottom: var(--block-size-height);}

.wp-block-columns:has(> .wp-block-column:nth-child(2):last-child),
#editor .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
    gap: 15px; 
    margin-left: 0px !important; 
    margin-right: 0px !important;
}

.wp-block-column .videoblock {width: unset;}

.worked-with-list {font-size: var(--wp--preset--font-size--medium);}

.wp-block-post-content > *, h1.wp-block-post-title, footer, .photography-title-meta .meta {
    padding: 0 20px !important;
}
.caption p {padding: 0px !important;}

.aside {width: 60%;}


.individual-icon {
    height: 23px;
    padding-left: 2px;
    margin-bottom: 20px;
}


.projects-list, .image-gallery {
    grid-template-columns: repeat(1, 100%); 
    grid-auto-rows: auto; /* Ensures rows match column height */
    width: 100%;
    max-width: 100%;
    gap: 12px; /* 12px gap between grid items */
}
.image-gallery > * {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
    width: 100%;
}

/* INDENTS EVERY OTHER ROW */
.image-gallery > .landscape:nth-child(6n + 4)  {
    grid-column: span 1;
    margin-left: 0px;
}
.image-gallery > .portrait:nth-child(6n + 4)  {
    grid-column: span 1; 
   margin-left: 0px;
}


footer .wp-block-site-logo img {width: 50px !important; }
footer .first-row {margin-block-start: var(--half-block-size) !important; }
footer .wp-block-spacer {display: none;}
h2.footer-standout {font-size: var(--wp--preset--font-size--medium);}
footer p {font-size: var(--wp--preset--font-size--medium);}


/* SIZE OF OVERALL PROJECT INC ITS SPACING ETC */
.projects-list > .work-project{
    grid-column: span 1 !important; 
    grid-row: span 1 !important; 
    margin-bottom: var(--half-block-size);
}

/* INDENTS EVERY OTHER ROW */
.projects-list > .work-project:nth-child(4n + 3) {
    grid-column: span 1 !important;
    margin-left: 0px !important; 
}

/* DEFINES VIDEO or IMAGE WIDTH */
.projects-list > .work-project .project-media{
    width: 100% !important;
}
.projects-list > .work-project.portrait .project-media{
    width: 90% !important;
    margin: auto;
}

.projects-list > .widescreen_4k.video .project-media {
     height: auto;
}
.projects-list > .widescreen_4k.video .video-container {
    padding-bottom: 56.25% !important;
} 

.projects-list > .widescreen.video .project-title, /* defines landscape videos width */
.projects-list > .landscape.video .project-title, 
.projects-list > .widescreen_4k.video .project-title, 
.projects-list > .superwidescreen.video .project-title,
.projects-list > .landscape.photography .project-title {
    max-width: 100%;
}
.projects-list > .widescreen.video .my-role,
.projects-list > .landscape.video .my-role,
.projects-list > .superwidescreen.video .my-role,
.projects-list > .widescreen_4k.video .my-role {
    top: 5px;
}
.projects-list > .portrait.video .project-title,
.projects-list > .portrait-image.video .project-title,
.projects-list > .portrait-image.photography .project-title,
.projects-list > .portrait54.video .project-title,
.projects-list > .square.video .project-title {
    position: relative;
    top: 0px;
    max-width: 100%;
}

.projects-list .project-title,
.projects-list .my-role {
left: 0px !important;
}

/* DEFINES POSITION OF ROLE BLOCK */


.projects-list .my-role, .project-further-info .my-role {
    width: 30%;
    position: relative;
    left: auto !important;
    right: 0px !important;
    float: right;
    text-align: right;
}
.projects-list .portrait .my-role {
    right: 5% !important;
}

.projects-list .project-title {
    float: left;
    width: 65%;
}
.projects-list .portrait .project-title {
    width: 60%;
    margin-left: 5%;
}





/* PROJECT PAGE */
/* PROJECT PAGE */


.project-videos {display: block;}  
.project-video {margin: auto 0;}
    .project-videos .videoblock:not(.portrait),
    .project-text-container:not(.portrait) {
        box-sizing: border-box;
        width: 100% !important;
        }
        
       
        .project-videos .videoblock.portrait,
        .project-text-container.portrait {
            width: calc((min(100vw, 1920px) - 132px) / 12 * 4 + 36px ); /* sets width of the video */
            width: 90%;
            margin: auto; 
        }
        .project-text-container.portrait {padding-left: calc(5% + 20px) !important; box-sizing: border-box;}

      /* sets height of the further info to match the video */
      .project-videos .project-further-info {height: auto !important;}

    .project-further-info {margin-top: 40px; margin-bottom: 50px;}

    .more-films-list {
        position: relative;    
        width: 100%;
        bottom: 0px;
        left: 0px;
    }
    .portrait .more-films-list {
        width: 95%;
        bottom: 0px;
        left: 5%;
    }
    
    ul#video-list {margin-left: -10px; margin-top: -50px; padding-bottom: 100px;}

    .project-text {margin-right: 0px !important;}
    
    .my-role {margin-left: auto; }

/* Image Gallery */

.grid-container {
    max-width: 100%;
    overflow: hidden;
}


/* SIZE OF OVERALL PROJECT INC ITS SPACING ETC */
.image-gallery > .landscape {
    grid-column: span 1; 
    grid-row: span 1; 
}
.image-gallery > .portrait {
    grid-column: span 1; 
    grid-row: span 1; 
   
}


/* INDENTS EVERY OTHER ROW */
.image-gallery > .landscape:nth-child(4n + 3)  {
    grid-column: span 1;
    margin-left: 0px; 
}
.image-gallery > .portrait:nth-child(4n + 3)  {
    grid-column: span 1; 
    margin-left: 0px;
}

/* DEFINES VIDEO or IMAGE WIDTH */
.image-gallery > .landscape img   {
    width: var(--four-blocks-with-inner-spacing);
}
.image-gallery > .portrait img { /* defines portrait images width */
    width: 100%;  /* Makes it 4 blocks high (only works for portrait video */
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#myModal::before {background: rgba(0, 0, 0, 0.9);}



.filmphotoscrollblock .work-carousel {height: calc(50.63vw + 40px);}

.filmphotoscrollblock .video-item, .filmphotoscrollblock figure, .filmphotoscrollblock .terms.work-type {height: 50.63vw;}
.filmphotoscrollblock .work-list .widescreen {width:90vw;}
.filmphotoscrollblock .work-list .superwidescreen {width:118.14vw;}
.filmphotoscrollblock .work-list .square {width:50.63vw;}
.filmphotoscrollblock .work-list .portrait {width:28.48vw;}
.filmphotoscrollblock .work-list .portrait54 {width:40.5vw;}
.filmphotoscrollblock .work-list .landscape {width:75.95vw;}
.filmphotoscrollblock .work-list .portrait-image {width:33.75vw;}

.filmphotoscrollblock .work-carousel.only-one {height: auto; justify-content: flex-end;}
.filmphotoscrollblock .only-one .video-item, .filmphotoscrollblock .only-one figure{ height: auto;}
.filmphotoscrollblock .only-one .work-list .widescreen {width:100vw;}
.filmphotoscrollblock .only-one .work-list .superwidescreen {width:100vw;}
.filmphotoscrollblock .only-one .work-list .square {width:100vw;}
.filmphotoscrollblock .only-one .work-list .portrait {width:100vw;}
.filmphotoscrollblock .only-one .work-list .portrait54 {width:100vw;}
.filmphotoscrollblock .only-one .work-list .landscape {width:100vw;}
.filmphotoscrollblock .only-one .work-list .portrait-image {width:100vw;}

.filmphotoscrollblock .top-text {
    grid-template-columns: repeat(2, 1fr);
    gap:2vw;
    border-top: 1px solid white;
    padding-top: 10px;
    margin-bottom: 5vw;
    padding-right: 1%;
}

.back-button {
    padding: 6px 15px;
    font-size: 12px;
    top: 125px;
    right: 20px;
}


}