/**
 * Image Teaser Card Styles
 *
 * Full-bleed image card with:
 * - Frosted-glass pill label top-left
 * - Dark gradient vignette at bottom (for headline readability)
 * - Bold white headline bottom-left
 *
 * Figma node: 863:28939
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.image-teaser-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: var(--border-radius-m, 4px);
  padding: var(--spacing-350, 28px) var(--spacing-400, 32px);
  aspect-ratio: 3 / 4;
}

/* Hover: subtle scale on image */
.image-teaser-card:hover .image-teaser-card__image img {
  transform: scale(1.03);
}

/* ── Background image ─────────────────────────────────────────────────────── */

.image-teaser-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--ambience, #ebe6e1);
}

/* Intermediate Drupal wrapper elements — just fill the container. */
.image-teaser-card__image > *,
.image-teaser-card__image .media,
.image-teaser-card__image figure,
.image-teaser-card__image picture,
.image-teaser-card__image [class*="field"] {
  display: block;
  width: 100%;
  height: 100%;

  /* counteract image meta */
  .media__image-wrap {
    position: initial;
  }
  .media__credits-overlay {
    display: none;
  }
}

/* img fills the portrait card — anchored top so only the bottom is clipped. */
.image-teaser-card__image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  transition: transform 0.3s ease;
}

/* Placeholder: subtle pattern when no image is set. */
.image-teaser-card__image--placeholder {
  background-color: var(--ambience, #ebe6e1);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(0, 0, 0, 0.04) 8px,
    rgba(0, 0, 0, 0.04) 16px
  );
}

/* ── Dark gradient vignette (improves headline readability) ───────────────── */

.image-teaser-card__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 520px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 11%, rgba(0, 0, 0, 0.33) 85%);
  pointer-events: none;
}

/* ── Button (top-left) ────────────────────────────────────────────────────── */

.image-teaser-card .button__container {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding-top: 0;
}

/* ── White headline ───────────────────────────────────────────────────────── */

.image-teaser-card__headline {
  position: relative;
  z-index: 2;
  margin: 0;
  margin-top: auto;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: 700;
  font-size: var(--text-size-headline-h5, 26px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--white, #ffffff);
}