/* Page-specific styles for solution-healthcare-dentist-lab-ai-store */
/* Add overrides here — never edit compat.css for page-specific changes */

/* ---------- About Us photo ----------
   586x630 source rendering at 279x300 against a 742px-tall text column, which
   is why the left half sat mostly empty. compat.css caps images inside
   anything named "*-item*" to max-height:300px and this row carries
   Bootstrap's align-items-center - which contains the literal text "-item".
   Let it fill its column instead. */
.about .left-image .about-img {
  max-height: none !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* ---------- Digital implants / dentures / bridges cards ----------
   Same shape of problem as .Our below: compat.css only gives .services a
   padding-block, no layout, so its three .s-card children stacked full-width
   down the page. A 3-up grid brings them into one row, and at ~380px each the
   card art (167x151, 225x146, 177x137 sources) sits at a sensible size
   instead of floating in a 1200px-wide card. */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

.services > .s-card {
  height: 100%;
}

/* let the art breathe but keep all three optically level regardless of their
   differing source aspect ratios */
.s-card > .text-center {
  width: 100%;
}

.s-card img {
  height: 150px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain !important;
  margin-inline: auto;
}

/* push each card's button to the bottom so the three CTAs line up even though
   the titles wrap to different numbers of lines */
.s-card .service-title {
  flex: 1;
}

/* ---------- "Our service" cards ----------
   Two compat.css assumptions break this block.

   1. `.Our` is a section-heading class in compat.css (display font, heading
      size, heading margin). On this page `.Our` is the *wrapper* holding the
      three .O-card children, so it got heading typography instead of a
      layout - leaving the three cards to stack full-width down the page.
   2. `.O-card img` is given the cover-photo treatment
      (width:100%; aspect-ratio:4/3; object-fit:cover). These images are
      120x120 icons, so that blew each one up to ~1150px wide and cropped it
      to 4:3 - the giant blurred tooth graphics. */
.Our {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;

  /* wrapper, not a heading - drop the inherited heading type so the cards'
     own text sizing applies */
  font-family: var(--font-body);
  font-size: 1rem;
}

.Our > .O-card {
  height: 100%;
}

/* 120x120 source art - size it as the icon it is and never upscale it */
.O-card img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0;
}

/* each card titles itself with an <h1>, which picks up page-title sizing.
   Inside a card it should read as a card heading. */
.O-card h1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--navy);
  margin: .25rem 0 .35rem;
}

.O-card p {
  font-size: .95rem;
  color: var(--slate);
  margin-bottom: .75rem;
}

/* push the button to the bottom so the three cards' CTAs line up even when
   the descriptions differ in length */
.O-card .O-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.O-card .btn-t {
  margin-top: auto;
}