/* ═══════════════════════════════════════════════════════════════
   hero.css — HERO SEKCIA (fullwidth banner + text naľavo)
   ───────────────────────────────────────────────────────────────
   TODO: Výšku banneru zmeň cez --hero-height
   TODO: Silu tmavého overlay zmeň cez opacity v .hero-overlay
   TODO: Obrázok nahraď v index.html (src atribút)
   TODO: CTA text a odkaz zmeň v index.html
═══════════════════════════════════════════════════════════════ */

/* ── Výška banneru ────────────────────────────────────────── */
/* TODO: Zmeň hodnotu pre vyšší/nižší banner */
:root { --hero-height: clamp(360px, 46vw, 520px); }

/* ── Wrapper sekcie ───────────────────────────────────────── */
.hero {
  position:    relative;
  width:       100%;
  min-height:  var(--hero-height);
  background:  var(--clr-primary-dk);
  display:     flex;
  align-items: center;
  overflow:    hidden;
}

/* ── Pozadie — fotka pevne ukotvená, nepohybuje sa ───────── */
.hero-bg {
  position:  absolute;
  top:       50%;
  left:      50%;
  width:     min(calc(100% - 48px), 1140px);
  height:    100%;
  transform: translate(-50%, -50%);
  z-index:   1;
  overflow:  hidden;
}
.hero-bg::before {
  content: none;
}
.hero-bg img {
  position:        absolute;
  top:             0;
  left:            0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  display:         block;
  z-index:         1;
  clip-path:      none;
}

/* Ľavá časť centrálneho bannera kopíruje jemný okraj fotografie. */
.hero-color-panel {
  display:    none;
  position:   absolute;
  top:        50%;
  left:       50%;
  width:      min(calc(100% - 48px), 1140px);
  height:     100%;
  transform:  translate(-50%, -50%);
  z-index:    2;
  background: var(--clr-primary);
  clip-path:  polygon(0 0, 50.7% 0, 50.5% 5%, 50.9% 10%, 50.7% 15%, 51.2% 20%, 51% 25%, 51.5% 30%, 51.3% 35%, 51.8% 40%, 51.6% 45%, 52.1% 50%, 51.9% 55%, 52.4% 60%, 52.2% 65%, 52.7% 70%, 53.8% 75%, 54.7% 80%, 55.3% 85%, 55.7% 90%, 56% 95%, 56.2% 100%, 0 100%);
}

/* ── Grid — text vľavo, prázdne miesto vpravo ────────────── */
.hero-inner {
  position:              relative;
  z-index:               3;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-lg);
  align-items:           center;
  padding-block:         var(--space-xl);
  width:                 100%;
  max-width:             1140px;
}

/* Pravá strana — prázdna (Churchill je na pozadí) */
.hero-spacer { display: block; }

/* ── Text na ľavej strane ─────────────────────────────────── */
.hero-copy { max-width: 560px; }

/* ── Odznak dôveryhodnosti ────────────────────────────────── */
.hero-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     rgba(255, 255, 255, 0.12);
  color:          var(--hero-text-color, #000);
  border:         1px solid rgba(255, 255, 255, 0.28);
  border-radius:  999px;
  padding:        5px 14px;
  font-size:      0.8rem;
  font-weight:    600;
  letter-spacing: .04em;
  margin-bottom:  var(--space-md);
  backdrop-filter: blur(4px);
}
.hero-tag::before { content: '✦'; font-size: 0.62rem; }

/* ── Hlavný citát ─────────────────────────────────────────── */
.hero-quote {
  margin:         0 0 6px 0;
  padding:        0;
  border-left:    0;

  font-size:      clamp(1.4rem, 2.8vw, 2rem);
  font-weight:    700;
  line-height:    1.35;
  color:          #000;
  font-style:     normal;
  letter-spacing: -0.01em;

  /* Jemný tieň pre čitateľnosť na svetlých častiach fotky */
  text-shadow:    0 2px 16px rgba(0, 0, 0, 0.35);
}

