/* ==========================================================
   HIGHLAND DENTAL CENTER
   FLOATING SERVICES GLASS CARD
   COMPLETE REPLACEMENT CSS
   ========================================================== */


/* ==========================================================
   SERVICES HERO CONTAINER

   Add the class hdc-services-hero to the main hero wrapper.
   ========================================================== */

.hdc-services-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}


/* ==========================================================
   FLOATING SERVICES CARD — DESKTOP DEFAULT
   ========================================================== */

.hdc-services-card {
  --hdc-teal: #4f858d;
  --hdc-teal-light: #6ca2aa;
  --hdc-teal-dark: #286472;

  --hdc-text: #111718;
  --hdc-muted: #404b4d;

  position: absolute;
  z-index: 10;

  top: 50%;
  right: clamp(30px, 5vw, 90px);

  width: min(420px, calc(100% - 60px));

  margin: 0;
  padding: 0;

  transform: translateY(-50%);
}


/* ==========================================================
   TRANSPARENT GLOSSY GLASS PANEL
   ========================================================== */

.hdc-services-card-inner {
  position: relative;
  overflow: hidden;

  padding: 34px;

  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.24) 45%,
      rgba(236, 244, 243, 0.14) 100%
    );

  box-shadow:
    0 30px 70px rgba(23, 43, 47, 0.17),
    0 10px 28px rgba(23, 43, 47, 0.09),
    inset 0 1px 1px rgba(255, 255, 255, 0.96),
    inset 1px 0 0 rgba(255, 255, 255, 0.48),
    inset -1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.32);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(145%)
    brightness(1.08);

  backdrop-filter:
    blur(22px)
    saturate(145%)
    brightness(1.08);
}


/* ==========================================================
   UPPER GLASS REFLECTION
   ========================================================== */

.hdc-services-card-inner::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: -28%;
  left: -20%;

  width: 92%;
  height: 68%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.50) 0%,
      rgba(255, 255, 255, 0.22) 40%,
      rgba(255, 255, 255, 0) 72%
    );

  transform: rotate(-12deg);

  pointer-events: none;
}


/* ==========================================================
   LOWER GLASS REFRACTION
   ========================================================== */

.hdc-services-card-inner::after {
  content: "";

  position: absolute;
  z-index: 0;

  right: -22%;
  bottom: -25%;

  width: 82%;
  height: 54%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(83, 151, 162, 0.22) 0%,
      rgba(255, 255, 255, 0.11) 46%,
      rgba(255, 255, 255, 0) 74%
    );

  filter: blur(8px);

  pointer-events: none;
}


/* Keep all content above the glass reflections */

.hdc-services-card-inner > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   SERVICES BADGE
   ========================================================== */

.hdc-services-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 38px;
  margin: 0 0 22px;
  padding: 9px 17px;

  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(34, 119, 135, 0.97) 0%,
      rgba(27, 96, 110, 0.97) 100%
    );

  color: #ffffff;

  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;

  box-shadow:
    0 11px 25px rgba(27, 85, 96, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(5, 49, 57, 0.22);
}

.hdc-services-card-badge span:first-child {
  font-size: 0.82rem;
  line-height: 1;
}


/* ==========================================================
   CARD HEADER
   ========================================================== */

.hdc-services-card-header {
  margin: 0 0 25px;
}


/* Small uppercase introductory text */

.hdc-services-card-eyebrow {
  display: block;

  margin: 0 0 8px;

  color: var(--hdc-teal-dark);

  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* Main card heading */

.hdc-services-card h2 {
  margin: 0;

  color: var(--hdc-text);

  font-size: clamp(2rem, 2.65vw, 2.65rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;

  text-wrap: balance;
}


/* Supporting paragraph */

.hdc-services-card-header p {
  max-width: 34ch;

  margin: 16px 0 0;

  color: var(--hdc-muted);

  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
}


/* ==========================================================
   SERVICE LINKS
   ========================================================== */

.hdc-services-list {
  display: grid;
  grid-template-columns: 1fr;

  margin: 0 0 24px;
  padding: 0;

  list-style: none;

  border-top: 1px solid rgba(255, 255, 255, 0.62);

  box-shadow:
    inset 0 1px 0 rgba(35, 77, 83, 0.11);
}


.hdc-services-list li {
  margin: 0;
  padding: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.58);

  box-shadow:
    inset 0 -1px 0 rgba(35, 77, 83, 0.11);
}


.hdc-services-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  min-height: 53px;
  padding: 12px 2px;

  color: var(--hdc-text);

  font-size: 0.98rem;
  font-weight: 520;
  line-height: 1.25;
  text-decoration: none;

  transition:
    color 180ms ease,
    padding-left 180ms ease,
    background-color 180ms ease;
}


