/*  ⬇  CSS APENAS DOS CARDS DA HOME PAGE NÃO ALTERE NADA AQUI ⬇  */
:root{
  --slide-w: 240px;      /* largura de cada card   */
  --slide-h: 135px;      /* altura visível dos cards */
  --nav-size: 40px;      /* diâmetro do botão */
  --nav-gap:  10px;      /* espaço entre cards (via JS: spaceBetween) */
  --nav-inset: 8px;      /* afastamento das setas da borda interna do trilho */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* === SWIPER como GRID: 1 coluna (title) + 1 coluna (track) === */
.mySwiper{
  position: relative;
  width: 100%;
  box-sizing: border-box;

  display: grid;
  grid-template-areas:
    "title"
    "track";
  grid-template-columns: 1fr;
  grid-template-rows: auto var(--slide-h);
  row-gap: 12px;
  padding: 12px 0;

  overflow: hidden;           /* clipa o trilho aos limites do slider */
}
.mySwiper * { min-width: 0; } /* evita overflows inesperados */

/* Título (linha 1) */
.mySwiper > .country-title{
  grid-area: title;
  font-size: 24px;
  font-weight: 700;
  color: #fc8027;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
}

/* Trilho (linha 2) */
.mySwiper > .swiper-wrapper{
  grid-area: track;
  display: flex;
  height: var(--slide-h);
  position: static !important; /* não deixe o Swiper absolutar o wrapper */
  z-index: 0;                  /* fica atrás das setas */
}

/* Slides */
.swiper-slide{
  width:  var(--slide-w) !important;
  height: var(--slide-h) !important;
  flex-shrink:0;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  background:#000;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.swiper-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.swiper-slide .title{
  position:absolute; inset:auto 0 0 0;
  padding:10px; background:rgba(0,0,0,.65);
  color:#fff; font-weight:700; font-size:15px; line-height:1.3;
}
.swiper-slide .title a{ color:inherit; text-decoration:none; }

/* === Botões SOBRE o trilho, na mesma área "track" === */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next{
  grid-area: track;                 /* compartilham a área do trilho */
  align-self: center;               /* centralizam verticalmente */
  z-index: 5;                       /* acima dos cards */
  width: var(--nav-size);
  height: var(--nav-size);
  background: #fc8027;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  display: grid; place-items: center;
  pointer-events: auto;             /* SEMPRE captura o clique */

  /* elimina absoluto padrão do Swiper */
  position: relative !important;
  top:auto !important; right:auto !important; left:auto !important; bottom:auto !important;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Dentro do trilho */
.mySwiper .swiper-button-prev{ justify-self: start; margin-left: var(--nav-inset); }
.mySwiper .swiper-button-next{ justify-self: end;   margin-right: var(--nav-inset); }

/* Ícones (pseudo-elementos nativos do Swiper) */
.mySwiper .swiper-button-prev::after,
.mySwiper .swiper-button-next::after{
  color: #fff; font-size: 16px !important; font-weight: 700;
}

/* Estado desabilitado: continua interceptando o clique para NÃO passar ao card */
.mySwiper .swiper-button-disabled{
  opacity:.35;
  cursor: not-allowed;
  pointer-events: auto;   /* <- aqui está o segredo: não deixa “furar” para o card */
}

/* Foco acessível */
.mySwiper .swiper-button-prev:focus-visible,
.mySwiper .swiper-button-next:focus-visible{
  outline: 2px solid #2a4d78; outline-offset: 2px;
}