/* Responsive service photography. All compositions come from the existing manifest. */

/* Detail pages follow the photograph's own shape instead of letterboxing it in
   one fixed square/landscape frame. SEO trims only the portrait's empty backdrop. */
.service-detail-photo {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  background: transparent;
}
.service-detail-photo .service-detail-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-ratio, 1);
  overflow: hidden;
}
.service-detail-photo .service-detail-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position, 50% 50%);
}
.service-detail-image.media--seo { --media-position: 50% 80%; }
.service-detail-image.media--redesign,
.service-detail-image.media--automation-1c { --media-ratio: 4 / 3; }
.service-detail-image.media--refinements { --media-ratio: 3 / 2; }
.service-detail-image.media--integrations { --media-ratio: 2; }
.service-detail-image.media--ip-telephony { --media-ratio: 3 / 4; }

/* Keep the bento layout, but match its row proportions to the art direction.
   The widest SEO source needs its full height; the lower square originals have
   room around the subject for the shallower cards. */
.services-grid {
  --service-grid-width: min(1280px, calc(100vw - 128px));
  grid-template-rows:
    minmax(calc((var(--service-grid-width) - 16px) * .21328125), auto)
    minmax(calc((var(--service-grid-width) - 48px) / 5.6), auto)
    minmax(calc((var(--service-grid-width) - 32px) / 4.5), auto)
    minmax(calc((var(--service-grid-width) * 2 - 16px) / 9), auto)
    minmax(calc((var(--service-grid-width) - 32px) / 4), auto)
    auto;
}
.services-grid .service-card .service-media img,
.services-grid .service-card:hover .service-media img {
  object-fit: cover;
  object-position: var(--media-position, 50% 50%);
}
.service-photo.media--development { --media-position: 50% 75%; }
.service-photo.media--seo { --media-position: 50% 50%; }
.service-photo.media--refinements { --media-position: 50% 60%; }
.service-photo.media--speed { --media-position: 85% 50%; }
.service-photo.media--automation-1c { --media-position: 65% 65%; }
.service-photo.media--integrations { --media-position: 100% 55%; }
.service-photo.media--ip-telephony { --media-position: 75% 50%; }
.service-photo.media--virus-removal { --media-position: 50% 70%; }
.service-photo.media--social-media { --media-position: 50% 55%; }
.service-photo.media--analytics { --media-position: 50% 74%; }

@media (min-width: 701px) and (max-width: 1050px) {
  .services-grid {
    grid-template-rows: repeat(7, minmax(calc((100vw - 128px) * .375), auto)) auto;
    grid-auto-rows: auto;
  }
  .services-grid .service-card { min-height: 0; }
  .service-photo.media--seo { --media-position: 50% 71%; }
  .service-photo.media--marketplaces { --media-position: 50% 60%; }
  .service-photo.media--integrations { --media-position: 85% 50%; }
}

@media (max-width: 700px) {
  .service-detail-image.media--development { --media-ratio: 5 / 3; }
  .service-detail-image.media--refinements { --media-ratio: 7 / 5; }
  .services-grid {
    grid-template-rows:
      auto
      repeat(2, minmax(calc((100vw - 38px) * .36), auto))
      minmax(calc((100vw - 38px) / 2), auto)
      auto auto
      repeat(2, minmax(calc((100vw - 38px) * .36), auto))
      minmax(calc((100vw - 38px) / 2), auto);
  }
  .services-grid .service-card { min-height: 0; }
  .services-grid .service-integrations { aspect-ratio: 2; }
  .service-photo.media--development,
  .service-photo.media--speed,
  .service-photo.media--marketplaces,
  .service-photo.media--integrations,
  .service-photo.media--virus-removal,
  .service-photo.media--analytics { --media-position: 50% 50%; }
  .service-photo.media--seo { --media-position: 50% 80%; }
}

/* A narrow phone has one column. Preserve each complete subject instead of
   stretching every service into the former universal 1.25 crop. */
@media (max-width: 379px) {
  .services-grid {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .services-grid .service-card { aspect-ratio: 1; }
  .services-grid .service-development { aspect-ratio: 5 / 3; }
  .services-grid .service-redesign,
  .services-grid .service-automation-1c { aspect-ratio: 4 / 3; }
  .services-grid .service-refinements { aspect-ratio: 7 / 5; }
  .services-grid .service-integrations { aspect-ratio: 2; }
  .services-grid .service-ip-telephony { aspect-ratio: 3 / 4; }
  .service-photo.media--automation-1c,
  .service-photo.media--ip-telephony,
  .service-photo.media--social-media { --media-position: 50% 50%; }
}