.hdc-services-list a:hover,
.hdc-services-list a:focus-visible {
  padding-left: 8px;

  color: var(--hdc-teal-dark);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0)
    );
}


/* Service arrow */

.hdc-services-arrow {
  flex: 0 0 auto;

  color: var(--hdc-teal-dark);

  font-size: 1.1rem;
  line-height: 1;

  transition: transform 180ms ease;
}


.hdc-services-list a:hover .hdc-services-arrow,
.hdc-services-list a:focus-visible .hdc-services-arrow {
  transform: translateX(4px);
}


/* ==========================================================
   VIEW ALL SERVICES BUTTON
   ========================================================== */

.hdc-services-card-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  min-height: 54px;

  padding: 14px 22px;

  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(98, 161, 171, 0.92) 0%,
      rgba(68, 134, 145, 0.94) 100%
    );

  color: #071719;

  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  box-shadow:
    0 14px 30px rgba(31, 89, 99, 0.24),
    inset 0 1px 1px rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(17, 69, 78, 0.25);

  -webkit-backdrop-filter:
    blur(8px)
    saturate(140%);

  backdrop-filter:
    blur(8px)
    saturate(140%);

  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}


.hdc-services-card-button:hover {
  border-color: rgba(255, 255, 255, 0.80);

  background:
    linear-gradient(
      180deg,
      rgba(58, 129, 142, 0.97) 0%,
      rgba(37, 103, 116, 0.98) 100%
    );

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 18px 36px rgba(31, 89, 99, 0.30),
    inset 0 1px 1px rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(10, 56, 64, 0.30);
}


.hdc-services-card-button:active {
  transform: translateY(0);
}


/* Keyboard focus */

.hdc-services-card a:focus-visible {
  outline: 3px solid rgba(40, 100, 114, 0.40);
  outline-offset: 4px;
}


/* ==========================================================
   LARGE DESKTOP — 1200px AND ABOVE
   ========================================================== */

@media (min-width: 1200px) {

  .hdc-services-card {
    right: clamp(38px, 5.5vw, 100px);
    width: 425px;
  }

  .hdc-services-card-inner {
    padding: 36px;
  }

}


/* ==========================================================
   SMALL DESKTOP — 992px TO 1199px

   Card remains floating, but is more compact.
   ========================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

  .hdc-services-card {
    top: 49%;
    right: 28px;

    width: 350px;
  }


  .hdc-services-card-inner {
    padding: 25px;

    border-radius: 25px;

    -webkit-backdrop-filter:
      blur(20px)
      saturate(140%)
      brightness(1.07);

    backdrop-filter:
      blur(20px)
      saturate(140%)
      brightness(1.07);
  }


  .hdc-services-card-badge {
    min-height: 34px;

    margin-bottom: 16px;
    padding: 8px 13px;

    font-size: 0.61rem;
  }


  .hdc-services-card h2 {
    font-size: 2rem;
  }


  .hdc-services-card-header {
    margin-bottom: 17px;
  }


  .hdc-services-card-header p {
    display: none;
  }


  .hdc-services-list {
    margin-bottom: 18px;
  }


  .hdc-services-list a {
    min-height: 46px;
    padding-block: 9px;

    font-size: 0.9rem;
  }


  .hdc-services-card-button {
    min-height: 48px;
  }

}


/* ==========================================================
   TABLET — 768px TO 991px

   The card enters normal page flow so it cannot overlap
   the main hero heading.
   ========================================================== */

@media (min-width: 768px) and (max-width: 991px) {

  .hdc-services-hero {
    overflow: visible;
  }


  .hdc-services-card {
    position: relative;

    top: auto;
    right: auto;

    width: calc(100% - 48px);
    max-width: 620px;

    margin: 34px auto;
    padding: 0;

    transform: none;
  }


  .hdc-services-card-inner {
    padding: 30px;

    border-radius: 28px;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.25) 48%,
        rgba(238, 245, 244, 0.16) 100%
      );

    -webkit-backdrop-filter:
      blur(22px)
      saturate(145%)
      brightness(1.07);

    backdrop-filter:
      blur(22px)
      saturate(145%)
      brightness(1.07);
  }


  .hdc-services-card h2 {
    font-size: 2.25rem;
  }


  .hdc-services-card-header p {
    max-width: 48ch;
  }


  .hdc-services-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 28px;
  }


  .hdc-services-list li:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }


  .hdc-services-list li:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }


  .hdc-services-list li:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }


  .hdc-services-list li:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

}


/* ==========================================================
   SMALL TABLET — 576px TO 767px

   Services switch to one column to prevent awkward wrapping.
   ========================================================== */

