/* Page-owned styles for przeciwnicy page */
.przeciwnicy-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding-block: var(--space-48) var(--space-96);
}

.przeciwnicy-page > .przeciwnicy-section {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.przeciwnicy-section__header {
  margin-block-end: var(--space-24);
}

.przeciwnicy-section__header .rubric-label {
  margin-block-end: var(--space-8);
}

.przeciwnicy-section__header h2 {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Hero */
.przeciwnicy-hero {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  padding-block-start: var(--space-48);
}

.przeciwnicy-hero__inner {
  width: 100%;
  max-width: var(--reading-column-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.przeciwnicy-hero__ornament {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-royal-violet);
  margin-block-end: var(--space-8);
}

.przeciwnicy-hero__title {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
  color: var(--color-royal-violet);
}

.przeciwnicy-hero__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-leading);
  margin-block-end: 0;
  color: var(--color-navy-ink);
}

.przeciwnicy-hero__note {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-navy-muted);
  margin-block-end: 0;
}

/* Reading column */
.przeciwnicy-reading-column {
  width: 100%;
  max-width: var(--reading-column-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Categories */
.przeciwnicy-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;
}

.przeciwnicy-category-card {
  background-color: var(--color-ivory-raised);
  border: var(--border-navy-20);
  border-block-start: 4px solid var(--color-emerald-ink);
  border-radius: var(--radius-default);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  transition: border-color var(--transition-fast);
}

.przeciwnicy-category-card:hover {
  border-color: var(--color-emerald-ink);
}

.przeciwnicy-category-card .tag {
  align-self: flex-start;
}

.przeciwnicy-category-card h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  color: var(--color-royal-violet);
}

.przeciwnicy-category-card p {
  margin-block-end: 0;
  color: var(--color-navy-ink);
}

.przeciwnicy-category-card__meta {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-navy-muted);
  margin-block-start: auto;
}

/* Behaviors */
.przeciwnicy-behaviors__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  border-inline-start: 1px solid var(--color-royal-violet);
  padding-inline-start: var(--space-24);
}

.przeciwnicy-behaviors__content h3 {
  margin-block-start: 0;
  margin-block-end: var(--space-8);
  color: var(--color-royal-violet);
}

.przeciwnicy-behaviors__content p {
  margin-block-end: 0;
}

/* Threat table */
.przeciwnicy-threat__table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-block-end: var(--space-16);
}

.przeciwnicy-threat__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border: var(--border-navy-20);
  border-radius: var(--radius-default);
  overflow: hidden;
  margin-block-end: 0;
}

.przeciwnicy-threat__table th,
.przeciwnicy-threat__table td {
  padding: var(--space-12);
  border-block-end: var(--border-navy-12);
  text-align: left;
  vertical-align: top;
}

.przeciwnicy-threat__table thead th {
  background-color: var(--color-violet-soft);
  color: var(--color-royal-violet);
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  border-block-end: var(--border-navy-20);
}

.przeciwnicy-threat__table tbody tr:nth-child(even) {
  background-color: var(--color-ivory-raised);
}

.przeciwnicy-threat__table tbody tr:last-child td,
.przeciwnicy-threat__table tbody tr:last-child th {
  border-block-end: none;
}

.przeciwnicy-threat__note {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-navy-muted);
  max-width: var(--reading-column-max);
  margin-block-end: 0;
}

/* Strategies */
.przeciwnicy-strategies__callout {
  background-color: var(--color-violet-soft);
  border-inline-start: 1px solid var(--color-royal-violet);
  border-radius: var(--radius-default);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.przeciwnicy-strategies__callout h3 {
  margin-block-start: 0;
  margin-block-end: var(--space-8);
  color: var(--color-royal-violet);
}

.przeciwnicy-strategies__callout ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.przeciwnicy-strategies__callout li {
  overflow-wrap: break-word;
}

/* Spotlight */
.przeciwnicy-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;
}

