/* =====================================================================
   FLORIPA WALKS · carrossel.css
   Carrossel de fotos dos roteiros: setas nas laterais + bullets embaixo.
   Aparece em 3 lugares:
     1) cards de roteiro da home        (.tour-media.tem-carrossel)
     2) janela "Ver detalhes" da home   (.overlay-hero.com-carrossel)
     3) página própria do roteiro       (.artigo-capa.com-carrossel)
   Usa as variáveis do style.css (--navy, --yellow, --ease...).
   Este arquivo é carregado DEPOIS do style.css, por isso ganha dele.
   ===================================================================== */

.carrossel{
  position:relative;width:100%;height:100%;
  overflow:hidden;isolation:isolate;
  background:var(--navy-deep);
  touch-action:pan-y;              /* deixa a página rolar na vertical; o horizontal é do carrossel */
  -webkit-tap-highlight-color:transparent;
}
.carrossel:focus{outline:none}
.carrossel:focus-visible{box-shadow:inset 0 0 0 3px var(--yellow)}

/* ---------- faixa que desliza ---------- */
.car-trilho{
  display:flex;height:100%;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.car-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}

.car-slide img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  user-select:none;-webkit-user-drag:none;
}

/* Foto em pé (a maioria das fotos de celular): aparece INTEIRA, sem cortar,
   com uma versão desfocada dela mesma preenchendo as laterais.
   O JS marca .retrato e define --bg quando a foto termina de carregar. */
.car-slide.retrato::before{
  content:"";position:absolute;inset:-40px;
  background:var(--bg) center/cover no-repeat;
  filter:blur(28px) brightness(.55) saturate(1.1);
}
.car-slide.retrato img{object-fit:contain}

/* ---------- setas ---------- */
.car-seta{
  position:absolute;top:50%;z-index:3;
  width:44px;height:44px;margin-top:-22px;
  display:none;place-items:center;
  border:0;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,.92);color:var(--navy);
  box-shadow:0 6px 18px rgba(7,31,59,.28);
  transition:background .2s,transform .25s var(--ease);
}
html.has-js .car-seta{display:grid}   /* sem JavaScript as setas não fariam nada */
.car-seta svg{width:20px;height:20px}
.car-seta:hover{background:var(--yellow);transform:scale(1.08)}
.car-seta:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.car-ant{left:14px}
.car-prox{right:14px}

/* ---------- bullets ---------- */
.car-bullets{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:999px;
  background:rgba(7,31,59,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.car-bullet{
  position:relative;flex:none;
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.6);
  transition:width .3s var(--ease),background .2s,transform .3s var(--ease);
}
.car-bullet::after{content:"";position:absolute;inset:-9px -4px}   /* aumenta a área de toque */
.car-bullet:hover{background:#fff}
.car-bullet.ativo{width:22px;background:var(--yellow)}
.car-bullet.menor{transform:scale(.6)}     /* pontas da janela: avisam que há mais fotos */
.car-bullet.oculto{display:none}
.car-bullet:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* =====================================================================
   1) CARD DA HOME
   O card mantém o mesmo formato. A foto continua ocupando o mesmo
   espaço; só passa a ter setas e bullets.
   ===================================================================== */
.tour-media .carrossel{position:absolute;inset:0}
/* o zoom no hover é da foto única; no carrossel ele atrapalharia a troca */
.tour:hover .tour-media .car-slide img{transform:none}
.tour-media.tem-carrossel{cursor:default}

@media (max-width:980px){
  /* no celular o card vira uma coluna; fotos em pé pedem mais altura */
  .tour-media.tem-carrossel{min-height:400px}
}
@media (max-width:560px){
  .tour-media.tem-carrossel{min-height:370px}
  .car-seta{width:38px;height:38px;margin-top:-19px}
  .car-seta svg{width:18px;height:18px}
  .car-ant{left:10px}
  .car-prox{right:10px}
}

/* =====================================================================
   2) JANELA "VER DETALHES"
   ===================================================================== */
.overlay-hero.com-carrossel{height:360px}
.overlay-hero.com-carrossel::after{pointer-events:none}   /* o degradê não pode bloquear as setas */
/* bullets no canto inferior direito para não bater no nome da categoria */
.overlay-hero .car-bullets{left:auto;right:18px;bottom:16px;transform:none}

@media (max-width:560px){
  .overlay-hero.com-carrossel{height:320px}
}

/* =====================================================================
   3) PÁGINA DO ROTEIRO
   ===================================================================== */
.artigo-capa.com-carrossel{
  aspect-ratio:16/10;margin-bottom:38px;
  box-shadow:0 18px 50px rgba(10,46,87,.14);
}
@media (max-width:640px){
  .artigo-capa.com-carrossel{aspect-ratio:4/5;border-radius:14px}
}

/* ---------- respeita quem prefere menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .car-trilho,.car-seta,.car-bullet{transition:none}
}