/* ==========================================================================
   Artistic Dimension — Services
   ========================================================================== */

/* Feature mosaic — image / copy / image, then copy / image / copy */
.svc-mosaic {
  display: grid;
  gap: var(--ad-gap);
}

.svc-mosaic__row {
  display: grid;
  grid-template-columns: 1.02fr .86fr 1.02fr;
  gap: var(--ad-gap);
  align-items: stretch;
}

.svc-mosaic__media {
  border-radius: var(--ad-r);
  overflow: hidden;
  background: var(--ad-surface-2);
  min-height: clamp(210px, 21vw, 300px);
}

.svc-mosaic__media img { width: 100%; height: 100%; object-fit: cover; }

.svc-mosaic__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  padding: clamp(1rem, .6rem + 1.6vw, 2.1rem) clamp(.6rem, .4rem + 1.2vw, 1.6rem);
}

.svc-mosaic__copy .ad-title--sm { line-height: 1.2; }
.svc-mosaic__copy p { font-size: var(--ad-fs-small); line-height: 1.85; max-width: 34ch; }

/* Row 2 pulls the middle image slightly wider, mirroring the mockup rhythm */
.svc-mosaic__row--flip { grid-template-columns: .9fr 1.2fr .9fr; }

/* Locations: alternating icon card / image card */
.svc-locations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ad-gap);
}

.svc-loc {
  display: flex;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line-soft);
  border-radius: var(--ad-r);
  overflow: hidden;
  min-height: clamp(170px, 14vw, 200px);
  transition: transform var(--ad-t) var(--ad-ease-out), box-shadow var(--ad-t) var(--ad-ease);
}

.svc-loc:hover { transform: translateY(-4px); box-shadow: var(--ad-shadow-md); }

.svc-loc__media { flex: 0 0 32%; overflow: hidden; }
.svc-loc__media img { width: 100%; height: 100%; object-fit: cover; }

.svc-loc__body {
  flex: 1;
  padding: clamp(.85rem, .6rem + .6vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.svc-loc__name {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-family: var(--ad-font-sans);
  font-size: var(--ad-fs-body);
  font-weight: 500;
  color: var(--ad-ink);
  line-height: 1.3;
}

.svc-loc__name .ad-icon {
  width: clamp(28px, 2.2vw, 34px);
  background: var(--ad-gold-tint);
}
.svc-loc__name .ad-icon svg { width: 52%; height: 52%; }

.svc-loc__list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--ad-fs-label);
  color: var(--ad-body);
}

.svc-loc__list li { display: flex; align-items: center; gap: .45em; line-height: 1.6; }

.svc-loc__list li::before {
  content: "";
  width: 9px;
  height: 5px;
  flex: none;
  border-left: 1.2px solid var(--ad-gold);
  border-bottom: 1.2px solid var(--ad-gold);
  transform: rotate(-45deg) translateY(-1px);
}

@media (max-width: 1180px) {
  .svc-locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .svc-mosaic__row,
  .svc-mosaic__row--flip { grid-template-columns: 1fr 1fr; }
  .svc-mosaic__copy { grid-column: 1 / -1; align-items: flex-start; }
  .svc-mosaic__copy p { max-width: 52ch; }
}

@media (max-width: 560px) {
  .svc-mosaic__row,
  .svc-mosaic__row--flip { grid-template-columns: 1fr; }
  .svc-locations { grid-template-columns: 1fr; }
}