/**
 * Teaser Cards Themenseiten Component Styles
 *
 * On hover (hover-capable devices):
 *   1. Illustration fades out (opacity → 0, scaleY collapses).
 *   2. Description fades in ABOVE the title (flex-direction: column-reverse keeps
 *      title anchored to the bottom while the card grows upward).
 *   3. Arrow stays at its fixed bottom-right position throughout.
 *
 * Figma node: 863:28933
 */

/* -------------------------------------------------------
 * Component-scoped custom properties
 * ------------------------------------------------------- */
.teaser-card-themepage {
  --tct-arrow-bg: var(--ambience-500, #dbd4ce);
}

/* -------------------------------------------------------
 * Card — link wrapper
 * ------------------------------------------------------- */
.teaser-card-themepage {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-m, 4px);
  background-color: var(--ambience, #ebe6e1);
  min-height: 360px;
  text-decoration: none;
  color: var(--trust, #550a2d);
  cursor: pointer;
}

/* ── Focus-visible ── */
.teaser-card-themepage:focus-visible {
  outline: var(--border-width-regular, 2px) solid var(--trust, #550a2d);
  outline-offset: 2px;
}

/* -------------------------------------------------------
 * Illustration / Image area (absolute, fills card)
 * ------------------------------------------------------- */
.teaser-card-themepage__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-250, 20px) 0;
  padding-top:0;
  transform-origin: top center;
  /* mouse-OUT: wait for description to vanish first, then image fades back */
  transition: opacity 0.8s ease-in-out 0.2s, transform 0.8s ease-in-out 0.2s;

  .field--name-field-image-credits {
    display: none;
  }
}

.teaser-card-themepage__image {
  width: 100%;
  height: 100%;

  img,
  picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}



/* -------------------------------------------------------
 * Text content
 *
 * flex-direction: column-reverse means the DOM order title → description
 * renders visually as description (above) → title (at bottom).
 * When description grows on hover the card grows upward (card is flex-end);
 * the title stays fixed at its bottom position.
 *
 * padding-right reserves space for the absolutely-positioned arrow:
 *   32px (card right padding) + 44px (arrow) + 40px (gap) = 116px
 * ------------------------------------------------------- */
.teaser-card-themepage__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, transparent 0%, var(--ambience, #ebe6e1) 50%);
  padding: var(--spacing-800, 64px)
           calc(var(--spacing-400, 32px) + 44px + var(--spacing-500, 40px))
           var(--spacing-400, 32px)
           var(--spacing-400, 32px);
}

/* -------------------------------------------------------
 * Title — rendered at the bottom (first in flex-direction: column-reverse)
 * ------------------------------------------------------- */
.teaser-card-themepage__title {
  margin: 0;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-card-xl);
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: var(--trust);
  min-height: 2em;
}

/* -------------------------------------------------------
 * Description — hidden by default, revealed above title on hover
 * ------------------------------------------------------- */
.teaser-card-themepage__description {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  font-size: var(--text-paragraph-m);
  line-height: 1.5;
  letter-spacing: -0.18px;
  color: var(--trust, #550a2d);
  font-feature-settings: 'zero';
  /* mouse-OUT: opacity gone first, then height collapses */
  transition: opacity 0.4s ease-in-out 0.2s,
              max-height 0.4s ease-in-out 0.2s,
              margin-top 0.4s ease-in-out 0.2s;
}

/* -------------------------------------------------------
 * Arrow — fixed at bottom-right, never moves
 * ------------------------------------------------------- */
.teaser-card-themepage__arrow {
  position: absolute;
  bottom: var(--spacing-400, 32px);
  right: var(--spacing-400, 32px);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--tct-arrow-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--trust, #550a2d);
  transition: background-color 0.35s ease-in-out;
}

/* -------------------------------------------------------
 * Mobile toggle buttons — absolutely positioned at bottom-left.
 * Hidden on hover-capable devices (hover handles the reveal there).
 * ------------------------------------------------------- */
.teaser-card-themepage__mehr-infos,
.teaser-card-themepage__weniger {
  position: absolute;
  bottom: var(--spacing-200, 16px);
  left: var(--spacing-400, 32px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-paragraph-m, 16px);
  line-height: 1.1;
  color: var(--attitude-600, #996096);
}

.teaser-card-themepage__weniger {
  display: none;
}

.teaser-card-themepage__mehr-infos-icon,
.teaser-card-themepage__weniger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.teaser-card-themepage__mehr-infos-icon svg,
.teaser-card-themepage__weniger-icon svg {
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------
 * Mobile expanded state (.is-expanded added by JS)
 * ------------------------------------------------------- */
.teaser-card-themepage.is-expanded .teaser-card-themepage__mehr-infos {
  display: none;
}

.teaser-card-themepage.is-expanded .teaser-card-themepage__weniger {
  display: flex;
}

.teaser-card-themepage.is-expanded .teaser-card-themepage__description {
  max-height: 30em;
  opacity: 1;
  margin-top: var(--spacing-200, 16px);
  transition: max-height 0.25s ease-out, opacity 0.2s ease-out, margin-top 0.2s ease-out;
}

/* -------------------------------------------------------
 * Label badge — fixed at top-left
 * ------------------------------------------------------- */
.teaser-card-themepage__label-wrap {
  position: absolute;
  top: var(--spacing-150, 12px);
  left: var(--spacing-150, 12px);
  z-index: 2;
}

/* -------------------------------------------------------
 * Hover interactions (hover-capable devices only)
 * ------------------------------------------------------- */
@media (hover: hover) {
  /* Toggle buttons only serve touch/mobile — hide them on desktop pointer devices */

  /* Image fades out and collapses — mouse-IN timing overrides the base */
  .teaser-card-themepage:hover .teaser-card-themepage__media {
    opacity: 0;
    transform: scaleY(70%) scaleX(70%);
    transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
  }

  /* Description grows above the title — mouse-IN timing overrides the base */
  .teaser-card-themepage:hover .teaser-card-themepage__description {
    max-height: 30em;
    opacity: 1;
    margin-block: var(--spacing-300);
    transition: max-height 0.4s ease-out 0.05s,
                opacity 0.25s ease-out 0.2s,
                margin-top 0.3s ease-out;
  }

  /* Arrow darkens */
  .teaser-card-themepage:hover {
    --tct-arrow-bg: var(--ambience-600, #bab0a7);
  }
}

/* Hide toggle buttons only on ≥ 1024px pointer devices (not on tablets/phones) */
@media (min-width: 1024px) {
  .teaser-card-themepage__mehr-infos,
  .teaser-card-themepage__weniger {
    display: none !important;
  }
}

/* -------------------------------------------------------
 * Tablet (≥ 768px)
 * ------------------------------------------------------- */
@media (min-width: 1024px) {
  .teaser-card-themepage {
    min-height: 420px;
  }

  .teaser-card-themepage__content {
    padding-bottom: var(--spacing-200, 16px);
  }
}



/* -------------------------------------------------------
 * Desktop XL (≥ 1920px)
 * ------------------------------------------------------- */
@media (min-width: 1920px) {
  .teaser-card-themepage {
    min-height: 520px;
  }
}