/*
  Wortic macOS UI Kit — Grid Blocks
  Grids de conteúdo (HIG: agrupamento por espaço, alinhamento,
  spacing consistente). wm-grid-*.
*/

@layer components {
  .wm-grid-demo { display: flex; flex-direction: column; gap: var(--wm-space-12); }
  .wm-grid-demo figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .wm-grid-demo figcaption {
    font-size: var(--wm-font-size-footnote);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
    font-family: var(--wm-font-family-mono);
  }

  /* ---------- 1. Cards responsivos ---------- */
  .wm-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--wm-space-7);
  }

  /* ---------- 2. Bento ---------- */
  .wm-grid-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 120px;
    gap: var(--wm-space-7);
  }
  .wm-grid-bento__hero { grid-column: span 2; grid-row: span 2; }
  .wm-grid-bento__wide { grid-column: span 2; }
  @media (max-width: 760px) {
    .wm-grid-bento { grid-template-columns: repeat(2, 1fr); }
  }

  /* ---------- 3. Masonry (columns) ---------- */
  .wm-grid-masonry {
    columns: 3 240px;
    column-gap: var(--wm-space-7);
  }
  .wm-grid-masonry > * {
    break-inside: avoid;
    margin-bottom: var(--wm-space-7);
  }

  /* ---------- 4. Galeria de mídia ---------- */
  .wm-grid-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--wm-space-5);
  }
  .wm-grid-media__item {
    aspect-ratio: 16 / 10;
    border-radius: var(--wm-radius-lg);
    overflow: hidden;
    position: relative;
    background: var(--wm-fill-secondary);
    box-shadow: 0 0 0 0.5px var(--wm-separator);
    transition: transform var(--wm-duration-fast) var(--wm-ease-emphasized),
      box-shadow var(--wm-duration-fast) var(--wm-ease-emphasized);
    cursor: pointer;
  }
  .wm-grid-media__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 0.5px var(--wm-separator), 0 14px 30px -10px rgba(0, 0, 0, 0.25);
  }
  .wm-grid-media__label {
    position: absolute;
    left: 10px;
    bottom: 8px;
    color: #fff;
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  /* ---------- 5. Launchpad (grade de apps) ---------- */
  .wm-grid-launchpad {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--wm-space-8) var(--wm-space-4);
    justify-items: center;
  }
  .wm-grid-launchpad__app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: none;
  }
  .wm-grid-launchpad__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 3px rgba(0, 0, 0, 0.12),
      0 6px 14px -4px rgba(0, 0, 0, 0.3);
    transition: transform var(--wm-duration-fast) var(--wm-ease-spring);
  }
  .wm-grid-launchpad__icon .wm-icon { width: 26px; height: 26px; }
  .wm-grid-launchpad__app:hover .wm-grid-launchpad__icon { transform: scale(1.08); }
  .wm-grid-launchpad__app:active .wm-grid-launchpad__icon { transform: scale(0.94); }
  .wm-grid-launchpad__name {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
  }

  /* ---------- 6. Feature grid ---------- */
  .wm-grid-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--wm-space-9);
  }
  .wm-grid-features__item { display: flex; gap: var(--wm-space-6); }
  .wm-grid-features__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--wm-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wm-accent-fill);
    color: var(--wm-accent);
  }
  .wm-grid-features__title {
    font-size: var(--wm-font-size-title3);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
    margin-bottom: 3px;
  }
  .wm-grid-features__desc {
    font-size: var(--wm-font-size-footnote);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-relaxed);
  }

  /* ---------- 7. Stats row ---------- */
  .wm-grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--wm-space-7);
  }

  /* ---------- 8. Pricing ---------- */
  .wm-grid-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--wm-space-7);
    align-items: stretch;
  }
  .wm-grid-pricing__plan {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-5);
    padding: var(--wm-space-9);
    border-radius: var(--wm-radius-xl);
    background: var(--wm-surface-elevated);
    box-shadow: 0 0 0 0.5px var(--wm-separator), var(--wm-shadow-1);
  }
  .wm-grid-pricing__plan--featured {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%),
      var(--wm-accent-gradient, var(--wm-accent));
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 18px 44px -10px rgba(0, 68, 238, 0.5);
  }
  .wm-grid-pricing__plan--featured * { color: #fff !important; }
  .wm-grid-pricing__name { font-size: var(--wm-font-size-footnote); font-weight: 600; color: var(--wm-label-secondary); }
  .wm-grid-pricing__price {
    font-size: 28px;
    font-weight: var(--wm-font-weight-bold);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-primary);
  }
  .wm-grid-pricing__per { font-size: var(--wm-font-size-caption); color: var(--wm-label-tertiary); }
  .wm-grid-pricing__feat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--wm-font-size-footnote);
    color: var(--wm-label-secondary);
  }
  .wm-grid-pricing__feat span { display: flex; align-items: center; gap: 7px; }
  .wm-grid-pricing__feat .wm-icon { width: 13px; height: 13px; color: var(--wm-success); }

  /* ---------- 9. Split 50/50 mídia+texto ---------- */
  .wm-grid-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wm-space-11);
    align-items: center;
  }
  @media (max-width: 720px) { .wm-grid-split { grid-template-columns: 1fr; } }
  .wm-grid-split__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--wm-radius-panel);
    background: var(--wm-brand-gradient, linear-gradient(135deg, #0049ff, #2ac2f3));
    box-shadow: 0 24px 54px -16px rgba(0, 68, 238, 0.5);
  }

  /* ---------- 10. Tabela + cards híbrido ---------- */
  .wm-grid-hybrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--wm-space-7);
    align-items: start;
  }
  @media (max-width: 860px) { .wm-grid-hybrid { grid-template-columns: 1fr; } }
}