.przeciwnicy-spotlight-card {
  background-color: var(--color-ivory-raised);
  border: var(--border-navy-20);
  border-block-start: 4px solid var(--color-emerald-ink);
  border-radius: var(--radius-default);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  transition: border-color var(--transition-fast);
}

.przeciwnicy-spotlight-card:hover {
  border-color: var(--color-emerald-ink);
}

.przeciwnicy-spotlight-card__ornament {
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--color-gold-rubric);
  border-radius: var(--radius-pixel);
}

.przeciwnicy-spotlight-card__ornament--bat {
  clip-path: polygon(0 50%, 20% 0, 40% 50%, 60% 0, 80% 50%, 100% 50%, 80% 100%, 60% 50%, 40% 100%, 20% 50%);
}

.przeciwnicy-spotlight-card__ornament--skeleton {
  clip-path: polygon(50% 0, 70% 20%, 70% 40%, 90% 40%, 90% 60%, 70% 60%, 70% 80%, 50% 100%, 30% 80%, 30% 60%, 10% 60%, 10% 40%, 30% 40%, 30% 20%);
}

.przeciwnicy-spotlight-card__ornament--ghost {
  clip-path: polygon(50% 0, 80% 20%, 80% 70%, 65% 60%, 50% 80%, 35% 60%, 20% 70%, 20% 20%);
}

.przeciwnicy-spotlight-card h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  color: var(--color-royal-violet);
}

.przeciwnicy-spotlight-card p {
  margin-block-end: 0;
  color: var(--color-navy-ink);
}

/* Beginner tips */
.przeciwnicy-beginner__content {
  background-color: var(--color-violet-soft);
  border-radius: var(--radius-default);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.przeciwnicy-beginner__content h3 {
  margin-block-start: 0;
  margin-block-end: var(--space-8);
  color: var(--color-royal-violet);
}

.przeciwnicy-beginner__content p {
  margin-block-end: 0;
}

/* Related links */
.przeciwnicy-related__intro {
  margin-block-end: var(--space-16);
}

.przeciwnicy-related__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.przeciwnicy-related__list li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.przeciwnicy-related__list li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-emerald-ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
}

.przeciwnicy-related__list a {
  color: var(--color-emerald-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}

.przeciwnicy-related__list a:hover {
  color: var(--color-emerald-deep);
}

/* Disclaimer */
.przeciwnicy-disclaimer {
  border-block-start: var(--border-navy-15);
  padding-block-start: var(--space-24);
}

.przeciwnicy-disclaimer__text {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-navy-muted);
  margin-block-end: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .przeciwnicy-categories__grid,
  .przeciwnicy-spotlight__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .przeciwnicy-page {
    gap: var(--space-48);
    padding-block: var(--space-32) var(--space-64);
  }

  .przeciwnicy-page > .przeciwnicy-section,
  .przeciwnicy-hero {
    padding-inline: var(--container-padding-mobile);
  }

  .przeciwnicy-hero {
    padding-block-start: var(--space-32);
  }

  .przeciwnicy-hero__title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.15;
  }

  .przeciwnicy-behaviors__content {
    border-inline-start: none;
    padding-inline-start: 0;
  }

  .przeciwnicy-strategies__callout {
    border-inline-start: none;
    border-block-start: 1px solid var(--color-royal-violet);
  }

  .przeciwnicy-threat__table-wrap {
    margin-inline: calc(-1 * var(--container-padding-mobile));
    padding-inline: var(--container-padding-mobile);
    width: calc(100% + 2 * var(--container-padding-mobile));
  }
}

@media (max-width: 520px) {
  .przeciwnicy-categories__grid,
  .przeciwnicy-spotlight__grid {
    grid-template-columns: 1fr;
  }

  .przeciwnicy-category-card,
  .przeciwnicy-spotlight-card {
    padding: var(--space-16);
  }

  .przeciwnicy-strategies__callout,
  .przeciwnicy-beginner__content {
    padding: var(--space-16);
  }

  .przeciwnicy-related__list li {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .przeciwnicy-category-card,
  .przeciwnicy-spotlight-card,
  .przeciwnicy-related__list a {
    transition: none;
  }
}
