/*
Theme Name: Robs Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team
Author URI: https://wordpress.org
Template: twentytwentyfive
Description: Twenty Twenty-Five 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
*/

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.js .tmce-active .wp-editor-area {color: black;}

.edit-post-meta-boxes-area #poststuff .stuffbox>h3, .edit-post-meta-boxes-area #poststuff h2.hndle, .edit-post-meta-boxes-area #poststuff h3.hndle {
    font-weight: inherit;
    font-size: 13px;
    text-transform: capitalize;
    padding: 16px 48px 16px 16px;
}
:root {
    --primary-color: black;
    --primary-background-color: #e9e7e2;
    --color2: #c27544;
    --color3: #c27544;
    --color4: #a5c8d1;
    --color5: #b73f74;
    --half-block-size: calc((min(100vw, 1920px) - 132px) / 24);
    --block-size: calc((min(100vw, 1920px) - 132px) / 12 );
    --block-with-all-spacing: calc((min(100vw, 1920px) - 132px) / 12 + 24px );
    --block-with-one-space: calc((min(100vw, 1920px) - 132px) / 12 + 12px );

    --block-size-height: calc((min(100vw, 1920px) - 132px) / 12 );
    --block-with-all-spacing-height: calc((min(100vw, 1920px) - 132px) / 12 + 24px );
    --block-with-one-space-height: calc((min(100vw, 1920px) - 132px) / 12 + 12px );


    --block-spacing:12px;

    --two-blocks-with-all-spacing: calc((min(100vw, 1920px) - 132px) / 12 * 2 + 36px );
    --two-blocks-with-inner-spacing: calc((min(100vw, 1920px) - 132px) / 12 * 2 + 12px );
    --three-blocks-with-inner-spacing: calc((min(100vw, 1920px) - 132px) / 12 * 3 + 24px );
    --four-blocks-with-inner-spacing: calc((min(100vw, 1920px) - 132px) / 12 * 4 + 36px );
    --five-blocks-with-inner-spacing: calc((min(100vw, 1920px) - 132px) / 12 * 5 + 48px );
    --six-blocks-with-inner-spacing: calc((min(100vw, 1920px) - 132px) / 12 * 6 + 60px );
}

html {font-size: 28px;}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--primary-color);
}
body p {
    box-sizing: border-box;
}

p, .wp-block-post-content * .wp-block-list  {
    margin-block-end: 1.5rem !important;
}
.wp-block-group p {
    margin-block-end: 1.5rem !important;
}
footer .wp-block-group p {
    margin-block-end: 0px !important;
}

.meta {
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
    display: block;
}
p.meta, .meta p {
    margin-block-start: 12px;
    margin-block-end: 12px;
}

.wp-site-blocks, .editor-styles-wrapper {
    margin: 0 auto;
    padding: 0;
    width:100%;
    max-width: 1920px;
    padding: 1px 35px 0 35px;
    box-sizing: border-box;
}
html, body, .has-base-background-color, .wp-site-blocks { background-color: var(--primary-background-color) !important;}
/*body {background-color: black !important;} */

.has-global-padding {padding-left: 0px; padding-right: 0px;}
.has-global-padding > .alignfull {margin-left: 0px; margin-right: 0px;}

#editor .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {margin-left: 0px !important; margin-right: 0px !important; max-width: 1920px;}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%;
    margin-left: 0px !important;
    margin-right: 0px !important;
}
:root :where(.is-layout-constrained) > * {margin-block-start:0px;}
figure, li p  {
    margin: 0px; 
    margin-block-start: 0px; 
    margin-block-end: 0px;
    margin-inline-start: 0px; 
    margin-inline-end: 0px;
}
figure img {
    display: block;
}
footer .wp-block-group {width: 100%; max-width: 100% !important;}
footer .wp-block-columns {gap: var(--half-block-size);}
footer .wp-block-column {min-width: 300px;}

footer h2 {margin-block-end: var(--block-spacing) !important;}
h2.footer-standout {font-size: var(--wp--preset--font-size--medium);}
footer .first-row {margin-block-start: var(--block-size-height) !important;}

footer .wp-block-site-logo img {width: 50px !important; }
footer .first-row {margin-block-start: var(--half-block-size) !important; }
footer p {font-size: var(--wp--preset--font-size--small);}
footer .copyright {display: block;}
footer .tax-links a {text-transform: capitalize;}

