/* ================================================================
   BIGPIRES — CONTEÚDO DOS SLIDES DO HERO CAROUSEL
   catalog/view/stylesheet/bigpires-slides.css
   ─────────────────────────────────────────────────────────────
   Replica o layout da screenshot:
     • Imagem de fundo full-cover
     • Card produto flutuante (canto superior esquerdo, quadrado branco)
     • Título H1 grande + subtítulo em maiúsculas + botão CTA verde
   ─────────────────────────────────────────────────────────────
   ÍNDICE:
     1. Custom Properties (tokens dos slides)
     2. Bootstrap Carousel — overrides de altura e transição
     3. Imagem de fundo do slide (.hero-slide__bg)
     4. Overlay de conteúdo (.hero-slide__overlay)
     5. Layout do conteúdo esquerdo (.hero-slide__left)
     6. Card produto flutuante (.hero-slide__product-card)
     7. Bloco de texto: título, subtítulo, CTA
     8. Indicadores e setas de navegação
     9. Animação de entrada do conteúdo
    10. Responsivo
   ================================================================ */


/* ================================================================
   1. CUSTOM PROPERTIES — tokens dos slides
   ================================================================ */
:root {
  /* Layout */
  --slide-content-left:     5%;        /* Posição X do bloco de conteúdo    */
  --slide-content-bottom:   10%;       /* Posição Y (de baixo) do bloco      */
  --slide-content-width:    520px;     /* Largura máx. do bloco de conteúdo  */

  /* Card produto flutuante */
  --card-size:              180px;     /* Lado do quadrado branco            */
  --card-radius:            24px;      /* Border-radius do card              */
  --card-padding:           16px;      /* Padding interno do card            */
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
  --card-mb:                1.75rem;   /* Margem entre card e texto          */

  /* Tipografia do slide */
  --slide-title-size:       clamp(2rem, 4.5vw, 3.5rem); /* Fluido: 32px→56px */
  --slide-title-weight:     700;
  --slide-title-lh:         1.12;
  --slide-subtitle-size:    0.78rem;
  --slide-subtitle-ls:      0.18em;
  --slide-subtitle-weight:  500;

  /* Botão CTA */
  --cta-bg:                 #2fcfb3;   /* Verde-menta BigPires               */
  --cta-bg-hover:           #25b89e;
  --cta-color:              #1a1a1a;
  --cta-radius:             50px;
  --cta-padding:            0.75rem 2rem;
  --cta-font-size:          0.95rem;
  --cta-font-weight:        700;

  /* Indicadores */
  --indicator-color:        rgba(255, 255, 255, 0.45);
  --indicator-color-active: #ffffff;
  --indicator-w:            32px;
  --indicator-h:            4px;
  --indicator-radius:       2px;

  /* Setas de navegação */
  --arrow-size:             48px;
  --arrow-bg:               rgba(255, 255, 255, 0.15);
  --arrow-bg-hover:         rgba(255, 255, 255, 0.30);
  --arrow-color:            #ffffff;
  --arrow-radius:           50%;
}


/* ================================================================
   2. BOOTSTRAP CAROUSEL — overrides de altura e transição
   ─────────────────────────────────────────────────────────────
   O Bootstrap Carousel precisa que .carousel-item e .carousel-inner
   tenham altura explícita para preencher o .hero-carousel (100vh).
   ================================================================ */

/* O <section> não deve ter margem acidental */
.hero-carousel {
  margin: 0 !important;
  padding: 0 !important;
}

/* Override da regra customizada no bootstrap.css (linha ~10642) que adiciona
   border:4px solid #fff, border-radius, box-shadow e margin-bottom ao .carousel.
   Essa regra não faz parte do Bootstrap padrão e causa a aresta branca visível. */
