/* =========================================
   GALLERY HERO
========================================= */

.page-hero-gallery {
   position: relative;
   min-height: 70vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background:
      linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
      url("../images/hero/hero-gallery.jpg");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
}


/* =========================================
   GALLERY INTRO
========================================= */

.gallery-intro {
   background: var(--white);
}

.gallery-intro-image {
   overflow: hidden;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
}

.gallery-intro-image img {
   width: 100%;
   transition: .45s ease;
}

.gallery-intro-image:hover img {
   transform: scale(1.05);
}

.gallery-highlights {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   margin-top: 2rem;
}

.highlight-item {
   display: flex;
   align-items: center;
   gap: .85rem;
   padding: 1rem 1.25rem;
   background: var(--section-gray);
   border-radius: var(--radius-md);
}

.highlight-item i {
   color: var(--primary);
   font-size: 1.3rem;
}

.highlight-item span {
   font-weight: 500;
}

@media(max-width:768px) {

   .gallery-highlights {
      grid-template-columns: 1fr;
   }

}


/* =========================================
   FEATURED SHOWCASE
========================================= */

.featured-gallery {
   background: var(--bg-light);
}

.featured-grid {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 1.5rem;
}

.featured-large img,
.featured-side img,
.featured-bottom img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: var(--radius-lg);
   transition: .4s ease;
}

.featured-large {
   height: 650px;
   overflow: hidden;
}

.featured-side {
   display: grid;
   gap: 1.5rem;
}

.featured-side img {
   height: 206px;
}

.featured-bottom {
   grid-column: span 2;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
}

.featured-bottom img {
   height: 260px;
}

.featured-large,
.featured-side img,
.featured-bottom img {
   overflow: hidden;
   border-radius: var(--radius-lg);
}

.featured-grid img:hover {
   transform: scale(1.05);
}

@media(max-width:991px) {

   .featured-grid {
      grid-template-columns: 1fr;
   }

   .featured-bottom {
      grid-column: auto;
   }

   .featured-large {
      height: 450px;
   }

}

@media(max-width:767px) {

   .featured-side {
      grid-template-columns: 1fr;
   }

   .featured-bottom {
      grid-template-columns: 1fr;
   }

}


/* =========================================
   GALLERY GRID
========================================= */

.gallery-grid-section {
   background: var(--white);
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
}

.gallery-item {
   position: relative;
   overflow: hidden;
   border-radius: var(--radius-lg);
}

.gallery-item img {
   width: 100%;
   height: 320px;
   object-fit: cover;
   transition: .45s ease;
}

.gallery-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .45);
   opacity: 0;
   transition: .35s ease;
}

.gallery-overlay i {
   color: var(--white);
   font-size: 2rem;
}

.gallery-item:hover img {
   transform: scale(1.08);
}

.gallery-item:hover .gallery-overlay {
   opacity: 1;
}

@media(max-width:1200px) {

   .gallery-grid {
      grid-template-columns: repeat(3, 1fr);
   }

}

@media(max-width:768px) {

   .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
   }

}

@media(max-width:576px) {

   .gallery-grid {
      grid-template-columns: 1fr;
   }

}

/* =========================================
   GALLERY SHOWCASE
========================================= */

.gallery-showcase {
   position: relative;
   padding: 140px 0;
   background:
      linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
      url("../images/bg/gallery-showcase.jpg") center/cover fixed;
}

.gallery-showcase-overlay {
   position: absolute;
   inset: 0;
}

.gallery-showcase .container {
   position: relative;
   z-index: 2;
}

.gallery-showcase-content {
   max-width: 700px;
   text-align: center;
   margin: auto;
}

.gallery-showcase .section-tag {
   color: var(--accent);
}

.gallery-showcase h2 {
   color: var(--white);
   margin: 1rem 0;
}

.gallery-showcase p {
   color: rgba(255, 255, 255, .88);
   margin-bottom: 2rem;
}

.gallery-showcase-actions {
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.gallery-showcase-actions .btn-primary {
   background: var(--primary);
   border-color: var(--primary);
}

.gallery-showcase-actions .btn-primary:hover{
   background: var(--primary-dark);
   border-color: var(--primary-dark);
}

.gallery-showcase-actions .btn-outline {
   border-color: var(--white);
   color: var(--white);
}

.gallery-showcase-actions .btn-outline:hover {
   background: var(--white);
   color: var(--primary);
}

@media(max-width:768px) {

   .gallery-showcase-actions {
      flex-direction: column;
   }

}