.wp-block-gallery.has-nested-images.is-cropped figure:not(#individual-image) a, 
.wp-block-gallery.has-nested-images.is-cropped figure:not(#individual-image) img {
    flex: 1 0 0%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

footer #modal-3 {}
footer #modal-3 .wp-block-navigation .wp-block-page-list {display: block; text-transform: capitalize;}
footer #modal-3 .current-menu-item {background: none; background-color: transparent !important; padding: 0px !important; border-radius: 0px; color: black; }

/* Default: 3 per row */
.wp-block-gallery.has-nested-images.columns-default > * {
    flex: 1 1 calc(33.33% - 10px); /* Adjust based on gap */
    max-width: calc(33.33% - 10px);
}
/* 1 Figure → 100% */
.wp-block-gallery.has-nested-images.columns-default > *:only-child {
    flex: 1 1 100%;
    max-width: 100%;
}
/* 2 Figures → 50% each */
.wp-block-gallery.has-nested-images.columns-default > *:nth-last-child(2):first-child,
.wp-block-gallery.has-nested-images.columns-default > *:nth-last-child(2):first-child ~ figure {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
}
/* 4 Figures → 3 at 33.33%, 1 at 100% */
.wp-block-gallery.has-nested-images.columns-default > *:nth-last-child(1):nth-child(4) {
    flex: 1 1 100%;
    max-width: 100%;
}
/* 5 Figures → 3 at 33.33%, last 2 at 50% */
.wp-block-gallery.has-nested-images.columns-default > *:nth-last-child(2):nth-child(4),
.wp-block-gallery.has-nested-images.columns-default > *:nth-last-child(1):nth-child(5) {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
}
/* 7 Figures → 3 at 33.33%, 3 at 33.33%, 1 at 100% */
.wp-block-gallery.has-nested-images.columns-default > *:nth-last-child(1):nth-child(7) {
    flex: 1 1 100%;
    max-width: 100%;
}
/* 8 Figures → 3 at 33.33%, 3 at 33.33%, last 2 at 50% */
.wp-block-gallery.has-nested-images.columns-default > *:nth-last-child(2):nth-child(7),
.wp-block-gallery.has-nested-images.columns-default v *:nth-last-child(1):nth-child(8) {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
}




/* Shows portfolio helper */
.wp-admin.portfolio .hide-if-js {display: block !important; position: absolute; left: 0px; top: 75vh; width: 350px; box-sizing: border-box; overflow-wrap: break-word;}
.wp-admin.portfolio .hide-if-js .notice-error {display: none;}

.portfolio-link-helper {}


/* TOP MENU */

.menu-1 {
    justify-content: flex-start !important;
}

.menu-1, .menu-2 {padding-top: 7px;}
.menu-2 {position: relative; top:-40px; width: 20%; float: right;}
.menu-1 nav {margin-top: -3px;} 
.menu-2 nav {margin-right: 15px; margin-top: -5px;}
.wp-block-navigation {font-size: var(--wp--preset--font-size--small);}
header {
    position: fixed;
    width: 100vw;
    left: 0px;
    z-index: 1000;
    top: 0;
}
header .wp-block-site-title, header .main-menu-inner {
    max-width: 1920px;
    margin: 0 auto !important;
}
header {height: var(--block-size-height);}

header .wp-block-site-title {
    font-weight: 400;
    font-size: 1.33rem;
    font-size: clamp(0.8rem, 3vw, 1.33rem);
    box-sizing: border-box;
    height: var(--block-size-height);
    padding-top: 2.1vw;
    padding-bottom: 0px;
   
}

.main-menu {
    border-top: 1px solid var(--primary-color); 
    border-bottom: 1px solid var(--primary-color);
    height: 40px;
    width: 100vw;
    }

.contact-left-menu {display: none !important;}

.home-menu-item span {
    background-image: url(images/home.png);
    background-repeat: no-repeat;
    display: block;
    width: 13px;
    height: 13px;
    background-size: 13px 13px; 
    padding-top: 3px;
}

.wp-block-site-title .center-dot {display: inline-block; position: relative; top:-10px; margin: 0 10px;}
.main-menu-inner, .wp-block-site-title {padding-left: 35px; padding-right: 35px; box-sizing: border-box;}

main {margin-top: var(--block-size-height) !important; margin-block-start: 200px;}
/* .main {padding-top: var(--two-blocks-with-inner-spacing) !important;} */
.main {padding-top: var(--block-with-one-space) !important;}

.role-filter-menu, .photography-filter-menu {
    border: 1px solid var(--primary-color); 
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: var(--half-block-size);
    max-width: fit-content;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    flex-direction: column; /* Ensures height is determined by content */
    align-items: stretch;
    border-radius:9999px;
}
.photography-filter-menu {
    margin-top: calc(-1 * var(--half-block-size) + 15px);
}
.role-filter-menu .filter-item:not(.active):hover, 
.photography-filter-menu .filter-item:not(.active):hover{
 cursor: pointer;
 color: #e9e7e2;
}
nav .wp-block-navigation-item:not(.current-menu-item) a:hover, .tax-links a:hover  { color: #555 !important; text-decoration: none !important;}

.role-filter-menu li, .photography-filter-menu li {
    float: left;
    padding: 5px 25px;
    text-transform: uppercase;
    font-size: 16px;
    border-radius:9999px;
}
.filter-item.active {
    background-color: var(--primary-background-color);
    color: var(--primary-color);
    background-color: var(--primary-background-color);
}
.wp-block-navigation-item { padding: 2px 0px !important;}

.current-menu-item:not(.home-menu-item) {
    color: var(--color2);
    color: var(--primary-background-color);
    padding: 2px 20px !important;
    background-color: black !important;
    border-radius: 9999px;
}
.contact-menu-item.current-menu-item  {margin-top: -2px; color: var(--primary-background-color);}
.current-menu-item a:hover {text-decoration: none;}

.contact-menu-item {color: var(--color2);}



/* TEXT TYPES */

a {
    text-decoration: none;
    cursor: pointer;
}
a > * { cursor: pointer;}
a:hover {cursor: pointer; text-decoration: underline;}

.wp-block-post-content p a {color: var(--color2);}

a, button {
    box-shadow: none !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none !important;
}



h1, h2, .wp-block-navigation, h3, h4 {
    text-transform: uppercase;
}

h1.wp-block-post-title, h1 {
text-align: left;

}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {text-wrap: unset !important;}


h1, h2:not(.components-panel__body-title),
.wp-block-post-content > p.has-x-large-font-size, 
.wp-block-post-content > p.has-large-font-size, 
.wp-block-post-content > p.has-medium-font-size, 
.wp-block-post-content > p.has-small-font-size {
    margin-block-end: var(--half-block-size) !important;
}
div.wp-block-group:not(.main):not(.wp-block-post-content):not(.ignore-group-style) h1, div.wp-block-group:not(.main):not(.wp-block-post-content) h2, h3, h4, h5, h6  {
    margin-block-end: 15px !important;
}
.wp-block-post-content > h3 {
    margin-block-end: var(--half-block-size) !important; 
    margin-bottom: var(--block-size) !important;
    margin-top: calc(((min(100vw, 1920px) - 132px) / -24) + 5px) !important;

}

h4 {font-size: var(--wp--preset--font-size--large);}

h4.has-small-font-size {
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 14px !important;
    text-transform: none;
}

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

span.mouseover, ul.tight li:hover {color: var(--color3);}

/* Apply selection styling to all elements except images */
*:not(img)::selection {
    background-color: var(--color3); /* Yellow background */
    color: var(--primary-background-color); /* Black text */
}


.caption, .aside {
    font-size: var(--wp--preset--font-size--small); 
}
.aside {
    width: var(--two-blocks-with-inner-spacing);
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    display: block;
    margin-top: -25px !important;
}

.project-title h3, .single-film h1, .single-photography h1,
.post-type-film h1, .post-type-photography h1   {
    margin-block-start: 12px;
    margin-block-end: 2px !important;
}
.project-title h3  {font-size: 22px; }

.project-text {font-size: var(--wp--preset--font-size--small);}
.project-topline {font-size: var(--wp--preset--font-size--small); text-transform: uppercase;}

.project-text h1 {margin-block-end: 0px !important;}

/* OBJECT POSITIONS */

.wp-block-post-content > .is-layout-flex, 
.wp-block-post-content > div,
.wp-block-post-content > figure,
.wp-block-post-content > ul,
.wp-block-post-content > blockquote,
.wp-block-post-content > pre,
main > *:not(.entry-content) {margin-bottom: var(--block-with-one-space-height);} /* Affects All blocks of first children */

.workpreview {margin-bottom: 0px !important;}

.wp-block-post-content > p + :not(p) {margin-top: var(--block-with-one-space-height);} /* Mimics the above when a new object is detected after the last p */
.wp-block-post-content > .is-layout-flex .wp-block-group,
.wp-block-post-content > .is-layout-constrained .wp-block-group  {margin-bottom: var(--half-block-size);} /* Affects All groups that are not first children */

:root :where(.wp-block-post-content .is-layout-flex):not(.narrowgap):not(.media):not(.wp-block-buttons):not(.wp-block-gallery)  {
    gap: var(--block-size);
}

.wp-block-columns {gap: var(--block-with-all-spacing);}
.wp-block-columns.is-layout-flex {flex-wrap: wrap !important;}


.wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) .wp-block-column:last-child {margin-right: var(--block-with-one-space);} /* If 3 columns - makes each column 3 blocks  */
footer .wp-block-columns:has(> .wp-block-column:nth-child(3):last-child) .wp-block-column:last-child {margin-right: 0px !important;} /* If 3 columns IN FOOTER */

.wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) { /* If 2 columns  */
    gap: var(--two-blocks-with-all-spacing); 
    margin-left: var(--two-blocks-with-all-spacing) !important; 
    margin-right: var(--two-blocks-with-all-spacing) !important;
}
#editor .wp-block-columns:has(> .wp-block-column:nth-child(2):last-child) {
    gap: var(--block-with-one-space); 
    margin-left: var(--block-with-one-space) !important; 
    margin-right: var(--block-with-one-space) !important;
}
.wp-block-column .wp-block-group p {font-size: var(--wp--preset--font-size--small);}
.wp-block-column > p {min-height: var(--half-block-size);}  /* Gives min height to column text  */
.wp-block-column figure:first-child {min-height: 200px;}
    
