/*== ALL PAGERS ==*/



body.page-about .entry-header {
    display: none;
}

.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-top-btn img {
    width: 50px; /* adjust as needed */
    height: auto;
}

.scroll-top-btn.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* === MARGIN === */

.sponsor-logos-grid,
.video-row,
.video-row-mix,
.container2photos,
.popup-photo-block {
    margin-bottom: 127px !important;
}

.container-photos,
.container3photos {
    margin-bottom: 68px !important;
}

.sponsor-logos {
    margin-top: 13px;
}

h2.Section-title {
    font-size: clamp(16px, 3vw, 60px) !important;
}


/* SPONSOR LOGOS */

.sponsor-logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
        gap: 30px;
        width: 100%;
        margin: 0 auto;
        border-bottom: 2px solid;
        padding-bottom: 54px;
}

.sponsor-logo-wrapper {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3c5762;  /* Background color for the logo container */
    aspect-ratio: 196 / 129;
    width: 100%;
    padding: 5px;
    flex: 0 1 160px;
}

.sponsor-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Ensures logos maintain their aspect ratio and fit within the holder */
    border-radius: 5px;  /* Optional: rounded corners for logos */
}

.sponsor-logos-section {
    margin-bottom: 40px; /* Optional: Adds spacing below the section */
}

/* Plain Title */
.sponsor-logos-title {
    text-align: center; /* Center align the title */
    margin-bottom: 30px; /* Space between title and the grid */

}

/* 2 VIDEOS STYLE*/

.more-button {
    display: flex;
}

.hoverable-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    object-fit: contain;
    width: 80px;
    height: 40px;
    transition: background-image 0.3s ease;
}

.more-link:hover .hoverable-icon {
    background-image: url('/wp-content/themes/storefront/assets/images/puscica-hover.svg') !important;
}

.hentry .entry-content a {
    text-decoration: none !important; 
}

.cases-text {
    font-variation-settings: "slnt" 0, "wght" 500;
    line-height: 1;
    padding-right: 10px;
    margin: 0 !important;
}

.video-row {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
}

.video-row-mix {
    display: flex;
    gap: 40px;
    justify-content: space-between;
}

.video-row .video-block {
    padding-bottom: 36px; /* Uniform spacing so layout stays even */
}

.video-row .video-block:nth-child(2) {
    border-bottom: 1px solid white;
}

.video-row img {
    border-radius: unset !important;
}

.video-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.video-thumbnail-container {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.video-thumbnail-container:hover img {
    transform: scale(1.05);
}

.photo-popup .video-thumbnail-container:hover img {
    transform: none !important;
}


.video-thumbnail-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Adjust this for more/less gradient */
    background: linear-gradient(to top, #181B23, transparent);
    z-index: 2;
    pointer-events: none;
}

.video-thumbnail-container:hover .hover-text,
.photo-thumbnail-container:hover .hover-text {
    opacity: 1;
    transform: translateY(0); /* Slide up into place */
    display: block;
}


.video-thumbnail-container img,
.photo-thumbnail-container img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    display: block; /* Removes weird inline spacing */
    width: 100%; 
}

.photo-thumbnail-container {
    position: relative;
    overflow: hidden;
}

.photo-thumbnail-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(24, 27, 35, 0.8), transparent);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.photo-thumbnail-container:hover::after {
    opacity: 1;
}



.hover-text {
    position: absolute;
    bottom: 0;
    left: 10px;
    margin-left: 13px;
    color: white;
    font-size: 0.7rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
    z-index: 3;
    pointer-events: none;
    /* font-size: 0.7rem; */
    z-index: 3;
}

.video-thumbnail-container .hover-text,
.photo-thumbnail-container .hover-text {
    display: block;
}

p.client-name {
    font-size: 14px;
    margin: unset;
    font-weight: bold;
    font-variation-settings: "slnt" 0, "wght" 520;
    margin-bottom: 5px;
}

p.production-name {
    margin: unset;
    font-size: 12px;
}

