/* Allgemeine Card-Fixes */
[data-stack-card] {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}

/* Reduce vertical padding inside the stacking cards (override Tailwind py-32)
   Apply only on small screens so the desktop media query can increase height.
   This prevents large top offsets inside the grid cells on mobile. */
@media (max-width: 768px) {
  /* Ensure comfortable, consistent inner padding on mobile */
  [data-stack] [data-stack-card] .grid {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    /* ensure enough vertical distance between text block and media container */
    row-gap: 2.25rem !important;
    /* make cards taller on mobile so full content is visible */
    min-height: 680px !important;
  }

  /* Align card content to the top so top spacing equals padding */
  [data-stack] .grid > * {
    justify-content: flex-start !important;
    /* avoid forced stretching that can cause crowding/overlap */
    min-height: auto !important;
    height: auto !important;
  }

  /* Consistent vertical gaps inside text blocks (badge, heading, text, button) */
  [data-stack] [data-stack-card] .space-y-4 > * + * {
    margin-top: 1.25rem !important; /* larger spacing between title/text/button */
  }

  /* Additional breathing room below the button group to the media container */
  [data-stack] [data-stack-card] .space-y-4 > a.group.inline-flex {
    margin-bottom: 0.5rem !important;
  }

  /* Card 3 special case: disable 100% height on mobile to prevent crowding */
  [data-stack] .card-center .grid,
  [data-stack] .card-center .grid > * {
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Card 3: make the cube significantly smaller on mobile */
  #cube3-host {
    width: 72% !important;
    max-width: 280px !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
  }
  #cube3-host canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Align Card 3's sticky offset so perceived height matches others */
  [data-stack] article.card-center.sticky {
    top: 12vh !important;
  }

  /* Ensure Card 3 uses at least the same or larger height as others */
  [data-stack] article.card-center > .grid {
    min-height: 760px !important;
    row-gap: 2.5rem !important;
  }



  /* Smaller headings on mobile so long titles don't get cut off */
  [data-stack] [data-stack-card] h3 {
    font-size: clamp(1rem, 3.8vw, 1.125rem) !important; /* ~16–18px */
    line-height: 1.3 !important;
  }

  /* Slightly smaller body text in 4CARDS on mobile */
  [data-stack] [data-stack-card] p {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }
}

/* Glow-Layer Fix */
[data-stack-card] > .absolute {
  pointer-events: none;
  z-index: -1;
  will-change: filter, transform;
  transform: translateZ(0);
}

/* Cube stabilisieren */
#cube3-host,
#cube3-host canvas {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* When JS sets explicit heights we want clean clipping, but avoid breaking the grid layout.
   Target only the special card marker so other cards keep their grid behavior. */
.card-center .grid {
  align-items: center !important; /* vertical centering of grid cells within the CSS Grid */
  align-content: center !important; /* center the grid tracks inside the grid container */
  height: 100% !important; /* ensure grid fills the sized content area set by JS */
}
.card-center .grid > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* left-align horizontally */
  justify-content: center !important; /* vertically center content inside each cell */
  text-align: left !important;
  overflow: hidden;
  height: 100%;
  align-self: stretch !important; /* force the cell to stretch so its internal flex centering positions content in the middle */
}

/* Center content inside every grid cell so text/media sit vertically centered
   while preserving the two-column CSS Grid layout. This is safe because we
   don't change the .grid container itself. */
/* Scoped rule: apply vertical centering only inside the stacking area so
   generic "grid" containers such as the footer are not affected. */
[data-stack] .grid > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100%;
}

/* Ensure the action buttons inside cards align to the left */
[data-stack-card] a.group.inline-flex,
.card-center a.group.inline-flex {
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Ensure inner spans that center text still left-align their text */
[data-stack-card] a.group.inline-flex span span,
.card-center a.group.inline-flex span span {
  text-align: left !important;
}

/* Quickfix: make mobile contact buttons have a subtle 1px border and lighter shadow
   to avoid a visually thicker border compared to other pages */
.mobile-menu a.group,
[data-stack-card] a.group.inline-flex {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important; /* slightly lighter than heavy glow */
}

/* Strong, scoped fixes for the special centered card (Card 3)
   - Remove any remaining top/bottom padding coming from utility classes
   - Neutralize Tailwind's space-y margins inside this card
   - Ensure each grid cell truly fills the computed height and centers its content */
.card-center {
  box-sizing: border-box !important;
}
.card-center .grid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  align-content: center !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.card-center .grid > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* left-align horizontally */
  justify-content: center !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
/* Restore Tailwind-like vertical spacing inside the centered card so text and buttons
   have the same gaps as the other cards (space-y-4 ~= 1rem). */
.card-center .space-y-4 > * + * {
  margin-top: 1rem !important;
}

/* Desktop: slightly increase the visual height of the stacking cards by
   increasing vertical padding and enforcing a comfortable min-height. This
   only affects screens >= 769px so mobile stays unchanged. */
@media (min-width: 769px) {
  [data-stack] [data-stack-card] > .grid {
    /* increase the vertical space within cards */
    padding-top: 3.25rem !important; /* ~52px */
    padding-bottom: 3.25rem !important; /* ~52px */
    min-height: 420px; /* gentle increase so cards appear taller on desktop */
    box-sizing: border-box !important;
  }

  /* ensure centered-card variant still vertically centers after height change */
  .card-center .grid {
    padding-top: 0 !important; /* keep centered card's internal spacing controlled by its own rules */
    padding-bottom: 0 !important;
    min-height: 420px !important;
  }
}

/* Make desktop stacked cards show a subtle border + drop-shadow like mobile
   This is conservative so it doesn't overpower the existing design. */
@media (min-width: 769px) {
  [data-stack] [data-stack-card] {
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 0 12px 40px -24px rgba(15,23,42,0.65), 0 6px 18px rgba(0,0,0,0.12) !important;
  }
}