/* ============================================================
   MEDIA GALLERY – SIRF 3 SECTIONS KI CSS
   (Header/Footer ki styling aapki apni file me hai)
   ============================================================ */

:root{
  --pink:        #e91e8c;
  --pink-mid:    #f472b6;
  --pink-light:  #fce7f3;
  --pink-pale:   #fdf2f8;
  --baby-pink:   #fbcfe8;
  --rose:        #f9a8d4;
  --white:       #ffffff;
  --mg-dark:     #3d1230;
  --mg-text:     #6b3a58;
  --mg-shadow:    0 10px 30px rgba(233, 30, 140, 0.15);
  --mg-shadow-lg: 0 20px 50px rgba(233, 30, 140, 0.28);
}

/* ============================================================
   SECTION LAYOUT
   ============================================================ */
.media-main{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}

.gallery-section{
  padding:60px 10px;
}
.gallery-section.alt{
  /* background:var(--pink-light); */
  border-radius:32px;
  /* padding:60px 30px; */
  margin:10px 0;
}

/* ---------------- SECTION HEADING ---------------- */
.section-head{
  text-align:center; margin-bottom:44px;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.section-head.reveal{ opacity:1; transform:translateY(0); }

.section-tag{
  display:inline-block;
  background:var(--white);
  color:var(--pink);
  border:1.5px solid var(--baby-pink);
  padding:7px 20px; border-radius:50px;
  font-size:.85rem; font-weight:600;
  box-shadow:0 4px 14px rgba(233,30,140,.1);
  margin-bottom:14px;
}
.gallery-section.alt .section-tag{ background:var(--pink-pale); }

.section-head h2{
  font-size:2.3rem; font-weight:800; color:var(--mg-dark);
}
.section-head p{
  max-width:560px; margin:10px auto 0;
  font-size:.98rem; font-weight:300; color:var(--mg-text);
}
.head-line{
  margin-top:18px; display:flex; justify-content:center;
}
.head-line span{
  width:70px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--pink), var(--rose));
}

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

/* 5 photos → upar 2 badi, neeche 3 */
@media (min-width: 861px){
  .grid-5{ grid-template-columns:repeat(6, 1fr); }
  .grid-5 .g-item:nth-child(1),
  .grid-5 .g-item:nth-child(2){ grid-column:span 3; }
  .grid-5 .g-item:nth-child(n+3){ grid-column:span 2; }
}

/* ============================================================
   GALLERY ITEM
   ============================================================ */
.g-item{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  background:var(--baby-pink);
  box-shadow:var(--mg-shadow);
  aspect-ratio:4/3;
  margin:0;
  opacity:0; transform:translateY(28px) scale(.97);
  transition:opacity .6s ease, transform .6s ease,
             box-shadow .4s ease;
}
.g-item.reveal{ opacity:1; transform:translateY(0) scale(1); }

.g-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s;
}

/* Pink gradient overlay */
.g-item::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
      rgba(233,30,140,.88) 0%,
      rgba(233,30,140,.55) 50%,
      rgba(244,114,182,.35) 100%);
  opacity:0; transition:opacity .45s ease;
}

/* ============================================================
   ✨ HOVER TEXT OVERLAY ✨
   dil ❤ + bada text + foundation name
   ============================================================ */
.g-item figcaption{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:20px;
  opacity:0; transition:opacity .45s ease;
}
.g-item:hover figcaption{ opacity:1; }

/* ❤ Dil — upar se drop + heartbeat */
.g-item figcaption::before{
  content:'❤';
  font-size:2rem; color:var(--white);
  text-shadow:0 4px 14px rgba(0,0,0,.25);
  transform:translateY(-24px) scale(.4);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .05s,
             opacity .4s ease .05s;
  margin-bottom:8px;
}
.g-item:hover figcaption::before{
  transform:translateY(0) scale(1);
  opacity:1;
  animation:mgHeartBeat 1.4s ease-in-out .6s infinite;
}
@keyframes mgHeartBeat{
  0%, 100%{ transform:scale(1); }
  12%{ transform:scale(1.22); }
  24%{ transform:scale(1); }
  36%{ transform:scale(1.15); }
  48%{ transform:scale(1); }
}

/* Bada text (HTML ke <span> wala) */
.g-item figcaption span{
  order:1;
  color:var(--white);
  font-size:1.15rem; font-weight:700;
  letter-spacing:.5px; line-height:1.4;
  text-shadow:0 4px 16px rgba(0,0,0,.3);
  transform:translateY(16px); opacity:0;
  transition:transform .5s ease .12s, opacity .5s ease .12s;
}
.g-item:hover figcaption span{
  transform:translateY(0); opacity:1;
}

/* Foundation ka naam — neeche elegant line ke saath */
.g-item figcaption::after{
  content:'MANN CARE FOUNDATION';
  order:2;
  color:var(--pink-light);
  font-size:.62rem; font-weight:600;
  letter-spacing:3px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.4);
  transform:translateY(16px); opacity:0;
  transition:transform .5s ease .18s, opacity .5s ease .18s;
}
.g-item:hover figcaption::after{
  transform:translateY(0); opacity:1;
}

/* HOVER MAGIC ✨ */
.g-item:hover{
  box-shadow:var(--mg-shadow-lg);
  transform:translateY(-8px) scale(1.01);
}
.g-item:hover img{
  transform:scale(1.12);
  filter:blur(1.5px) brightness(.92);
}
.g-item:hover::before{ opacity:1; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:999;
  background:rgba(61,18,48,.92);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:30px;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.lightbox.show{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:92%; max-height:86vh;
  border-radius:16px;
  border:4px solid var(--white);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.9);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox.show img{ transform:scale(1); }
.lb-close{
  position:absolute; top:22px; right:28px;
  background:var(--pink); color:var(--white);
  border:none; width:46px; height:46px; border-radius:50%;
  font-size:1.6rem; cursor:pointer; line-height:1;
  transition:transform .3s, background .3s;
}
.lb-close:hover{ transform:rotate(90deg); background:var(--pink-mid); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 860px){
  .grid-5, .grid-6{ grid-template-columns:repeat(2, 1fr); }
  .section-head h2{ font-size:1.9rem; }
  .g-item figcaption span{ font-size:1rem; }
}
@media (max-width: 520px){
  .grid-4, .grid-5, .grid-6{ grid-template-columns:1fr; }
  .g-item{ aspect-ratio:16/11; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .g-item, .g-item img, .section-head,
  .g-item figcaption, .g-item figcaption span,
  .g-item figcaption::before, .g-item figcaption::after{
    transition:none !important; animation:none !important;
    opacity:1 !important; transform:none !important; filter:none !important;
  }
}