.wp-block-column {
    min-width: 300px;
    max-width: calc(50% - var(--block-size) );
    position: relative;
}
.wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) { /* If 2 columns  */
    gap: var(--half-block-size); 
}
.wp-block-columns:has(> .wp-block-column:nth-child(4):last-child) .wp-block-column { /* If has 4 columns  */
    min-width: 220px;
}



.wp-block-columns .videoblock {aspect-ratio: 1 / 1;}

.project-text, .project-topline {
    margin-top: var(--half-block-size);
}
.project-topline + .project-text {
    margin-top: 15px;
}

.single-photography .project-text, .post-type-photography .project-text {
    margin-bottom: var(--half-block-size);
}

.is-layout-grid {gap: 1.5vw;}
.is-layout-grid.square > * {
    aspect-ratio: 1 / 1;
}
.is-layout-grid.tight > * {
    aspect-ratio: unset;
}
.is-layout-grid > .wp-block-group:not(.is-layout-grid) {
    padding: 50px;
    padding: clamp(5px, 2.5vw, 50px);
}

/* .is-layout-grid + .is-layout-grid {margin-top: calc(-1 * ((min(100vw, 1920px) - 132px) / 12 + 12px - 15px));} */

/* .is-layout-grid {grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));} */
/* @media (min-width: 1800px) {.is-layout-grid { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));}} */
       
   
.is-layout-grid.square figure,
.is-layout-grid.square img,
.is-layout-grid.square .videoblock,
.is-layout-grid.square .video-container,
.is-layout-grid.square video,
.is-layout-grid.square div,
.is-layout-grid.fill figure,
.is-layout-grid.fill img,
.is-layout-grid.fill .videoblock,
.is-layout-grid.fill .video-container,
.is-layout-grid.fill video,
.is-layout-grid.fill div {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.is-layout-grid > .row2 {
    grid-column: span 2;
}
.is-layout-grid > .column2 {
    grid-row: span 2; 
}


.is-layout-grid > .wp-block-spacer {
    height: 100% !important;
}




/* ICONS */

/* Base class for all icons */
.icon {
    background-image: url('images/icons.png'); /* Set the sprite sheet as background */
    background-repeat: no-repeat;
    display: inline-block; /* Allows setting width & height */
}

.icon-more {
    width: 80px;
    height: 70px;
    background-position: -20px -70px;
}
.icon-film {
    width: 25px;
    height: 45px;
    background-position: -331px 0px;
}
.icon-photography {
    width: 25px;
    height: 45px;
    background-position: -199px 0px;
}
.icon-editing {
    width: 25px;
    height: 45px;
    background-position: -299px 0px;
}
.icon-drone {
    width: 25px;
    height: 45px;
    background-position: -369px 0px;
}
.icon-camera {
    width: 25px;
    height: 45px;
    background-position: -267px 0px;
}
.icon-instagram {
    width: 32px;
    height: 32px;
    background-position: -90px -35px;
    background-size: 220px 82px;
    margin-right: 20px;
}
.icon-linkedin {
    width: 32px;
    height: 32px;
    background-position: -60px -35px;
    background-size: 220px 82px;
}
.individual-icon {
    height: 32px;
    margin-bottom: 25px;
}
.individual-icon img {  
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
}

h1, .wp-block-post-content > h2 {
    position: relative;
}
h1.wp-block-post-title:not(.remove-default-class)::before, h1.wp-block-heading:not(.remove-default-class)::before, .wp-block-post-content > h2::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 45px;
    background-image: url('images/icons.png');
    background-size: 275px 102px;
    position: absolute;
    left: -45px; /* Adjust to move it to the left of h1 */
    transform: translateY(-27%); /* Adjust to align it perfectly */
    background-position: -35px 0px;
} 