/* ── Meno autora ──────────────────────────────────────────── */
.hero-cite {
  display:        block;
  font-size:      0.82rem;
  font-weight:    600;
  color:          var(--hero-text-muted, rgba(0, 0, 0, 0.7));
  font-style:     normal;
  margin-bottom:  var(--space-md);
  padding-left:   24px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Benefit / podnadpis ──────────────────────────────────── */
.hero-benefit {
  font-size:     var(--hero-benefit-font-size, 16px);
  color:         var(--hero-benefit-color, #000);
  line-height:   1.75;
  margin-bottom: var(--space-md);
}
.hero-benefit > :first-child,
.hero-quote-part > :first-child { margin-top: 0; }
.hero-benefit > :last-child,
.hero-quote-part > :last-child { margin-bottom: 0; }

/* ── CTA tlačidlá ─────────────────────────────────────────── */
.hero-ctas {
  display:       flex;
  gap:           12px;
  flex-wrap:     wrap;
  margin-bottom: var(--space-md);
}
.hero-quote-part { display: block; }
.hero-quote-part--first { color: #000; }
.hero-quote-part--second {
  color: var(--hero-quote-part-2-color, #17608d);
  font-size: 0.9em;
}
.hero-ctas .hero-cta--primary,
.hero-ctas .hero-cta--primary:hover {
  background:   var(--hero-cta1-color, #c62828);
  border-color: var(--hero-cta1-color, #c62828);
}
.hero-ctas .hero-cta--secondary,
.hero-ctas .hero-cta--secondary:hover {
  background:   var(--hero-cta2-color, #fff);
  border-color: var(--hero-cta2-color, #fff);
  color:        var(--hero-text-color, #000);
}

.home .section { padding-top: 36px; }

/* Ghost (priehľadné) tlačidlo pre svetlé pozadie */
/* TODO: Zmeň farbu orámovaného tlačidla tu */
.btn-ghost {
  display:      inline-block;
  padding:      12px 24px;
  border-radius: var(--radius-sm);
  font-family:  inherit;
  font-weight:  600;
  font-size:    0.95rem;
  text-decoration: none;
  cursor:       pointer;
  border:       2px solid rgba(255, 255, 255, 0.55);
  background:   rgba(255, 255, 255, 0.08);
  color:        #fff;
  backdrop-filter: blur(4px);
  transition:   background var(--transition), border-color var(--transition),
                transform var(--transition);
}
.btn-ghost:hover {
  background:   rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.9);
  transform:    translateY(-1px);
}

/* ── Sociálny dôkaz ───────────────────────────────────────── */
.hero-social-proof {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  flex-wrap:   wrap;
}
.proof-label {
  font-size:      0.72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          rgba(255, 255, 255, 0.5);
  white-space:    nowrap;
}
.trusted-logos      { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.trusted-logos span {
  font-weight: 600;
  font-size:   0.82rem;
  color:       rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

@media (max-width: 900px) and (min-width: 641px) {
  .hero-inner {
    gap: var(--space-md);
    padding-block: var(--space-lg);
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 12px;
  }
  .hero-bg {
    order: 1;
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 24px);
    height: clamp(220px, 72vw, 300px);
    transform: none;
    margin-inline: auto;
  }
  .hero-bg img {
    left: -100%;
    width: 200%;
    max-width: none;
    object-position: center;
  }
  .hero-color-panel {
    top: 12px;
    width: calc(100% - 24px);
    height: clamp(190px, 55vw, 240px);
    transform: translateX(-50%);
  }
  .hero-inner {
    order: 2;
    display: block;
    width: calc(100% - 24px);
    padding: 32px var(--space-md);
    background: var(--clr-accent);
  }
  .hero-copy { max-width: none; }
  .hero-spacer { display: none; }
  .home .section { padding-top: 28px; }
}