/* ==========================================================================
   Clinic photography — hero media, about figure, gallery, lightbox
   ========================================================================== */

/* Subtle natural enhancement (not oversaturated) */
.clinic-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(1.04) contrast(1.06) saturate(1.04);
  transform:scale(1.001); /* avoid subpixel blur */
}

/* ---------- Hero: photo on the right, soft left blend ---------- */
.hero{
  /* keep existing dark luxury base */
}
.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero__media-img{
  position:absolute;
  top:0;
  right:0;
  left:auto;
  /* Photo lives in a right-hand panel; a narrower frame reveals the full
     vertical story of the portrait (illuminated logo, oval mirror, chairs)
     instead of a tight, over-zoomed central slice. */
  width:54%;
  height:100%;
  object-fit:cover;
  object-position:50% 60%;
  filter:brightness(1.05) contrast(1.04) saturate(1.03);
  /* Feather the photo's own left edge into transparency so it dissolves into
     the dark navy — the picture emerges from the background instead of ending
     at a hard rectangle. The dark hero base then shows through seamlessly. */
  -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 9%,
      rgba(0,0,0,.45) 24%,
      rgba(0,0,0,.85) 38%,
      #000 50%);
          mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 9%,
      rgba(0,0,0,.45) 24%,
      rgba(0,0,0,.85) 38%,
      #000 50%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  will-change:transform;
}
.hero__media-fade{
  position:absolute;
  inset:0;
  /* Depth + readability only — the seam is handled by the mask above.
     A faint warm glow near the logo adds cinematic lighting, a soft left
     scrim protects the headline, and gentle top/bottom vignettes frame it.
     Kept light so it never darkens the logo, mirror or chairs. */
  background:
    radial-gradient(62% 55% at 74% 40%,
      rgba(255,208,130,.10),
      transparent 62%),
    linear-gradient(90deg,
      rgba(5,28,48,.5) 0%,
      rgba(5,28,48,.14) 30%,
      rgba(5,28,48,0) 50%),
    linear-gradient(180deg,
      rgba(5,28,48,.42) 0%,
      rgba(5,28,48,.06) 20%,
      transparent 40%,
      transparent 72%,
      rgba(5,28,48,.5) 100%);
  z-index:1;
  pointer-events:none;
}
.hero__bg{ z-index:0; opacity:.35; }
.hero__grain{ z-index:2; }
.hero__frame{ z-index:3; }
.hero__content{ z-index:4; }
.hero__side{ position:relative; z-index:4; }

/* Large desktops: allow a touch more of the lounge to breathe */
@media (min-width:1400px){
  .hero__media-img{
    width:56%;
    object-position:50% 58%;
  }
}

/* Tablet: photo becomes a full-bleed backdrop — no side seam, so drop the
   horizontal mask and lean on a soft vertical wash for text contrast. */
@media (max-width:980px){
  .hero__media-img{
    width:100%;
    left:0;
    right:0;
    top:0;
    height:100%;
    object-position:50% 52%;
    opacity:1;
    -webkit-mask-image:linear-gradient(180deg,
        rgba(0,0,0,.35) 0%, #000 14%, #000 92%, rgba(0,0,0,.25) 100%);
            mask-image:linear-gradient(180deg,
        rgba(0,0,0,.35) 0%, #000 14%, #000 92%, rgba(0,0,0,.25) 100%);
  }
  .hero__media-fade{
    background:
      linear-gradient(180deg,
        rgba(5,28,48,.72) 0%,
        rgba(5,28,48,.4) 42%,
        rgba(5,28,48,.9) 100%),
      linear-gradient(90deg,
        rgba(5,28,48,.86) 0%,
        rgba(5,28,48,.5) 48%,
        rgba(5,28,48,.2) 100%);
  }
  .hero .container{ grid-template-columns:1fr; }
  .hero__side{ display:none; }
}

/* Mobile: content is the priority. Lift the photo so the illuminated logo +
   mirror sit in the upper third (a beautiful backdrop under the nav), dim it a
   touch, then lay a strong bottom-weighted scrim so the headline, paragraph and
   buttons always read on a dark, calm surface. */
@media (max-width:640px){
  .hero__media-img{
    object-position:50% 30%;
    filter:brightness(.8) contrast(1.04) saturate(1.02);
  }
  .hero__media-fade{
    background:
      radial-gradient(130% 55% at 50% 6%, rgba(5,28,48,.12), transparent 42%),
      linear-gradient(180deg,
        rgba(5,28,48,.5) 0%,
        rgba(5,28,48,.42) 24%,
        rgba(5,28,48,.68) 44%,
        rgba(5,28,48,.88) 62%,
        rgba(5,28,48,.96) 100%);
  }
}

/* ---------- About / philosophy figure ---------- */
.about-photo{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(214,41,142,.22);
  box-shadow:0 28px 70px -28px rgba(5,28,48,.45), 0 12px 30px -18px rgba(0,0,0,.28);
  aspect-ratio:4/5;
  max-height:560px;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(214,41,142,.18), transparent 55%),
    linear-gradient(160deg, #0a2438, #051C30);
}
.about-photo img,
.about-photo .clinic-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  transition:transform .7s var(--ease);
}
.about-photo:hover img,
.about-photo:hover .clinic-photo{
  transform:scale(1.03);
}
.about-photo::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(248,246,242,.08);
}

