/*
  Wortic macOS UI Kit — Grids
  wm-grid

  Grades de conteúdo com CSS moderno: auto-fit fluido, masonry por
  colunas (com progressive enhancement para masonry nativo), grade
  assimétrica, grade com item de destaque e grade dirigida por
  container query (responde ao CONTÊINER, não à viewport).

  Sem JS: tudo aqui é CSS puro.
*/

@layer components {
  .wm-grid {
    display: grid;
    gap: var(--wm-grid-gap, var(--wm-space-7));
  }

  /* ============================================================
     Item genérico — superfície de card para o conteúdo da grade.
     A grade aceita QUALQUER filho; o item é conveniência.
     ============================================================ */
  .wm-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
    min-width: 0;
    background: var(--wm-surface-elevated);
    border-radius: var(--wm-radius-xl);
    padding: var(--wm-space-8);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1),
      var(--wm-shadow-inner-highlight);
  }
  .wm-grid__item-title {
    font-size: var(--wm-font-size-headline);
    line-height: var(--wm-leading-headline);
    letter-spacing: var(--wm-tracking-headline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-grid__item-text {
    font-size: var(--wm-font-size-footnote);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-secondary);
  }
  .wm-grid__media {
    aspect-ratio: var(--wm-grid-media-ratio, var(--wm-ratio-wide));
    border-radius: var(--wm-radius-md);
    overflow: hidden;
    background: var(--wm-fill-secondary);
  }
  .wm-grid__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Item-link: quando o cartão da grade é um <a> navegável */
  a.wm-grid__item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
      transform var(--wm-duration-fast) var(--wm-ease-emphasized),
      box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  a.wm-grid__item:hover {
    transform: translateY(var(--wm-scale-hover-raise));
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-2),
      var(--wm-shadow-3),
      var(--wm-shadow-inner-highlight);
  }
  a.wm-grid__item:active { transform: scale(var(--wm-scale-pressed)); }
  a.wm-grid__item:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  /* Spans explícitos */
  .wm-grid__item--wide { grid-column: span 2; }
  .wm-grid__item--tall { grid-row: span 2; }
  .wm-grid__item--hero { grid-column: span 2; grid-row: span 2; }

  /* ============================================================
     1. Auto-fit — colunas fluidas sem media query.
     min() protege contêineres mais estreitos que a coluna mínima.
     ============================================================ */
  .wm-grid--auto-fit {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--wm-grid-min, var(--wm-grid-min-col)), 100%), 1fr)
    );
  }
  .wm-grid--auto-fit-sm { --wm-grid-min: var(--wm-grid-min-col-sm); }
  .wm-grid--auto-fit-lg { --wm-grid-min: var(--wm-grid-min-col-lg); }

  /* ============================================================
     2. Masonry — colunas CSS (ordem vertical), itens sem quebra.
     Quando o masonry nativo de Grid chegar, troca sozinho.
     ============================================================ */
  .wm-grid--masonry {
    display: block;
    columns: var(--wm-grid-cols, 3) var(--wm-grid-min, var(--wm-grid-min-col));
    column-gap: var(--wm-grid-gap, var(--wm-space-7));
  }
  .wm-grid--masonry > * {
    break-inside: avoid;
    margin-bottom: var(--wm-grid-gap, var(--wm-space-7));
  }
  @supports (grid-template-rows: masonry) {
    .wm-grid--masonry {
      display: grid;
      grid-template-columns: repeat(
        auto-fill,
        minmax(min(var(--wm-grid-min, var(--wm-grid-min-col)), 100%), 1fr)
      );
      grid-template-rows: masonry;
    }
    .wm-grid--masonry > * { margin-bottom: 0; }
  }

  /* ============================================================
     3. Assimétrica — 2fr/1fr com linhas que alternam o lado forte.
     minmax(0, …) impede que conteúdo largo estoure a coluna.
     ============================================================ */
  .wm-grid--asymmetric {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .wm-grid--asymmetric-alt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  @media (max-width: 679px) {   /* [--wm-bp-md] */
    .wm-grid--asymmetric,
    .wm-grid--asymmetric-alt {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ============================================================
     4. Com destaque — 4 colunas, primeiro item vira herói 2×2.
     ============================================================ */
  .wm-grid--featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--wm-grid-row-unit), auto);
    grid-auto-flow: dense;
  }
  .wm-grid--featured > :first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  @media (max-width: 899px) {   /* [--wm-bp-lg] */
    .wm-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 559px) {   /* [--wm-bp-sm] */
    .wm-grid--featured { grid-template-columns: minmax(0, 1fr); }
    .wm-grid--featured > :first-child,
    .wm-grid--featured .wm-grid__item--wide,
    .wm-grid--featured .wm-grid__item--hero {
      grid-column: auto;
      grid-row: auto;
    }
  }

  /* ============================================================
     5. Container query — a grade responde ao CONTÊINER.
     Envolva a grade em .wm-grid-viewport (ou dê contain à região).
     ============================================================ */
  .wm-grid-viewport {
    container: wm-grid / inline-size;
  }
  .wm-grid--cq {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 420px = --wm-bp-xs */
  @container wm-grid (min-width: 420px) {
    .wm-grid--cq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* 680px = --wm-bp-md */
  @container wm-grid (min-width: 680px) {
    .wm-grid--cq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* 940px = --wm-bp-xl */
  @container wm-grid (min-width: 940px) {
    .wm-grid--cq { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Densidade */
  .wm-grid--dense { --wm-grid-gap: var(--wm-space-5); }
  .wm-grid--loose { --wm-grid-gap: var(--wm-space-10); }

  /* ============================================================
     6. Vão da grade estrutural — amarra o gap desta grade fluida ao
     gutter CANÔNICO da faixa (--wm-grid-gutter de foundation/grid.css:
     12 → 16 → 20px). Sem isto a grade de cards usa um vão próprio e
     desalinha de qualquer .wm-layout-grid ao lado dela na mesma página.
     ============================================================ */
  .wm-grid--gutter { --wm-grid-gap: var(--wm-grid-gutter); }

  /* ============================================================
     7. Modo lista — a MESMA coleção de cards, em linhas de largura
     cheia com a mídia ao lado. É o outro lado do botão grade/lista de
     um catálogo: mesmo HTML, só troca o modificador. Não confundir com
     o componente `list`, que é linha de dados do macOS (44px, separador
     hairline); aqui cada linha continua sendo um CARTÃO.
     ============================================================ */
  .wm-grid--rows {
    grid-template-columns: minmax(0, 1fr);
    --wm-grid-rows-media: 160px;
  }
  .wm-grid--rows > .wm-grid__item {
    display: grid;
    grid-template-columns: var(--wm-grid-rows-media) minmax(0, 1fr);
    grid-template-areas:
      "media title"
      "media text"
      "media body";
    align-content: start;
    column-gap: var(--wm-space-8);
    row-gap: var(--wm-space-3);
  }
  .wm-grid--rows > .wm-grid__item > .wm-grid__media {
    grid-area: media;
    align-self: start;
  }
  .wm-grid--rows > .wm-grid__item > .wm-grid__item-title { grid-area: title; }
  .wm-grid--rows > .wm-grid__item > .wm-grid__item-text { grid-area: text; }
  /* Envelope para o que não for título nem texto (ações, selos): sem
     ele, um filho extra é colocado sozinho e cai embaixo da imagem. */
  .wm-grid__item-body {
    grid-area: body;
    min-inline-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-4);
  }
  /* Linha sem mídia não reserva a faixa da imagem. */
  .wm-grid--rows > .wm-grid__item:not(:has(> .wm-grid__media)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "text"
      "body";
  }
  /* 560px = --wm-bp-sm: em telefone a mídia volta para cima. */
  @media (max-width: 559px) {   /* [--wm-bp-sm] */
    .wm-grid--rows > .wm-grid__item {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "media"
        "title"
        "text"
        "body";
    }
  }

  /* ============================================================
     8. Mosaico — painel de widgets com pesos mistos. Colunas fluidas
     como o auto-fit, MAIS trilhas de linha em unidade fixa
     (--wm-grid-row-unit) e fluxo denso: __item--wide/--tall/--hero
     podem aparecer em QUALQUER posição e o dense preenche os buracos
     que os vãos abririam. Difere do --featured, que tem 4 colunas
     fixas e só promove o primeiro filho.
     Regra de uso: mantenha --wm-grid-min ≤ 260px (o padrão serve);
     um vão de 2 colunas precisa de 2 colunas EXISTINDO — abaixo de
     560px os vãos são desligados junto com os do --featured.
     ============================================================ */
  .wm-grid--mosaic {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--wm-grid-min, var(--wm-grid-min-col)), 100%), 1fr)
    );
    grid-auto-rows: minmax(var(--wm-grid-row-unit), auto);
    grid-auto-flow: dense;
  }
  @media (max-width: 559px) {   /* [--wm-bp-sm] */
    .wm-grid--mosaic {
      grid-template-columns: minmax(0, 1fr);
      /* em coluna única a trilha mínima só engorda cartão de uma linha:
         a altura volta a ser a do conteúdo */
      grid-auto-rows: auto;
    }
    .wm-grid--mosaic .wm-grid__item--wide,
    .wm-grid--mosaic .wm-grid__item--tall,
    .wm-grid--mosaic .wm-grid__item--hero {
      grid-column: auto;
      grid-row: auto;
    }
  }

  /* ============================================================
     9. Ladrilho de galeria — masonry de MÍDIA pura, sem a pele de
     card. Cada ladrilho é uma <figure> com a imagem na proporção
     NATURAL dela (nenhum aspect-ratio imposto: é isso que faz o
     masonry valer a pena) e legenda opcional por cima da borda de
     baixo. Use dentro de .wm-grid--masonry:
       <div class="wm-grid wm-grid--masonry"> <figure class="wm-grid__tile">…
     Para grade de cards com texto, continue no __item.
     ============================================================ */
  .wm-grid__tile {
    position: relative;
    margin: 0;
    border-radius: var(--wm-radius-lg);
    overflow: hidden;
    background: var(--wm-fill-secondary);
    box-shadow: 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }
  .wm-grid__tile > img {
    display: block;
    width: 100%;
    height: auto;
  }
  .wm-grid__tile-caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--wm-space-8) var(--wm-space-6) var(--wm-space-4);
    font-size: var(--wm-font-size-footnote);
    line-height: var(--wm-leading-footnote);
    font-weight: var(--wm-font-weight-medium);
    color: #ffffff;
    /* véu de legibilidade: preto que nasce transparente e fecha em 60%
       na borda — texto branco medido sobre o pior caso (fundo claro da
       própria foto + véu a 60%) fica acima de 4.5:1 */
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0)
    );
  }
  /* Ladrilho navegável */
  a.wm-grid__tile {
    display: block;
    cursor: pointer;
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  a.wm-grid__tile:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  @media (prefers-reduced-motion: reduce) {
    a.wm-grid__item { transition: none; }
    a.wm-grid__item:hover,
    a.wm-grid__item:active { transform: none; }
    a.wm-grid__tile { transition: none; }
  }

  /* Toda classe que define display precisa do par [hidden]: sem isto,
     esconder pelo atributo nativo perde para o display da classe. */
  .wm-grid[hidden],
  .wm-grid--masonry[hidden],
  .wm-grid__item[hidden],
  .wm-grid__item-body[hidden],
  .wm-grid__media > img[hidden],
  .wm-grid__tile[hidden],
  .wm-grid__tile > img[hidden],
  a.wm-grid__tile[hidden] {
    display: none;
  }
}