/* =========================================================
   SERVICES (Leistungen)
   - "WOW" hover cards (premium, clean, SEO-friendly)
   - Cursor spotlight + animated holo border + subtle sparkles
   - 3D tilt is driven by services.js via CSS vars
     (--rx, --ry, --px, --py, --lift, --borderAlpha, --shineAlpha)
   - Text stays crisp: no blur/filters applied on content.
   ========================================================= */

.hm-services{
  background:
    /* White top + bottom caps (fade to white) */
    linear-gradient(
      180deg,
      #fff 0%,
      #fff 10%,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,0) 74%,
      #fff 92%,
      #fff 100%
    ),

    /* Your existing glow */
    radial-gradient(720px 420px at 18% 20%, rgba(31,138,91,.10), transparent 60%),
    radial-gradient(720px 420px at 82% 10%, rgba(201,162,39,.10), transparent 60%);

  /* CTA size control (keeps all buttons identical) */
  --hm-svc-cta-width: 150px;
  --hm-svc-cta-height: 40px;
  --hm-svc-cta-font: 14px;
}

.hm-services__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

/* Featured card spans the full first row */
.hm-svc--featured{ grid-column: 1 / -1; }

@media (max-width: 980px){
  .hm-services__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 620px){
  .hm-services__grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   WOW CARD
   ========================================================= */

.hm-svc{
  position: relative;
  padding: 20px;
  border-radius: 24px;

  /* Default layout; card variants can override to flex */
  display: block;

  /* Mouse-driven vars (set by services.js) */
  --px: 50%;
  --py: 40%;
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0;
  --borderAlpha: 0;
  --shineAlpha: 0;

  /* Layered surface (pseudo elements) */
  background: transparent;
  border: 0;

  /* Crisp text on transforms */
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;

  transform:
    translate3d(0, calc(var(--lift) * -1px), 0)
    rotateX(var(--rx))
    rotateY(var(--ry));

  box-shadow:
    0 18px 44px rgba(15,23,42,.08);

  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 200ms cubic-bezier(.2,.8,.2,1);

  overflow: hidden;
}

/* =========================================================
   CARD LAYOUT VARIANTS
   - Featured: full-width, 6 bullet points
   - Small: all equal height; CTA aligned consistently
   ========================================================= */

.hm-svc--featured,
.hm-svc--small{
  display:flex;
  flex-direction: column;
}

.hm-svc--small{
  /* Keep all small cards identical even if they have 1–4 bullet points */
  min-height: var(--hm-svc-small-min, 360px);
}

/* Keep the CTA in the same vertical position across cards */
.hm-svc__cta{ margin-top: auto; }

/* Animated holo border halo */
.hm-svc::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 26px;
  background:
    conic-gradient(
      from 180deg,
      rgba(31,138,91, 0.00),
      rgba(31,138,91, 0.42),
      rgba(201,162,39, 0.42),
      rgba(31,138,91, 0.00)
    );
  opacity: var(--borderAlpha);
  filter: blur(12px);
  transform: rotate(0deg);
  transition: opacity 220ms ease;
  pointer-events: none;
}

/* Main surface (cursor spotlight + subtle micro-grid) */
.hm-svc::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 23px;
  background:
    /* Cursor spotlight (green + gold) */
    radial-gradient(720px 280px at var(--px) var(--py), rgba(31,138,91,.18), transparent 58%),
    radial-gradient(640px 260px at calc(var(--px) + 16%) calc(var(--py) - 10%), rgba(201,162,39,.16), transparent 62%),

    /* Corner accents */
    radial-gradient(520px 220px at 18% 12%, rgba(15,23,42,.06), transparent 58%),
    radial-gradient(520px 220px at 88% 92%, rgba(15,23,42,.04), transparent 58%),

    /* Micro grid (very subtle) */
    repeating-linear-gradient(
      135deg,
      rgba(15,23,42,.04) 0,
      rgba(15,23,42,.04) 1px,
      transparent 1px,
      transparent 10px
    ),

    /* Base glass */
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90));

  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(15,23,42,.04);

  pointer-events: none;
}

.hm-svc > *{ position: relative; z-index: 1; }

/* Hover: lift + glow (desktop only) */
@media (hover: hover){
  .hm-svc:hover{
    --lift: 7;
    --borderAlpha: 1;
    --shineAlpha: 1;

    box-shadow:
      0 30px 78px rgba(15,23,42,.16),
      0 0 0 1px rgba(31,138,91,.08),
      0 0 80px rgba(31,138,91,.12);
  }
}

/* Keyboard focus (premium + accessible) */
.hm-svc:focus-within{
  outline: 0;
  box-shadow:
    0 30px 78px rgba(15,23,42,.16),
    0 0 0 3px rgba(31,138,91,.24);
}