p.role-name {
    margin: unset;
    margin-bottom: 13px;
    font-variation-settings: "slnt" 0, "wght" 520;
    color: #93CDFB !important;
    transition: color 0.3s ease;
}
.video-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 5vh 5vw;
    box-sizing: border-box;
    overflow: hidden;
    gap: 10px;
  }
  
  /* Header for the close button */
  .overlay-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    z-index: 10;
  }
  
  /* Close button itself */
  .close-video {
    font-size: 2.5rem;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s;
    z-index: 10;
    padding: unset !important;
    text-decoration: none !important;

  }
  
  .close-video:hover {
    transform: scale(1.2);
    background-color: unset;
    border-color: unset;
  }
  
  /* Container that takes the rest of the space */
  .video-container {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 90%;
  }
  
  /* Maintain aspect ratio inside available space */
  .responsive-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
  }
  
  .responsive-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
  }

.title-vid {
    flex-direction: column;
    padding-top: 50px;
}


.fake-bottom-border {
    height: 36px;
    width: 100%;
    border-bottom: 1px solid white;
    pointer-events: none;
}


/* TWO PHOTOS - RIGHT TITLE */

.container2photos {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 115px;
}

.title-photo-wrapper {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.title-button-block {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 21px;
}

.title-button-block-1 {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 21px;
}

.Section-title {
    margin-bottom: unset !important;
    white-space: nowrap;
}

.title-photo {
    display: flex;
    justify-content: flex-start;
    flex: 1;
    width: 100%;
    position: relative;
}

.title-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.title-photo .hover-text {
    position: absolute;
    bottom: 0;
    right: 0px;
    color: white;
    font-size: 0.7rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease-in-out;
    z-index: 3;
    pointer-events: none;
    z-index: 3;
}

.title-photo:hover .hover-text {
    opacity: 1;
    transform: translateY(0);
}

.photo1left,
.photo2right {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-bottom: 1px solid white;
    padding-bottom: 36px;
}

.first-photo {
    flex: 1 1 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo2left,
.photo1right {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.lefty {
    position: relative; /* required so .hover-text can position absolutely inside */
}

.lefty .hover-text {
    position: absolute;
    margin-left: unset;
    bottom: 0px;       /* add spacing if needed */
    left: auto;
    right: auto;
    color: white;
    font-size: 0.7rem;
    opacity: 0;
    transform: translateY(10px); /* optional for fade-in */
    transition: all 0.5s ease-in-out;
    z-index: 3;
    pointer-events: none;
}

/* VIDEO MASONRY */
/*
.column:nth-child(1) {
    background-color: rgba(255, 0, 0, 0.479);
}
.column:nth-child(2) {
    background-color: rgba(0, 255, 0, 0.519); 
}
.column:nth-child(3) {
    background-color: rgba(0, 0, 255, 0.54); 
}
*/
.video-masonry,
.image-masonry {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
}

.video-thumbnail-clickable {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 44px;
}
  
.column {
    flex: 1;
    min-width: 250px;
}
  
.item {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin: 0px 0px 44px 0px;
}

/* LAYOUT IMAGE 1*/

p.source-text {
    margin: 0 0 5px;
    display: flex;
    justify-content: flex-end;
    font-size: xx-small;
}

.container3photos {
    display: flex;
    flex-direction: row;
    gap: 68px;
    align-items: stretch;
}

.first-photo-block {
    flex: 1;
    display: flex;
}

.first-photo-left {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.container2 {
    display: flex;
    flex: 1;
    width: 50%;
    gap: 68px;
    flex-direction: column;
    justify-content: space-between;
}

img.third-photo-right {
    height: auto;
    object-fit: cover;
}

/* LAYOUT IMAGE 2 */

.container-photos {
    display: flex;
    justify-content: space-between;
    gap: 68px;
    align-items: stretch;
}

.container-photos > div {
    flex: 1;
    display: flex;
}

.container-photos img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* ABOUT */
.photo-text-contact-block {
    display: flex;
    flex-direction: row;
    gap: 190px;
    margin-bottom: 60px;
    justify-content: center;
}

.left-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.left-image {
    display: flex;
    flex: 1 1;
}

.right-content {
    flex: 1;
    display: flex;
    flex-direction: column; 
    justify-content: center;
}

.text-content {
    margin: 20px 0;
    margin-bottom: 65px;
    text-align: justify;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: bold;
}

.email,
.phone {
    display: flex;
    flex-direction: row;
    gap: 5px;
    transition: transform 0.3s ease;
}

.email a {
    text-decoration: none !important;
}

.icon {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease;
}

.hover-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.email a,
.phone span {
    transition: color 0.3s ease; /* Apply transition here */
}

.email a:hover,
.phone span:hover {
    color: #93CDFB !important;
}

.email .hover-group:hover .icon {
    background-image: url('/wp-content/themes/storefront/assets/images/mail-hover.svg') !important;
}

.phone .hover-group:hover .icon {
    background-image: url('/wp-content/themes/storefront/assets/images/phone-hover.svg') !important;
}
.cta {
    margin: unset !important;
}

/*TWO VIDEOS*/

.video-rows-2 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.video-row-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.video-row-2 .item-2 {
    width: calc(100% / 3 - 1rem); /* 3 videos per row max, adjust as needed */
}

@media (max-width: 950px) { 

    body.page-about .entry-header {
        display: block;
    }

    body.page-about h2 {
        display: none;  /* Hide the H2 title for the About page on mobile */
    }

    header.site-header {
        padding-bottom: 40px !important;
        margin-bottom: unset !important;
    }

    .video-row, 
    .video-row-mix, 
    .container2photos,
    .popup-photo-block {
        margin-bottom: 40px !important;
    }

    h2.Section-title {
        font-size: clamp(16px, 8vw, 60px) !important;
    }

    .title-button-block-1,
    .title-button-block {
        gap: unset;
    }

    .title-vid {
        padding-top: unset;
    }

    .hoverable-icon {
        width: 70px;
        height: 30px;
    }

    /* BLOCK DISPLAYS */

    .video-row-mix,
    .container2photos {
        flex-direction: column;
        gap: 19px;
    }

    .video-row {
        flex-direction: column;
        gap: unset;
    }

    .video-row .video-block,
    .title-button-block-1 {
        padding-bottom: 19px;
        gap: 0px;
    }

    .hover-text {
        opacity: 1 !important;
        transform: translateY(0) !important;
        display: block !important;
        pointer-events: none;
        position: absolute; /* stays over the image */
        bottom: 0;
        left: 10px;
        z-index: 3;
        margin-left: 4px;
        margin-right: 5px;
    }

    p.role-name,
    p.production-name {
        font-size: 10px;
    }

    p.client-name {
        font-size: 12px;
        margin-bottom: unset;
    }
    
    .video-thumbnail-container:hover img {
        transform: none; /* cancel zoom on mobile */
    }
    
    .video-thumbnail-container:hover .hover-text,
    .photo-thumbnail-container .hover-text {
        /* Disable hover effect on mobile */
        transform: translateY(0);
        opacity: 1;
    }

    .photo-thumbnail-container::after {
        opacity: 1;
    }

    .title-photo-wrapper {
        display: contents; /* flatten wrapper so its children act as direct siblings */
    }

    .video-thumbnail-container::after {
        height: 40%; /* Adjust this for more/less gradient */
    }
    

    .title-button-block {
		order: 1;
	}

	.first-photo {
		order: 2;
	}

	.title-photo {
		order: 3;
	}

    .lefty .hover-text {
        right: 0;
        margin-right: 0px;
    }

    /* LOGO GRID*/
    .sponsor-logo-wrapper {
        flex: 0 1 100px;
    }

    .sponsor-logos-grid {
        gap: 10px;
        padding-bottom: 18px;
        margin-bottom: unset !important;
    }

    /* VIDEO GRID */
    .row {
        flex-direction: column;
        gap: unset;
    }

    /* CONTAINER PHOTOS */

    .container3photos, .container-photos {
        flex-direction: column;
        margin-bottom: 20px !important;
    }

    .container2 {
        width: unset;
        gap: 20px;
    }

    .container3photos, .container-photos{
        gap: 20px;
    }

    /* ABOUT */

    .photo-text-contact-block {
        flex-direction: column-reverse;
        gap: 40px;
    }
    
    .email .hover-group:hover .icon {
        background-image: url('/wp-content/themes/storefront/assets/images/mail.svg') !important;
    }

    .phone .hover-group:hover .icon {
        background-image: url('/wp-content/themes/storefront/assets/images/phone.svg') !important;
    }

    .email .hover-group:hover a,
    .phone .hover-group:hover span {
        color: white !important;
    }
}