/* ************************************************************************** */
/*                                                                            */
/*                                                        :::      ::::::::   */
/*   gstyle.css                                         :+:      :+:    :+:   */
/*                                                    +:+ +:+         +:+     */
/*   By: Ian Hupsetter <i.hupsetter@gmail.com>      +#+  +:+       +#+        */
/*                                                +#+#+#+#+#+   +#+           */
/*   Created: 2026/07/02 13:03:16 by Ian Hupsetter     #+#    #+#             */
/*   Updated: 2026/07/02 13:03:16 by Ian Hupsetter    ###   ########.fr       */
/*                                                                            */
/* ************************************************************************** */

/* ================================================================================================================== */
/* !                                               STANDARD BLOG IMAGE                                                */
/* ================================================================================================================== */
.blog-image {
	display: block;
	height: auto;
	min-width: 40%;
	max-width: 80%;
	width: 75%;
	margin: auto;
}

/* ================================================================================================================== */
/* !                                                 GALLERY SECTION                                                  */
/* ================================================================================================================== */
.gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease;
  box-shadow: var(--shadow);
}

.gallery-img:hover {
  transform: scale(1.2);
  box-shadow: var(--shadow-hover);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.85), transparent);
  padding: 1.25rem 1rem 0.75rem;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}
/* # --------------------------------------------- END GALLERY SECTION ---------------------------------------------- */

/* ! ------------------------------------------ MODAL FOR GALLERY SECTION ------------------------------------------- */
#galleryModal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

#galleryModal img {
  max-height: 70vh;
  object-fit: contain;
  width: 100%;
}
/* # ---------------------------------------- END MODAL FOR GALLERY SECTION ----------------------------------------- */

/* ! ------------------------------- GRID SETTING FOR MASONRY STYLE GALLERY SECTION --------------------------------- */
.grid-item {
  float: left;
  width: 80px;
  height: 60px;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 { 
  width: 160px; 
}
.grid-item--height2 { 
  height: 140px; 
}
/* # ----------------------------- END GRID SETTING FOR MASONRY STYLE GALLERY SECTION ------------------------------- */

/* ================================================================================================================== */
/* !                                              PHOTO GALLERY SECTION                                               */
/* ================================================================================================================== */
.photo-gallery
{
  color: #313437;
  background-color: #fff;
}

.photo-gallery p
{
  color: #7d8285;
}

.photo-gallery h2
{
  font-weight: bold;
  margin-bottom: 40px;
  padding-top: 40px;
  color: inherit;
}

@media (max-width:767px)
{
  .photo-gallery h2
  {
    margin-bottom: 25px;
    padding-top: 25px;
    font-size: 24px;
  }
}

.photo-gallery .intro
{
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto 40px;
}

.photo-gallery .intro p
{
  margin-bottom: 0;
}

.photo-gallery .photos
{
  padding-bottom: 20px;
}

.photo-gallery .item
{
  padding-bottom: 30px;
}

.item:hover {
  transform: scale(1.2);
  box-shadow: var(--shadow-hover);
}

/* # ------------------------------------------ END PHOTO GALLERY SECTION ------------------------------------------- */