/* Border animation only when hovering (keeps CPU low) */
@media (hover:hover){
  .hm-svc:hover::before{
    animation: hmSvcSpin 2.6s linear infinite;
  }
}

@keyframes hmSvcSpin{
  to{ transform: rotate(360deg); }
}

/* =========================================================
   CONTENT
   ========================================================= */

.hm-svc__top{
  display:grid;
  gap: 10px;
  /* Center title + description on all cards */
  text-align: center;

  /* Reserve space for the top-right icon placeholder
     and keep the visual center truly centered */
  padding-left: 2px;
  padding-right: 2px;
}

/* Top-right icon placeholder (you can later add an SVG in settings) */
.hm-svc__icon{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display:grid;
  place-items:center;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hm-svc__icon img{
  width: 50px;
  height: 50px;
  object-fit: contain;
  opacity: .92;
}

.hm-svc__tag{
  display:inline-flex;
  align-items:left;
  justify-content:left;
  width: max-content;
  /* Keep the tag centered when the header is centered */
  justify-self: left;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,138,91,.16);
  background: rgba(31,138,91,.08);
  color: rgba(15,23,42,.78);
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}

@media (max-width: 620px){
  .hm-svc__top{
    /* Reduce side padding on small screens but keep center alignment */
    padding-left: 2px;
    padding-right: 2px;
  }
}

.hm-svc__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.hm-svc__desc{
  margin: 0;
  color: rgba(15,23,42,.72);
  line-height: 1.65;
  font-size: 15.5px;
}

.hm-svc__list{
  list-style: none;
  padding: 0;
  margin: 14px 0 16px;
  display:grid;
  gap: 8px;
}

/* Featured list: 3 + 3 on desktop, 6 stacked on mobile */
.hm-svc--featured .hm-svc__list--featured{
  display: block;
  column-count: 2;
  column-gap: 104px;

  /* ✅ center the whole 2-column block */
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 16px;

  /* keep text readable inside the centered block */
  text-align: left;
}

.hm-svc--featured .hm-svc__list--featured li{
  break-inside: avoid;
  margin: 0 0 8px;
}

@media (max-width: 980px){
  .hm-svc--featured .hm-svc__list--featured{
    column-count: 1;
    display: grid;
    gap: 8px;
  }
  .hm-svc--featured .hm-svc__list--featured li{ margin: 0; }
}

.hm-svc__list li{
  position: relative;
  padding-left: 20px;
  color: rgba(15,23,42,.78);
  font-weight: 700;
  line-height: 1.5;
  font-size: 14px;
}

.hm-svc__list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--hm-green), var(--hm-gold));
  box-shadow: 0 0 0 6px rgba(31,138,91,.10);
  transform: scale(1);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover){
  .hm-svc:hover .hm-svc__list li::before{
    transform: scale(1.12);
    box-shadow:
      0 0 0 7px rgba(31,138,91,.14),
      0 10px 22px rgba(31,138,91,.18);
  }
}

/* =========================================================
   CTA
   ========================================================= */

.hm-svc__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self: flex-end;
  margin-left: auto;
  width: var(--hm-svc-cta-width);
  height: var(--hm-svc-cta-height);
  max-width: 100%;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  font-size: var(--hm-svc-cta-font);

  position: relative;
  overflow: hidden;

  color: #0b1a14;
  background: linear-gradient(135deg, rgba(255,224,138,.92), rgba(201,162,39,.92));
  border: 1px solid rgba(201,162,39,.28);
  box-shadow: 0 16px 44px rgba(201,162,39,.18);

  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

/* Button shine sweep */
.hm-svc__cta::before{
  content:"";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.40) 35%,
      transparent 70%
    );
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.hm-svc__cta::after{
  content: "→";
  margin-left: 10px;
  font-weight: 1000;
  transition: transform 180ms ease;
}

.hm-svc__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(201,162,39,.24);
}

@media (hover:hover){
  .hm-svc:hover .hm-svc__cta::before{ transform: translateX(120%); }
  .hm-svc:hover .hm-svc__cta::after{ transform: translateX(2px); }
}

/* =========================================================
   INNER SHINE
   ========================================================= */

.hm-svc__shine{
  position:absolute;
  inset: -40% -60%;
  background:
    /* Cursor highlight */
    radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.34), transparent 46%),

    /* Soft sweep */
    linear-gradient(
      120deg,
      rgba(255,255,255,.0) 0%,
      rgba(255,255,255,.16) 35%,
      rgba(255,255,255,.0) 70%
    ),

    /* Tiny sparkles */
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.24), transparent 26%),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 62% 78%, rgba(255,255,255,.16), transparent 26%);

  transform: translateX(-18%) rotate(14deg);
  opacity: var(--shineAlpha);
  transition: opacity 220ms ease, transform 760ms cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

@media (hover:hover){
  .hm-svc:hover .hm-svc__shine{
    transform: translateX(18%) rotate(14deg);
  }
}