/* ============================================
   LANA AUTOMOTIVA — Hero Section
   Fiel ao Figma: container 1216px, overflow clip,
   imagem em fluxo (não absoluta), badge absoluto
   no centro da divisória.
   ============================================ */

/* ── Section wrapper ── */

.hero {
  width: 100%;
  background-color: var(--color-static-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1280px) {
  .hero {}
}

@media (max-width: 767px) {
  .hero {
    padding: var(--space-12) 0 0;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
  }
}

/* ── Inner container: 1216px, overflow clip, flex row ── */

.hero__container {
  width: 100%;
  max-width: var(--container-max);
  /* 1216px */
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: clip;
  position: relative;
}

@media (max-width: 767px) {
  .hero__container {
    flex-direction: column;
    overflow: visible;
    gap: var(--space-8);
    padding: 0 var(--space-4);
  }
}

/* ══════════════════════════════════════════
   LEFT column — text (592px)
   ══════════════════════════════════════════ */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 592px;
  flex-shrink: 0;
  /* Vertical padding adds height so the section has breathing room */
  padding: 80px 0;
}

@media (max-width: 1280px) {
  .hero__content {
    width: 100%;
    max-width: 592px;
    padding: 64px 0;
  }
}

@media (max-width: 767px) {
  .hero__content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Spacing between text and buttons */
  }
}

@media (max-width: 767px) {
  .hero__cta {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 272px;
  }
}

/* ── Certification badge row ── */

.hero__cert {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__cert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-blue-brand-50);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.hero__cert-icon svg {
  width: 15px;
  height: 16px;
  color: var(--color-blue-brand-500);
}

.hero__cert-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-neutral-400);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hero__cert-logo {
  height: 19px;
  width: auto;
  opacity: 0.3;
  mix-blend-mode: luminosity;
  display: block;
}

/* ── Heading + body ── */

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__heading {
  font-family: var(--font-button);
  /* Epilogue Medium */
  font-size: 2.5rem;
  /* 40px */
  font-weight: var(--font-medium);
  line-height: 1.2;
  color: var(--color-blue-brand-600);
  max-width: 520px;
}

@media (max-width: 767px) {
  .hero__heading {
    font-size: var(--text-3xl);
    /* 30px */
  }
}

.hero__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-neutral-400);
  max-width: 518px;
}

/* ── CTA row ── */

.hero__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   RIGHT column — photo (696px, in flow)
   ══════════════════════════════════════════ */

.hero__media {
  width: 696px;
  height: 650px;
  flex-shrink: 0;
  position: relative;
}

@media (max-width: 1280px) {
  .hero__media {
    width: 50%;
    height: auto;
    min-height: 500px;
  }
}

@media (max-width: 767px) {
  .hero__media {
    display: none;
  }
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ══════════════════════════════════════════
   Badge — absolute in .hero__container,
   centred on the column boundary
   left: calc(592px + 32px/2) = ~608px from container left
   Figma: left: calc(50% + 43px) of the 1216px container
        = 608px + 43px = 651px → translate(-50%) → center at 651px
   ══════════════════════════════════════════ */

.hero__badge {
  position: absolute;
  /*
   * Ancorado no início real da foto: content(592px) + gap(32px) + 29px
   * = 653px. Com translate(-50%), o centro do badge fica 29px dentro
   * da foto em QUALQUER viewport — evita o badge cair no espaço vazio.
   */
  left: calc(592px + 32px + 29px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 118px;
  height: 118px;
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero__badge {
    display: none;
    left: 50%;
    top: 360px;
    bottom: -59px;
    /* Metade da altura (118/2) */
    transform: translateX(-50%);
    z-index: 10;
  }
}

.hero__badge img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ══════════════════════════════════════════
   Mobile image wrapper
   ══════════════════════════════════════════ */

.hero__media-mobile-wrap {
  display: none;
}

@media (max-width: 767px) {
  .hero__media-mobile-wrap {
    display: block;
    position: relative;
  }

  .hero__media-mobile {
    display: block;
    width: 100%;
    height: 290px;
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
    /* Figma: sem radius */
  }
}
}