/* Articles page specific styles for SerchOceanGame */

.articles-main {
  padding-bottom: var(--space-16);
}

.articles-title {
  text-align: center;
  margin-bottom: var(--space-4);
}
.subtitle {
  text-align: center;
  color: var(--gray-600);
  margin-bottom: var(--space-8);
  font-size: var(--font-size-lg);
}

.articles-categories-nav {
  margin-bottom: var(--space-10);
}
.articles-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-4);
  justify-items: center;
  max-width: 750px;
  margin: 0 auto;
}
.category-link {
  display: block;
  background: linear-gradient(90deg, #caf0f8, #ade8f4 60%, #90e0ef);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  transition: box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
}
.category-link:focus-visible,
.category-link:hover {
  background: var(--color-primary);
  color: #fff;
  text-decoration: underline;
  outline: 2px solid var(--color-primary);
}

.articles-section {
  margin-bottom: var(--space-12);
}
.articles-section h2 {
  margin-bottom: var(--space-4);
  text-align: left;
}
.articles-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6);
}
.article-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}
.article-card h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}
.article-card p {
  color: var(--gray-700);
  margin-bottom: var(--space-4);
}
.article-card .button {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--font-size-sm);
}

@media (max-width: 900px) {
  .articles-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 700px) {
  .articles-main {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .articles-title, .subtitle {
    font-size: var(--font-size-base);
  }
}