/* Created by Content Blocks */

.card {
  /* Reason: establish a size container so the title can scale to the card's own
     width (cqi units below), independent of the viewport */
  container-type: inline-size;
}

.card__title {
  /* Reason: allow the title to shrink within the flex header and hyphenate long
     German words (e.g. ANSPRECHPARTNER, VERFÜGBARKEIT) at proper syllable
     boundaries instead of overflowing the card.
     overflow-wrap: normal + text-wrap: wrap override the global h1–h4 rule
     (Resources/Public/Css/tailwind.css), whose break-words/text-balance would
     otherwise chop words mid-syllable and pre-empt hyphenation. */
  min-width: 0;
  overflow-wrap: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: wrap;
  /* Fluid size: scales with card width, capped at the original text-3xl (1.875rem) */
  font-size: clamp(1.25rem, 8cqi, 1.875rem);
  line-height: 1.2;
}

@container (max-width: 340px) {
  /* Reason: on cramped cards the icon sitting beside the title steals enough
     horizontal space to force long words to break. Stack the icon above the title
     (top-left, its own size) so every title line gets the full card width, and trim
     the inner body padding for more room. Threshold is tunable. */
  .card__header {
    flex-direction: column;
    align-items: stretch; /* title fills the full width */
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .card__icon {
    align-self: flex-start; /* icon keeps its own size, parked top-left */
    min-width: 0; /* undo the 5rem reserved column */
    padding-right: 0;
  }

  .card__body {
    padding-left: 0;
    padding-right: 0;
  }
}

.card__heading {
  /* Reason: stack the optional kicker directly above the title so both share the
     same left edge, with the icon centered beside the pair. min-width:0 lets long
     German titles shrink/hyphenate inside the flex row. */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.card__kicker {
  /* Reason: eyebrow line above the title (date, location, category). Styled here
     rather than with Tailwind utilities because tracking/weight utilities aren't
     all in the compiled layout.min.css; the color comes from the {icon_color}
     class in the template. */
  margin: 0 0 0.2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card--compact {
  padding: calc(1.25rem * 0.75);
  border-radius: calc(0.375rem * 0.75);
}

.card--compact .card__kicker {
  font-size: calc(0.8125rem * 0.9);
  letter-spacing: 0.08em;
}

.card--compact .card__header {
  margin: calc(1rem * 0.75) 0;
}

.card--compact .card__icon {
  min-width: calc(2.5rem * 0.75);
  min-height: calc(2.5rem * 0.75);
  padding-right: calc(1rem * 0.75);
  border-bottom-left-radius: calc(0.5rem * 0.75);
}

.card--compact .card__title {
  font-size: calc(1.5rem * 0.75);
  line-height: calc(2rem * 0.75);
}

.card--compact .card__body {
  padding-left: calc(0.5rem * 0.75);
  padding-right: calc(0.5rem * 0.75);
  padding-bottom: calc(1rem * 0.75);
}

.card--compact .card__cta {
  padding-left: calc(1.5rem * 0.75);
  padding-right: calc(1.5rem * 0.75);
  padding-bottom: calc(1rem * 0.75);
}

.card--compact .card__button {
  padding: calc(0.75rem * 0.75) calc(1.25rem * 0.75);
  border-radius: calc(0.375rem * 0.75);
}

@media (min-width: 640px) {
  .card--compact .card__icon {
    min-width: calc(5rem * 0.75);
    padding-right: 0;
  }

  .card--compact .card__title {
    font-size: calc(1.875rem * 0.75);
    line-height: calc(2.25rem * 0.75);
  }

  .card--compact .card__body {
    padding-left: calc(1.5rem * 0.75);
    padding-right: calc(1.5rem * 0.75);
  }
}