/* =================================================================
   IATE CLUBE DE ITACURUÇÁ — Card Carousel (multi-card + hover reveal)
   Conversão vanilla do componente React (21st.dev), adaptada à
   identidade do site. Vários cartões por vez, loop infinito, setas,
   swipe; a descrição sobe ao passar o mouse / no foco.
   Markup: <div class="ccard" data-ccard> com filhos
           <div class="ccard__item" data-img data-title data-desc>
   Depende das variáveis de css/styles.css.
   ================================================================= */

.ccard{position:relative;margin-top:18px}
.ccard__item{display:none}
.ccard__viewport{overflow:hidden;border-radius:18px;background:var(--navy-800)}
.ccard__track{display:flex;will-change:transform}

.ccard__card{flex:0 0 auto;padding:0 9px;box-sizing:border-box}
.ccard__inner{
  position:relative;border-radius:16px;overflow:hidden;background:var(--navy-800);
  box-shadow:0 16px 36px rgba(8,24,38,.18);outline:none;
}
.ccard__inner:focus-visible{box-shadow:0 0 0 3px rgba(207,111,97,.6),0 16px 36px rgba(8,24,38,.18)}

.ccard__img{position:relative;aspect-ratio:3/4;overflow:hidden;background-color:var(--navy-800)}
.ccard__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.ccard__inner:hover .ccard__img img{transform:scale(1.06)}
.ccard__img.is-empty{
  background-color:var(--navy-800);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Ccircle cx='50' cy='50' r='20'/%3E%3Cg stroke-width='4'%3E%3Cline x1='50' y1='2' x2='50' y2='30'/%3E%3Cline x1='50' y1='70' x2='50' y2='98'/%3E%3Cline x1='2' y1='50' x2='30' y2='50'/%3E%3Cline x1='70' y1='50' x2='98' y2='50'/%3E%3Cline x1='15' y1='15' x2='35' y2='35'/%3E%3Cline x1='65' y1='65' x2='85' y2='85'/%3E%3Cline x1='85' y1='15' x2='65' y2='35'/%3E%3Cline x1='35' y1='65' x2='15' y2='85'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-position:center;background-repeat:no-repeat;background-size:44%;
}
.ccard__img.is-empty img{display:none}

.ccard__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:36px 18px 16px;color:#fff;pointer-events:none;
  background:linear-gradient(transparent,rgba(8,24,38,.9));
}
.ccard__t{font-family:var(--serif);font-weight:500;font-size:1.24rem;line-height:1.12;display:block}

.ccard__overlay{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:24px 20px;color:#fff;overflow:auto;
  background:linear-gradient(180deg,rgba(8,24,38,.55),rgba(8,24,38,.95));
  transform:translateY(100%);transition:transform .42s var(--ease);
}
.ccard__inner:hover .ccard__overlay,.ccard__inner:focus-within .ccard__overlay{transform:translateY(0)}
.ccard__overlay h4{font-family:var(--serif);font-weight:500;font-size:1.32rem;line-height:1.1}
.ccard__overlay p{font-family:var(--sans);font-weight:300;font-size:.93rem;line-height:1.65;color:var(--white-90)}

.ccard__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(8,24,38,.55);border:1px solid rgba(255,255,255,.5);color:#fff;font-size:1.5rem;line-height:1;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.ccard__nav:hover{background:var(--coral);border-color:var(--coral)}
.ccard__nav:focus-visible{outline:3px solid var(--coral-bright);outline-offset:2px}
.ccard__prev{left:-8px}
.ccard__next{right:-8px}

@media (max-width:560px){
  .ccard__prev{left:4px}
  .ccard__next{right:4px}
}
@media (prefers-reduced-motion:reduce){
  .ccard__track{transition:none!important}
  .ccard__img img,.ccard__overlay{transition:none}
}