/*
 * Layout styles.
 * Page structure, containers, grid systems.
 */
@layer base {
  .container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  .grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .btn,
  .btn-primary,
  .btn-small {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    background: var(--color-link-hover);
    color: white;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9375rem;
    transition: background 0.2s ease;
  }

  .btn:hover,
  .btn-primary:hover {
    background: #0052a3;
  }

  .btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  .btn-active {
    background: #0052a3;
    font-weight: 600;
  }

  .hidden {
    display: none;
  }
}