/* ==========================================================================
   TNA TALENT RAILS — /talent directory rails (Oct 21 2026; talent.html only)
   Loads after tna-talent.css. Every rule is scoped to .tl-rails, so the card
   design on other pages (homepage, profile pages) is untouched.
   Each rail = one horizontal list: scroll-snap, arrows on mouse/trackpad
   screens, swipe on touch, a peek of the next card + an edge fade, and cards
   of one fixed height (no layout shift when members load).
   ========================================================================== */
.tl-rails{--tl-gut:32px;--tl-gap:18px;--tl-body:312px;--tl-pb:30px;display:flex;flex-direction:column;gap:46px;margin-top:10px;min-width:0}
@media (min-width:961px) and (max-width:1080px){.tl-rails{--tl-gut:22px}}
@media (max-width:960px){.tl-rails{--tl-gut:24px;gap:38px}}
@media (max-width:640px){.tl-rails{--tl-gap:12px;--tl-body:252px;gap:32px}}

.tl-rail{position:relative;min-width:0}
.tl-rail-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:20px;row-gap:4px;margin:0 0 14px}
.tl-rail-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;min-width:0}
.tl-rail-h{margin:0;font-family:var(--font-ui);font-size:clamp(19px,1.7vw,23px);font-weight:700;letter-spacing:-.022em;line-height:1.2;color:var(--tn-navy)}
.tl-rail-n{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep,#9C7A4E);white-space:nowrap}
.tl-rail-sub{grid-column:1;margin:0;font-family:var(--font-ui);font-size:13.5px;line-height:1.45;color:var(--tn-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-rail-nav{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:8px;align-self:end}
.tl-rails:not(.is-js) .tl-rail-nav{display:none}
.tl-rail-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;background:#fff;border:1px solid rgba(14,27,45,.16);color:var(--tn-navy);transition:background .25s,color .25s,border-color .25s,opacity .25s}
.tl-rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tl-rail-btn:hover:not([aria-disabled="true"]){background:var(--tn-navy);color:#F7F5F2;border-color:var(--tn-navy)}
.tl-rail-btn:focus-visible{outline:3px solid rgba(156,122,78,.55);outline-offset:2px}
.tl-rail-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.tl-rail.fits .tl-rail-btn{display:none}
.tl-rail-swipe{display:none;font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tn-muted);white-space:nowrap}
.tl-rail.fits .tl-rail-swipe{display:none!important}

/* the scroller: it reaches into the page gutters so the next card peeks in at the edge */
.tl-rail-view{position:relative;margin:0 calc(-1 * var(--tl-gut))}
.tl-rail-track{display:flex;gap:var(--tl-gap);list-style:none;margin:0;padding:6px var(--tl-gut) var(--tl-pb);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--tl-gut);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(14,27,45,.22) transparent}
.tl-rail-track::-webkit-scrollbar{height:6px}
.tl-rail-track::-webkit-scrollbar-track{background:transparent;margin:0 var(--tl-gut)}
.tl-rail-track::-webkit-scrollbar-thumb{background:rgba(14,27,45,.2);border-radius:99px}
.tl-rail-track::-webkit-scrollbar-thumb:hover{background:rgba(14,27,45,.38)}
.tl-rail-item{flex:0 0 calc((100% - 3 * var(--tl-gap)) / 4.2);min-width:0;display:flex;scroll-snap-align:start;container-type:inline-size}
@media (min-width:961px) and (max-width:1080px){.tl-rail-item{flex-basis:calc((100% - 2 * var(--tl-gap)) / 3.25)}}
@media (min-width:761px) and (max-width:960px){.tl-rail-item{flex-basis:calc((100% - 2 * var(--tl-gap)) / 3.2)}}
@media (min-width:641px) and (max-width:760px){.tl-rail-item{flex-basis:calc((100% - var(--tl-gap)) / 2.25)}}
@media (max-width:640px){.tl-rail-item{flex-basis:calc(100% / 1.25)}}

/* edge fades: shown only on the side that still has cards */
.tl-rail-view::before,.tl-rail-view::after{content:"";position:absolute;top:0;bottom:var(--tl-pb);width:56px;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.tl-rail-view::before{left:0;background:linear-gradient(90deg,#fff 12%,rgba(255,255,255,0))}
.tl-rail-view::after{right:0;background:linear-gradient(270deg,#fff 12%,rgba(255,255,255,0))}
.tl-rails.is-js .tl-rail:not(.at-start) .tl-rail-view::before{opacity:1}
.tl-rails.is-js .tl-rail:not(.at-end) .tl-rail-view::after{opacity:1}
.tl-rails:not(.is-js) .tl-rail-view::after{opacity:1}

/* the card: same design as the grid card, one fixed height in every rail. No line of text is ever cut: the text
   blocks never shrink, and a block that does not fit drops out WHOLE, the lowest first (Available for, then the
   expertise line, then the meta lines) — the body wraps it into a second column that is clipped away. The "View
   profile" line keeps its place at the bottom (taken out of the flow; the body keeps room for it). */
.tl-rails .tl-card{flex:1 1 auto;width:100%;flex-direction:column;border-radius:20px}
.tl-rails .tl-card:hover{box-shadow:0 16px 30px -18px rgba(14,27,45,.24)}
.tl-rails .tl-card-photo{flex:none;width:auto;aspect-ratio:5/4}
.tl-rails .tl-card-photo .tl-badge{display:inline-block}
.tl-rails .tl-card-body{--tl-px:20px;--tl-pbot:18px;--tl-cta:30px;flex:none;height:var(--tl-body);overflow:hidden;min-width:0;position:relative;
  flex-wrap:wrap;align-content:flex-start;column-gap:calc(var(--tl-px) + 24px);padding:18px var(--tl-px) calc(var(--tl-pbot) + var(--tl-cta) + 8px)}
.tl-rails .tl-card-body > *{flex:none;width:100%;max-width:100%;min-width:0}
.tl-rails .tl-card .tl-cta{position:absolute;left:var(--tl-px);right:var(--tl-px);bottom:var(--tl-pbot);height:var(--tl-cta);box-sizing:border-box;margin:0;white-space:nowrap;width:auto}
.tl-rails .tl-card .tl-cta .l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tl-rails .tl-name,.tl-rails .tl-title,.tl-rails .tl-avail b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-rails .tl-meta li:nth-child(n+3){display:none}
.tl-rails .tl-meta li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-rails .tl-expertise{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tl-rails .tl-card .tl-cta .l{display:inline}
.tl-rails .tl-card .tl-cta .s{display:none}
/* a narrow card says "View profile" (the long label would not fit on one line) */
@container (max-width:255.98px){
  .tl-rails .tl-card .tl-cta .l{display:none}
  .tl-rails .tl-card .tl-cta .s{display:inline}
}
.tl-rails .tl-card:focus-visible{outline:3px solid rgba(156,122,78,.6);outline-offset:3px}
.tl-badge.ft{top:auto;bottom:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding-left:9px;background:var(--tn-navy);color:var(--tn-sand)}
.tl-rails .tl-card-photo .tl-badge.ft{display:inline-flex}
.tl-badge.ft svg{flex:none;width:12px;height:12px;fill:var(--tn-sand);stroke:none}
.tl-rails .tl-empty{margin:0}

/* mouse / trackpad screens: arrows; touch screens: "Swipe" and no scrollbar */
@media (hover:none),(pointer:coarse){
  .tl-rail-btn{display:none}
  .tl-rail-swipe{display:inline-flex;gap:6px;align-items:center}
  .tl-rail-track{scrollbar-width:none}
  .tl-rail-track::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
  .tl-rail-head{grid-template-columns:minmax(0,1fr) auto;margin-bottom:10px}
  .tl-rail-h{font-size:18px}
  .tl-rail-sub{font-size:12.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .tl-rails{--tl-pb:18px}
  .tl-rail-view::before,.tl-rail-view::after{width:28px}
  .tl-rails .tl-card-photo{aspect-ratio:4/3}
  .tl-rails .tl-card-body{--tl-px:14px;--tl-pbot:12px;--tl-cta:25px;gap:5px;column-gap:calc(var(--tl-px) + 24px);padding:14px var(--tl-px) calc(var(--tl-pbot) + var(--tl-cta) + 5px)}
  .tl-rails .tl-expertise{display:none}
  .tl-rails .tl-card .tl-cta{padding-top:8px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .tl-rail-track{scroll-behavior:auto}
  .tl-rail-view::before,.tl-rail-view::after,.tl-rail-btn{transition:none}
}