/**
 * Alphauzi Services Cards — responsive grid, hover highlight
 *
 * Di Elementor, .elementor-widget-container sering jadi flex item dengan min-width: auto
 * sehingga grid/kartu bisa memaksa lebar melebihi kolom (overflow horizontal).
 */

.alphauzi-services {
  --alphauzi-srv-gap: clamp(1.25rem, 3vw, 2.5rem);
  --alphauzi-srv-radius: 0;
  --alphauzi-srv-media-ratio: 4 / 3;
  --alphauzi-srv-body-pad: clamp(1.25rem, 2.5vw, 2rem);
  --alphauzi-srv-index-offset-y: 0px;
  --alphauzi-srv-title-top-spacing: 0px;
  /* CTA — aligned with category-featured-post .post-button */
  --alphauzi-srv-btn-bg: #f4f2ee;
  --alphauzi-srv-btn-color: #8b7355;
  --alphauzi-srv-btn-hover-bg: #5e564d;
  --alphauzi-srv-btn-hover-color: #ffffff;
  --alphauzi-srv-btn-radius: 0;
  --alphauzi-srv-card-bg: transparent;
  --alphauzi-srv-hover-bg: #f1f0ec;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flow-root;
  overflow-x: clip;
  overflow-y: visible;
}

/* Button corners — set via Elementor → Style → Button (matches category-featured-post) */
.alphauzi-services.alphauzi-srv-btn-shape--square {
  --alphauzi-srv-btn-radius: 0;
}

.alphauzi-services.alphauzi-srv-btn-shape--rounded {
  --alphauzi-srv-btn-radius: 8px;
}

.alphauzi-services.alphauzi-srv-btn-shape--pill {
  --alphauzi-srv-btn-radius: 9999px;
}

.elementor-element[data-widget_type^="alphauzi_services_cards"] {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
  width: 100%;
  box-sizing: border-box;
}

.elementor-element[data-widget_type^="alphauzi_services_cards"]
  > .elementor-widget-container {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.e-con:has(.alphauzi-services),
.e-con-inner:has(.alphauzi-services),
.e-con.e-flex:has(.alphauzi-services),
.e-child:has(.alphauzi-services) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.elementor-section .elementor-container:has(.alphauzi-services) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.elementor-column:has(.alphauzi-services),
.elementor-column-wrap:has(.alphauzi-services) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.elementor-widget-container:has(> .alphauzi-services) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.elementor-widget-alphauzi_services_cards .elementor-widget-container {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.alphauzi-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--alphauzi-srv-gap);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alphauzi-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-width: 0;
  container-type: inline-size;
  container-name: alphauzi-srv-card;
  background-color: var(--alphauzi-srv-card-bg);
  border-radius: var(--alphauzi-srv-radius);
  overflow: hidden;
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease;
  box-shadow: none;
}

.alphauzi-service-card:hover,
.alphauzi-service-card:focus-within {
  background-color: var(--alphauzi-srv-hover-bg);
}

.alphauzi-service-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--alphauzi-srv-media-ratio);
  overflow: hidden;
  background: #efede7;
}

.alphauzi-service-card__media img,
.alphauzi-service-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Index sits in body but overlaps image — avoids clip from __media overflow + paints above image */
.alphauzi-service-card__index {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  /* More negative % = higher on the image; cqw keeps size inside card (fixes tablet 2-col overflow vs raw vw) */
  transform: translate(-50%, calc(-52% + var(--alphauzi-srv-index-offset-y, 0px)));
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.055);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.alphauzi-service-card__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--alphauzi-srv-body-pad);
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

@supports (font-size: 1cqw) {
  .alphauzi-service-card__index {
    font-size: clamp(2.5rem, min(7vw, 20cqw), 5.5rem);
  }

  .alphauzi-service-card__body {
    padding-top: clamp(2.5rem, min(5.5vw, 14cqw), 3.75rem);
  }
}

