/* ============================================================
   ADHVI BRIDAL STUDIO — Gallery / Portfolio Page Styles
   Extends the tokens defined in style.css (see :root vars)
   ============================================================ */

/* ============ PAGE HEADER ============ */
.gal-hero {
  padding: 48px 0 20px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.gal-breadcrumb {
  font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.gal-breadcrumb a { color: var(--accent); font-weight: 600; }
.gal-breadcrumb a:hover { text-decoration: underline; }
.gal-breadcrumb span:last-child { color: var(--heading); font-weight: 600; }
.gal-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  max-width: 780px; margin-bottom: 14px;
}
.gal-hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.gal-hero-sub { max-width: 620px; font-size: 1.02rem; margin-bottom: 0; }

/* ============ FILTER TABS (own namespace, mirrors .reel-tab look) ============ */
.gal-filter-section { padding: 28px 0 8px; background: var(--surface-alt); }
.gal-tabs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 6px;
}
.gal-tab {
  padding: 8px 20px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); font-size: 0.88rem; font-weight: 500;
  transition: all 0.25s ease; white-space: nowrap;
}
.gal-tab:hover, .gal-tab.active {
  background: var(--accent-gradient); color: var(--accent-contrast);
  border-color: transparent; font-weight: 600; box-shadow: 0 4px 15px rgba(201, 151, 90, 0.3);
}
.gal-tab--fire { border-color: rgba(239, 68, 68, 0.4); color: #EF4444; }
.gal-tab--fire.active { background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%); color: #FFF; }
.gal-count { font-size: 0.82rem; color: var(--ink-soft); margin: 14px 0 0; }

/* ============ INSTAGRAM-STYLE GRID ============ */
.ig-section { padding: 30px 0 90px; background: var(--surface-alt); }

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.ig-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  border-radius: 2px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ig-cell.is-hidden { display: none; }
.ig-cell img, .ig-cell video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.ig-cell:hover img, .ig-cell:hover video { transform: scale(1.06); }

.ig-media-badge {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  color: #FFFFFF; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.ig-fire-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 3px 8px; border-radius: var(--radius-pill); backdrop-filter: blur(3px);
}

.ig-hover {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(20, 6, 12, 0.42);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  opacity: 0; transition: opacity 0.25s ease;
}
.ig-cell:hover .ig-hover, .ig-cell:focus-visible .ig-hover { opacity: 1; }
.ig-hover-stat {
  display: flex; align-items: center; gap: 7px;
  color: #FFFFFF; font-size: 0.95rem; font-weight: 700;
}
.ig-hover-stat svg { flex-shrink: 0; }
.ig-hover-stat.is-liked svg { fill: var(--accent); stroke: var(--accent); }

/* ============ EMPTY STATE ============ */
.ig-empty {
  text-align: center; padding: 60px 20px; color: var(--ink-soft); font-size: 0.95rem;
}

/* ============ FULL POST VIEWER (Instagram-style modal) ============ */
.post-viewer {
  position: fixed; inset: 0; z-index: 2300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.post-viewer.open { opacity: 1; visibility: visible; }
.post-viewer-backdrop {
  position: absolute; inset: 0; background: rgba(8, 2, 4, 0.92); backdrop-filter: blur(10px);
}

.post-card {
  position: relative; z-index: 5;
  width: 100%; max-width: 920px; max-height: 88vh;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  border: 1px solid var(--border);
}

.post-close {
  position: absolute; top: 14px; right: 14px; z-index: 20;
  background: rgba(0,0,0,0.55); color: #FFF; border: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); cursor: pointer;
}

.post-media {
  position: relative; background: #000;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; max-height: 88vh; overflow: hidden;
  user-select: none;
}
.post-media img, .post-media video {
  width: 100%; height: 100%; object-fit: contain; max-height: 88vh;
  background: #000;
}

.heart-burst {
  position: absolute; top: 50%; left: 50%; z-index: 10;
  transform: translate(-50%, -50%) scale(0);
  color: var(--accent);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
  opacity: 0; pointer-events: none;
}
.heart-burst.animate {
  animation: heartBurst 0.85s var(--ease) forwards;
}
@keyframes heartBurst {
  0%   { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  32%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  75%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.05);   opacity: 0; }
}

/* Sidebar / info pane */
.post-side {
  display: flex; flex-direction: column;
  padding: 24px; overflow-y: auto;
  background: var(--surface);
}
.post-side-header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.post-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: contain;
  background: var(--surface-alt); padding: 4px; border: 1px solid var(--border);
}
.post-side-header-text { display: flex; flex-direction: column; line-height: 1.3; }
.post-side-header-text strong { font-size: 0.88rem; color: var(--heading); }
.post-side-header-text span {
  font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

.post-caption { margin-bottom: 20px; }
.post-caption h3 { font-size: 1.35rem; margin-bottom: 8px; }
.post-caption p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.post-actions {
  display: flex; align-items: center; gap: 16px;
  padding: 4px 0 12px;
}
.post-heart-btn {
  background: none; border: none; padding: 0; color: var(--ink);
  display: flex; transition: transform 0.15s ease, color 0.15s ease;
}
.post-heart-btn:hover { transform: scale(1.1); }
.post-heart-btn.liked {
  color: var(--accent);
  animation: heartPop 0.35s var(--ease);
}
.post-heart-btn.liked svg { fill: var(--accent); }
@keyframes heartPop {
  0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); }
}
.post-icon-static { color: var(--ink); display: flex; transition: color 0.2s ease; }
.post-icon-static:hover { color: var(--accent); }

.post-likes { font-size: 0.88rem; font-weight: 700; color: var(--heading); margin-bottom: 18px; }

.post-cta { margin-bottom: 14px; }
.post-cta .btn { font-size: 0.88rem; padding: 0.85em 1.4em; }

.post-hint {
  margin-top: auto; font-size: 0.72rem; color: var(--ink-soft); text-align: center;
  padding-top: 14px; border-top: 1px dashed var(--border);
}

/* Prev / Next nav (outside card) */
.post-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 15;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
  color: #FFF; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background 0.2s ease, transform 0.2s ease;
}
.post-nav:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.post-nav--prev { left: 24px; }
.post-nav--next { right: 24px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .post-card { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .post-media { max-height: 55vh; }
  .post-media img, .post-media video { max-height: 55vh; }
  .post-nav { display: none; }
}

@media (max-width: 768px) {
  .ig-grid { gap: 3px; }
}

@media (max-width: 480px) {
  .gal-hero { padding: 34px 0 16px; }
  .gal-hero h1 { font-size: 1.7rem; }
  .gal-hero-sub { font-size: 0.9rem; }

  .gal-filter-section { padding: 20px 0 4px; }
  .gal-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 10px;
  }
  .gal-tabs::-webkit-scrollbar { display: none; }
  .gal-tab { flex-shrink: 0; font-size: 0.8rem; padding: 7px 14px; }

  .ig-section { padding: 16px 0 60px; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .ig-hover { gap: 14px; }
  .ig-hover-stat { font-size: 0.85rem; }

  .post-viewer { padding: 0; }
  .post-card { border-radius: 0; max-height: 100vh; height: 100%; }
  .post-close { top: 12px; right: 12px; }
  .post-media { max-height: 46vh; }
  .post-media img, .post-media video { max-height: 46vh; }
  .post-side { padding: 18px; }
  .post-caption h3 { font-size: 1.15rem; }
}