.carousel {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

.hero-carousel__slider.carousel,
.hero-carousel > .carousel {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.hero-carousel .carousel-inner {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ── Cross-fade: todos os items são absolute ── */
.hero-carousel .carousel-item {
  display: block !important;       /* remove o float do Bootstrap */
  position: absolute !important;   /* todos absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  /* GPU compositing: elimina arredondamento subpixel que cria gaps de 1px */
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-carousel .carousel-item.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* Compatibilidade Bootstrap: desactiva o translate nativo */
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev,
.hero-carousel .carousel-item-start,
.hero-carousel .carousel-item-end {
  transform: none !important;
  opacity: 0;
}

.hero-carousel .carousel-item-next.carousel-item-start,
.hero-carousel .carousel-item-prev.carousel-item-end {
  opacity: 1;
}


/* ================================================================
   3. IMAGEM DE FUNDO DO SLIDE — background-image no .carousel-item
   ─────────────────────────────────────────────────────────────
   Usamos background-image (inline style no Twig) em vez de <img>.
   background-size: cover garante cobertura total SEM letterbox,
   independentemente de object-fit ou cascata Bootstrap.
   ================================================================ */

.hero-carousel .carousel-item {
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  background-color:    var(--hero-bg-fallback);
  transition: opacity 0.9s ease;
}

/* Sem transform no carousel para evitar gaps de subpixel */
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev {
  transform: none;
}


/* ================================================================
   4. OVERLAY DE CONTEÚDO (.hero-slide__overlay)
   ─────────────────────────────────────────────────────────────
   Cobre todo o slide. É o contexto de posicionamento do conteúdo.
   Não tem background — o gradiente está no .hero-carousel::before.
   ================================================================ */

.hero-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;               /* Acima do gradiente (z:2) e da imagem (z:0) */
  display: flex;
  align-items: flex-end;    /* Conteúdo ancorado à base */
}

.hero-slide__inner {
  width: 100%;
  padding-bottom: var(--slide-content-bottom);
  padding-left: var(--slide-content-left);
  padding-right: var(--slide-content-left);
}


/* ================================================================
   5. COLUNA ESQUERDA DO SLIDE (.hero-slide__left)
   ─────────────────────────────────────────────────────────────
   Agrupa o card produto (topo) e o bloco de texto (baixo).
   Layout: coluna flexível — card acima, texto abaixo.
   ================================================================ */

.hero-slide__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--slide-content-width);
}


/* ================================================================
   6. CARD PRODUTO FLUTUANTE (.hero-slide__product-card)
   ─────────────────────────────────────────────────────────────
   Quadrado branco com border-radius e sombra.
   Contém a imagem do equipamento em destaque.
   Exactamente como na screenshot.
   ================================================================ */

.hero-slide__product-card {
  display: block;
  width: var(--card-size);
  height: var(--card-size);
  background-color: #ffffff;
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  margin-bottom: var(--card-mb);
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;

  /* Entrada com leve elevação ao hover */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-slide__product-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.14);
}

.hero-slide__product-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* contain: mostra o produto inteiro sem cortar */
  object-position: center;
  display: block;
}


/* ================================================================
   7. BLOCO DE TEXTO: TÍTULO + SUBTÍTULO + BOTÃO CTA
   ================================================================ */

/* ── Wrapper do texto ── */
.hero-slide__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* ── Título H1/H2 ── */
.hero-slide__title {
  font-size:   var(--slide-title-size);
  font-weight: var(--slide-title-weight);
  line-height: var(--slide-title-lh);
  color: #ffffff;
  margin: 0;
  /* Sombra suave para legibilidade sobre imagens claras */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 40px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.01em;
}

/* ── Subtítulo em maiúsculas ── */
.hero-slide__subtitle {
  font-size:      var(--slide-subtitle-size);
  font-weight:    var(--slide-subtitle-weight);
  color:          rgba(255, 255, 255, 0.88);
  letter-spacing: var(--slide-subtitle-ls);
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ── Botão CTA — verde-menta ── */
.hero-slide__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:          var(--cta-padding);
  background-color: var(--cta-bg);
  color:            var(--cta-color);
  font-size:        var(--cta-font-size);
  font-weight:      var(--cta-font-weight);
  text-decoration:  none;
  border-radius:    var(--cta-radius);
  border:           2px solid transparent;
  margin-top:       0.5rem;
  letter-spacing:   0.02em;
  transition:       background-color 0.25s ease, color 0.25s ease,
                    transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 16px rgba(47, 207, 179, 0.35);
}

.hero-slide__cta-btn:hover,
.hero-slide__cta-btn:focus {
  background-color: var(--cta-bg-hover);
  color:            #ffffff;
  text-decoration:  none;
  transform:        translateY(-2px);
  box-shadow:       0 8px 24px rgba(47, 207, 179, 0.45);
  outline:          none;
}

.hero-slide__cta-btn:active {
  transform: translateY(0);
}


/* ================================================================
   8. INDICADORES E SETAS DE NAVEGAÇÃO
   ================================================================ */

/* ── Indicadores (bullets/barras) ── */
.hero-carousel .carousel-indicators.hero-indicators {
  bottom:    2rem;
  margin:    0;
  gap:       6px;
  z-index:   5;
  justify-content: flex-start;
  padding-left: calc(var(--slide-content-left) + 1px);
}

