/* Gallery
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gallery-section { padding: var(--section-padding-y) 0; }
.gallery-intro { margin-bottom: 3rem; }
.gallery-intro .section-title { margin-bottom: 1rem; }
.gallery-intro > p { margin-bottom: 0; color: var(--color-text-muted); }

@media (max-width: 991.98px) {
   .gallery-section { padding: var(--section-padding-y-md) 0; }
   .gallery-intro { margin-bottom: 2.5rem; }
}

@media (max-width: 575.98px) {
   .gallery-section { padding: var(--section-padding-y-sm) 0; }
   .gallery-intro { margin-bottom: 2rem; }
}


/* Photo Gallery Card
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.photo-gallery-card {
   height: 100%;
   overflow: hidden;
   border: var(--border-width) solid var(--color-border-light);
   border-radius: var(--border-radius-xl);
   background-color: var(--color-white);
   box-shadow: var(--shadow-sm);
   transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.photo-gallery-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
}

.photo-gallery-cover {
   position: relative;
   display: block;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background-color: var(--color-background-soft);
}

.photo-gallery-cover img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow);
}

.photo-gallery-card:hover .photo-gallery-cover img { transform: scale(1.05); }

.photo-gallery-cover::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 45%, rgba(18, 63, 105, 0.45) 100%);
}

.photo-gallery-count {
   position: absolute;
   left: 1rem;
   bottom: 1rem;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   padding: 0.5rem 0.75rem;
   border-radius: var(--border-radius-md);
   font-size: 0.8rem;
   font-weight: var(--font-weight-bold);
   color: var(--mybone-primary-deep);
   background-color: var(--mybone-accent);
}

.photo-gallery-view {
   position: absolute;
   right: 1rem;
   bottom: 1rem;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.25rem;
   height: 2.25rem;
   border-radius: 50%;
   color: var(--color-white);
   background-color: rgba(8, 119, 187, 0.88);
   transition: transform var(--transition-normal), background-color var(--transition-normal);
}

.photo-gallery-card:hover .photo-gallery-view {
   transform: translateX(3px);
   background-color: var(--mybone-primary);
}

.photo-gallery-card-content { padding: 1.5rem; }

.photo-gallery-date {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   margin-bottom: 0.65rem;
   font-size: 0.82rem;
   font-weight: var(--font-weight-semibold);
   color: var(--mybone-primary);
}

.photo-gallery-date i { color: var(--mybone-accent-dark); }

.photo-gallery-card h3 { margin-bottom: 0.65rem; }
.photo-gallery-card h3 a { color: var(--mybone-primary-deep); }
.photo-gallery-card h3 a:hover { color: var(--mybone-primary); }

.photo-gallery-card p {
   margin-bottom: 1.25rem;
   font-size: 0.95rem;
   color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
   .photo-gallery-card-content { padding: 1.25rem; }
   .photo-gallery-count { left: 0.75rem; bottom: 0.75rem; }
   .photo-gallery-view { right: 0.75rem; bottom: 0.75rem; }
}


/* Gallery Empty State
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gallery-empty {
   display: flex;
   align-items: center;
   gap: 1rem;
   max-width: 720px;
}

.gallery-empty h3 { margin-bottom: 0.25rem; }
.gallery-empty p { margin-bottom: 0; color: var(--color-text-muted); }

@media (max-width: 575.98px) {
   .gallery-empty { align-items: flex-start; }
}


/* Photo Gallery Detail
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gallery-detail-section { padding: var(--section-padding-y) 0; }

.gallery-detail-heading {
   max-width: 920px;
   margin-bottom: 2.5rem;
}

.gallery-detail-meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 1.25rem;
   margin-bottom: 0.85rem;
   font-size: 0.85rem;
   font-weight: var(--font-weight-semibold);
   color: var(--mybone-primary);
}

.gallery-detail-meta span {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
}

.gallery-detail-meta i { color: var(--mybone-accent-dark); }

.gallery-detail-heading h1 {
   margin-bottom: 1rem;
   font-size: clamp(2rem, 4vw, 3.25rem);
   font-weight: var(--font-weight-extrabold);
   letter-spacing: -0.035em;
}

.gallery-detail-heading > p {
   margin-bottom: 0;
   font-size: 1.05rem;
   line-height: 1.75;
   color: var(--color-text-muted);
}

@media (max-width: 991.98px) {
   .gallery-detail-section { padding: var(--section-padding-y-md) 0; }
}

@media (max-width: 575.98px) {
   .gallery-detail-section { padding: var(--section-padding-y-sm) 0; }
   .gallery-detail-heading { margin-bottom: 2rem; }
}


/* Photo Grid
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.photo-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
}

.photo-grid-item {
   position: relative;
   display: block;
   aspect-ratio: 4 / 3;
   width: 100%;
   padding: 0;
   overflow: hidden;
   border: 0;
   border-radius: var(--border-radius-lg);
   background-color: var(--color-background-soft);
   cursor: pointer;
}

.photo-grid-item img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow);
}

.photo-grid-item::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 55%, rgba(18, 63, 105, 0.62) 100%);
   opacity: 0;
   transition: opacity var(--transition-normal);
}

.photo-grid-item:hover img { transform: scale(1.04); }
.photo-grid-item:hover::after { opacity: 1; }

.photo-grid-caption {
   position: absolute;
   right: 1rem;
   bottom: 1rem;
   left: 1rem;
   z-index: 2;
   overflow: hidden;
   font-size: 0.85rem;
   font-weight: var(--font-weight-semibold);
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--color-white);
   opacity: 0;
   transform: translateY(6px);
   transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.photo-grid-item:hover .photo-grid-caption {
   opacity: 1;
   transform: translateY(0);
}

.photo-grid-zoom {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.25rem;
   height: 2.25rem;
   border-radius: 50%;
   color: var(--color-white);
   background-color: rgba(18, 63, 105, 0.78);
   opacity: 0;
   transform: scale(0.9);
   transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.photo-grid-item:hover .photo-grid-zoom {
   opacity: 1;
   transform: scale(1);
}

@media (max-width: 991.98px) {
   .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
   .photo-grid { grid-template-columns: 1fr; gap: 0.75rem; }

   .photo-grid-caption,
   .photo-grid-zoom {
      opacity: 1;
      transform: none;
   }

   .photo-grid-item::after { opacity: 1; }
}


/* Photo Modal
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gallery-photo-modal .modal-body {
   position: relative;
   padding: 0;
   overflow: hidden;
   background-color: var(--color-black);
}

.gallery-modal-counter {
   margin-top: 0.15rem;
   font-size: 0.8rem;
   color: var(--color-text-muted);
}

.gallery-modal-image {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 300px;
   max-height: calc(100vh - 180px);
}

.gallery-modal-image img {
   display: block;
   max-width: 100%;
   max-height: calc(100vh - 180px);
   object-fit: contain;
}

.gallery-modal-caption {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
   padding: 1rem 5rem;
   text-align: center;
   color: var(--color-white);
   background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}

.gallery-modal-caption[hidden] { display: none; }

.gallery-modal-nav {
   position: absolute;
   top: 50%;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
   border: 0;
   border-radius: 50%;
   color: var(--color-white);
   background-color: rgba(0, 0, 0, 0.48);
   transform: translateY(-50%);
   transition: background-color var(--transition-normal);
}

.gallery-modal-nav:hover { background-color: rgba(0, 0, 0, 0.72); }
.gallery-modal-prev { left: 1rem; }
.gallery-modal-next { right: 1rem; }

@media (max-width: 575.98px) {
   .gallery-modal-caption {
      padding-right: 4rem;
      padding-left: 4rem;
      font-size: 0.85rem;
   }

   .gallery-modal-nav {
      width: 2.4rem;
      height: 2.4rem;
   }

   .gallery-modal-prev { left: 0.5rem; }
   .gallery-modal-next { right: 0.5rem; }
}


/* Gallery Back Link
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gallery-back-link {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   margin-top: 2.5rem;
   font-weight: var(--font-weight-semibold);
}

.gallery-back-link i { transition: transform var(--transition-normal); }
.gallery-back-link:hover i { transform: translateX(-4px); }



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

VIDEO GALLERY

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



/* Video Gallery Card
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.video-gallery-card {
   height: 100%;
   overflow: hidden;
   border: var(--border-width) solid var(--color-border-light);
   border-radius: var(--border-radius-xl);
   background-color: var(--color-white);
   box-shadow: var(--shadow-sm);
   transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.video-gallery-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
}

.video-gallery-cover {
   position: relative;
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background-color: var(--color-background-soft);
}

.video-gallery-cover::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(18, 63, 105, 0.04) 25%, rgba(18, 63, 105, 0.55) 100%);
   transition: background-color var(--transition-normal);
}

.video-gallery-cover img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow);
}

.video-gallery-card:hover .video-gallery-cover img { transform: scale(1.05); }

.video-gallery-play {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 4.25rem;
   height: 4.25rem;
   padding-left: 0.2rem;
   border: 3px solid rgba(255, 255, 255, 0.85);
   border-radius: 50%;
   font-size: 1.25rem;
   color: var(--color-white);
   background-color: rgba(8, 119, 187, 0.88);
   box-shadow: var(--shadow-md);
   transform: translate(-50%, -50%);
   transition: transform var(--transition-normal), background-color var(--transition-normal);
}

.video-gallery-card:hover .video-gallery-play {
   background-color: var(--mybone-primary);
   transform: translate(-50%, -50%) scale(1.08);
}

.video-gallery-label {
   position: absolute;
   left: 1rem;
   bottom: 1rem;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   padding: 0.5rem 0.75rem;
   border-radius: var(--border-radius-md);
   font-size: 0.8rem;
   font-weight: var(--font-weight-bold);
   color: var(--color-white);
   background-color: rgba(18, 63, 105, 0.88);
}

.video-gallery-label i { color: var(--mybone-accent); }

.video-gallery-card-content { padding: 1.5rem; }

.video-gallery-date {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   margin-bottom: 0.65rem;
   font-size: 0.82rem;
   font-weight: var(--font-weight-semibold);
   color: var(--mybone-primary);
}

.video-gallery-date i { color: var(--mybone-accent-dark); }

.video-gallery-card h3 { margin-bottom: 0.65rem; }
.video-gallery-card h3 a { color: var(--mybone-primary-deep); }
.video-gallery-card h3 a:hover { color: var(--mybone-primary); }

.video-gallery-card p {
   margin-bottom: 1.25rem;
   font-size: 0.95rem;
   color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
   .video-gallery-card-content { padding: 1.25rem; }
   .video-gallery-label { left: 0.75rem; bottom: 0.75rem; }

   .video-gallery-play {
      width: 3.75rem;
      height: 3.75rem;
      font-size: 1.1rem;
   }
}


/* Video Detail
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.video-detail-section { padding: var(--section-padding-y) 0; }

.video-detail-heading {
   max-width: 920px;
   margin-bottom: 2rem;
}

.video-detail-date {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   margin-bottom: 0.75rem;
   font-size: 0.85rem;
   font-weight: var(--font-weight-semibold);
   color: var(--mybone-primary);
}

.video-detail-date i { color: var(--mybone-accent-dark); }

.video-detail-heading h1 {
   margin-bottom: 0;
   font-size: clamp(2rem, 4vw, 3.25rem);
   font-weight: var(--font-weight-extrabold);
   letter-spacing: -0.035em;
}

.video-detail-player {
   overflow: hidden;
   border-radius: var(--border-radius-xl);
   background-color: var(--color-black);
   box-shadow: var(--shadow-md);
}

.video-detail-player iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
}

.video-detail-description {
   max-width: 920px;
   margin-top: 2.5rem;
}

.video-detail-description .section-eyebrow { margin-bottom: 0.75rem; }

.video-detail-description p {
   margin-bottom: 0;
   font-size: 1.05rem;
   line-height: 1.8;
   color: var(--color-text);
}

@media (max-width: 991.98px) {
   .video-detail-section { padding: var(--section-padding-y-md) 0; }
   .video-detail-description { margin-top: 2rem; }
}

@media (max-width: 575.98px) {
   .video-detail-section { padding: var(--section-padding-y-sm) 0; }
   .video-detail-heading { margin-bottom: 1.5rem; }

   .video-detail-player { border-radius: var(--border-radius-lg); }

   .video-detail-description {
      margin-top: 1.5rem;
   }
}