/* ===== Wiadomości page styles ===== */

.wiadomosci-main {
  width: 100%;
  padding-block: var(--space-5) var(--space-7);
}

.wiadomosci-main > section {
  margin-block-end: var(--space-7);
}

.wiadomosci-main > section:last-child {
  margin-block-end: 0;
}

/* ===== Wyróżniony artykuł ===== */

.featured-news {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-4);
  align-items: start;
  background-color: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.featured-news:hover {
  border-color: var(--accent-magenta);
  box-shadow: var(--shadow-glow);
}

.featured-news__media {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: var(--radius-1);
  background-color: var(--bg-primary);
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
}

.featured-news__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.featured-news__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.featured-news__kicker {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-magenta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.featured-news__content h1 {
  margin: 0;
  max-width: 30ch;
}

.featured-news__lead {
  max-width: 65ch;
  margin: 0;
  color: var(--text-primary);
}

.featured-news__details {
  margin: 0;
  max-width: 65ch;
}

.featured-news__meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 65ch;
}

.featured-news__cta {
  margin-block-start: var(--space-2);
}

/* ===== Najnowsze wiadomości ===== */

.latest-news__header {
  margin-block-end: var(--space-4);
}

.latest-news__header h2 {
  margin-block-end: var(--space-2);
}

.latest-news__intro {
  max-width: 70ch;
  margin: 0;
  color: var(--text-secondary);
}

.latest-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.news-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.news-card:hover {
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 0 auto;
}

.news-card__category {
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 1.5;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.news-card__title {
  margin: 0;
  max-width: 28ch;
}

.news-card__text {
  max-width: 60ch;
  margin: 0;
  color: var(--text-primary);
}

.news-card__list {
  margin: 0;
  padding-inline-start: var(--space-4);
  color: var(--text-secondary);
  max-width: 60ch;
}

.news-card__list li + li {
  margin-block-start: var(--space-2);
}

.news-card__meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}

.news-card__link {
  align-self: flex-start;
  margin-block-start: var(--space-3);
  font-weight: 700;
}

/* ===== Kategorie wiadomości ===== */

.news-categories__header {
  margin-block-end: var(--space-4);
  text-align: center;
}

.news-categories__header h2 {
  margin-block-end: var(--space-2);
}

.news-categories__intro {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--text-secondary);
}

.news-categories__buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 900px;
  margin-inline: auto;
}

.category-button {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  min-height: 96px;
  background-color: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-2);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.category-button:hover {
  background-color: var(--bg-primary);
  border-color: var(--accent-cyan);
  box-shadow: var(--shadow-glow);
}

.category-button:active {
  transform: translateY(2px);
  box-shadow: none;
}

.category-button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.category-button[aria-pressed="true"] {
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--bg-primary);
}

.category-button__icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  clip-path: polygon(
    0 0,
    calc(100% - 4px) 0,
    100% 4px,
    100% 100%,
    4px 100%,
    0 calc(100% - 4px)
  );
}

.category-button--updates {
  --category-accent: var(--accent-magenta);
}

.category-button--events {
  --category-accent: var(--accent-yellow);
}

.category-button--guides {
  --category-accent: var(--accent-purple);
}

.category-button--community {
  --category-accent: var(--accent-cyan);
}

.category-button--updates .category-button__icon {
  background-color: var(--accent-magenta);
}

.category-button--events .category-button__icon {
  background-color: var(--accent-yellow);
}

.category-button--guides .category-button__icon {
  background-color: var(--accent-purple);
}

.category-button--community .category-button__icon {
  background-color: var(--accent-cyan);
}

/* ===== Zapowiedź aktualizacji ===== */