.wp-block-column.clickable-card:hover, 
.wp-block-column.clickable-card:has(.column-overlay-link:hover) { /* Card column hovers */
background-color:#d8d7d3;

}

.column-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.wp-block-column a:not(.column-overlay-link) {
  position: relative;
  z-index: 3;
}

.wp-block-column.clickable-card {
  border:5px solid var(--primary-background-color);
    border-radius: 16px;               /* curved corners */
    transition: 
    background-color 1s,
    color 0.5s,
    border-color 1s;                       /* match fade timing */
  border-bottom: 20px solid transparent;    /* reserve space to avoid layout shift */
}

.bespoke-smaller-height {min-height: 40px !important;}
/* STYLES */


.videoblock, .wp-block-acf-bunnyvideo {width: 100%;}
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.workpreview ul, 
.terms ul, 
ul#video-list, 
.role-filter-menu ul, 
.photography-filter-menu ul,
ul.image-gallery, 
.no-bullets {
    list-style-type: none;
    padding: 0; /* Removes default left padding */
    margin: 0; /* Removes default margin */
}

ul.tight li {margin-top: 0px;}

.wp-element-button, .wp-block-button__link {
    padding: 5px 25px;
    font-size: var(--wp--preset--font-size--small);
    
}
.wp-element-button:hover {background-color: var(--color2);}
.wp-block-button a:hover {text-decoration: none !important;}