.alphauzi-service-card__title {
  margin: var(--alphauzi-srv-title-top-spacing, 0px) 0 0.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #111827;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.alphauzi-service-card__desc {
  margin: 0 0 1.5rem;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  line-height: 1.65;
  color: #5b5b5b;
  flex: 1 1 auto;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.alphauzi-service-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 30px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--alphauzi-srv-btn-color, #8b7355);
  background-color: var(--alphauzi-srv-btn-bg, #f4f2ee);
  border: 1px solid transparent;
  border-radius: var(--alphauzi-srv-btn-radius, 0);
  transition: all 0.3s ease;
}

.alphauzi-service-card__cta:hover,
.alphauzi-service-card__cta:focus-visible {
  color: var(--alphauzi-srv-btn-hover-color, #ffffff);
  background-color: var(--alphauzi-srv-btn-hover-bg, #5e564d);
  border-color: transparent;
  outline: none;
}

.alphauzi-service-card__cta-arrow::after {
  content: "\2192";
  margin-left: 0.15em;
  font-weight: 400;
}

/* Tablet: slightly tighter title/desc so long copy + 2-col grid stays inside column */
@media (min-width: 768px) and (max-width: 1024px) {
  .alphauzi-service-card__title {
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    letter-spacing: 0.1em;
  }

  .alphauzi-service-card__desc {
    font-size: clamp(0.75rem, 1.35vw, 0.875rem);
  }
}

@supports (font-size: 1cqw) {
  @media (min-width: 768px) and (max-width: 1024px) {
    .alphauzi-service-card__title {
      font-size: clamp(0.9rem, min(1.8vw, 4.5cqw), 1.2rem);
    }

    .alphauzi-service-card__desc {
      font-size: clamp(0.75rem, min(1.35vw, 3.8cqw), 0.875rem);
    }
  }
}

/*
 * Tablet portrait & lebar ~iPad portrait: 2 kolom → kartu sempit; vw indeks masih besar vs lebar kartu.
 * 768–834: hampir semua tablet portrait + fallback bila orientation tidak terbaca.
 * 835–1024 + portrait: iPad Pro lebar portrait.
 */
@media (min-width: 768px) and (max-width: 834px),
  (min-width: 835px) and (max-width: 1024px) and (orientation: portrait) {
  .alphauzi-services {
    --alphauzi-srv-gap: clamp(0.5rem, 1.5vw, 1rem);
    --alphauzi-srv-body-pad: clamp(0.625rem, 1.5vw, 1rem);
  }

  .alphauzi-service-card__index {
    font-size: clamp(1.625rem, 4vw, 2.5rem);
    transform: translate(-50%, calc(-50% + var(--alphauzi-srv-index-offset-y, 0px)));
  }

  .alphauzi-service-card__body {
    padding: var(--alphauzi-srv-body-pad);
    padding-top: clamp(1.625rem, 4vw, 2.25rem);
  }

  .alphauzi-service-card__title {
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    letter-spacing: 0.08em;
  }

  .alphauzi-service-card__desc {
    font-size: clamp(0.7rem, 1.2vw, 0.8125rem);
  }

  .alphauzi-service-card__cta {
    padding: 10px 20px;
    letter-spacing: 1px;
  }
}

@supports (font-size: 1cqw) {
  @media (min-width: 768px) and (max-width: 834px),
    (min-width: 835px) and (max-width: 1024px) and (orientation: portrait) {
    .alphauzi-service-card__index {
      font-size: clamp(1.625rem, min(4vw, 10cqw), 2.5rem);
    }

    .alphauzi-service-card__body {
      padding-top: clamp(1.625rem, min(3.75vw, 8.5cqw), 2.25rem);
    }

    .alphauzi-service-card__title {
      font-size: clamp(0.8rem, min(1.6vw, 3.8cqw), 1.05rem);
    }

    .alphauzi-service-card__desc {
      font-size: clamp(0.7rem, min(1.2vw, 3.2cqw), 0.8125rem);
    }
  }
}

@media (max-width: 767px) {
  .alphauzi-service-card__index {
    font-size: clamp(2.5rem, 14vw, 4rem);
    transform: translate(-50%, calc(-50% + var(--alphauzi-srv-index-offset-y, 0px)));
  }
}

@supports (font-size: 1cqw) {
  @media (max-width: 767px) {
    .alphauzi-service-card__index {
      font-size: clamp(2.5rem, min(14vw, 22cqw), 4rem);
    }
  }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .alphauzi-service-card,
  .alphauzi-service-card__cta {
    transition: none;
  }
}