/* Seelenbalsam — Services Cards ("Mein Angebot")
 * 3-card grid; collapses to 1-col ≤768px. Uses --mx-* tokens. */

.sb-services-cards {
  padding: var(--mx-space-3xl) var(--mx-space-lg) var(--mx-space-5xl);
  background-color: #FFE9EE;
  background-image:
    radial-gradient(ellipse 70% 90% at 0% 38%, rgba(243, 114, 179, 0.24) 0%, rgba(243, 114, 179, 0.12) 42%, rgba(243, 114, 179, 0) 72%),
    linear-gradient(90deg, rgba(255, 224, 234, 0.94) 0%, rgba(255, 238, 235, 0.84) 44%, rgba(255, 252, 245, 0.66) 100%),
    url('../images/angebot-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sb-services-cards__inner {
  max-width: var(--mx-container-max);
  margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.sb-services-cards__head {
  text-align: left;
  margin-bottom: var(--mx-space-3xl);
}

.sb-services-cards__heading {
  font-family: 'Gelica', 'Tiempos Headline', 'Suisse Intl', "Aileron", Georgia, serif;
  font-size: clamp(36px, 3.4vw, 56px);
  font-weight: 400;
  color: var(--mx-color-ink, #45375c);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 var(--mx-space-md);
}

.sb-services-cards__sub {
  font-family: 'Suisse Intl', "Aileron", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: #72657B;
  line-height: 1.75;
  max-width: 720px;
  margin: 0;
}

/* Diamond-dot + thin line separator (matches about-intro) */
.sb-services-cards__rule {
  position: relative;
  display: block;
  width: 90px;
  height: 2px;
  margin: 24px 0 0;
  background: #EFA1A2;
}
.sb-services-cards__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  background: #EFA1A2;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ── Grid ───────────────────────────────────────────────────────────── */
.sb-services-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* ── Card ───────────────────────────────────────────────────────────── */
.sb-services-cards__card {
  position: relative;
  height: 100%;
  border-radius: var(--mx-radius-md);
  overflow: hidden;
  box-shadow: var(--mx-shadow-sm);
  transition:
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover gradient lives on an overlay so it can FADE smoothly (gradients
   themselves are not animatable). Base gradient stays underneath. */
.sb-services-cards__card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.sb-services-cards__card:hover::after {
  opacity: 1;
}
/* keep inner content above the overlay */
.sb-services-cards__card-inner { position: relative; z-index: 1; }

/* Figma card gradients */
.sb-services-cards__card:nth-child(1) {
  background: linear-gradient(180deg, #E4529B 0%, #F95FAC 100%) !important;
}
.sb-services-cards__card:nth-child(1)::after {
  background: linear-gradient(180deg, #FF3C9E 0%, #F95FAC 100%);
}
.sb-services-cards__card:nth-child(2) {
  background: linear-gradient(180deg, #C5A242 0%, #D39F3E 100%) !important;
}
.sb-services-cards__card:nth-child(2)::after {
  background: linear-gradient(180deg, #E6AA02 0%, #D39F3E 100%);
}
.sb-services-cards__card:nth-child(3) {
  background: linear-gradient(180deg, #2DAEBC 0%, #39B0BD 100%) !important;
}
.sb-services-cards__card:nth-child(3)::after {
  background: linear-gradient(180deg, #02C2D7 0%, #39B0BD 100%);
}

/* White text/icons on the colored cards */
.sb-services-cards__card .sb-services-cards__title,
.sb-services-cards__card .sb-services-cards__body,
.sb-services-cards__card .sb-services-cards__link {
  color: #ffffff !important;
}
.sb-services-cards__card .sb-services-cards__icon img {
  filter: brightness(0) invert(1);
}

.sb-services-cards__card:hover {
  box-shadow: var(--mx-shadow-lg);
}

.sb-services-cards__card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: var(--mx-space-3xl) var(--mx-space-2xl);
  min-height: 480px;
  box-sizing: border-box;
}

.sb-services-cards__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mx-space-2xl);
}

.sb-services-cards__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sb-services-cards__title {
  font-family: 'Gelica', 'Tiempos Headline', 'Suisse Intl', "Aileron", Georgia, serif;
  font-size: clamp(26px, 2vw, 32px);
  font-weight: 400;
  color: var(--mx-color-ink);
  line-height: 1.15;
  margin: 0 0 18px;
}

.sb-services-cards__body {
  font-family: var(--mx-font-body);
  font-size: var(--mx-fs-md);
  color: var(--mx-color-text);
  line-height: var(--mx-lh-relaxed);
  margin: 0 0 var(--mx-space-2xl);
  flex: 1;
}

/* Actions row: Buchen pill + Weitere Informationen link */
.sb-services-cards__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Buchen: elegant ghost button, thin white outline on the colored card */
.sb-services-cards__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: #ffffff !important;
  font-family: var(--mx-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: background var(--mx-dur-base) var(--mx-ease-out),
              color var(--mx-dur-base) var(--mx-ease-out),
              border-color var(--mx-dur-base) var(--mx-ease-out);
}

.sb-services-cards__book:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #45375c !important;
}

.sb-services-cards__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-space-sm);
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--mx-font-body);
  font-size: var(--mx-fs-md);
  font-weight: var(--mx-fw-semibold);
  color: #ffffff;
  text-decoration: none;
  transition: gap var(--mx-dur-base) var(--mx-ease-out), opacity var(--mx-dur-base) var(--mx-ease-out);
}

.sb-services-cards__link:hover {
  opacity: 0.85;
  gap: calc(var(--mx-space-sm) + 4px);
}

.sb-services-cards__arrow {
  flex-shrink: 0;
  transition: transform var(--mx-dur-base) var(--mx-ease-out);
}

.sb-services-cards__link:hover .sb-services-cards__arrow {
  transform: translateX(2px);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sb-services-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mx-space-lg);
  }
  .sb-services-cards__card-inner { padding: var(--mx-space-2xl); min-height: 0; }
}

@media (max-width: 768px) {
  .sb-services-cards { padding: var(--mx-space-4xl) var(--mx-space-md); }
  .sb-services-cards__head { margin-bottom: var(--mx-space-2xl); }
  .sb-services-cards__grid { grid-template-columns: 1fr; }
  .sb-services-cards__icon { width: 72px; height: 72px; margin-bottom: var(--mx-space-lg); }
  .sb-services-cards__title { font-size: var(--mx-fs-2xl); }
  /* Bump tap area on "Mehr Entdecken" link — was 27px tall, now ≥44 */
  .sb-services-cards__link {
    padding: 12px 0;
    min-height: 44px;
    align-items: center;
  }
}

/* ── Responsive padding fix ── */
@media (max-width: 1024px) {
    .sb-services-cards { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (max-width: 768px) {
    .sb-services-cards { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ── Button overflow fix on mobile ── */
@media (max-width: 768px) {
    .sb-services-cards__cta, .sb-services-cards a[class*="cta"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}