/* PROJECTS LIST */
.grid-container {
    max-width: 100%;
    overflow: hidden;
}

.projects-list {
    display: grid;
    grid-template-columns: repeat(32, 1fr);
    grid-template-columns:
        repeat(16, minmax(0, 1fr))
        35px
        repeat(16, minmax(0, 1fr));
    grid-auto-rows: calc((min(100vw, 1920px) - 70px) / 32 ); /* Ensures rows match column height */
    row-gap: 1px;
    grid-auto-flow: dense;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-auto-rows: calc((min(100vw, 1920px) - 70px) / 12 ); /* Ensures rows match column height */
    row-gap: 1px;
    grid-auto-flow: dense;
}

.projects-list > *:nth-child(odd) {
    grid-column: 1 / 17;
}

.projects-list > *:nth-child(even) {
    grid-column: 18 / 34;
}



.projects-list video {object-fit: fill;}
.projects-list img {
    object-fit:contain; 
    object-position: top;
    width: 100%;
    height: 100%;
}

.projects-list .caption {display: none;}
.inner-top-row {
    position: relative;
}

/* SIZE OF OVERALL PROJECT INC ITS SPACING ETC */
.projects-list > .widescreen.video,
.projects-list > .landscape.video,
.projects-list > .superwidescreen.video,
.projects-list > .widescreen_4k.video,
.projects-list > .landscape.photography {
    
    grid-row: span 12; 
}
.projects-list > .portrait.video,
.projects-list > .portrait54.video,
.projects-list > .square.video,
.projects-list > .portrait-image {
  
    grid-row: span 12; 
   
}

/* DEFINES VIDEO or IMAGE WIDTH */
.projects-list > .widescreen.video .project-media, /* defines landscape videos width */
.projects-list > .landscape.video .project-media, 
.projects-list > .widescreen_4k.video .project-media, 
.projects-list > .superwidescreen.video .project-media,
.projects-list > .landscape.photography .project-media {
    width: 100%;
}

.projects-list > .landscape.photography .project-media {
    width: calc((min(100vw, 1920px) - 132px) / 32 * 12)
}

.projects-list > .portrait.video .project-media { /* defines portrait videos width */
    width: calc((min(100vw, 1920px) - 132px) / 32 * 6.75);  /* Makes it 4 blocks high (only works for portrait video */
}
.projects-list > .portrait54.video .project-media { /* defines portrait videos width */
    width: calc((min(100vw, 1920px) - 132px) / 32 * 9.6);  /* Makes it 4 blocks high (only works for portrait video */
}
.projects-list > .square.video .project-media { /* defines portrait videos width */
    width: calc((min(100vw, 1920px) - 132px) / 32 * 10 );  /* Makes it 4 blocks high (only works for portrait video */
}
.projects-list >  .portrait-image .project-media.film { /* defines portrait images width */
    width: calc((min(100vw, 1920px) - 132px) / 32 * 9.84);  /* Makes it 4 blocks high (only works for portrait video */
}
.projects-list > .portrait-image .project-media.photography { /* defines portrait images width */
    width: calc((min(100vw, 1920px) - 132px) / 32 * 7.83);  /* Makes it 4 blocks high (only works for portrait video */
}
.projects-list > .widescreen_4k.video .project-media {
     height: calc((min(100vw, 1920px) - 132px) / 32 * 9);
}
.projects-list > .widescreen_4k.video .video-container {
    padding-bottom: 56.25% !important;
} 

