/* Loomah Inscrições — listagem de eventos (2.64.0).
 *
 * Protótipo v0.2.0, tela 1: destaque do próximo evento, título com filtros
 * e grade de cartões. Tudo em @layer lm.overrides, só tokens do DS.
 * Enfileirado depois do DS (a ordem das camadas define a precedência).
 * Prefixo li-ls- para não colidir com as regras antigas do li-public.css.
 */

@layer lm.overrides {

  /* O atributo hidden perde para o display dos componentes; aqui ele vence. */
  .li-ls .li-ls-card[hidden],
  .li-ls .li-ls-destaque-wrap[hidden],
  .li-ls .li-ls-filtros[hidden],
  .li-ls .li-ls-cd[hidden],
  .li-ls .li-ls-vazio[hidden],
  .li-ls .li-ls-secao[hidden],
  .li-ls .li-ls-grade[hidden],
  .li-ls .li-ls-vazio-secao[hidden],
  .li-ls .li-ls-setas[hidden] { display: none; }

  /* ---------- Destaque ---------- */
  .li-ls-destaque {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    overflow: hidden;
  }
  .li-ls-destaque-media {
    margin: 0;
    border-radius: 0;
    min-block-size: 18rem;
    block-size: 100%;
  }
  .li-ls-destaque-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .li-ls-destaque-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--lm-space-4);
    padding: var(--lm-space-8);
  }
  .li-ls-destaque-titulo {
    margin: 0;
    font-size: var(--lm-font-size-3xl);
    letter-spacing: var(--lm-letter-spacing-tight);
    line-height: var(--lm-line-height-tight);
    color: var(--lm-text-strong);
    text-wrap: balance;
  }
  @media (max-width: 48rem) {
    .li-ls-destaque { grid-template-columns: minmax(0, 1fr); }
    .li-ls-destaque-media { min-block-size: 0; aspect-ratio: 16 / 9; }
    .li-ls-destaque-body { padding: var(--lm-space-6); }
  }
  .li-ls-tags { display: flex; flex-wrap: wrap; gap: var(--lm-space-2); }
  .li-ls-tags .lm-badge { gap: var(--lm-space-1); }

  .li-ls-cd {
    display: inline-flex;
    gap: var(--lm-space-4);
    align-self: flex-start;
    padding: var(--lm-space-3) var(--lm-space-4);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface-sunken);
  }
  .li-ls-cd p { margin: 0; }
  .li-ls-cd b { font-size: var(--lm-font-size-xl); font-variant-numeric: tabular-nums; color: var(--lm-text-strong); }
  .li-ls-cd span {
    margin-inline-start: var(--lm-space-1);
    font-size: var(--lm-font-size-2xs);
    color: var(--lm-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--lm-letter-spacing-caps);
  }

  /* ---------- Título e filtros ---------- */
  .li-ls-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-3);
  }
  .li-ls-titulo { margin: 0; }
  .li-ls-cidade { inline-size: auto; }
  .li-ls-filtros { max-inline-size: 100%; min-inline-size: 0; }
  .li-ls-filtros .lm-segmented { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .li-ls-filtros .lm-segmented > button { white-space: nowrap; flex: none; }
  @media (max-width: 30rem) {
    .li-ls-filtros, .li-ls-filtros .lm-segmented { inline-size: 100%; }
    .li-ls-filtros .lm-segmented > button { flex: 1 0 auto; justify-content: center; padding-inline: var(--lm-space-2); }
  }

  .li-ls-topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lm-space-3); margin-inline-start: auto; }
  .li-ls-setas { display: flex; gap: var(--lm-space-2); }
  .li-ls-seta { padding-inline: var(--lm-space-2); }
  .li-ls-seta:disabled { opacity: 0.4; }
  @media (max-width: 48rem) { .li-ls-setas { display: none; } }

  /* ---------- Carrossel (2.65.0): rolagem manual com encaixe ----------
     A fração no tamanho das colunas deixa o próximo cartão aparecendo na
     borda: é o sinal de que a fileira continua. */
  .li-ls-trilho {
    --li-ls-gap: var(--lm-space-6);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--li-ls-gap)) / 3.15);
    gap: var(--li-ls-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Tem de acompanhar o padding-inline abaixo. Com `0`, o encaixe do
       scroll-snap alinha o cartão à borda do PADDING e o trilho rola
       sozinho os 24px, empurrando a fileira inteira para a esquerda —
       medido. Zero só era inofensivo enquanto o padding também era zero. */
    scroll-padding-inline: var(--li-ls-sombra-lado);
    scrollbar-width: thin;

    /* 2.93.2 — RESPIRO PARA A SOMBRA DO HOVER.
       Relato do Flávio: "a sombra do hover fica cortada".

       A causa é o próprio carrossel. `overflow-x: auto` obriga o eixo Y a
       virar `auto` também (o CSS não deixa um eixo rolar e o outro
       transbordar), então o trilho recorta a sombra NOS QUATRO LADOS. A
       intenção já estava aqui desde a 2.65.0, só que dimensionada para a
       sombra de repouso: 8px em cima e 16px embaixo, e NADA nas laterais —
       daí o corte reto ao lado do cartão.

       Os números saem da sombra de verdade. `--lm-shadow-lg` é
       `0 10px 28px`, e o cartão ainda sobe 2px no hover:
         em cima  = 28 - 10 + 2 = 20px
         embaixo  = 28 + 10     = 38px, arredondado para 40
         nas laterais = 28px de desfoque, mas a 24px o que resta é
                        invisível — e 24 cabe na folga mais apertada do
                        contêiner (30px no celular). Mais que isso
                        empurraria a página para a rolagem horizontal.

       O padding abre a folga; a margem negativa devolve o espaço, para
       nada se mexer na tela. O respiro acima passa a ser contado aqui
       (space-6 do título até o cartão), e não mais pelo `lm-mt-4` do
       modelo — um lugar só decide. */
    --li-ls-sombra-ini:  20px;
    --li-ls-sombra-fim:  40px;
    /* 2.98.1 — nunca maior que a margem lateral do contêiner do DS
       (--lm-gutter, 16px no celular): com 24px fixos, a fileira passava
       8px da tela e a página rolava de lado no celular (medido a 390px). */
    --li-ls-sombra-lado: min(24px, var(--lm-gutter, 24px));

    padding-block:  var(--li-ls-sombra-ini) var(--li-ls-sombra-fim);
    padding-inline: var(--li-ls-sombra-lado);

    /* O `!important` aqui NÃO é preguiça, e é só nas margens.
       Declaração sem camada vence qualquer declaração em camada, e neste
       tema há uma que zera a margem deste elemento. Medido no navegador:
       dentro da `lm.overrides`, `margin-inline: -24px` sai como `0px`; a
       mesma linha sem camada sai como `-24px`.

       É também por isso que o `margin-block-end` negativo escrito na
       2.65.0 NUNCA valeu — o trilho vinha com `margin-bottom: 0`, e a
       compensação que o autor pretendia nunca aconteceu. Sem `!important`
       o padding novo empurraria a seção seguinte 40px para baixo.

       Só as margens levam; o resto da regra continua se comportando como
       camada, e o tema pode sobrepor o que quiser. */
    margin-inline: calc(var(--li-ls-sombra-lado) * -1) !important;
    margin-block:  calc(var(--lm-space-6) - var(--li-ls-sombra-ini))
                   calc(var(--li-ls-sombra-fim) * -1) !important;
  }
  .li-ls-trilho > .li-ls-card { scroll-snap-align: start; }
  .li-ls-trilho:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); border-radius: var(--lm-radius-lg); }
  @media (max-width: 64rem) { .li-ls-trilho { grid-auto-columns: calc((100% - var(--li-ls-gap)) / 2.15); } }
  @media (max-width: 40rem) { .li-ls-trilho { --li-ls-gap: var(--lm-space-4); grid-auto-columns: 85%; } }
  @media (prefers-reduced-motion: reduce) { .li-ls-trilho { scroll-behavior: auto; } }

  /* ---------- Cartões ---------- */
  .li-ls-card { display: flex; flex-direction: column; position: relative; }
  .li-ls-card-media { position: relative; margin: 0; border-radius: 0; }
  .li-ls-card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .li-ls-card-status { position: absolute; inset-block-start: var(--lm-space-3); inset-inline-start: var(--lm-space-3); z-index: 2; }
  /* Véu no alto da imagem do cartão (componente .lm-veil do DS, mais curto e
     mais leve que o padrão: só precisa dar fundo ao selo). */
  .li-ls-veu { --lm-veil-height: 55%; --lm-veil-strength: 0.55; }
  .li-ls-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--lm-space-2);
    padding: var(--lm-space-4) var(--lm-space-5) var(--lm-space-5);
  }
  .li-ls-card-body > * { margin-block: 0; }
  .li-ls-card-titulo {
    font-size: var(--lm-font-size-lg);
    font-weight: var(--lm-font-weight-semibold);
    line-height: var(--lm-line-height-snug);
    color: var(--lm-text-strong);
  }
  .li-ls-card-titulo a { color: inherit; text-decoration: none; }
  .li-ls-card-titulo a:focus-visible { outline: none; }
  .li-ls-meta { display: grid; gap: var(--lm-space-1); font-size: var(--lm-font-size-xs); color: var(--lm-text-muted); }
  .li-ls-meta > span { display: flex; gap: var(--lm-space-2); align-items: center; }
  .li-ls-meta-lg { font-size: var(--lm-font-size-sm); }
  .li-ls-sedes { font-size: var(--lm-font-size-xs); color: var(--lm-text-muted); }
  .li-ls-card-pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-3);
    margin-block-start: auto;
    padding-block-start: var(--lm-space-4);
    border-block-start: var(--lm-border);
  }
  .li-ls-preco { font-weight: var(--lm-font-weight-semibold); color: var(--lm-text-strong); }
  /* Seções "Em andamento" e "Realizados" */
  .li-ls-secao { margin-block-start: var(--lm-space-16); padding-block-start: var(--lm-space-8); border-block-start: var(--lm-border); }
  .li-ls-secao-topo { display: grid; gap: var(--lm-space-1); }
  .li-ls-secao-topo > * { margin: 0; }
  /* 2.98.0 — a primeira seção do topo (sem destaque acima) não leva a linha
     nem o espaço de separação. */
  .li-ls-secao.li-ls-secao-inicio { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
  .li-ls-barra + .li-ls-secao.li-ls-secao-inicio { margin-block-start: var(--lm-space-6); }
  .li-ls-grade[data-grupo="realizado"] .li-ls-card-media img { filter: grayscale(0.6); }

  /* 2.99.15 — Sedes no cartão (evento com mais de uma localidade).
     O bloco fica acima do link esticado do cartão (.lm-card-link a::after):
     abrir a lista ou o modal não leva à página do evento. */
  .li-ls-sedes-bloco { position: relative; z-index: 1; }
  .li-ls-sedes-det > summary {
    list-style: none;
    display: flex; gap: var(--lm-space-2); align-items: center;
    margin-inline: calc(var(--lm-space-2) * -1);
    padding: var(--lm-space-1) var(--lm-space-2);
    border-radius: var(--lm-radius-sm, 6px);
    cursor: pointer;
  }
  .li-ls-sedes-det > summary::-webkit-details-marker { display: none; }
  .li-ls-sedes-det > summary:hover { background: var(--lm-action-tint); color: var(--lm-text-strong); }
  .li-ls-sedes-det > summary:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); }
  .li-ls-sedes-caret { margin-inline-start: auto; transition: rotate var(--lm-duration-base) var(--lm-ease-standard); }
  .li-ls-sedes-det[open] .li-ls-sedes-caret { rotate: 180deg; }
  @media (prefers-reduced-motion: reduce) { .li-ls-sedes-caret { transition: none; } }

  .li-ls-sedes-lista {
    list-style: none; margin: var(--lm-space-2) 0 0; padding: 0;
    border-block: var(--lm-border);
  }
  .li-ls-sede {
    display: flex; flex-direction: column; gap: var(--lm-space-1);
    padding-block: var(--lm-space-2);
    min-inline-size: 0;
  }
  .li-ls-sede + .li-ls-sede { border-block-start: var(--lm-border); }
  .li-ls-sede-linha {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--lm-space-1) var(--lm-space-2);
  }
  .li-ls-sede-nome { font-weight: var(--lm-font-weight-semibold); color: var(--lm-text-strong); overflow-wrap: anywhere; min-inline-size: 0; }
  .li-ls-sede-st { flex-shrink: 0; }
  .li-ls-sede.is-cancelada .li-ls-sede-nome { color: var(--lm-text-muted); text-decoration: line-through; }
  /* Linhas de informação: ícone + texto que quebra, nunca corta. */
  .li-ls-meta .li-ls-sede-info,
  .li-ls-sede-info {
    display: flex; align-items: flex-start; gap: var(--lm-space-2);
    color: var(--lm-text-muted);
    min-inline-size: 0;
  }
  .li-ls-sede-info > i { flex-shrink: 0; margin-block-start: 0.15em; }
  .li-ls-sede-info > span { overflow-wrap: anywhere; min-inline-size: 0; }

  .li-ls-sedes-abrir {
    justify-self: start;
    background: none; border: 0; padding: 0;
    margin-inline-start: calc(1em + var(--lm-space-2));
    font: inherit; font-weight: var(--lm-font-weight-medium, 500);
    color: var(--lm-text-strong);
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
  }
  .li-ls-sedes-abrir:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); border-radius: 4px; }

  /* Modal: <dialog> nativo (camada do topo, Esc fecha, foco preso). Usa o
     cabeçalho, corpo e rodapé do modal do DS, sem depender do data-lm-open. */
  .li-ls-dialog {
    inline-size: min(100% - 2 * var(--lm-space-4), var(--lm-size-modal-md, 32rem));
    max-block-size: calc(100dvh - 2 * var(--lm-space-4));
    margin: auto; padding: 0; border: 0;
    display: none; flex-direction: column;
    overflow: hidden;
    background: var(--lm-surface-overlay, #fff);
    color: var(--lm-text);
    border-radius: var(--lm-modal-radius, 16px);
    box-shadow: var(--lm-modal-shadow);
    font-size: var(--lm-font-size-sm);
    text-align: start;
    white-space: normal;
  }
  .li-ls-dialog[open] { display: flex; }
  .li-ls-dialog::backdrop { background: var(--lm-surface-scrim, rgba(0,0,0,.6)); }
  .li-ls-dialog .lm-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lm-space-3); flex-shrink: 0; }
  .li-ls-dialog .lm-modal-header > div { min-inline-size: 0; }
  .li-ls-dialog .lm-modal-title { margin: 0; overflow-wrap: anywhere; }
  .li-ls-dialog .lm-modal-desc { margin-block-end: 0; }
  .li-ls-dialog form { margin: 0; flex-shrink: 0; }
  .li-ls-dialog .lm-modal-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; }
  .li-ls-dialog .lm-modal-footer { flex-shrink: 0; }
  .li-ls-dialog .li-ls-sedes-lista { margin-block-start: 0; border-block-start: 0; }
  .li-ls-dialog .li-ls-sede { padding-block: var(--lm-space-3); }
}