@media (min-width: 576px) and (max-width: 767px) {

  .hdc-services-hero {
    overflow: visible;
  }


  .hdc-services-card {
    position: relative;

    top: auto;
    right: auto;

    width: calc(100% - 40px);
    max-width: 540px;

    margin: 28px auto;
    padding: 0;

    transform: none;
  }


  .hdc-services-card-inner {
    padding: 26px;

    border-radius: 26px;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.44) 0%,
        rgba(255, 255, 255, 0.27) 50%,
        rgba(238, 245, 244, 0.18) 100%
      );

    -webkit-backdrop-filter:
      blur(21px)
      saturate(142%)
      brightness(1.07);

    backdrop-filter:
      blur(21px)
      saturate(142%)
      brightness(1.07);
  }


  .hdc-services-card-badge {
    margin-bottom: 18px;
  }


  .hdc-services-card h2 {
    font-size: 2rem;
  }


  .hdc-services-card-header p {
    font-size: 0.91rem;
  }


  .hdc-services-list {
    display: block;
  }

}


/* ==========================================================
   MOBILE — BELOW 576px
   ========================================================== */

@media (max-width: 575px) {

  .hdc-services-hero {
    overflow: visible;
  }


  .hdc-services-card {
    position: relative;

    top: auto;
    right: auto;

    width: calc(100% - 28px);
    max-width: none;

    margin: 24px auto;
    padding: 0;

    transform: none;
  }


  .hdc-services-card-inner {
    padding: 23px 20px;

    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 24px;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.28) 52%,
        rgba(239, 245, 244, 0.18) 100%
      );

    box-shadow:
      0 22px 48px rgba(23, 43, 47, 0.17),
      0 8px 20px rgba(23, 43, 47, 0.08),
      inset 0 1px 1px rgba(255, 255, 255, 0.94),
      inset 1px 0 0 rgba(255, 255, 255, 0.40),
      inset -1px 0 0 rgba(255, 255, 255, 0.24),
      inset 0 -1px 0 rgba(255, 255, 255, 0.30);

    -webkit-backdrop-filter:
      blur(20px)
      saturate(140%)
      brightness(1.06);

    backdrop-filter:
      blur(20px)
      saturate(140%)
      brightness(1.06);
  }


  .hdc-services-card-inner::before {
    top: -25%;
    left: -30%;

    width: 110%;
    height: 58%;
  }


  .hdc-services-card-inner::after {
    right: -35%;
    bottom: -18%;

    width: 100%;
    height: 45%;
  }


  .hdc-services-card-badge {
    min-height: 34px;

    margin-bottom: 17px;
    padding: 8px 13px;

    font-size: 0.59rem;
    letter-spacing: 0.1em;
  }


  .hdc-services-card-eyebrow {
    font-size: 0.64rem;
  }


  .hdc-services-card h2 {
    font-size: clamp(1.75rem, 8.3vw, 2.05rem);
    line-height: 1.04;
  }


  .hdc-services-card-header {
    margin-bottom: 19px;
  }


  .hdc-services-card-header p {
    margin-top: 12px;

    font-size: 0.87rem;
    line-height: 1.48;
  }


  .hdc-services-list {
    display: block;

    margin-bottom: 20px;
  }


  .hdc-services-list a {
    min-height: 50px;

    font-size: 0.94rem;
  }


  .hdc-services-card-button {
    min-height: 50px;

    padding-inline: 18px;

    font-size: 0.92rem;
  }

}


/* ==========================================================
   VERY SMALL PHONES — 390px AND BELOW
   ========================================================== */

@media (max-width: 390px) {

  .hdc-services-card {
    width: calc(100% - 20px);
  }


  .hdc-services-card-inner {
    padding: 21px 17px;

    border-radius: 21px;
  }


  .hdc-services-card h2 {
    font-size: 1.72rem;
  }


  .hdc-services-card-header p {
    font-size: 0.84rem;
  }


  .hdc-services-card-badge {
    max-width: 100%;

    padding-inline: 12px;

    white-space: nowrap;
  }


  .hdc-services-list a {
    font-size: 0.91rem;
  }

}


/* ==========================================================
   FALLBACK FOR BROWSERS WITHOUT BACKDROP FILTER

   This provides enough contrast when true glass blur is
   unavailable.
   ========================================================== */

@supports not (
  (-webkit-backdrop-filter: blur(1px)) or
  (backdrop-filter: blur(1px))
) {

  .hdc-services-card-inner {
    background:
      linear-gradient(
        145deg,
        rgba(250, 250, 248, 0.92),
        rgba(239, 243, 241, 0.86)
      );
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hdc-services-list a,
  .hdc-services-arrow,
  .hdc-services-card-button {
    transition: none;
  }

}