/* DEFINES POSITION OF TITLE BLOCK */

.work-project > a {position: relative;}

.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: absolute;
    top: 0px;
    max-width: calc((min(100vw, 1920px) - 70px) / 32 * 5 );
}
.projects-list > .portrait.video .project-title,
.projects-list > .portrait.video .my-role {
left: calc((min(100vw, 1920px) - 132px) / 32 * 6.75 + 12px);
}
.projects-list > .portrait-image.video .project-title,
.projects-list > .portrait-image.video .my-role  {
left: calc((min(100vw, 1920px) - 132px) / 32 * 9.84 + 12px);
}
.projects-list > .portrait-image.photography .project-title,
.projects-list > .portrait-image.photography .my-role  {
left: calc((min(100vw, 1920px) - 132px) / 32 * 7.83 + 12px);
}
.projects-list > .landscape.photography .project-title,
.projects-list > .landscape.photography .my-role  {
left: calc((min(100vw, 1920px) - 132px) / 32 * 12 + 12px);
}

.projects-list > .portrait54.video .project-title,
.projects-list > .portrait54.video .my-role {
left: calc((min(100vw, 1920px) - 132px) / 32 * 9.6 + 12px);
}
.projects-list > .square.video .project-title,
.projects-list > .square.video .my-role  {
left: calc((min(100vw, 1920px) - 132px) / 32 * 10 + 12px);
}

.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: calc((min(100vw, 1920px) - 70px) / 32 * 16 - 100px);
}


/* DEFINES POSITION OF ROLE BLOCK */
.projects-list .my-role {width: var(--block-size); position: absolute; bottom: 0px;}

.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 {
    width: auto;
    left: auto;
    right: 0px;
    top: calc((min(100vw, 1920px) - 70px) / 32 * 9);
    text-align: right;
}

.projects-list > .widescreen.video .my-role ul,
.projects-list > .landscape.video .my-role ul,
.projects-list > .superwidescreen.video .my-role ul,
.projects-list > .widescreen_4k.video .my-role ul {
    text-align: right;
} 


.projects-list .project-media:hover .videoblock,
.projects-list .project-media:hover figure {
    transform: scale(0.9);
}
.projects-list .videoblock, .projects-list figure  { transition: transform 0.3s ease-in-out;}
.projects-list a:hover {text-decoration: none !important;}



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

.project-video .video-item {display: none; /* Hide all videos initially */}
.video-item.active {display: block; /* Show only the active video */}
.video-selector {cursor: pointer;}
.video-selector:hover {text-decoration: underline;}
.hide {display: none;}

.project-videos {display: flex;}
.project-videos,
.single-film .wp-block-embed.is-type-video {margin-bottom: 30px !important;}

.project-further-info {position: relative;}

.project-text-container {display: flex;}
.project-text {
    margin-top: 0px;
    margin-right: var(--block-size) !important;
}
.single-film .wp-block-post-content > p:not([class]),
.single-photography .wp-block-post-content > p:not([class]) {width: calc((100vw - 204px) / 12 * 6 - 12px);}
.my-role {
    margin-top: -15px;
}

.more-films-list {
    position: absolute; 
    bottom: 45px; 
    left: 15px;
    width: var(--two-blocks-with-inner-spacing);
}
ul#video-list {
    font-size: 15px;
    text-transform: uppercase;
    margin-top: -20px;
}
ul#video-list li {
    transform: rotate(-20deg);
}
ul#video-list p {margin-block-end: 0px !important;}

ul#video-list li:hover, ul#video-list li.active {color: var(--color2);}

.back-button {
    display: inline-block;
    padding: 8px 15px;
    font-size: 14px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
    border-radius: 9999px;
    transition: background-color 0.3s ease-in-out;
    position: absolute;
    right: 35px;
    top:12vw;
}

