Lesson: Nested anchor tags break flex layout

CRM player cards rendered as broken vertical blocks — avatar in one block, name in another, phone number drifting into the next card.

Card rows were <a href="player-profile.html"> tags containing <a href="tel:..."> phone links inside them. Nested <a> tags are invalid HTML. Browsers handle this by auto-closing the outer <a> when they hit the inner one — which destroys the flex container from that point forward. Everything after the phone link gets ejected from the card.

Change the outer element from <a> to <div onclick="location.href='...'">. Inner phone links remain as proper <a href="tel:..."> tags. Add cursor: pointer to the div so it still looks clickable.

Never nest <a> inside <a>. If a clickable container needs inner links (phone, email, sub-navigation), use a <div> with onclick for the container. The CSS is never the problem — the DOM is broken before CSS runs.