/* Page-owned styles for Walki page */
.walki-page {
  --walki-section-gap: var(--space-48);
  --walki-card-gap: var(--space-16);
}

.walki-page section {
  padding-block: var(--walki-section-gap);
}

.walki-page .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Introduction */
.walki-intro {
  background-color: var(--color-soft-peach);
}

.walki-intro__inner {
  align-items: flex-start;
}

.walki-intro__tag {
  align-self: flex-start;
}

.walki-intro h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  margin-block-end: var(--space-16);
}

.walki-intro__lead {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  max-width: 75ch;
}

.walki-intro__modes {
  list-style: disc;
  padding-inline-start: var(--space-24);
  margin-block-end: 0;
  max-width: 75ch;
}

.walki-intro__modes li {
  margin-block-end: var(--space-8);
}

.walki-intro__modes li:last-child {
  margin-block-end: 0;
}

/* Team composition */
.walki-team__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.walki-team__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.walki-team__text h2 {
  margin-block-end: 0;
}

.walki-team__text p {
  margin-block-end: 0;
}

.walki-team__roles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--walki-card-gap);
}

.walki-role-card {
  background-color: var(--color-sugar-white);
  border: 1px solid rgba(62, 42, 35, var(--border-opacity-subtle));
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
  padding: var(--space-16);
  min-width: 0;
}

.walki-role-card h3 {
  margin-block-end: var(--space-8);
}

.walki-role-card p {
  margin-block-end: 0;
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}

/* Skills */
.walki-skills__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.walki-skills__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.walki-skills__text h2 {
  margin-block-end: 0;
}

.walki-skills__text p {
  margin-block-end: 0;
}

.walki-skills__tip {
  min-width: 0;
}

.walki-skills__tip h3 {
  margin-block-end: var(--space-8);
}

.walki-skills__tip p {
  margin-block-end: 0;
}

/* Treasures */
.walki-treasures {
  background-color: var(--color-soft-peach);
}

.walki-treasures__inner {
  align-items: flex-start;
}

.walki-treasures h2 {
  margin-block-end: var(--space-12);
}

.walki-treasures > .container > p {
  margin-block-end: var(--space-24);
  max-width: 75ch;
}

.walki-treasures__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--walki-card-gap);
  width: 100%;
}

.walki-treasure-card {
  background-color: var(--color-sugar-white);
  border: 1px solid rgba(62, 42, 35, var(--border-opacity-subtle));
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
  padding: var(--space-16);
  min-width: 0;
}

.walki-treasure-card h3 {
  margin-block-end: var(--space-8);
}

.walki-treasure-card p {
  margin-block-end: 0;
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}

/* Toppings */
.walki-toppings__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.walki-toppings__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.walki-toppings__text h2 {
  margin-block-end: 0;
}

.walki-toppings__text p {
  margin-block-end: 0;
}

.walki-toppings__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--walki-card-gap);
}

.walki-topping-item {
  background-color: var(--color-sugar-white);
  border: 1px solid rgba(62, 42, 35, var(--border-opacity-subtle));
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
  padding: var(--space-16);
  min-width: 0;
}

.walki-topping-item h3 {
  margin-block-end: var(--space-8);
}

.walki-topping-item p {
  margin-block-end: 0;
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}

/* Arena */
.walki-arena {
  background-color: var(--color-soft-peach);
}

.walki-arena__inner {
  align-items: flex-start;
}

.walki-arena h2 {
  margin-block-end: var(--space-12);
}

.walki-arena > .container > p {
  margin-block-end: var(--space-24);
  max-width: 75ch;
}

.walki-arena__tip {
  width: 100%;
  max-width: 75ch;
}

.walki-arena__tip h3 {
  margin-block-end: var(--space-8);
}

.walki-arena__tip p {
  margin-block-end: 0;
}

/* Alliance */
.walki-alliance__inner {
  align-items: flex-start;
}

.walki-alliance h2 {
  margin-block-end: var(--space-12);
}

.walki-alliance > .container > p {
  margin-block-end: 0;
  max-width: 75ch;
}

/* Guild */
.walki-guild {
  background-color: var(--color-soft-peach);
}

.walki-guild__inner {
  align-items: flex-start;
}

.walki-guild h2 {
  margin-block-end: var(--space-12);
}

.walki-guild > .container > p {
  margin-block-end: 0;
  max-width: 75ch;
}

/* Summary */
.walki-summary__inner {
  align-items: flex-start;
}

.walki-summary h2 {
  margin-block-end: var(--space-12);
}

.walki-summary > .container > p {
  margin-block-end: var(--space-24);
  max-width: 75ch;
}

.walki-summary__panel {
  width: 100%;
  max-width: 75ch;
}

.walki-summary__panel h3 {
  margin-block-end: var(--space-8);
}

.walki-summary__panel ul {
  list-style: disc;
  padding-inline-start: var(--space-24);
  margin-block-end: 0;
}

.walki-summary__panel li {
  margin-block-end: var(--space-8);
}

.walki-summary__panel li:last-child {
  margin-block-end: 0;
}

/* CTA */
.walki-cta {
  background-color: var(--color-soft-peach);
  text-align: center;
}

.walki-cta__inner {
  align-items: center;
  text-align: center;
}

.walki-cta h2 {
  margin-block-end: var(--space-12);
}

.walki-cta p {
  max-width: 75ch;
  margin-inline: auto;
}

.walki-cta__button {
  margin-block-start: var(--space-8);
}

.walki-cta__disclaimer {
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-cocoa-soft);
  margin-block-start: var(--space-8);
}

/* Tablet */
@media (min-width: 768px) {
  .walki-page {
    --walki-section-gap: var(--space-64);
  }

  .walki-team__inner {
    grid-template-columns: 1fr 1fr;
  }

  .walki-team__roles {
    grid-template-columns: 1fr 1fr;
  }

  .walki-skills__inner {
    grid-template-columns: 2fr 1fr;
  }

  .walki-treasures__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .walki-toppings__inner {
    grid-template-columns: 1fr 1fr;
  }

  .walki-toppings__list {
    grid-template-columns: 1fr;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .walki-page {
    --walki-section-gap: var(--space-96);
  }

  .walki-team__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
  }

  .walki-team__roles {
    grid-template-columns: 1fr 1fr;
  }

  .walki-skills__inner {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-48);
  }

  .walki-treasures__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .walki-toppings__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
  }

  .walki-toppings__list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .walki-page *,
  .walki-page *::before,
  .walki-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}