/*
=============================================================
TRILOGIX INSTITUTE WEBSITE
File: gallery-mobile-final.css
Purpose: Final gallery mobile responsive adjustments.
Maintenance note: Related rules and logic are grouped and documented by feature.
=============================================================
*/

/*
STYLE ORGANIZATION
- Base/component rules define the default desktop presentation.
- State classes such as .active, .show, and :hover control interactions.
- Media queries near the relevant rules adapt the layout for tablet and mobile screens.
*/

/* Final gallery cleanup and mobile layout */
/* Campus badges are intentionally removed from gallery cards. */
.photo-topline,
.photo-campus,
.campus-label{
  display:none !important;
}
/* Gallery layout */
.photo-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:1.25rem !important;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:1199.98px){
  .photo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){
  .photo-grid{
    grid-template-columns:1fr !important;
    gap:1.15rem !important;
  }
.photo-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}
.photo-media{
  width:100% !important;
  aspect-ratio:16/9 !important;
}
.photo-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){
  .photo-grid{
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }
.photo-media{
  aspect-ratio:4/3 !important;
}
.photo-card{
  border-radius:18px !important;
}
}
/* Final refinements */
/* Keep the active Featured Experience item clearly blue on every screen size */
.featured-nav-item.active{
  background:linear-gradient(135deg,#082e84,#0754c5) !important;
  border-color:transparent !important;
  box-shadow:0 12px 28px rgba(7,84,197,.20) !important;
}
.featured-nav-item.active .featured-nav-number{
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
}
.featured-nav-item.active small,
.featured-nav-item.active strong{
  color:#fff !important;
}
/* Improve gallery image text placement on smaller screens */

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:991.98px){
  .photo-overlay{
    padding:1.1rem !important;
    background:linear-gradient(180deg,transparent 34%,rgba(4,18,45,.18) 52%,rgba(4,18,45,.92) 100%) !important;
  }
.photo-copy{
  left:1.05rem !important;
  right:1.05rem !important;
  bottom:1rem !important;
  max-width:calc(100% - 2.1rem) !important;
}
.photo-copy small{
  margin-bottom:.35rem !important;
  font-size:.67rem !important;
  line-height:1.2 !important;
}
.photo-copy h3{
  margin:0 !important;
  font-size:clamp(1.05rem,4.5vw,1.35rem) !important;
  line-height:1.22 !important;
}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:575.98px){
  .photo-copy{
    left:.9rem !important;
    right:.9rem !important;
    bottom:.85rem !important;
    max-width:calc(100% - 1.8rem) !important;
  }
.photo-copy h3{
  font-size:1.05rem !important;
}
}
/* Restore responsive category layout in Browse the Gallery */
.category-card-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.85rem !important;
  width:100% !important;
}
.category-filter-card{
  min-width:0 !important;
  width:100% !important;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:1199.98px){
  .category-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){
  .category-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.7rem !important;
  }
.category-filter-card{
  padding:.9rem !important;
}
.category-filter-card .category-icon{
  width:40px !important;
  height:40px !important;
}
.category-filter-card strong{
  font-size:.78rem !important;
}
.category-filter-card span{
  font-size:.65rem !important;
}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:479.98px){
  .category-card-grid{
    grid-template-columns:1fr !important;
  }
}