/* A01 competition directory uses the existing blue frame and list-box vocabulary. */
@media (min-width: 768px) and (max-width: 1232px) {
  .toolbar-box, .header-box, .nav-box, .a01-competition-wrapper { width: calc(100% - 32px) !important; max-width: 1200px; box-sizing: border-box; }
  .toolbar-left { width: 100% !important; overflow: hidden; }
  .nav-box { display: flex; flex-wrap: wrap; height: auto !important; }
  .nav-box > li { flex: 0 0 auto; }
}
.a01-competition-wrapper { box-sizing: border-box; }
.a01-competition-directory { width: 100%; min-width: 0; }
.a01-competition-directory * { box-sizing: border-box; }
.a01-competition-layout { display: grid; grid-template-columns: 175px minmax(0, 1fr); align-items: start; gap: 18px; }
.a01-competition-layout .list-box { width: 100%; min-width: 0; margin: 0; }
.a01-competition-navigation { padding: 14px; height: auto !important; min-height: 0 !important; }
.a01-competition-navigation .list-box-title { padding: 0 0 12px; height: auto; }
.a01-competition-navigation nav { display: flex; flex-direction: column; }
.a01-competition-navigation nav > a { display: block; padding: 10px 14px; border-bottom: 1px solid #e8edf2; font-size: 14px; line-height: 24px; }
.a01-competition-navigation nav > a.on { background: #009ef7; color: #fff; border-radius: 5px; border-bottom-color: transparent; }
.a01-competition-main { padding: 18px; }
.a01-competition-main > .list-box-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 16px; margin: 0; height: auto; border-bottom: 1px solid #e8edf2; }
.a01-competition-main h1 { margin: 0; font-size: 18px; font-weight: bold; line-height: 28px; }
.a01-competition-main > .list-box-title > span { font-size: 12px; line-height: 22px; color: #888; white-space: nowrap; }
.a01-competition-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px 0; }
.a01-competition-card { display: block; min-width: 0; padding: 16px 14px; border: 1px solid #e0e8ef; border-radius: 5px; background: #fff; color: #153550; }
.a01-competition-card:hover { border-color: #009ef7; color: #009ef7; }
.a01-competition-sport { display: block; font-size: 12px; line-height: 20px; color: #888; }
.a01-competition-card h2 { margin: 5px 0 12px; min-height: 44px; font-size: 16px; font-weight: bold; line-height: 22px; overflow-wrap: anywhere; }
.a01-competition-entry { font-size: 12px; line-height: 20px; color: #168be0; }
.a01-competition-main .fan-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 0; }
.a01-competition-main .fan-pagination :is(a, b) { display: inline-block; padding: 4px 10px; border: 1px solid #dbe6f0; font-size: 13px; line-height: 22px; }
.a01-competition-main .fan-pagination b { background: #009ef7; border-color: #009ef7; color: #fff; }
.a01-competition-empty { margin: 0; padding: 28px 0; font-size: 14px; line-height: 24px; color: #888; }
@media (min-width: 768px) and (max-width: 1100px) {
  .a01-competition-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a01-competition-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 767px) {
  .a01-competition-layout { display: block; }
  .a01-competition-navigation { margin-bottom: 16px !important; padding: 12px; }
  .a01-competition-navigation nav { flex-direction: row; gap: 6px; }
  .a01-competition-navigation nav > a { flex: 1; text-align: center; padding: 7px 8px; border: 0; }
  .a01-competition-main { padding: 14px; }
  .a01-competition-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 0; }
  .a01-competition-card { padding: 12px; }
  .a01-competition-card h2 { font-size: 14px; }
}