/* =========================================================
   HERO COMPONENT – Trashy Core + Apple/Mercury Style
   ========================================================= */

.c-hero {
  position: relative;
  width: 100%;
  padding: var(--tc-space-16) var(--tc-container-padding) calc(var(--tc-space-16) + 0.5rem);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--tc-color-bg-soft); /* Fallback */
  display: flex;
  align-items: center;
  height: 100svh;
}

/* Optional Overlay, per zusätzlicher Klasse aktivierbar */
.c-hero--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(2px);
}

/* Inner Container */

.c-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--tc-container-width);
  margin: 0 auto;
  color: var(--tc-color-bg-surface);
}

/* Headline */

.c-hero__title {
  font-size: var(--tc-font-size-h1);
  font-weight: 700;
  line-height: var(--tc-line-height-tight);
  letter-spacing: -0.03em;
  margin: 0 0 var(--tc-space-3);
  color: var(--tc-color-bg-surface);
}

/* Light version (für dunkle Bilder) */
.c-hero--light .c-hero__title,
.c-hero--light .c-hero__text {
  color: #ffffff;
}

/* Text */

.c-hero__text {
  font-size: var(--tc-font-size-md);
  line-height: var(--tc-line-height-loose);
  max-width: 40rem;
  color: var(--tc-color-w);
  margin-bottom: var(--tc-space-6);
}

/* Buttons Wrapper */

.c-hero__buttons {
  display: flex;
  gap: var(--tc-space-3);
  margin-top: var(--tc-space-4);
}

/* Primärer Button (kann auch .tc-btn nutzen; hier hero-spezifisch) */

.c-hero__button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem;
  border-radius: var(--tc-radius-pill);
  background: linear-gradient(
    135deg,
    var(--tc-color-primary),
    var(--tc-color-primary-soft)
  );
  color: #ffffff;
  font-weight: 600;
  font-size: var(--tc-font-size-md);
  text-decoration: none;
  box-shadow: var(--tc-shadow-primary);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.c-hero__button-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* Sekundärer Button */

.c-hero__button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.83rem 2rem;
  border-radius: var(--tc-radius-pill);
  border: 1px solid var(--tc-color-border-subtle);
  background: var(--tc-color-bg-surface);
  color: var(--tc-color-text);
  font-weight: 500;
  font-size: var(--tc-font-size-md);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.c-hero__button-secondary:hover {
  background: #ffffff;
  border-color: var(--tc-color-border-strong);
}

/* RESPONSIVE --------------------------------------- */

@media (max-width: 768px) {
  .c-hero {
    padding: var(--tc-space-12) 1.25rem var(--tc-space-12);
  }

  .c-hero__buttons {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
  }

  .c-hero__button-primary,
  .c-hero__button-secondary {
    width: 100%;
    text-align: center;
  }
}