/* ===========================================================
   MODULE: SERVICE SECTION (v3.7 / cleaned)
   Uses global heading + button classes
   =========================================================== */

/* SECTION (reads padding tokens) */
.atx-service-section {
  width: 100%;
  padding-left: var(--svc-pad-x, var(--wrap-pad-x));
  padding-right: var(--svc-pad-x, var(--wrap-pad-x));
  padding-top: var(--svc-pad-top, 3rem);
  padding-bottom: var(--svc-pad-bottom, 3rem);
}

/* INNER WRAPPER */
.atx-service-section__inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--wrap-max-width);
  display: flex;
  flex-direction: column;
  gap: var(--svc-inner-gap, 2rem);
}

/* HEADER + TITLE */
.atx-service-section__header {
  text-align: center;
  margin-bottom: var(--svc-pad-heading-bottom, 1.5rem);
  position: relative;
  z-index: 1;
}
.atx-service-section.is-header-left .atx-service-section__header { text-align: left; }
.atx-service-section.is-header-center .atx-service-section__header { text-align: center; }

.atx-service-section__title {
  margin-bottom: var(--svc-title-mb, 2rem);
}

/* GRID */
.atx-service-grid {
  display: grid;
  column-gap: var(--svc-gap-x);
  row-gap: var(--svc-gap-y);
  grid-template-columns: repeat(var(--svc-cols-mobile), minmax(0,1fr));
}

@media (min-width: 768px) {
  .atx-service-grid {
    grid-template-columns: repeat(var(--svc-cols-tablet), minmax(0,1fr));
    grid-auto-rows: 1fr; /* every row as tall as the tallest card → all panels the same height */
  }
}

@media (min-width: 1024px) {
  .atx-service-grid {
    grid-template-columns: repeat(var(--svc-cols-desktop), minmax(0,1fr));
  }
}

/* CARD */
.atx-service-card {
  background-color: var(--svc-card-bg, var(--are-panel-color-1));
  border-radius: var(--svc-card-radius);
  box-shadow: var(--svc-card-shadow);
  min-height: var(--svc-panel-min-h);
  display: flex;
  transition: box-shadow .18s ease, transform .18s ease;
}

.atx-service-card:hover {
  box-shadow: var(--svc-card-shadow-h);
  transform: translateY(-3px);
}

/* INNER */
.atx-service-card__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  text-align: center;
}

.atx-service-section.is-content-left .atx-service-card__inner {
  text-align: left;
}

/* ICON */
.atx-service-card__iconwrap {
  display: flex;
  justify-content: center;
  margin-top: var(--svc-space-icon-top);
  margin-bottom: var(--svc-space-icon-head);
}
.atx-service-section.is-content-left .atx-service-card__iconwrap {
  justify-content: flex-start;
}

.atx-service-card__iconcircle {
  width: var(--svc-icon-circle-size);
  height: var(--svc-icon-circle-size);
  border-radius: 50%;
  background-color: var(--svc-icon-circle-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease;
}

.atx-service-card__iconimg {
  width: var(--svc-icon-img-size);
  height: var(--svc-icon-img-size);
  object-fit: contain;
  filter: var(--svc-icon-filter);
}

.atx-service-card:hover .atx-service-card__iconcircle {
  transform: scale(1.08);
}

/* HEADING */
.atx-service-card__heading {
  margin: 0 0 var(--svc-space-head-text) 0;
}

/* DESCRIPTION */
.atx-service-card__desc {
  font-size: var(--svc-desc-fs);
  line-height: 1.4;
  color: var(--font-body-color);
  margin: 0 0 var(--svc-space-text-cta) 0;
  flex-grow: 1;
  text-align: justify;
}

/* FOOTER (CTA area) */
.atx-service-card__footerrow {
  display: flex;
  align-items: center;
  margin-bottom: var(--svc-space-cta-bottom);
}

/* TEXT LINK (INSIDE CARD – when NOT using a button)
   Follows global link behavior */
.atx-service-card__link {
  font-size: 0.9rem;
  color: var(--link-color);
  font-weight: var(--link-weight-normal);
  text-decoration: none;
  transition: color .2s ease, font-weight .2s ease;
}

.atx-service-card__link:hover {
  color: var(--link-hover-color);
  font-weight: var(--link-weight-hover);
  text-decoration: none;
}

/* ----- ONLY CHANGE YOU REQUESTED -----
   “Show more…” follows global link styling
----------------------------------------- */
.atx-service-show-more {
  align-self: center;
  margin-top: var(--gap-sm);
  display: none;
  background: transparent;
  border: 0;
  padding: 0;

  /* Look: .atx-more-link (style.css). */
}


@media (max-width: 767px) {
  .atx-service-section__header {
    margin-bottom: 0rem; /* smaller */
  }

  .atx-service-section__title {
    margin-bottom: 0rem; /* smaller */
  }
}