/* ---------------------------------------------------------------------------
   Jooy Agenda Scroll — layout do scroll horizontal.

   A seção .agenda-scroll é um flex-ROW do Elementor com dois filhos lado a lado:
   [ cabeçalho "Agenda" (largura fixa) | widget Loop Grid (largura restante) ].
   No DESKTOP (>=1025px): cabeçalho fixo à esquerda + cards rolando na horizontal.
   No MOBILE/TABLET (<=1024px): este módulo NÃO aplica CSS — o layout mobile é
   controlado inteiramente pelo editor do Elementor Pro. Por isso todo o efeito
   abaixo está escopado em @media (min-width:1025px), e o JS só ativa o efeito
   nesse breakpoint (gsap.matchMedia).

   Usamos !important nas propriedades de flex porque o Elementor as aplica via
   CSS custom properties que, sem !important, venceriam estas regras.
--------------------------------------------------------------------------- */

/* =========================== DESKTOP (efeito) ============================= */
@media (min-width: 1025px) {

  /* Wrapper alto criado por JS: dá espaço de scroll para o sticky grudar. */
  .agenda-sticky-wrap {
    position: relative;
    width: 100%;
  }

  .agenda-scroll {
    overflow: hidden;                        /* clipa o trilho + evita scroll horizontal na página */
    position: sticky !important;             /* pin nativo do browser (sem jitter nem salto) */
    top: 0;
    height: 100vh;                           /* tela cheia enquanto grudada */
    justify-content: flex-start !important;  /* cabeçalho encostado à esquerda (não centralizar!) */
    align-items: center !important;          /* centraliza verticalmente cabeçalho + cards */
    min-width: 0 !important;                 /* CHAVE: impede o flex-item de crescer até a largura do conteúdo */
    max-width: 100vw !important;
  }

  /* Containers internos do Elementor têm min-width:auto e esticariam com o trilho */
  .agenda-scroll .e-con,
  .agenda-scroll .elementor-widget,
  .agenda-scroll .elementor-widget-container {
    min-width: 0 !important;
  }

  /* O widget do Loop Grid ocupa a largura restante ao lado do cabeçalho... */
  .agenda-scroll .elementor-widget-loop-grid {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* ...e clipa o trilho que transborda horizontalmente. */
  .agenda-scroll .elementor-widget-loop-grid > .elementor-widget-container {
    overflow: hidden;
  }

  /* Loop Grid do Elementor Pro → trilho horizontal de largura natural */
  .agenda-scroll .elementor-loop-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;  /* neutraliza o CSS grid do Elementor */
    width: max-content;
    will-change: transform;
  }

  /* Cada card com largura fixa (não encolhe) */
  .agenda-scroll .e-loop-item {
    flex: 0 0 auto;
    width: clamp(260px, 80vw, 380px);
  }
}

/* Mobile/tablet (<=1024px): sem regras próprias — layout controlado pelo
   Elementor Pro. O efeito acima é escopado em min-width:1025px de propósito. */