.back-button:hover {
    background-color: #555;
}



    /* PORTRAIT LAYOUT */

    /* WIDTH of the video */

    .project-videos .videoblock.portrait,
    .project-text-container.portrait {
        width: calc((min(100vw, 1920px) - 132px) / 12 * 4 + 36px ); /* sets width of the video */
        width: 450px;
        }
    .project-videos .videoblock.portrait54,
    .project-text-container.portrait54 {
            width: calc((min(100vw, 1920px) - 132px) / 12 * 5.5 + 48px ); /* sets width of the video */
            width: 620px;
            }
    .project-videos .videoblock.square,
    .project-text-container.square {
        width: calc((min(100vw, 1920px) - 132px) / 12 * 6 + 60px ); /* sets width of the video */
        width: 675px;
        }
    
    /* sets height of the further info to match the video */

    .project-videos.portrait .project-further-info { /* sets height of the further info to match the video */
        height: calc(((min(100vw, 1920px) - 132px) / 12 * 4 + 36px ) / 9 * 16);
        height: calc(450px / 9 * 16);
    }
    .project-videos.portrait54 .project-further-info { /* sets height of the further info to match the video */
        height: calc(((min(100vw, 1920px) - 132px) / 12 * 5.5 + 48px ) / 4 * 5);
        height: calc(620px / 4 * 5);
    }
    .project-videos.square .project-further-info {
        height: calc((min(100vw, 1920px) - 132px) / 12 * 6 + 60px );
        height: 675px
    }


    .single-film video,
    .post-type-film video {object-fit: cover;}

    /* WIDESCREEN LAYOUT */

  
    /* WIDTH of the video */
    .project-videos .videoblock.widescreen,   
    .project-videos .videoblock.widescreen_4k,
    .project-videos .videoblock.superwidescreen,
    .project-text-container.widescreen,
    .project-text-container.widescreen_4k
    .project-text-container.superwidescreen {
        width: calc((min(100vw, 1920px) - 132px) / 12 * 9.5 + 108px ); /* sets width of the video */
        }
   
    /* HEIGHT of the further info to match the video */
    .project-videos.widescreen .project-further-info { /* sets height of the further info to match the video */
        height: calc(((min(100vw, 1920px) - 132px) / 12 * 9.5 + 108px )/ 16 * 9);
    }
    .project-videos.widescreen_4k .project-further-info { /* sets height of the further info to match the video */
        height: calc(((min(100vw, 1920px) - 132px) / 12 * 9.5 + 108px )/ 256 * 135);
    }
    .project-videos.superwidescreen .project-further-info { /* sets height of the further info to match the video */
        height: calc(((min(100vw, 1920px) - 132px) / 12 * 9.5 + 108px )/ 21 * 9);
    }    



/* Image Gallery */

.photography-title-meta {margin-top: calc(-1 * ((min(100vw, 1920px) - 132px) / 12 + 12px - 15px ));}

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

/* Top slideshow */

.page-slideshow-container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: calc((min(100vw, 1920px) - 70px) / 3 * 2);
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    overflow: hidden;
    background-color: #000; /* Optional: Background for contrast */
}

.page-slideshow-container .slide {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.slide.active {
    opacity: 1;
}
.page-slideshow-container .slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures images scale while maintaining aspect ratio */
    min-width: 100%;
    min-height: 100%;
}









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


/* INDENTS EVERY OTHER ROW */
.image-gallery > .landscape:nth-child(6n + 4)  {
    grid-column: span 6;
    margin-left: var(--block-with-one-space); 
}
.image-gallery > .portrait:nth-child(6n + 4)  {
    grid-column: span 5; 
   margin-left: var(--block-with-one-space); 
}

/* 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: calc((min(100vw, 1920px) - 132px) / 12 * 2.75 + 12px );  /* Makes it 4 blocks high (only works for portrait video */
}


#myModal::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
    z-index: -1; /* Ensures the overlay is behind the children */
}
.modal-content .portrait {max-height: 500px;}

.caption.left {text-align: left;}
.caption.centered_text {text-align: center;}
.caption.right {text-align: right;}







/* Work Preview Block new */

.page .wp-block-post-content > .filmphotoscrollblock,
.block-editor-block-list__block.wp-block-acf-workpreview {padding-right: 0px !important;}

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

.filmphotoscrollblock p, .filmphotoscrollblock h3 {margin: 10px 0 30px 0;}
.filmphotoscrollblock .terms.work-type {
    display: block;
    position: absolute;
    transform: rotate(-90deg);
    width: 38vw;
    bottom: 4vw;
    left: -4%;
}
.filmphotoscrollblock .column:last-child {text-align: right;}
.filmphotoscrollblock .column:last-child span p {padding-left:20%;}