.update-preview__panel {
  background-color: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.update-preview__kicker {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.update-preview__panel h2 {
  margin: 0;
  max-width: 30ch;
}

.update-preview__lead {
  max-width: 70ch;
  margin: 0;
}

.update-preview__list {
  max-width: 70ch;
  margin: 0;
}

.update-preview__meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 70ch;
}

/* ===== Komentarz redakcji ===== */

.editorial-comment__panel {
  width: 80%;
  max-width: 900px;
  margin-inline: auto;
  background-color: var(--bg-surface);
  border: 2px solid var(--accent-purple);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.editorial-comment__avatar {
  width: 64px;
  height: 64px;
  background-color: var(--bg-primary);
  border: 2px solid var(--accent-purple);
  border-radius: var(--radius-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.editorial-comment__avatar-pixel {
  width: 32px;
  height: 32px;
  background-color: var(--accent-purple);
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
}

.editorial-comment__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.editorial-comment__kicker {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.editorial-comment__content h2 {
  margin: 0;
  max-width: 30ch;
}

.editorial-comment__quote {
  margin: 0;
  max-width: 65ch;
  border-inline-start-color: var(--accent-purple);
}

.editorial-comment__quote p {
  margin: 0;
}

.editorial-comment__meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 65ch;
}

/* ===== Warto wiedzieć ===== */

.fun-facts__panel {
  background-color: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.fun-facts__kicker {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.fun-facts__panel h2 {
  margin: 0;
  max-width: 30ch;
}

.fun-facts__lead {
  max-width: 70ch;
  margin: 0;
}

.fun-facts__list {
  max-width: 70ch;
  margin: 0;
}

/* ===== Pobierz grę ===== */

.download-cta__panel {
  width: 60%;
  max-width: 720px;
  margin-inline: auto;
  background-color: var(--bg-surface);
  border: 2px solid var(--accent-magenta);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.download-cta__panel h2 {
  margin: 0;
  max-width: 30ch;
}

.download-cta__text {
  max-width: 50ch;
  margin: 0;
}

.download-cta__list {
  max-width: 50ch;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.download-cta__list li {
  margin: 0;
}

.download-cta__button {
  min-width: 200px;
}

/* ===== Newsletter ===== */

.newsletter__panel {
  width: 50%;
  max-width: 640px;
  margin-inline: auto;
  background-color: var(--bg-surface);
  border: 2px solid var(--accent-purple);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.newsletter__panel h2 {
  margin: 0;
  max-width: 30ch;
}

.newsletter__text {
  max-width: 60ch;
  margin: 0;
}

.newsletter__list {
  max-width: 60ch;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.newsletter__list li {
  margin: 0;
}

.newsletter__form {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--space-3);
  margin: 0;
}

.newsletter__form input {
  width: 100%;
  min-width: 0;
}

.newsletter__form .newsletter__button {
  width: 100%;
  min-width: 0;
}

.newsletter__consent {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0;
}

.newsletter__message {
  font-size: 14px;
  line-height: 1.5;
  min-height: 1.5em;
  margin: 0;
  color: var(--accent-yellow);
}

.newsletter__message--success {
  color: var(--accent-cyan);
}

.newsletter__message--error {
  color: var(--accent-magenta);
}

/* ===== Tablet ===== */

@media (max-width: 1024px) {
  .featured-news {
    grid-template-columns: minmax(0, 1fr);
  }

  .latest-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-categories__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorial-comment__panel {
    width: 90%;
  }

  .download-cta__panel {
    width: 80%;
  }

  .newsletter__panel {
    width: 80%;
  }
}

/* ===== Mobile ===== */

@media (max-width: 767px) {
  .wiadomosci-main {
    padding-block: var(--space-4) var(--space-6);
  }

  .wiadoomosci-main > section {
    margin-block-end: var(--space-6);
  }

  .featured-news {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .featured-news__content h1 {
    font-size: 28px;
  }

  .latest-news__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-categories__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-button {
    min-height: 88px;
    font-size: 12px;
    padding: var(--space-2);
  }

  .editorial-comment__panel {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .editorial-comment__avatar {
    width: 48px;
    height: 48px;
  }

  .editorial-comment__avatar-pixel {
    width: 24px;
    height: 24px;
  }

  .download-cta__panel {
    width: 100%;
  }

  .newsletter__panel {
    width: 100%;
  }

  .newsletter__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 479px) {
  .featured-news__content h1 {
    font-size: 24px;
  }

  .news-categories__buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-button {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 64px;
    padding: var(--space-2) var(--space-3);
  }

  .category-button__icon {
    width: 20px;
    height: 20px;
  }

  .download-cta__button {
    width: 100%;
  }
}