/* ==========================================================================
   Media gallery (media.aspx) - filter bar, cards, lightbox
   Uses the design tokens defined in Home2.css (#homeRedesign scope).
   ========================================================================== */

/* ---- Filter bar ---- */
#homeRedesign .mg-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px;}
#homeRedesign .mg-filter{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:100px;
  border:1px solid var(--line); background:var(--panel); color:var(--text); font:600 14px/1 var(--sans);
  cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);}
#homeRedesign .mg-filter svg{width:17px; height:17px; flex-shrink:0;}
#homeRedesign .mg-filter:hover{border-color:var(--pink-line); background:var(--pink-50);}
#homeRedesign .mg-filter:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
#homeRedesign .mg-filter.is-active{background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 12px 24px -12px rgba(224,41,76,.6);}
#homeRedesign .mg-count{display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 7px; border-radius:100px;
  background:var(--pink-100); color:var(--red-deep); font-size:12px; font-weight:700;}
#homeRedesign .mg-count:empty{display:none;}
#homeRedesign .mg-filter.is-active .mg-count{background:rgba(255,255,255,.22); color:#fff;}

/* ---- Grid & cards ---- */
#homeRedesign .mg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px;}
#homeRedesign .mg-item{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; overflow:hidden; box-shadow:0 24px 44px -32px var(--shadow-color);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); animation:mgIn .45s var(--ease) both;}
#homeRedesign .mg-item:hover{transform:translateY(-4px); box-shadow:0 34px 54px -30px var(--shadow-color);}
#homeRedesign .mg-item[hidden], #homeRedesign .mg-item.is-missing{display:none !important;}
@keyframes mgIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

#homeRedesign .mg-media{position:relative; background:#12131C; overflow:hidden;}
#homeRedesign .mg-16x9{aspect-ratio:16/9;}
#homeRedesign .mg-4x3{aspect-ratio:4/3; background:var(--cream);}
#homeRedesign .mg-li{aspect-ratio:4/5; background:var(--cream);}
#homeRedesign .mg-media iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

#homeRedesign .mg-yt, #homeRedesign .mg-pic{position:absolute; inset:0; display:block; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer;}
#homeRedesign .mg-yt img, #homeRedesign .mg-pic img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
#homeRedesign .mg-item:hover .mg-yt img, #homeRedesign .mg-item:hover .mg-pic img{transform:scale(1.05);}
#homeRedesign .mg-yt::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,11,18,.45),transparent 55%);}
#homeRedesign .mg-yt:focus-visible, #homeRedesign .mg-pic:focus-visible{outline:3px solid var(--red); outline-offset:-3px;}

#homeRedesign .mg-play{position:absolute; left:50%; top:50%; z-index:2; width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%; display:grid; place-items:center; background:var(--red); color:#fff;
  box-shadow:0 0 0 8px rgba(224,41,76,.22); transition:transform .3s var(--ease);}
#homeRedesign .mg-play svg{width:22px; height:22px; margin-left:3px;}
#homeRedesign .mg-yt:hover .mg-play{transform:scale(1.1);}

#homeRedesign .mg-zoom{position:absolute; right:14px; bottom:14px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--ink);
  opacity:0; transform:translateY(6px); transition:all .3s var(--ease);}
#homeRedesign .mg-zoom svg{width:20px; height:20px;}
#homeRedesign .mg-item:hover .mg-zoom, #homeRedesign .mg-pic:focus-visible .mg-zoom{opacity:1; transform:none;}

#homeRedesign .mg-body{padding:18px 20px 22px;}
#homeRedesign .mg-body h3{font-family:var(--serif); font-size:18px; line-height:1.3; font-weight:600; color:var(--text); margin-top:10px;}
#homeRedesign .mg-body p{font-size:13.5px; color:var(--text-soft); margin-top:6px;}

