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

/* This page's own stylesheet is gone, so its bespoke classes (.hero-image,
   .team-cards, .testimonial-cards, .blob*) arrive with no layout at all and
   the generic compat.css rules that DO match end up applied to the wrong kind
   of element. Layout/size/structure only below - no content, colour or type
   changes. */

/* ---------- decorative shapes ----------
   Empty divs whose shapes came from the removed stylesheet. They render as
   nothing, but .blob2 is a child of .hero and would otherwise claim a grid
   cell there. */
.blob1,
.blob2 {
  display: none;
}

/* ---------- Hero ----------
   .hero was display:block with no inner container, so the copy sat flush
   against the viewport edge (x=0) and the photo - a 4000x6000 source with no
   constraint - rendered at 1920x2880, making the hero 3248px tall (roughly
   three screens). Two columns on the same 1200px measure as the rest of the
   page; the navy background stays full-bleed. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: max(1.25rem, calc((100% - 1200px) / 2));
}

.hero .hero-image img {
  width: 100%;
  height: clamp(320px, 40vh, 500px);
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* ---------- Services cards ----------
   .card-img was capped to 260px and left at its own width, so it floated
   inside the card instead of filling it, while .card-img-overlay (absolute,
   inset:0) laid the copy across the bare photo. The markup asks for a dark
   panel behind that copy (.content-wrapper.bg-dark.text-white) but .bg-dark
   has no rule anywhere, so the white text sat directly on the image and was
   unreadable. Make the photo fill its card and give .bg-dark the dark ground
   its own class name specifies. */
.services .card {
  overflow: hidden;
}

.services .card-img {
  width: 100% !important;
  height: 260px !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
}

.services .card-img-overlay {
  padding: 1rem;
}

.services .content-wrapper.bg-dark {
  background: rgba(12, 36, 63, .82);
  width: 100%;
}

/* The card copy was landing on var(--slate) - a dark ink meant for light
   grounds - inside this dark panel, so the descriptions were illegible while
   their headings were white. The wrapper already carries .text-white; this
   just lets the paragraph honour it instead of a generic card-paragraph rule.
   Restoring the markup's own stated colour, not introducing a new one. */
.services .content-wrapper.text-white .card-text {
  color: inherit;
}

/* ---------- Team ----------
   compat.css makes the .team SECTION an auto-fit card grid
   (repeat(auto-fit, minmax(280px, 1fr))). That's right where the cards are
   direct children of .team, but here they're wrapped in .team-cards - so the
   whole wrapper sat in a single 280px track (380px used) and its three cards
   stacked down that narrow column. Let the wrapper span every track, then run
   the card grid inside it. */
.team-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.8rem);
  align-items: stretch;
}

.team-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* These are 2:3 portrait headshots (3916x5874 and similar). Cropping them into
   a short landscape box with the default centre origin sliced the middle out of
   each frame and cut the faces off, so the crop is squared up and biased toward
   the top of the frame where the subject actually is. */
.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* ---------- Testimonials ----------
   compat.css turns .testimonials into an auto-fit card grid - correct where
   that class names the card set itself, but here it names the whole SECTION.
   So its three children became three side-by-side columns: the "Testimonials"
   heading in column one, "What Our Patients Say" in column two, and every
   card crushed into column three at x=1300, overflowing the page. The section
   goes back to a normal block and the grid moves down to .testimonial-cards,
   where it belongs. */
.testimonials {
  display: block !important;
  padding-inline: max(1.25rem, calc((100% - 1200px) / 2));
}

.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, .8rem + 1.2vw, 1.9rem);
  align-items: stretch;
  margin-top: 1.5rem;
}

.testimonial-card {
  height: 100%;
}

/* the portrait was rendering 200x300 as a block above the name; it reads as an
   avatar beside it */
.testimonial-header {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.testimonial-header img {
  width: 64px !important;
  height: 64px !important;
  max-height: none !important;
  border-radius: 50%;
  object-fit: cover !important;
  flex: none;
}

.testimonial-header h3 {
  margin: 0;
}