@media (max-width:900px){
  .about-photo{ aspect-ratio:4/3; max-height:420px; }
}

/* ---------- Inside Aurea Plast gallery ---------- */
.clinic-gallery{
  background:var(--dark);
  color:var(--ivory);
}
.clinic-gallery .eyebrow{ color:var(--accent); }
.clinic-gallery .eyebrow::before{ background:var(--accent); }
.clinic-gallery .section-head p{
  color:rgba(248,246,242,.68);
  margin-top:14px;
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}

.gallery-masonry{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  grid-auto-rows:minmax(240px, auto);
  gap:18px;
  margin-top:48px;
}
.gallery-item{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(214,41,142,.2);
  background:#0a2438;
  cursor:zoom-in;
  display:block;
  text-decoration:none;
  color:inherit;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.55);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gallery-item:hover,
.gallery-item:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 28px 50px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(214,41,142,.28);
  border-color:rgba(214,41,142,.4);
  outline:none;
}
.gallery-item__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  height:100%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(214,41,142,.14), transparent 60%),
    #0a2438;
}
.gallery-item--feature{
  grid-row:span 2;
}
.gallery-item--feature .gallery-item__frame{
  aspect-ratio:auto;
  min-height:100%;
  height:100%;
}
.gallery-item--wide{
  grid-column:1 / -1;
}
.gallery-item--wide .gallery-item__frame{
  aspect-ratio:21/9;
}
.gallery-item img,
.gallery-item .clinic-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:brightness(1.04) contrast(1.06) saturate(1.04);
  transition:transform .3s ease, filter .3s ease;
}
.gallery-item:hover img,
.gallery-item:hover .clinic-photo,
.gallery-item:focus-visible img,
.gallery-item:focus-visible .clinic-photo{
  transform:scale(1.04);
  filter:brightness(1.08) contrast(1.08) saturate(1.05);
}
.gallery-item__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:28px 18px 14px;
  background:linear-gradient(transparent, rgba(5,28,48,.82));
  font-family:var(--font-heading);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(248,246,242,.88);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-visible .gallery-item__caption{
  opacity:1;
  transform:none;
}

@media (max-width:980px){
  .gallery-masonry{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }
  .gallery-item--feature{ grid-row:span 1; }
  .gallery-item--wide{ grid-column:1 / -1; }
  .gallery-item--feature .gallery-item__frame,
  .gallery-item__frame{ aspect-ratio:4/3; }
  .gallery-item--wide .gallery-item__frame{ aspect-ratio:16/9; }
  .gallery-item{ border-radius:16px; }
}
@media (max-width:640px){
  .gallery-masonry{
    grid-template-columns:1fr;
    gap:14px;
  }
  .gallery-item--feature,
  .gallery-item--wide{ grid-column:auto; grid-row:auto; }
  .gallery-item__frame,
  .gallery-item--feature .gallery-item__frame,
  .gallery-item--wide .gallery-item__frame{ aspect-ratio:4/3; }
  .gallery-item__caption{ opacity:1; transform:none; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0;
  z-index:3000;
  background:rgba(5,28,48,.92);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.lightbox__inner{
  position:relative;
  max-width:min(1100px, 94vw);
  max-height:88vh;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(214,41,142,.28);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.55);
  background:#041624;
}
.lightbox__inner img{
  display:block;
  max-width:100%;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:brightness(1.04) contrast(1.05);
}
.lightbox__close,
.lightbox__nav{
  position:absolute;
  border:none;
  background:rgba(248,246,242,.1);
  color:var(--ivory);
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
  z-index:2;
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(214,41,142,.55); transform:scale(1.05); }
.lightbox__close{ top:14px; right:14px; }
.lightbox__prev{ left:14px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:14px; top:50%; transform:translateY(-50%); }
.lightbox__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 20px;
  background:linear-gradient(transparent, rgba(5,28,48,.85));
  font-family:var(--font-heading);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(248,246,242,.9);
  text-align:center;
}

/* Page-hero uses a softened clinic still when available */
.page-hero .hero__bg.hero__bg--clinic{
  background-image:
    linear-gradient(180deg, rgba(5,28,48,.72), rgba(5,28,48,.88)),
    url('../assets/images/clinic/reception-wide-v2.jpg');
  background-size:cover;
  background-position:center 40%;
  opacity:1;
  filter:brightness(1.02) contrast(1.04);
}