/* Global Classes  */
section {
    padding: 4rem;
}
@media (max-width: 768px) {
    section {
        padding: 2rem;
    }
}
/* Header Section */
#banner-section {
    padding: 0 !important;
}
#header-banner {
    width: 100%;
    padding-top: 28.9%;
    background-size: cover !important;
    background-position-y: center !important;
    background-position-x: center !important;
    background-image: url(https://www.mediasetitalia.ca/wp-content/uploads/page-assets/nota-bene-desktop.jpg);
}

@media only screen and (max-width: 1100px) {
    #header-banner {
        padding-top: 65.9%;
        background-image: url(https://www.mediasetitalia.ca/wp-content/uploads/page-assets/nota-bene-mobile.jpg);
    }
}
#description-section {
    padding: 4rem 4rem 0rem !important;
}
#page-description {
    max-width: 1000px;
    margin: auto;
    font-size: 18px;
    text-align: center;
    color: #000;
}

#search-field-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 4px inset #0008;
    background: white;
    width: 100%;
    max-width: 1240px;
    margin: auto auto 2rem;
}
#search-field-wrapper i {
    position: absolute;
    left: 10px;
    color: grey;
    font-size: 20px;
}
#search-field {
    border: none;
    margin: 2px;
    padding-left: 40px;
    font-weight: 500;
    font-size: 18px;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}

.video-library {
    display: block;
    justify-content: center;
    max-width: 1240px;
    margin: auto;
}
/* Grid */
#videoGrid.nb-video-grid { 
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:1rem;
 }
.videoContainer { 
    background:#004d64;
    color:#fff;
    border-radius: .5rem;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.15); transition:transform .12s ease, box-shadow .12s ease; cursor:pointer;
 }
.videoContainer:hover, .videoContainer:focus { 
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.22);
    outline:none;
 }
.thumb-wrap { 
    position:relative;
    aspect-ratio:16/9;
    background:#033f50;
 }
.videoThumbnail { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block; 
}
.play-btn { 
    position:absolute; 
    inset:0; 
    margin:auto; 
    width:64px; 
    height:64px; 
    border-radius:50%; 
    background:rgba(255,255,255,.22);
}
.play-btn::before { 
    content:""; 
    position:absolute; 
    inset:0; 
    margin:auto; 
    width:0; 
    height:0; 
    border-left:18px solid #fff; 
    border-top:12px solid transparent; 
    border-bottom:12px solid transparent; 
    transform: translateX(6px); 
}
.videoTitle { 
    padding:10px 12px 4px; 
    font-size:15px; 
    font-weight:700; 
    line-height:1.2;
 }
.videoDesc { padding:0 12px 12px; font-size:14px; line-height:1.35; opacity:.95; }
.no-results { color:#000; font-weight:700; text-align:center; padding:24px 0 8px; }

/* Lightbox */
.lightbox { position:fixed;
    inset:0;
    display:none;
    background:rgba(0,0,0,.85);
    z-index:9999; padding:16px;
    justify-content:center;
    align-items:center;
}
.lightbox-content { 
    position:relative; 
    width:min(1240px, 96vw); 
    max-height:92vh; 
    display:grid; 
    grid-template-columns: 1fr 340px; 
    gap:2rem;
 }
.lb-player { grid-column:1 / 2; }
.lb-meta   { grid-column:2 / 3; color:#fff; overflow:auto; }
.lb-title { margin:0 0 8px; font-size:20px; line-height:1.25; }
.lb-desc  { margin:0 0 12px; font-size:15px; line-height:1.35; opacity:.95; }
.lb-actions { display:flex; align-items:center; gap:10px; }
.lb-btn { 
    background: #004d64; 
    border:none; 
    color:#fff; 
    font-weight:700; 
    padding:10px 14px;     
    border-radius: .5rem; 
    cursor:pointer; 
}
.lb-share-status { font-size:13px; opacity:.9; }
.lb-nav { 
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    align-items: center;
 }
.lb-nav-btn { 
    pointer-events:auto;
    background:rgb(0, 77, 100, .65);
    border:none; 
    color:#fff;
    font-size:24px; 
    font-weight: 600;
    width:44px;
    height:44px; 
    border-radius:50%;
    cursor:pointer; 
    margin:8px; 
}
.lb-nav-btn:disabled { 
    opacity:.35; 
    cursor:not-allowed;
 }
.lb-close { 
    position:absolute;
    top: -4rem;
    right:0; 
    width:40px; 
    height:40px; 
    border-radius:50%; 
    border:none; 
    background:rgba(0,0,0,.55); 
    color:#fff; font-size:22px; 
    cursor:pointer; 
}

/* Mobile */
@media (max-width: 768px){
  .lightbox-content { 
    grid-template-columns: 1fr;
    gap:2rem;
  }
  .lb-player, .lb-meta { grid-column: 1 / -1; }
  .lb-title { font-size:18px; }
  .lb-desc  { font-size:14px; }
  .lb-nav {
    bottom: -4rem;
    height: auto;
    align-items: flex-end;
  }
  .lb-nav-btn {
    margin: auto 0 !important;
  }
  
}

/* Load more */
.load-more { 
    text-align:center;
    margin:18px 0 8px;
}
.load-more-btn { 
    display:inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: .5rem;
    background: #004d64;
    color: #fff;
    font-weight: 700;
    border: 2px solid #004d64;
    cursor: pointer;
}


#driver-section {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #30393e;
}
.driver-container {
    display: flex;
    gap: 1rem;
    max-width: 1240px;
}
.driver-item {
    width: 50%;
}
.driver-item img {
    width: 100%;
}
.driver-item h1 {
    color: #fff;
    font-size: 20px;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
}
.img-desktop {
    display: none;
}

@media (max-width: 768px) {
    .driver-container {
        flex-direction: column;
    }
    .img-desktop {
        display: block;
    }
    .img-mobile {
        display: none;
    }
    .driver-item {
        width: 100%;
    }
    .mobile-whitespace {
        height: 2px;
        background-color: #fff;
        margin: 20px 0;
    }
}

@media screen and (max-width: 580px) {
    .driver-item h1 {
        font-size: 16px;
    }
}