#homeRedesign .mg-tag{display:inline-block; padding:5px 11px; border-radius:100px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;}
#homeRedesign .mg-tag--video{background:#EAF0FF; color:#2F4FB5;}
#homeRedesign .mg-tag--picture{background:#E9F7EF; color:#1F7A4A;}
#homeRedesign .mg-tag--testimonial{background:var(--pink-50); color:var(--red-deep);}

/* ---- Text testimonial card ---- */
#homeRedesign .mg-quote{padding:26px 24px 22px; background:linear-gradient(160deg,var(--pink-50),var(--panel) 60%);}
#homeRedesign .mg-qm{width:34px; height:26px; color:var(--red); opacity:.85;}
#homeRedesign .mg-quote blockquote{margin:14px 0 20px; font-size:15px; line-height:1.65; color:var(--text);}
#homeRedesign .mg-who{display:flex; align-items:center; gap:12px; margin-top:auto; margin-bottom:14px;}
#homeRedesign .mg-avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--red); color:#fff; font-weight:700;}
#homeRedesign .mg-who strong{display:block; font-size:14.5px; color:var(--text);}
#homeRedesign .mg-who span{font-size:12.5px; color:var(--text-soft);}
#homeRedesign .mg-quote .mg-tag{align-self:flex-start;}

#homeRedesign .mg-empty{padding:40px 0; text-align:center; color:var(--text-soft);}

/* ---- Lightbox ---- */
#homeRedesign .mg-lightbox{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  gap:16px; padding:24px; background:rgba(10,11,18,.9);}
#homeRedesign .mg-lightbox[hidden]{display:none;}
#homeRedesign .mg-lightbox figure{margin:0; max-width:min(1100px,100%); text-align:center;}
#homeRedesign .mg-lightbox img{max-width:100%; max-height:80vh; border-radius:12px; display:block; margin:0 auto; background:#fff;}
#homeRedesign .mg-lightbox figcaption{color:#fff; margin-top:14px; font-size:14.5px;}
#homeRedesign .mg-lb-close{position:absolute; top:16px; right:20px; width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.12); color:#fff; font-size:28px; line-height:1; cursor:pointer;}
#homeRedesign .mg-lb-nav{flex-shrink:0; width:46px; height:46px; border-radius:50%; border:0; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;}
#homeRedesign .mg-lb-nav svg{width:20px; height:20px;}
#homeRedesign .mg-lb-close:hover, #homeRedesign .mg-lb-nav:hover{background:var(--red);}

@media (max-width:600px){
  #homeRedesign .mg-filters{flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 26px; padding:2px 16px 6px; scrollbar-width:none;}
  #homeRedesign .mg-filters::-webkit-scrollbar{display:none;}
  #homeRedesign .mg-filter{flex-shrink:0; padding:10px 16px;}
  #homeRedesign .mg-grid{grid-template-columns:1fr; gap:18px;}
  #homeRedesign .mg-lb-nav{position:absolute; bottom:24px;}
  #homeRedesign .mg-lb-prev{left:calc(50% - 58px);}
  #homeRedesign .mg-lb-next{right:calc(50% - 58px);}
}
@media (prefers-reduced-motion:reduce){
  #homeRedesign .mg-item{animation:none;}
  #homeRedesign .mg-item, #homeRedesign .mg-yt img, #homeRedesign .mg-pic img{transition:none;}
}

/* ---- Homepage: video testimonials under "Words from people we've treated" ---- */
#homeRedesign .home-vt{margin-top:48px;}
#homeRedesign .home-vt-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
#homeRedesign .home-vt-head h3{font-family:var(--serif); font-size:24px; font-weight:600; color:var(--text);}
#homeRedesign .home-vt-grid{grid-template-columns:repeat(4,1fr); gap:20px;}
#homeRedesign .home-vt-grid .mg-body{padding:14px 16px 18px;}
#homeRedesign .home-vt-grid .mg-body h3{font-size:16px; margin-top:8px;}
@media (max-width:1100px){#homeRedesign .home-vt-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){#homeRedesign .home-vt-grid{grid-template-columns:1fr;}}