/* =========================================================
   PHOCA GALLERY – SAGE / GOLD / SILVER / WHITE WEDDING STYLE
   Paste into template custom CSS or phocagallerycustom.css
   ========================================================= */

/* Main gallery wrapper */
#phocagallery {
  --sage: #9caf88;
  --sage-dark: #6f8062;
  --sage-soft: #eef3ea;
  --gold: #c9a64b;
  --gold-soft: #f7efd8;
  --silver: #c9ced3;
  --silver-dark: #8d969f;
  --white: #ffffff;
  --ink: #384238;

  background: linear-gradient(135deg, #ffffff 0%, #f6f8f4 45%, #eef3ea 100%);
  padding: 32px 24px;
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(56, 66, 56, 0.12);
  border: 1px solid rgba(201, 166, 75, 0.28);
}

/* Optional elegant gallery heading */
#phocagallery h1,
#phocagallery h2,
#phocagallery h3,
#phocagallery .pg-category-title,
#phocagallery .pg-cv-name {
  color: var(--ink);
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* Make gallery feel like a luxury album */
#phocagallery .pg-category-view,
#phocagallery .pg-categories-view {
  background: transparent;
}

/* Image/card containers */
#phocagallery .pg-cv-box,
#phocagallery .pg-cat-box,
#phocagallery .pg-box,
#phocagallery .pg-item-box,
#phocagallery .pg-thumbnail-box,
#phocagallery .phocagallery-box-file {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(201, 206, 211, 0.7) !important;
  border-radius: 22px !important;
  padding: 10px !important;
  box-shadow: 0 10px 26px rgba(56, 66, 56, 0.11);
  transition: all 0.28s ease;
  overflow: hidden;
}

/* Hover effect */
#phocagallery .pg-cv-box:hover,
#phocagallery .pg-cat-box:hover,
#phocagallery .pg-box:hover,
#phocagallery .pg-item-box:hover,
#phocagallery .pg-thumbnail-box:hover,
#phocagallery .phocagallery-box-file:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 166, 75, 0.9) !important;
  box-shadow: 0 18px 38px rgba(111, 128, 98, 0.22);
}

/* Photo styling */
#phocagallery img {
  border-radius: 17px !important;
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* Subtle zoom on hover */
#phocagallery a:hover img {
  transform: scale(1.035);
  filter: brightness(1.04) contrast(1.03);
}

/* Add premium white photo border feel */
#phocagallery .pg-cv-box img,
#phocagallery .pg-cat-box img,
#phocagallery .pg-box img,
#phocagallery .pg-item-box img,
#phocagallery .pg-thumbnail-box img,
#phocagallery .phocagallery-box-file img {
  background: #ffffff;
  padding: 4px;
  border: 1px solid rgba(201, 206, 211, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9);
}

/* Image captions / names */
#phocagallery .pg-name,
#phocagallery .pg-cv-name,
#phocagallery .pg-cat-name,
#phocagallery .small,
#phocagallery .caption,
#phocagallery figcaption {
  color: var(--sage-dark) !important;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Links */
#phocagallery a {
  color: var(--sage-dark);
  text-decoration: none;
}

#phocagallery a:hover {
  color: var(--gold);
}

/* Buttons / pagination */
#phocagallery .pagination a,
#phocagallery .pagination span,
#phocagallery button,
#phocagallery .btn {
  border-radius: 999px !important;
  border: 1px solid rgba(201, 166, 75, 0.45) !important;
  background: #ffffff !important;
  color: var(--sage-dark) !important;
  box-shadow: 0 6px 16px rgba(56, 66, 56, 0.08);
}

#phocagallery .pagination a:hover,
#phocagallery button:hover,
#phocagallery .btn:hover {
  background: var(--gold-soft) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}

/* Album-style decorative line */
#phocagallery::before {
  content: "";
  display: block;
  height: 3px;
  width: 120px;
  margin: 0 auto 26px auto;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sage), var(--gold), var(--silver));
}

/* Make tables/old layouts behave cleaner */
#phocagallery table {
  border-collapse: separate !important;
  border-spacing: 16px !important;
}

#phocagallery td {
  border: none !important;
  background: transparent !important;
}

/* Responsive spacing */
@media (max-width: 768px) {
  #phocagallery {
    padding: 22px 14px;
    border-radius: 20px;
  }

  #phocagallery .pg-cv-box,
  #phocagallery .pg-cat-box,
  #phocagallery .pg-box,
  #phocagallery .pg-item-box,
  #phocagallery .pg-thumbnail-box,
  #phocagallery .phocagallery-box-file {
    border-radius: 18px !important;
    padding: 8px !important;
  }
}