.hero-carousel .hero-indicators [data-bs-slide-to] {
  width:         var(--indicator-w);
  height:        var(--indicator-h);
  border-radius: var(--indicator-radius);
  background-color: var(--indicator-color);
  border:        none;
  opacity:       1;
  transition:    background-color 0.3s ease, width 0.3s ease;
  margin:        0;
}

.hero-carousel .hero-indicators [data-bs-slide-to].active {
  background-color: var(--indicator-color-active);
  width:            calc(var(--indicator-w) * 1.6); /* Activo é mais largo */
}

/* ── Setas de navegação personalizadas ── */
.hero-carousel .hero-control {
  width:            var(--arrow-size);
  height:           var(--arrow-size);
  background-color: var(--arrow-bg);
  border-radius:    var(--arrow-radius);
  top:              50%;
  transform:        translateY(-50%);
  opacity:          0;                   /* Escondidas por defeito */
  transition:       opacity 0.25s ease, background-color 0.25s ease;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

/* Mostrar setas ao passar o rato no carrossel */
.hero-carousel:hover .hero-control {
  opacity: 1;
}

.hero-carousel .hero-control:hover {
  background-color: var(--arrow-bg-hover);
}

/* Remover o ícone Bootstrap padrão */
.hero-carousel .hero-control .carousel-control-prev-icon,
.hero-carousel .hero-control .carousel-control-next-icon {
  display: none;
}

.hero-carousel .hero-control i {
  color:     var(--arrow-color);
  font-size: 1rem;
}

/* Posicionamento das setas */
.hero-carousel .carousel-control-prev.hero-control { left:  1.5rem; }
.hero-carousel .carousel-control-next.hero-control { right: 1.5rem; }


/* ================================================================
   9. ANIMAÇÃO DE ENTRADA DO CONTEÚDO DO SLIDE
   ─────────────────────────────────────────────────────────────
   [data-animate="fadeUp"] nos elementos do slide.
   JS em home.twig adiciona .hero-animate--in ao activar o slide.
   ================================================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

[data-animate].hero-animate--in {
  opacity: 1;
  transform: translateY(0);
}

/* Card produto: delay ligeiramente diferente do texto */
.hero-slide__product-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.05s, transform 0.6s ease 0.05s;
}

/* Quando o slide está activo, o card também entra */
.hero-carousel .carousel-item.active .hero-slide__product-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.05s, transform 0.6s ease 0.05s;
}

.hero-slide__product-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* Ao sair do slide (a sair) volta a 0 */
.hero-carousel .carousel-item:not(.active) .hero-slide__product-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}


/* ================================================================
   10. RESPONSIVO
   ================================================================ */

/* ── Tablet (< 992px) ── */
@media (max-width: 991.98px) {

  :root {
    --card-size:              140px;
    --card-radius:            18px;
    --slide-content-left:     4%;
    --slide-content-bottom:   8%;
    --slide-content-width:    90%;
  }

  .hero-slide__title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }

  .hero-carousel .hero-control {
    opacity: 1; /* Setas sempre visíveis em touch */
  }

  .hero-carousel .carousel-control-prev.hero-control { left:  0.75rem; }
  .hero-carousel .carousel-control-next.hero-control { right: 0.75rem; }
}

/* ── Mobile (< 576px) ── */
@media (max-width: 575.98px) {

  :root {
    --card-size:              110px;
    --card-radius:            14px;
    --card-padding:           10px;
    --card-mb:                1.25rem;
    --slide-content-left:     1rem;
    --cta-padding:            0.65rem 1.5rem;
    --cta-font-size:          0.88rem;
  }

  .hero-slide__title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .hero-slide__subtitle {
    font-size: 0.72rem;
  }

  /* Indicadores ligeiramente mais pequenos */
  :root {
    --indicator-w: 22px;
    --indicator-h: 3px;
  }

  .hero-carousel .hero-indicators {
    bottom: 1.25rem;
    padding-left: 1rem;
  }

  /* Setas escondidas em telas muito pequenas — usa swipe */
  .hero-carousel .hero-control {
    display: none;
  }
}

/* ── Desktop grande (≥ 1400px) ── */
@media (min-width: 1400px) {
  :root {
    --slide-content-left:  7%;
    --slide-content-width: 600px;
    --card-size:           200px;
  }
}


/* ================================================================
   11. FALLBACK — quando não há imagem configurada no slide
   ================================================================ */

.hero-slide__bg--fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 50%, #2fcfb3 100%);
  z-index: 0;
}

/* ================================================================
   FIM — bigpires-slides.css
   ================================================================ */