/* ===== Arenas =====
   Own stylesheet for the venues archive. Each venue is a "location strip": a map tile with a pin on the left,
   address and directions in the middle, and the season's matches on the right, separated by a dashed "route" line.
   Uses the tokens and .glass from site.css. */
.ar-list{display:grid;gap:18px}
.ar-row{display:grid;grid-template-columns:150px 1fr 240px;overflow:hidden;border-radius:26px 10px 26px 10px;transition:transform .2s}
.ar-row:hover{transform:translateY(-2px)}
.ar-row:target{box-shadow:0 0 0 3px var(--accent),var(--sh)}

/* map tile with pin: grid lines and two crossing "roads" */
.ar-map{position:relative;min-height:150px;
  background:
    linear-gradient(115deg,transparent 45%,color-mix(in srgb,var(--text) 15%,transparent) 45% 48%,transparent 48%),
    linear-gradient(25deg,transparent 62%,color-mix(in srgb,var(--a2) 28%,transparent) 62% 65%,transparent 65%),
    repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--text) 9%,transparent) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--text) 9%,transparent) 23px 24px),
    linear-gradient(135deg,color-mix(in srgb,var(--o2) 22%,transparent),color-mix(in srgb,var(--o1) 20%,transparent))}
.ar-pin{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-24px 0 0 -18px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 10px 20px rgba(232,93,4,.45);transition:transform .25s ease}
.ar-pin b{transform:rotate(45deg);color:#fff;font-size:.95rem;font-weight:800}
.ar-row:hover .ar-pin{transform:rotate(-45deg) translate(3px,-7px)}

.ar-main{padding:22px 24px;min-width:0}
.ar-main h2{margin:0;font-size:1.35rem;letter-spacing:-.02em}
.ar-addr{margin:6px 0 0;color:var(--muted);font-weight:600}
.ar-addr a:hover{color:var(--accent)}
.ar-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ar-btn{display:inline-block;padding:9px 16px;border-radius:12px;font-weight:700;font-size:.9rem;background:linear-gradient(135deg,var(--accent),var(--o3));color:#fff;box-shadow:0 6px 16px rgba(232,93,4,.3);transition:transform .2s}
.ar-btn:hover{transform:translateY(-2px)}
.ar-btn.alt{background:var(--gb);color:var(--text);box-shadow:none;border:1px solid var(--gb)}
.ar-how{margin-top:14px}
.ar-how summary{cursor:pointer;font-weight:700;color:var(--a2)}
.ar-how div{margin-top:8px;line-height:1.65;color:var(--muted)}
.ar-how p{margin:0 0 .8em}

/* what is played here this season */
.ar-side{padding:22px 22px 22px 24px;border-left:2px dashed var(--gb);display:flex;flex-direction:column;justify-content:center;gap:12px}
.ar-n{margin:0;display:flex;align-items:baseline;gap:8px;line-height:1}
.ar-n b{font-size:2.4rem;font-weight:800;letter-spacing:-.04em;color:var(--accent)}
.ar-n span{font-size:.82rem;font-weight:700;color:var(--muted)}
.ar-next{margin:0;font-weight:700;line-height:1.5}
.ar-next small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ar-next abbr{text-decoration:none;cursor:help}
.ar-none{margin:0;color:var(--muted);font-weight:600;font-size:.9rem}
.ar-idle{opacity:.7}.ar-idle:hover{opacity:1}

@media(max-width:899px){
  .ar-row{grid-template-columns:1fr;border-radius:22px}
  .ar-map{min-height:96px}
  .ar-main{padding:18px 20px}
  .ar-side{border-left:0;border-top:2px dashed var(--gb);flex-direction:row;align-items:center;justify-content:space-between;padding:16px 20px}
}
/* ===== End Arenas ===== */