/* #/athletes (owner: C · Entry, home, catalog). The athlete hero reuses the home .hero (app.css, catalog.css, desktop.css);
   these rules add the ring name, the league line and the athlete's own products inside the hero, and the grid of the other
   athletes under it. Mobile first, desktop inside @media (min-width:1024px); selectors carry .ath-hero so they win over the
   shared .hero rules. */
.ath-hero .hero-img img{object-position:var(--pos,55% 30%)}
.ath-hero .hero-copy{gap:16px}
/* --len = letters in the longest word of the name (views/athletes.js): a long one ("Silkmuaythai") gets a smaller size
   so it fits the column; Anton capitals run about .45em wide */
.ath-hero .hero-copy h1{font-size:min(clamp(64px,21vw,92px),calc((min(100vw,480px) - 32px) / (var(--len,7) * .48)))}
.ath-k{font-size:12px;color:var(--fg2)}
.ath-who{display:flex;flex-direction:column;gap:6px}
.ath-nick{display:block;font-size:32px;line-height:1}
.ath-meta{display:block;font-size:12px;letter-spacing:.08em;line-height:1.6;color:var(--fg2)}
.ath-items{display:flex;flex-direction:column;gap:8px}
.ath-item{display:flex;align-items:center;gap:14px;padding:8px 16px 8px 8px;background:var(--panel);border:1px solid var(--line2)}
.ath-ph{flex:none;width:96px;height:96px;background:#fff}
.ath-ph img{width:100%;height:100%;object-fit:contain}
.ath-it{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ath-it .mono{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.ath-it b{font-size:var(--text);font-weight:700;line-height:1.25}
.ath-pr{font-family:var(--mono);font-size:var(--text-sm)}
.ath-go{flex:none;display:flex;color:var(--fg2)}
.ath-none{padding:48px 16px;display:flex;flex-direction:column;gap:12px;color:var(--fg2)}

/* the other athletes: photo tiles, two a row on phones, four on desktop */
.ath-sec{padding-bottom:48px}
.ath-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 8px;padding:0 16px}
.ath-tile{display:flex;flex-direction:column;gap:10px;color:var(--fg)}
.ath-tile-ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.ath-tile-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,55% 30%)}
/* their merch on white in the bottom corner of the photo, so the tile reads as "this athlete's tee" */
.ath-tile-tee{position:absolute;right:8px;bottom:8px;width:38%;aspect-ratio:1/1;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.ath-tile-tee img{display:block;width:100%;height:100%;object-fit:contain}
/* home page: a swipe rail on phones (like New & popular), one row of four on desktop */
.athsec .ath-rail{gap:10px;padding:0 16px 48px}
.athsec .ath-tile{flex:0 0 min(64vw,260px)}
.ath-tile-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.ath-tile-txt .mono{font-size:12px;letter-spacing:.08em}
.ath-tile-txt b{font-size:24px;font-weight:400;line-height:1;overflow-wrap:anywhere}
/* margin-top:auto: a two-line name pushes no country/price line out of step with the rest of the row */
.ath-tile-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;margin-top:auto;color:var(--fg2)}
.ath-tile-meta .mono{font-size:12px;letter-spacing:.08em}

/* the names are Latin (lang=en): keep the display line height that the Thai rule in app.css would loosen
   (that rule weighs (0,4,2) through :is(), so these carry enough classes to outweigh it) */
html[lang=th] .ath-hero .hero-copy .ath-who .disp{font-weight:400;line-height:1!important}
html[lang=th] .ath-hero .hero-copy .ath-who h1.disp{line-height:.94!important}
html[lang=th] .ath-grid .ath-tile .ath-tile-txt b.disp{font-weight:400;line-height:1!important}

@media (hover:hover){
  .ath-item{transition:border-color .15s ease}
  .ath-item:hover{border-color:var(--fg)}
  .ath-item:hover .ath-go{color:var(--red)}
  .ath-tile-ph>img{transition:transform .3s ease}
  .ath-tile:hover .ath-tile-ph>img{transform:scale(1.03)}
}
@media (min-width:1024px){
  /* catalog.css caps the home hero at 70vh; this one holds more (ring name, product, buttons), so it grows instead of overflowing */
  section.hero.ath-hero{max-height:none}
  .ath-hero .hero-img img{object-position:var(--pos,55% 30%) !important}
  .ath-hero .hero-copy h1{font-size:min(clamp(64px,min(8vw,11vh),132px),calc((46vw - var(--edge,40px)) / (var(--len,7) * .48)));line-height:.94;letter-spacing:.01em}
  .ath-nick{font-size:44px}
  .ath-items{max-width:460px}
  .ath-ph{width:120px;height:120px}
  .ath-none{padding:80px var(--edge)}
  .ath-sec{padding-bottom:80px}
  .ath-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;padding:0 var(--edge)}
  .ath-tile-txt b{font-size:32px}
  .ath-tile-tee{right:12px;bottom:12px;width:34%}
  .athsec .ath-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;overflow:visible;scroll-snap-type:none;padding:0 var(--edge) 48px}
}