/* ============================================================
   SABERTOOTH — The Dental Fitness Beverage Buddy
   Replaces the retired badge overlays.
   Overlay-only: no React DOM is touched (hydration-safe).
   ============================================================ */

/* ---- Ritual section: mascot presents the bottle (photo panel) ----
   NOTE: .ritual-visual::after is owned by the compiled bundle
   (gradient overlay). Only ::before is used here. */
.ritual-visual::before {
  aspect-ratio: 1;
  background: url("/assets/sabertooth-mascot.webp") center bottom / contain no-repeat;
  bottom: clamp(52px, 8vw, 92px);
  content: "";
  filter:
    drop-shadow(0 24px 42px rgba(0, 7, 20, 0.55))
    drop-shadow(0 0 26px rgba(132, 238, 240, 0.18));
  pointer-events: none;
  position: absolute;
  right: clamp(14px, 3vw, 36px);
  width: clamp(150px, 15vw, 224px);
  z-index: 2;
}

@media (max-width: 900px) {
  .ritual-visual::before {
    bottom: clamp(78px, 16vw, 110px);
    right: 8px;
    width: clamp(112px, 24vw, 150px);
  }

  /* keep the caption clear of the mascot's footprint */
  .ritual-visual > p {
    padding-right: clamp(104px, 26vw, 150px);
  }
}

/* ---- Evidence Atlas panel 04: the Sabertooth card as the section seal ---- */
.buddy-restored {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 clamp(28px, 4vw, 56px);
}

.buddy-restored::before {
  align-self: center;
  aspect-ratio: 640 / 427;
  background: url("/assets/sabertooth-card.webp") center / cover no-repeat;
  border-radius: 16px;
  box-shadow:
    0 24px 48px rgba(0, 7, 20, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 26px rgba(132, 238, 240, 0.1);
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  pointer-events: none;
  width: clamp(220px, 22vw, 300px);
}

.buddy-restored > header {
  grid-column: 1;
  grid-row: 1;
  max-width: 780px;
  min-width: 0;
}

.buddy-restored > div {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

@media (max-width: 700px) {
  .buddy-restored {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .buddy-restored::before,
  .buddy-restored > header,
  .buddy-restored > div {
    grid-column: 1;
  }

  .buddy-restored::before {
    grid-row: 1;
    justify-self: center;
    width: min(320px, 88%);
  }

  .buddy-restored > header {
    grid-row: 2;
  }

  .buddy-restored > div {
    grid-row: 3;
    margin-top: 0;
  }
}