/* ==========================================================================
   TREATMENTS GRID — cards read from the aumtm_service post type

   Used on the home page (first three) and the treatments page (all of them),
   so a treatment is edited once and both places follow.

   Column count comes from --aumtm-cols, set through a CSS selector rather than
   an inline style, which would outrank the media queries below.
   ========================================================================== */

.aumtm-servicegrid {
  --aumtm-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--aumtm-cols), minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2rem);
}

.aumtm-svc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--aumtm-line);
  border-radius: var(--aumtm-radius);
  overflow: hidden;
  transition: transform var(--aumtm-dur) var(--aumtm-ease),
              box-shadow var(--aumtm-dur) var(--aumtm-ease),
              border-color var(--aumtm-dur) var(--aumtm-ease);
}
.aumtm-svc:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--aumtm-shadow-lg);
}

.aumtm-svc__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.aumtm-svc__img.aumtm-svc__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--aumtm-ease);
}
.aumtm-svc:hover .aumtm-svc__img { transform: scale(1.05); }

.aumtm-svc__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.625rem 1.5rem 1.5rem;
}

.aumtm-svc__title { font-size: var(--aumtm-fs-h3); }
.aumtm-svc__title a:hover { color: var(--aumtm-blue); }

.aumtm-svc__excerpt {
  margin-top: 0.75rem;
  font-size: var(--aumtm-fs-sm);
  line-height: 1.8;
}

/* ---------- Duration and price ---------- */
.aumtm-svc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.125rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--aumtm-line-soft);
  font-size: var(--aumtm-fs-xs);
  color: var(--aumtm-text-dim);
}
.aumtm-svc__meta li { display: inline-flex; align-items: center; gap: 0.4375rem; }
.aumtm-svc__meta svg {
  width: 14px; height: 14px; flex: none;
  stroke: var(--aumtm-cyan); fill: none; stroke-width: 1.8;
}
.aumtm-price { color: var(--aumtm-heading); font-weight: 700; }

.aumtm-svc__more {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--aumtm-blue);
  font-size: var(--aumtm-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.aumtm-svc__more svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
  transition: transform var(--aumtm-dur) var(--aumtm-ease);
}
.aumtm-svc:hover .aumtm-svc__more svg { transform: translateX(4px); }

/* Make the whole card clickable while keeping a real link in the heading, so
   screen readers and the context menu still have something to work with. */
.aumtm-svc__link::after { content: ""; position: absolute; inset: 0; }
.aumtm-svc { position: relative; }

/* ---------- Empty state ----------
   Rendered inside the Elementor editor only. With no data the front end outputs
   nothing at all — an empty grid looks worse than an absent section — but an
   editor needs to be told why the section is blank. */
.aumtm-empty {
  padding: 2.5rem;
  border: 1px dashed var(--aumtm-line);
  border-radius: var(--aumtm-radius);
  text-align: center;
  color: var(--aumtm-text-dim);
  font-size: var(--aumtm-fs-sm);
}

@media (max-width: 980px) { .aumtm-servicegrid { --aumtm-cols: 2; } }
@media (max-width: 640px)  { .aumtm-servicegrid { --aumtm-cols: 1; } }