/* SG-Tronic Motorsport — responsive box/title alignment fix
   Keeps card headings inside their own boxes and prevents text/image overlap. */

/* All common grid/card children must be allowed to shrink inside CSS Grid. */
.service-grid > a,
.related > a,
.worldwide-links > a,
.mode-grid > *,
.level-grid > *,
.local-seo > div > article,
.care-service-grid > article,
.care-area-grid > article,
.care-related-links > a,
.booking-modes > div:last-child > article,
.contact-options > article,
.work-preview-card,
.gallery-card,
.case-summary-card,
.case-media-card {
  min-width: 0;
  box-sizing: border-box;
}

/* Long vehicle/module names must wrap instead of leaving the card. */
.service-grid h3,
.related h3,
.worldwide-links h3,
.mode-grid h3,
.level-grid h3,
.local-seo h3,
.care-service-grid h3,
.care-area-grid h3,
.care-related-links h3,
.booking-modes h3,
.contact-options h3,
.work-preview-card h3,
.gallery-card h3,
.case-summary-card strong,
.case-media-card h3 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Homepage Our Work cards: image is one clean area, title/copy is a separate panel.
   This removes the title-over-photo problem visible on smaller laptop displays. */
.work-preview-card {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: #081b2c;
}
.work-preview-card::after {
  display: none !important;
}
.work-preview-card > img {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.work-preview-card .work-copy {
  position: static !important;
  inset: auto !important;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 18px 20px 20px;
  box-sizing: border-box;
  background: linear-gradient(180deg,#081b2c 0%,#081b2c 100%);
}
.work-preview-card .work-tag {
  margin: 0 0 10px;
}
.work-preview-card h3 {
  width: 100%;
  min-height: 2.45em;
  margin: 0 0 9px;
  line-height: 1.22;
}
.work-preview-card p {
  width: 100%;
  margin: 0;
}

/* Full Our Work gallery: align every title/copy area consistently. */
.gallery-card {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.gallery-card > img {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.gallery-card .gallery-copy {
  position: static !important;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.gallery-card h3 {
  min-height: 2.4em;
}
.gallery-card p {
  flex: 1 1 auto;
}
.gallery-card .view-project {
  align-self: flex-start;
}

/* Consistent title rows in common multi-column box grids. */
@media (min-width: 901px) {
  .worldwide-links h3,
  .local-seo > div h3,
  .care-area-grid h3,
  .care-related-links h3,
  .booking-modes > div:last-child h3,
  .contact-options h3 {
    min-height: 2.45em;
  }
}

/* At medium/small widths let titles use their natural height. */
@media (max-width: 980px) {
  .work-preview-card h3,
  .gallery-card h3,
  .worldwide-links h3,
  .local-seo > div h3,
  .care-area-grid h3,
  .care-related-links h3,
  .booking-modes > div:last-child h3,
  .contact-options h3 {
    min-height: 0;
  }
}

@media (max-width: 650px) {
  .work-preview-card .work-copy {
    padding: 16px;
  }
}