/**
 * Icon Card Component Styles
 *
 * Variants: info (no CTA) | link (with CTA button)
 * Background: trust maroon (--trust, #550a2d) — always dark.
 *
 * Figma nodes: 863:28940 (info mobile), 863:28941 (info desktop), 863:28942 (link)
 */

/* ── Component-scoped custom properties (mobile base) ── */
.icon-card {
  --ic-padding:       var(--spacing-400, 32px);
  --ic-icon-size:     92px;
  --ic-headline-size: 24px;
  --ic-headline-ls:   -0.36px;
  --ic-body-size:     18px;
  --ic-body-ls:       -0.18px;
  --ic-text-gap:      24px;
  --ic-content-gap:   var(--spacing-300, 24px);
}

/* ── Base layout ── */
.icon-card {
  display: flex;
  flex-direction: column;
  padding: var(--ic-padding) var(--ic-padding) 10px;
  background-color: var(--trust, #550a2d);
  color: var(--white, #ffffff);
  border-radius: var(--border-radius-m, 4px);
  overflow: hidden;
  min-height: 600px;
  margin-bottom: var(--spacing-400, 32px);
  transition: background-color 0.35s ease-in-out;
}

/* ── Icon ── */
.icon-card__icon {
  width: var(--ic-icon-size);
  height: var(--ic-icon-size);
  max-height: var(--ic-icon-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--attitude, #ffa0fa);
  /* max-height for link .is-active collapse; transform for hover-card scroll animation */
  transition: opacity 0.35s ease-in-out, max-height 0.35s ease-in-out, transform 0.35s ease-in-out, color 0.35s ease-in-out;
}

.icon-card__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

/* ── Content: fills remaining space after icon, text group pushed to bottom ── */
.icon-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.45s ease-in-out;
}

/* ── Text group ── */
.icon-card__text {
  display: flex;
  flex-direction: column;
}

/* ── Headline ── */
.icon-card__headline {
  margin: 0;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 700;
  font-size: var(--ic-headline-size);
  line-height: 1.25;
  letter-spacing: var(--ic-headline-ls);
  color: var(--white, #ffffff);
  transition: color 0.35s ease-in-out;
}

/* ── Body text ── */
.icon-card__body {
  margin: 0;
  margin-top: var(--ic-text-gap);
  margin-bottom: 0;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 400;
  font-size: var(--ic-body-size);
  line-height: 1.5;
  letter-spacing: var(--ic-body-ls);
  color: var(--white, #ffffff);
  transition: color 0.35s ease-in-out;
}

.icon-card__body > *:last-child {
  margin-bottom: 0;
}

/* ── "Mehr infos" expand toggle (info variant, mobile) ── */
.icon-card__more {
  margin-top: var(--ic-text-gap);
}

.icon-card__mehr-infos {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: var(--spacing-100, 8px) var(--spacing-025, 2px);
  border-radius: var(--border-radius-s, 2px);
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 700;
  font-size: var(--ic-body-size);
  line-height: 1.1;
  letter-spacing: var(--ic-body-ls);
  color: var(--attitude, #ffa0fa);
  cursor: pointer;
  list-style: none;
  transition: color 0.35s ease-in-out;
}

/* ── Info card (no mehr-infos toggle): hover reveal ──
 * Targets info cards that do NOT contain the details toggle element.
 * Pure CSS via :has() — no extra class needed on the element. */
.icon-card__more-body--hover {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* padding-top: 0 overrides the shared .icon-card__more-body rule so the collapsed
     element takes up exactly zero height. Gap is added back only when expanded. */
  padding-top: 0;
  /* icon collapses in 0.35s → stagger text in after 0.2s so they don't overlap */
  transition: max-height 0.4s ease-out 0.05s, opacity 0.25s ease-out 0.2s;
}

@media (hover: hover) {
  .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover {
    background-color: var(--attitude, #ffa0fa);
  }

  /* Icon: scaleY(0) keeps layout space so content can slide over it cleanly */
  .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover .icon-card__icon {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
  }

  /* Content scrolls from bottom to top; JS sets --content-up on mouseenter */
  .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover .icon-card__content {
    transform: translateY(var(--content-up, 0px));
  }

  .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover .icon-card__headline,
  .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover .icon-card__body,
  .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover .icon-card__more-body--hover {
    color: var(--trust, #550a2d);
  }

  .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover .icon-card__more-body--hover {
    max-height: 30em;
    opacity: 1;
    padding-top: var(--ic-text-gap);
  }

  /* Trust (red) or attitude (pink) surface: hover background is white */
  .surface--trust .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover,
  .surface--attitude .icon-card--info:not(:has(.icon-card__more)):not(.icon-card--no-back):hover {
    background-color: var(--white, #ffffff);
  }
}

/* ── Link variant: attitude flip triggered by click (JS adds .is-active) ── */
.icon-card--link.is-active {
  background-color: var(--attitude, #ffa0fa);
  cursor: pointer;
}

.icon-card--link.is-active .icon-card__icon {
  opacity: 0;
  max-height: 0;
}

.icon-card--link.is-active .icon-card__headline,
.icon-card--link.is-active .icon-card__body {
  color: var(--trust, #550a2d);
}

.icon-card--link.is-active .icon-card__cta {
  background-color: var(--trust, #550a2d);
  color: var(--white, #ffffff);
}

/* ── Info variant: attitude flip triggered by click on "Mehr infos" ── */
.icon-card:has(details.icon-card__more[open]) {
  background-color: var(--attitude, #ffa0fa);
}

.icon-card:has(details.icon-card__more[open]) .icon-card__icon,
.icon-card:has(details.icon-card__more[open]) .icon-card__headline,
.icon-card:has(details.icon-card__more[open]) .icon-card__body,
.icon-card:has(details.icon-card__more[open]) .icon-card__more-body,
.icon-card:has(details.icon-card__more[open]) .icon-card__mehr-infos {
  color: var(--trust, #550a2d);
}

.icon-card:has(details.icon-card__more[open]) .icon-card__mehr-infos-icon {
  color: var(--trust, #550a2d);
}

.icon-card:has(details.icon-card__more[open]) .icon-card__icon {
  opacity: 0;
  max-height: 0;
}

/* Icon snaps instantly in both directions for toggle cards — no overlap with more_body. */
.icon-card:has(details.icon-card__more) .icon-card__icon {
  transition: none;
}


/* Remove browser-default triangle marker */
.icon-card__mehr-infos::-webkit-details-marker { display: none; }
.icon-card__mehr-infos::marker { display: none; }

/* Hide "Mehr infos" summary once details is open */
details.icon-card__more[open] > .icon-card__mehr-infos {
  display: none;
}

.icon-card__mehr-infos-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--attitude, #ffa0fa);
}

.icon-card__mehr-infos-icon svg {
  width: 100%;
  height: 100%;
}

/* ── "Weniger anzeigen" close button (info variant, mobile, details open) ── */
.icon-card__weniger {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: var(--spacing-100, 8px) var(--spacing-025, 2px);
  margin-top: var(--ic-text-gap);
  border-radius: var(--border-radius-s, 2px);
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 700;
  font-size: var(--ic-body-size);
  line-height: 1.1;
  letter-spacing: var(--ic-body-ls);
  color: var(--trust, #550a2d);
  background: none;
  border: none;
  cursor: pointer;
}

.icon-card__weniger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.icon-card__weniger-icon svg {
  width: 100%;
  height: 100%;
}

.icon-card__more-body {
  margin: 0;
  padding-top: var(--ic-text-gap);
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 400;
  font-size: var(--ic-body-size);
  line-height: 1.5;
  letter-spacing: var(--ic-body-ls);
  color: var(--white, #ffffff);
  transition: color 0.35s ease-in-out;
}

/* ── Sequenced open/close animation for more_body (mobile only) ──
 * On open:  icon collapses in 0.12s → more_body fades+expands in after 0.12s delay.
 * On close: <details> UA hides content instantly — no height jump on close.
 * Desktop always shows more_body; max-height trick must not apply there. */
@media (max-width: 767px) {
  details.icon-card__more .icon-card__more-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* Exit transition: instant (UA removes content via <details> close anyway) */
    transition: none;
  }

  .icon-card:has(details.icon-card__more[open]) details.icon-card__more .icon-card__more-body {
    max-height: 30em;
    opacity: 1;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
  }
}

/* ── CTA button (link variant) ── */
.icon-card__cta {
  margin-top: var(--ic-content-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 2px var(--spacing-400, 32px) 3px;
  height: 44px;
  background-color: var(--trust-300, #773b57);
  border-radius: var(--border-radius-round, 9999px);
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 700;
  font-size: var(--ic-body-size);
  line-height: 1.1;
  letter-spacing: -0.18px;
  color: var(--white, #ffffff);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
}

.icon-card__cta:hover {
  background-color: var(--trust-200, #aa8496);
}

/* -------------------------------------------------------
 * Tablet+ (≥ 768px)
 * ------------------------------------------------------- */
@media (min-width: 768px) {
  .icon-card {
    --ic-padding:       var(--spacing-500, 40px);
    --ic-icon-size:     120px;
    --ic-headline-size: 32px;
    --ic-headline-ls:   -0.48px;
    --ic-body-size:     22px;
    --ic-body-ls:       -0.22px;
    --ic-text-gap:      24px;
    --ic-content-gap:   var(--spacing-500, 40px);

    min-height: 600px;
  }

  .icon-card__cta {
    height: 56px;
    letter-spacing: -0.264px;
  }

  /* Always show more_body on desktop — override <details> UA hidden state */
  details.icon-card__more > summary {
    display: none;
  }

  details.icon-card__more > .icon-card__more-body {
    display: block;
    padding-top: var(--ic-text-gap);
  }

  .icon-card__weniger {
    display: none;
  }
}