/**
 * Liquid-glass image embedding
 * Soft, edgeless photographs that fade into the light-blue glass background.
 * Linked after theme-glass-blue.css. Logos, icons, and form controls are excluded.
 */

/*--------------------------------------------------------------
# Shared fade recipe (Safari + Chrome)
# Two-axis linear-gradient masks, intersected so every edge feathers.
# --glass-img-fade is the start of the soft edge, as a % of the image size.
--------------------------------------------------------------*/
#main img,
main img {
  --glass-img-fade: 10%;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 24px;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 var(--glass-img-fade), #000 calc(100% - var(--glass-img-fade)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 var(--glass-img-fade), #000 calc(100% - var(--glass-img-fade)), transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 var(--glass-img-fade), #000 calc(100% - var(--glass-img-fade)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 var(--glass-img-fade), #000 calc(100% - var(--glass-img-fade)), transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-composite: intersect;
  filter: drop-shadow(0 8px 22px rgba(255, 255, 255, 0.32)) drop-shadow(0 6px 18px rgba(25, 119, 204, 0.10));
}

/* Bootstrap thumbnail frames (white pad, border, tight radius) */
#main img.img-thumbnail,
main img.img-thumbnail {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*--------------------------------------------------------------
# Images with text near the edges — keep the fade under ~4%
# DOT banners (title top-left, caption in a bottom panel)
# Sleep study photo (title at top, caption at bottom)
# Procedure *-Banner-* graphics (copy in a side panel)
# Warfarin vitamin-K chart (document with edge type)
--------------------------------------------------------------*/
#main img[src*="DOT-Physical-blue"],
#main img[src*="Sleep-Study-blue3"],
#main img[src*="Banner"],
#main img[src*="Warfarin-Vitamin-K"],
main img[src*="DOT-Physical-blue"],
main img[src*="Sleep-Study-blue3"],
main img[src*="Banner"],
main img[src*="Warfarin-Vitamin-K"] {
  --glass-img-fade: 3.5%;
}

/*--------------------------------------------------------------
# Provider headshots — gentle round fade, faces stay fully visible
--------------------------------------------------------------*/
#main .doctors .member .pic img,
#main .provider-card .provider-photo img,
#main .doctor-pic img,
main .doctors .member .pic img,
main .provider-card .provider-photo img,
main .doctor-pic img {
  --glass-img-fade: 0;
  border-radius: 50% !important;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 82%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-composite: source-over;
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 82%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-composite: add;
  filter: drop-shadow(0 8px 18px rgba(255, 255, 255, 0.35)) drop-shadow(0 4px 12px rgba(25, 119, 204, 0.12));
}

/*--------------------------------------------------------------
# Hero background (outside #main). Keep the existing 200px bottom
# fade used by the overlapping why-us cards, and add a slight
# left/right feather. Disabled under 993px so hero type is not masked.
--------------------------------------------------------------*/
@media (min-width: 993px) {
  #hero {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 calc(100% - 200px), transparent 100%);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%),
      linear-gradient(180deg, #000 0%, #000 calc(100% - 200px), transparent 100%);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-composite: intersect;
  }
}

/*--------------------------------------------------------------
# Exclusions: logos, icons, and form elements
# Header/footer logos live outside #main and are not matched above;
# the rules below also cancel the effect if a logo appears in main.
--------------------------------------------------------------*/
#header img,
#header .logo img,
#topbar img,
#footer img,
#footer .footer-contact img,
.footer-top img,
#main img[src*="logo-glass"],
#main img[src*="RMIM-footer"],
#main img[src*="RMIM-Logo"],
#main img[src*="Logo"],
#main img[src*="logo"],
#main img[src*="About-RMIM"],
#main img[src*="Sleep-Center-Banner"],
#main img[src*="Connect-for-Health-Colorado-Logo"],
#main img[src*="HealthCareGov-Logo"],
#main img[src*="Memory-Center-Logo"],
main img[src*="logo-glass"],
main img[src*="RMIM-footer"],
main img[src*="RMIM-Logo"],
main img[src*="Logo"],
main img[src*="logo"],
main img[src*="About-RMIM"],
main img[src*="Sleep-Center-Banner"],
main img[src*="Connect-for-Health-Colorado-Logo"],
main img[src*="HealthCareGov-Logo"],
main img[src*="Memory-Center-Logo"],
.goog-te-gadget img,
.goog-te-gadget-icon,
form img,
button img,
label img {
  border-radius: 0 !important;
  -webkit-mask-image: none !important;
  -webkit-mask-composite: source-over;
  mask-image: none !important;
  mask-composite: add;
  filter: none;
  box-shadow: none !important;
}

/* Restore the header logo treatment from theme-glass-blue.css
   (this file loads after it, so the exclusion's filter: none must be undone). */
#header .logo img {
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 1px 6px rgba(255, 255, 255, 0.55));
}

/*--------------------------------------------------------------
# Mobile: slightly tighter radius and fade so small photos
# don't lose too much of the subject, and layout is unchanged.
--------------------------------------------------------------*/
@media (max-width: 767.98px) {
  #main img,
  main img {
    --glass-img-fade: 8%;
    border-radius: 18px;
  }

  #main img[src*="DOT-Physical-blue"],
  #main img[src*="Sleep-Study-blue3"],
  #main img[src*="Banner"],
  #main img[src*="Warfarin-Vitamin-K"],
  main img[src*="DOT-Physical-blue"],
  main img[src*="Sleep-Study-blue3"],
  main img[src*="Banner"],
  main img[src*="Warfarin-Vitamin-K"] {
    --glass-img-fade: 3%;
  }

  #main .doctors .member .pic img,
  #main .provider-card .provider-photo img,
  #main .doctor-pic img,
  main .doctors .member .pic img,
  main .provider-card .provider-photo img,
  main .doctor-pic img {
    border-radius: 50% !important;
  }
}