/* Torneo de la Amistad page. Built by hand, outside the Figma export, on the
   players layout. The colours are the tournament's own: the three flames of its
   logo (blue, yellow, red). Yellow is the accent because it reads on navy. */
body[data-page="torneodelaamistad"] {
  --ta-blue: #0063ff;
  --ta-yellow: #fff241;
  --ta-red: #fc3630;
  --accent: var(--ta-yellow);
  --accent-border: rgba(255, 242, 65, 0.6);
  /* The organisers' glow, redrawn in the tournament blue. */
  --halo-sm: url("/assets/images/torneo-amistad/halo-sm.svg");
  --halo-md: url("/assets/images/torneo-amistad/halo-md.svg");
  --halo-lg: url("/assets/images/torneo-amistad/halo-lg.svg");
}

/* Wame and the tournament side by side, split by a thin line. */
.ta-brands {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}
.ta-brands img {
  width: auto;
  height: 28px;
}
.ta-brands img:last-child {
  height: 64px;
}
.ta-brands span {
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.4);
}
.ta-phones {
  width: 100%;
  margin-top: 56px;
}

/* How it works: three numbered steps, one per flame colour. */
.ta-steps {
  display: grid;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.ta-steps li {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.04);
}
.ta-steps h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}
.ta-steps li > p:last-child {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.8);
}
.ta-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 20px;
  border-radius: 16px;
  background: var(--ta-blue);
  color: #fff;
  font:
    400 26px/1 "Bowlby One",
    sans-serif;
}
.ta-steps li:nth-child(2) .ta-num {
  background: var(--ta-yellow);
  color: var(--wame-navy);
}
.ta-steps li:nth-child(3) .ta-num {
  background: var(--ta-red);
}

/* Closing call in the tournament blue, yellow on the second line. */
body[data-page="torneodelaamistad"] .lp-cta {
  background: linear-gradient(135deg, var(--ta-blue) 0%, #0b3fb0 100%);
  color: #fff;
}
body[data-page="torneodelaamistad"] .lp-cta h2 span {
  color: var(--ta-yellow);
}

@media (min-width: 800px) {
  .ta-brands {
    gap: 32px;
  }
  .ta-brands img {
    height: 36px;
  }
  .ta-brands img:last-child {
    height: 88px;
  }
  .ta-brands span {
    height: 80px;
  }
  .ta-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}