.filmphotoscrollblock ul {
    list-style-type: none;
    padding: 0px;
  }

.filmphotoscrollblock li.work-project, .filmphotoscrollblock .workpreview figure  {
    position:relative;
    margin-bottom: 5vw;
}
  
.filmphotoscrollblock .work-list {
    display: flex;
    flex: 0 0 auto;
    white-space: nowrap; /* Prevent wrapping */
    list-style: none;
    padding: 0;
    margin: 0;
}
.filmphotoscrollblock figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.filmphotoscrollblock .work-carousel { 
    overflow-x: scroll; 
    display: flex;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #888 #e0e0e0; /* For Firefox */
    white-space: nowrap; /* Ensure content stays in a single line */
    scrollbar-gutter: stable both-edges; /* Ensure scrollbar space is always visible */
    clear: both;
    height: calc(38vw + 40px);
    overflow-y: hidden; /* Prevent vertical scrollbar in Safari */
}

/* Hide scrollbar in WebKit-based browsers (Safari, Chrome) */
.filmphotoscrollblock .work-carousel::-webkit-scrollbar {
    height: 5px; /* Set the height of the scrollbar */
    display: none; /* Hide scrollbar by default */
}

.filmphotoscrollblock .work-carousel::-webkit-scrollbar-track {
    background: #121212; /* Track color */
}

.filmphotoscrollblock .work-carousel::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar thumb color */
    border-radius: 10px; /* Rounded corners */
}

.filmphotoscrollblock .work-carousel::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker color on hover */
}

/* Show scrollbar on hover */
.filmphotoscrollblock .work-carousel:hover::-webkit-scrollbar {
    display: block; /* Show scrollbar on hover */
}

/* General overflow handling */
.filmphotoscrollblock .work-carousel {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}


.filmphotoscrollblock .video-item, .filmphotoscrollblock figure, .filmphotoscrollblock .terms.work-type {height: 38vw;}
.filmphotoscrollblock .work-list .widescreen {width:67.55vw;}
.filmphotoscrollblock .work-list .superwidescreen {width:88.67vw;}
.filmphotoscrollblock .work-list .square {width:38vw;}
.filmphotoscrollblock .work-list .portrait {width:21.37vw;}
.filmphotoscrollblock .work-list .portrait54 {width:30.4vw;}
.filmphotoscrollblock .work-list .landscape {width:57vw;}
.filmphotoscrollblock .work-list .portrait-image {width:25.33vw;}

.filmphotoscrollblock .work-carousel.only-one {height: calc(42.19vw + 40px); justify-content: flex-end;}
.filmphotoscrollblock .only-one .video-item, .filmphotoscrollblock .only-one figure{ height: 42.19vw;}
.filmphotoscrollblock .only-one .work-list .widescreen {width:75vw;}
.filmphotoscrollblock .only-one .work-list .superwidescreen {width:98.44vw;}
.filmphotoscrollblock .only-one .work-list .square {width:42.19vw;}
.filmphotoscrollblock .only-one .work-list .portrait {width:23.73vw;}
.filmphotoscrollblock .only-one .work-list .portrait54 {width:33.75vw;}
.filmphotoscrollblock .only-one .work-list .landscape {width:63.26vw;}
.filmphotoscrollblock .only-one .work-list .portrait-image {width:28.12vw;}

img.scroll-icon {float: right; width: 25px; margin-top: -25px;}
img.scroll-icon.left {display: none; margin-right: 25px;}



/* OTHER */

.worked-with-list {text-align: justify;}

.grid-item {
    width: var(--six-blocks-with-inner-spacing);
    height: var(--six-blocks-with-inner-spacing);
}
.grid-item > .videoblock {height: 100%;}

.portfoliohelperlink {font-size: 20px;}


.finance.colored {color: red;}
.brand.colored {color: green;}
.broadcast.colored {color: blue;}
.hospitality.colored {color: orange;}
.public.colored {color: violet;}
.charity.colored {color: yellow;}
.agency.colored {color: yellowgreen;}
.worked-with-list span {
    transition: color 0.5s ease-in-out; /* Smooth transition effect */
}
.worked-with-list .colored {
    color:var(--color2) !important;
}

.custom-cursor {
    position: absolute;
    width: 32px; /* Adjust size as needed */
    height: 32px;
    pointer-events: none; /* Prevents cursor blocking interactions */
    transform: translate(-50%, -50%); /* Centers the cursor */
    z-index: 10000; /* Ensures it's always on top */
    display: none; /* Hidden by default */
}



#equipment {
    scroll-margin-top: 150px;
}