/* ===============================
   Mateshwari Events — Gallery.css
   Skin / Light Yellow + Gold Theme
   (Desktop: 3-in-a-row, Mobile: 1 or 2-in-a-row)
   With Lightbox (mobile fullscreen fix)
   =============================== */

:root{
  --skin-1:#fff8e1;     /* light yellow / skin ivory */
  --skin-2:#fdf6d9;     /* softer beige yellow */
  --skin-3:#faedc4;     /* deeper warm tone */
  --gold:#d4af37;       /* premium gold */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.22);
}

/* ===== HERO ===== */
.page-hero{
  text-align:center;
  padding:60px 16px 40px;
  color:#3a2a10;
  background:
    radial-gradient(1200px 420px at 50% -240px, rgba(212,175,55,.15), transparent 60%),
    linear-gradient(135deg, var(--skin-1) 0%, var(--skin-2) 50%, var(--skin-3) 100%);
  border-bottom:3px solid var(--gold);
}
.page-hero h1{
  font-size:2.6rem; margin:0 0 12px; color:#2a1e05;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.page-hero p{ margin:0; color:#4a3915; font-weight:500 }
.page-hero h1 + p::before{
  content:""; display:block; width:140px; height:3px; margin:16px auto 14px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:2px;
}

/* ===== GALLERY SECTION ===== */
.gallery{
  position:relative; padding:40px 0 50px;
  background:
    radial-gradient(1200px 420px at 50% -260px, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, var(--skin-1) 0%, var(--skin-2) 50%, var(--skin-3) 100%);
  border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
}
.gallery .container{ max-width:1200px; margin-inline:auto; padding:0 16px }

/* subtle veins */
.gallery::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:
    repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 3px, transparent 3px 14px);
  mix-blend-mode:multiply;
}

/* ===== GRID ===== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

/* ===== CARDS ===== */
.gallery-item{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:#ffffff; border:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gallery-item:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio: 4 / 3;
  transition: transform .55s ease, filter .55s ease;
  filter:saturate(1.06) contrast(1.04);
}
.gallery-item:hover img{ transform:scale(1.05); filter:saturate(1.10) contrast(1.06) }

/* gold gloss sweep */
.gallery-item::after{
  content:""; position:absolute; inset:-40% -120% auto -120%;
  height:200%; transform:rotate(18deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                   rgba(255,255,255,.18) 50%,
                                   rgba(255,255,255,0) 100%);
  opacity:0; transition:opacity .4s ease, transform .6s ease;
}
.gallery-item:hover::after{ opacity:1; transform:rotate(18deg) translateX(35%) }

/* ===== RESPONSIVE GRID ===== */

/* Tablets: 2 columns */
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .gallery-item{ aspect-ratio: 4 / 3; }
  .gallery-item img{ aspect-ratio: 4 / 3; }
}

/* Phones: 1 column (full-width images) */
@media (max-width: 540px){
  .gallery .container{ padding:0 10px; }
  .gallery-grid{ grid-template-columns:1fr; gap:14px; }
  .gallery-item{ aspect-ratio: 4 / 3; border-radius:16px; }
  .gallery-item img{ aspect-ratio: 4 / 3; }
}

/* Very small phones */
@media (max-width: 380px){
  .gallery .container{ padding:0 6px; }
  .gallery-grid{ gap:12px; }
}

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px; z-index:1000;
  background:rgba(0,0,0,.75);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.lightbox:target{
  opacity:1; visibility:visible; pointer-events:auto;
}
body.lightbox-open{ overflow:hidden; }

.lightbox img{
  max-width:min(1200px,94vw);
  max-height:90vh;
  border-radius:16px;
  border:3px solid var(--gold);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  object-fit:contain;
  background:#000;
}

/* close button */
.lightbox::after{
  content:"✕";
  position:absolute; top:22px; right:22px;
  width:44px; height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.35); color:#2a1e05; border-radius:12px;
  font-weight:700; font-size:18px;
  z-index:1001;
}
.lightbox:hover::after{ background:rgba(255,255,255,.55) }

/* optional nav zones */
.lightbox .nav-prev, .lightbox .nav-next{
  position:absolute; top:0; bottom:0; width:35%;
}
.lightbox .nav-prev{ left:0 }
.lightbox .nav-next{ right:0 }

/* ===== MOBILE LIGHTBOX — FULLSCREEN ===== */
@media (max-width: 768px){
  .lightbox{
    padding:0 !important;
    background:rgba(0,0,0,.95);
  }
  .lightbox img{
    width:100vw !important;
    height:100vh !important;
    max-width:100vw !important;
    max-height:100vh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    object-fit:contain !important;
    aspect-ratio:auto !important;
    background:#000 !important;
  }
  .lightbox::after{
    position:fixed !important;
    top:12px !important; right:12px !important;
    width:38px !important; height:38px !important; font-size:16px !important;
    background:rgba(255,255,255,.35) !important;
  }
}

/* Very small phones lightbox */
@media (max-width: 360px){
  .lightbox::after{
    top:8px !important; right:8px !important;
    width:34px !important; height:34px !important; font-size:15px !important;
  }
}