/* ============================================================
   company-gallery.css — Tarawell Travels · v4.0 (Golden Night)
   Photo Gallery page. Styles the markup generated by
   company-gallery.js (destination sections, activity groups,
   gallery items, featured strip) plus GLightbox skin tweaks.
   All values reference main.css tokens. No hero overrides.
   ============================================================ */

/* ── Hero destination filters (inside the template hero) ── */
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-8);
}
.btn-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--coy-radius-chip);
  border: 1px solid var(--coy-border-gold);
  background: var(--coy-glass-strong);
  backdrop-filter: blur(8px);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-elegant);
}
.btn-filter:hover { border-color: var(--coy-border-gold-strong); color: var(--color-gold-light); }
.btn-filter.active {
  background: var(--gradient-gold);
  border-color: transparent;
  color: var(--color-navy-abyss);
  box-shadow: var(--shadow-gold);
}
.btn-filter-count { opacity: 0.75; }

/* ── Count + loading ─────────────────────────────────────── */
.gal-count-wrap { margin: calc(-1 * var(--spacing-8)) 0 var(--spacing-12); }
.gal-loading { text-align: center; padding: var(--spacing-16) 0; color: var(--text-muted); }
.spinner {
  width: var(--spacing-12);
  height: var(--spacing-12);
  margin: 0 auto var(--spacing-4);
  border-radius: var(--radius-full);
  border: 3px solid var(--coy-border-gold);
  border-top-color: var(--color-gold);
  animation: galSpin 0.8s linear infinite;
}
@keyframes galSpin { to { transform: rotate(360deg); } }
.gallery-error-icon { font-size: var(--text-4xl); color: var(--color-gold); }
.gallery-error-text { color: var(--text-muted); }

/* ── Destination sections ────────────────────────────────── */
.gallery-destination-section + .gallery-destination-section {
  margin-top: var(--spacing-20);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--coy-border-soft);
}
.gallery-destination-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-3) var(--spacing-6);
  margin-bottom: var(--spacing-8);
}
.gallery-destination-name {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.gallery-destination-tagline {
  flex: 1 1 20rem;
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.gallery-destination-count {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--coy-radius-chip);
  border: 1px solid var(--coy-border-gold);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

.gallery-activity-group + .gallery-activity-group { margin-top: var(--spacing-10); }
.gallery-activity-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin: 0 0 var(--spacing-5);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.gallery-activity-heading i { font-size: var(--text-xs); color: var(--color-gold); }

.gallery-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--spacing-6);
}

/* ── Gallery item (rounded photo, caption below, no overlay) ── */
.gallery-item {
  margin: 0;
  opacity: 0;
  transform: translateY(var(--coy-reveal-shift));
  transition: opacity var(--coy-reveal-duration) var(--coy-reveal-ease),
              transform var(--coy-reveal-duration) var(--coy-reveal-ease);
}
.gallery-item.visible { opacity: 1; transform: none; }
.gallery-item.featured { grid-column: span 2; }

.gallery-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid var(--coy-border-soft);
  transition: var(--transition-elegant);
}
.gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms var(--coy-reveal-ease);
}
.gallery-item.featured .gallery-card img { aspect-ratio: 16 / 9; height: 100%; }
.gallery-card:hover { border-color: var(--coy-border-gold-strong); box-shadow: var(--coy-card-shadow-hover); }
.gallery-card:hover img { transform: scale(1.04); }

.gallery-zoom-icon {
  position: absolute;
  right: var(--spacing-4);
  bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-10);
  height: var(--spacing-10);
  border-radius: var(--radius-full);
  background: var(--coy-glass-strong);
  border: 1px solid var(--coy-border-gold);
  color: var(--color-gold-light);
  opacity: 0;
  transform: translateY(var(--spacing-2));
  transition: var(--transition-elegant);
}
.gallery-card:hover .gallery-zoom-icon { opacity: 1; transform: none; }

.gallery-featured-badge {
  position: absolute;
  top: var(--spacing-4);
  left: var(--spacing-4);
  z-index: var(--z-index-10);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--coy-radius-chip);
  background: var(--gradient-gold);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-navy-abyss);
}

.gallery-caption { padding: var(--spacing-4) var(--spacing-1) 0; }
.gallery-title {
  margin: 0 0 var(--spacing-1-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.gallery-description {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ── Featured strip (generated with .col-* wrappers) ─────── */
.gallery-social-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  margin: calc(-1 * var(--spacing-6)) 0 var(--spacing-10);
}
.gallery-social-links a[style*="none"] { display: none; }
.gal-featured {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spacing-4);
}
.instagram-item {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--coy-border-soft);
  transition: var(--transition-elegant);
}
.instagram-item:hover { border-color: var(--coy-border-gold-strong); transform: translateY(-4px); }
.instagram-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* No social account linked yet: hide the overlay link the script adds */
.instagram-item-overlay { display: none; }

/* ── GLightbox: dark description panel ───────────────────── */
.glightbox-clean .gslide-description { background: var(--color-navy-card); }
.glightbox-clean .gslide-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-2);
}
.glightbox-clean .gslide-desc { font-family: var(--font-primary); color: var(--text-muted); }
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev { background: var(--coy-glass-strong); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .gallery-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gallery-activity-grid { grid-template-columns: 1fr; }
  .gallery-item.featured { grid-column: auto; }
  .gal-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-destination-name { font-size: var(--text-3xl); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item { opacity: 1; transform: none; transition: none; }
  .gallery-card:hover img,
  .instagram-item:hover { transform: none; }
}