/**
 * Teaser Content Hub Component Styles
 *
 * A fully-clickable card linking to a hub item (event, article, etc.).
 * Hover: subtle white overlay on image + image scale + CTA underline.
 * Active: stronger overlay.
 *
 * Figma node: 863:28909
 */

/* -------------------------------------------------------
 * Component-scoped custom properties
 * ------------------------------------------------------- */
.teaser-card-content-hub {
  --thc-border:        var(--ambience, #ebe6e1);
  --thc-bg-content:    var(--white, #ffffff);
  --thc-text:          var(--trust, #550a2d);
  --thc-focus-opacity: 0;
  --thc-image-scale:   1;
}

.teaser-card-content-hub--trust {
  --thc-bg-content:    var(--trust);
  --thc-text:          var(--white);
}

/* -------------------------------------------------------
 * Card — link wrapper
 * ------------------------------------------------------- */
.teaser-card-content-hub {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--border-radius-m, 4px);
  overflow: hidden;
  text-decoration: none;
  color: var(--thc-text);
  cursor: pointer;
}

/* ── Hover ── */
.teaser-card-content-hub:hover {
  --thc-focus-opacity: 0.15;
  --thc-image-scale:   1.05;
}

.teaser-card-content-hub:hover .teaser-card-content-hub__cta-label {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* ── Active / pressed ── */
.teaser-card-content-hub:active {
  --thc-focus-opacity: 0.3;
  --thc-image-scale:   1.05;
}

/* ── Focus-visible (keyboard navigation) ── */
.teaser-card-content-hub:focus-visible {
  outline: var(--border-width-regular, 2px) solid var(--trust, #550a2d);
  outline-offset: 2px;
  --thc-focus-opacity: 0.15;
}

/* -------------------------------------------------------
 * Media / Image area
 * ------------------------------------------------------- */
.teaser-card-content-hub__media {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 280;
  overflow: hidden;
  border-left:  var(--border-width-regular, 2px) solid var(--thc-border);
  border-right: var(--border-width-regular, 2px) solid var(--thc-border);
  border-top:   var(--border-width-regular, 2px) solid var(--thc-border);
}

.teaser-card-content-hub__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.teaser-card-content-hub__image img,
.teaser-card-content-hub__image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--thc-image-scale));
  transform-origin: center center;
  transition: transform 0.4s ease;
}

/* White hover overlay */
.teaser-card-content-hub__focus {
  position: absolute;
  inset: 0;
  background-color: var(--white, #ffffff);
  opacity: var(--thc-focus-opacity);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* -------------------------------------------------------
 * Labels (on top-left of the image)
 * ------------------------------------------------------- */
.teaser-card-content-hub__labels {
  background: var(--white);
  position: absolute;
  top: var(--spacing-150);
  left: var(--spacing-150);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-100);
}

/* -------------------------------------------------------
 * Content area (below the image)
 * ------------------------------------------------------- */
.teaser-card-content-hub__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  padding: var(--spacing-200, 16px) var(--spacing-250, 20px);
  background-color: var(--thc-bg-content);
  border-left:   var(--border-width-regular, 2px) solid var(--thc-border);
  border-right:  var(--border-width-regular, 2px) solid var(--thc-border);
  border-bottom: var(--border-width-regular, 2px) solid var(--thc-border);
  border-top:    none;
  border-radius: 0 0 var(--border-radius-m, 4px) var(--border-radius-m, 4px);
}

/* -------------------------------------------------------
 * Text group (title + meta)
 * ------------------------------------------------------- */
.teaser-card-content-hub__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-150, 12px);
}

.teaser-card-content-hub__title {
  margin: 0;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-card-m);
  line-height: 1.3;
  letter-spacing: -0.24px;
  color: var(--thc-text);
  font-feature-settings: 'zero';
}

.teaser-card-content-hub__meta {
  display: flex;
  flex-direction: column;
}

.teaser-card-content-hub__date {
  margin: 0;
  font-family: 'Bosch Sans', sans-serif;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-card-m, 16px);
  line-height: 1.5;
  color: var(--thc-text);
  font-feature-settings: 'zero';
}

.teaser-card-content-hub__time-location {
  margin: 0;
  font-family: 'Bosch Sans', sans-serif;
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--text-card-m, 16px);
  line-height: 1.5;
  color: var(--thc-text);
  font-feature-settings: 'zero';
}

/* -------------------------------------------------------
 * CTA (visual only — whole card is the real link)
 * ------------------------------------------------------- */
.teaser-card-content-hub__cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-100, 8px);
  padding: var(--spacing-025, 2px);
  border-radius: var(--border-radius-m, 4px);
  margin-top: var(--spacing-200, 16px);
}

.teaser-card-content-hub__cta-label {
  font-family: 'Bosch Sans', sans-serif;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--text-card-cta, 16px);
  line-height: 1.1;
  letter-spacing: -0.18px;
  color: var(--thc-text);
  white-space: nowrap;
  font-feature-settings: 'zero';
  transition: text-decoration 0.2s ease;
}

.teaser-card-content-hub__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--thc-text);
}

.teaser-card-content-hub__cta-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* -------------------------------------------------------
 * Tablet (≥ 768px)
 * ------------------------------------------------------- */
@media (min-width: 768px) {
  .teaser-card-content-hub__content {
    min-height: 220px;
  }
}

/* -------------------------------------------------------
 * Desktop (≥ 1200px)
 * ------------------------------------------------------- */
@media (min-width: 1200px) {
  .teaser-card-content-hub__content {
    min-height: 250px;
  }
}

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