/*
 * Melli Hero — frontend i editor styly.
 *
 * Plochý design (ostré rohy), foto pozadí přes celou šířku, tmavý overlay
 * pro čitelnost bílého textu. Obsah centrován (label + H1 na 2 řádky + CTA),
 * dle předlohy melli.sk.
 *
 * Barvy přes DaisyUI/CSS proměnné (tokeny z TASK-002) — žádné hardcoded HEX.
 */

.melli-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
   * Pojistka proti přetečení: i kdyby byl blok roztažen na 100vw,
   * 100vw zahrnuje šířku svislého scrollbaru → vodorovné přetečení.
   * max-width: 100% sváže šířku s dostupnou plochou (bez scrollbaru).
   * Pro celou šířku použij zarovnání bloku „Na celou šířku" (alignfull), NE w-[100vw].
   */
  max-width: 100%;
  min-height: 620px;
  padding: 4rem 1.5rem;
  background-color: var(--color-neutral, #333333); /* fallback, než se načte obrázek */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Tmavý overlay pro kontrast bílého textu nad fotkou. */
.melli-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
}

.melli-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  width: 100%;
}

/* Malý červený label VERZÁLKAMI. */
.melli-hero__label {
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* H1 — bílý, váha 600, dva řádky pod sebou. */
.melli-hero__heading {
  margin: 0 0 1.75rem;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(2rem, 5vw, 3rem); /* ~32px mobil → ~48px desktop (hero H1) */
}

.melli-hero__heading-line {
  display: block;
}

/* CTA — DaisyUI .btn .btn-primary (vínová, ostré rohy, uppercase z child overrides). */
.melli-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.melli-hero__cta-arrow {
  font-size: 1.25em;
  line-height: 1;
}

/* ----- Responzivita ----- */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .melli-hero {
    min-height: 520px;
  }
}

/* Mobil (≤ 767px) */
@media (max-width: 767px) {
  .melli-hero {
    min-height: 440px;
    padding: 3rem 1.25rem;
  }
}