/* ─────────────────────────────────────────────────────────
   EXILES TEAM MEMBERS — Front-end styles 
   ───────────────────────────────────────────────────────── */

/* ── Tokens (fallback if theme not loaded) ── */
:root {
  --etm-bg:       #060608;
  --etm-deep:     #0a0b0e;
  --etm-card:     #13151e;
  --etm-card2:    #181b26;
  --etm-border:   rgba(255,255,255,.07);
  --etm-border2:  rgba(255,255,255,.13);
  --etm-red:      #e8e8f0;
  --etm-red2:     #f0f0f8;
  --etm-red-glow: rgba(220,220,240,.30);
  --etm-red-dim:  rgba(220,220,240,.10);
  --etm-white:    #f2f2f4;
  --etm-white2:   #b4b6c4;
  --etm-muted:    #4a4e62;
  --etm-clip:     polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --etm-clip-sm:  polygon(6px 0,  100% 0, calc(100% - 6px)  100%, 0 100%);
  --etm-blur:     blur(18px);
}

/* ── Grid ── */
.etm-wrap { position: relative; z-index: 1; }

.etm-grid {
  display: grid;
  gap: .75rem;
}
.etm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.etm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.etm-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 860px) {
  .etm-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .etm-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .etm-cols-4,
  .etm-cols-3,
  .etm-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Card ── */
@keyframes etm-stagger {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.etm-card {
  position: relative;
  background: var(--card, var(--etm-card));
  border: 1px solid var(--border, var(--etm-border));
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-align: center;
  padding: 1.75rem 1rem 1.5rem;
  overflow: hidden;
  transition: border-color .25s, background .25s, transform .25s;
  animation: etm-stagger .5s cubic-bezier(.22,.8,.46,1) both;
}

/* Red left-edge accent bar — slides in on hover */
.etm-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--etm-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.22,.8,.46,1);
}

/* Subtle red tint overlay on hover */
.etm-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--etm-red-dim) 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.etm-card:hover {
  border-color: rgba(230, 51, 51, .22);
  background: var(--card2, var(--etm-card2));
  transform: translateY(-4px);
}
.etm-card:hover::before { transform: scaleY(1); }
.etm-card:hover::after  { opacity: 1; }

/* Stagger delays */
.etm-card:nth-child(1)  { animation-delay: .06s; }
.etm-card:nth-child(2)  { animation-delay: .13s; }
.etm-card:nth-child(3)  { animation-delay: .20s; }
.etm-card:nth-child(4)  { animation-delay: .27s; }
.etm-card:nth-child(5)  { animation-delay: .34s; }
.etm-card:nth-child(6)  { animation-delay: .41s; }
.etm-card:nth-child(7)  { animation-delay: .48s; }
.etm-card:nth-child(8)  { animation-delay: .55s; }
.etm-card:nth-child(9)  { animation-delay: .62s; }
.etm-card:nth-child(10) { animation-delay: .69s; }
.etm-card:nth-child(11) { animation-delay: .76s; }
.etm-card:nth-child(12) { animation-delay: .83s; }

/* ── Photo circle ── */
.etm-card__photo {
  position: relative;
  overflow: hidden;
  width: 136px; height: 136px;
  border-radius: 50%;
  border: 2px solid var(--border2, var(--etm-border2));
  background: var(--deep, var(--etm-deep));
  flex-shrink: 0;
  margin-bottom: 1.1rem;
  transition: border-color .25s, box-shadow .3s;
  z-index: 1;
}
.etm-card:hover .etm-card__photo {
  border-color: var(--etm-red);
  box-shadow:
    0 0 0 4px var(--etm-red-dim),
    0 0 24px var(--etm-red-glow);
}
.etm-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .4s ease;
}
.etm-card:hover .etm-card__photo img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Shine sweep on circle */
.etm-card__shine {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    115deg,
    transparent 0%, transparent 25%,
    rgba(255,255,255,.18) 50%,
    transparent 75%, transparent 100%
  );
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 2;
  transition: transform 0s;
}
.etm-card:hover .etm-card__shine {
  transform: translateX(200%);
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}

/* No-photo fallback */
.etm-card__no-photo {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--etm-muted);
  border-radius: 50%;
}
.etm-card__no-photo svg { width: 40px; height: 40px; }

/* ── Info block ── */
.etm-card__info {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

/* Blader name tag — shown in red above the name */
.etm-card__tag {
  font-family: "Inter", sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--etm-red);
  margin-bottom: .3rem; display: block;
}

.etm-card__name {
  font-family: "Inter", sans-serif;
  font-size: clamp(11px, 2vw, 14px);
  font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--white, var(--etm-white));
  margin: 0 0 .3rem; line-height: 1.2;
}

.etm-card__role {
  font-family: "Inter", sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted, var(--etm-muted)); margin: 0;
}

/* ════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════ */

.etm-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.etm-lightbox[hidden] { display: none !important; }

.etm-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.etm-lightbox__panel {
  position: relative;
  background: var(--card2, var(--etm-card2));
  border: 1px solid var(--border2, var(--etm-border2));
  clip-path: var(--clip, var(--etm-clip));
  max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow:
    0 0 80px rgba(0,0,0,.7),
    0 0 60px rgba(230,51,51,.08),
    0 0 0 1px var(--border, var(--etm-border));
  scrollbar-width: thin;
  scrollbar-color: var(--muted, var(--etm-muted)) transparent;
  display: flex; flex-direction: column;
}

/* Red top accent bar */
.etm-lightbox__panel::before {
  content: ''; display: block; height: 2px;
  background: var(--etm-red);
  box-shadow: 0 0 16px var(--etm-red-glow);
  flex-shrink: 0;
}

.etm-lightbox__close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: none; border: none;
  color: var(--muted, var(--etm-muted));
  font-size: 1.5rem; line-height: 1;
  cursor: pointer; z-index: 2;
  transition: color .2s;
  font-family: sans-serif;
}
.etm-lightbox__close:hover { color: var(--etm-red2); }

/* Photo */
.etm-lightbox__photo-wrap {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  padding: 2rem 0 0;
}
.etm-lightbox__photo-wrap::after { display: none; }

.etm-lightbox__photo {
  width: 350px; height: 350px;
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  display: block;
  border: 2px solid var(--etm-red);
  box-shadow:
    0 0 0 4px var(--etm-red-dim),
    0 0 32px var(--etm-red-glow);
}
.etm-lightbox__photo[src=""] { display: none; }

/* Body */
.etm-lightbox__body {
  padding: 1.5rem 2rem 2.25rem;
}

.etm-lightbox__tag {
  font-family: "Inter", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--etm-red);
  margin: 0 0 .4rem;
}
.etm-lightbox__tag:empty { display: none; }

.etm-lightbox__name {
  font-family: "Inter", sans-serif;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 900;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--white, var(--etm-white));
  margin: 0 0 .3rem; line-height: 1.1;
}

.etm-lightbox__role {
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted, var(--etm-muted)); margin: 0;
}
.etm-lightbox__role:empty { display: none; }

/* Favorite Bey Combo */
.etm-lightbox__beycombo-wrap {
  margin-top: .85rem;
}
.etm-lightbox__beycombo-label {
  font-family: "Inter", sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted, var(--etm-muted));
  margin: 0 0 .2rem;
}
.etm-lightbox__beycombo {
  font-family: "Inter", sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: 1px;
  color: var(--white, var(--etm-white));
  margin: 0;
}

.etm-lightbox__divider {
  height: 1px; background: var(--border, var(--etm-border));
  margin: 1.25rem 0;
}

/* Bio */
.etm-lightbox__bio {
  font-family: "Inter", sans-serif;
  font-size: 16px; font-weight: 600;
  line-height: 1.8; color: var(--white2, var(--etm-white2));
  margin: 0; white-space: pre-line;
}
.etm-lightbox__bio:empty { display: none; }

.etm-lightbox__bio strong, .etm-lightbox__bio b {
  font-weight: 700; color: var(--white, var(--etm-white));
}
.etm-lightbox__bio em, .etm-lightbox__bio i {
  font-style: italic; color: var(--white2, var(--etm-white2));
}
.etm-lightbox__bio a {
  color: var(--etm-red);
  text-decoration: underline; text-underline-offset: 3px;
  transition: opacity .2s;
}
.etm-lightbox__bio a:hover { opacity: .75; }
.etm-lightbox__bio ul, .etm-lightbox__bio ol { padding-left: 1.4em; margin: .5em 0; }
.etm-lightbox__bio li { margin-bottom: .25em; }
.etm-lightbox__bio p  { margin: 0 0 .75em; }
.etm-lightbox__bio p:last-child { margin-bottom: 0; }

/* Subteam */
.etm-lightbox__subteam-wrap {
  margin-top: .85rem;
}
.etm-lightbox__subteam-label {
  font-family: "Inter", sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted, var(--etm-muted));
  margin: 0 0 .2rem;
}
.etm-lightbox__subteam {
  font-family: "Inter", sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: 1px;
  color: var(--white, var(--etm-white));
  margin: 0;
}

/* Socials */
.etm-lightbox__socials-wrap {
  margin-top: .85rem;
}
.etm-lightbox__socials-label {
  font-family: "Inter", sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted, var(--etm-muted));
  margin: 0 0 .6rem;
}
.etm-lightbox__socials {
  display: flex; gap: .55rem; flex-wrap: wrap;
}
.etm-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border, var(--etm-border));
  border-radius: 50%;
  transition: color .2s, border-color .2s, background .2s, transform .2s, box-shadow .2s;
  text-decoration: none;
  flex-shrink: 0;
}
.etm-social-link:hover { transform: translateY(-2px); }
.etm-social-link svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Per-platform brand colors */
.etm-social-link[data-platform="fb"]        { color: #1877F2; border-color: rgba(24,119,242,.35); }
.etm-social-link[data-platform="fb"]:hover  { background: rgba(24,119,242,.15); border-color: #1877F2; box-shadow: 0 0 14px rgba(24,119,242,.45); }

.etm-social-link[data-platform="instagram"]        { color: #a259ff; border-color: rgba(162,89,255,.35); }
.etm-social-link[data-platform="instagram"]:hover  { background: rgba(162,89,255,.15); border-color: #a259ff; box-shadow: 0 0 14px rgba(162,89,255,.45); }

.etm-social-link[data-platform="tiktok"]        { color: #f2f2f4; border-color: rgba(242,242,244,.25); }
.etm-social-link[data-platform="tiktok"]:hover  { background: rgba(242,242,244,.08); border-color: #f2f2f4; box-shadow: 0 0 14px rgba(242,242,244,.25); }

.etm-social-link[data-platform="youtube"]        { color: #FF0000; border-color: rgba(255,0,0,.35); }
.etm-social-link[data-platform="youtube"]:hover  { background: rgba(255,0,0,.12); border-color: #FF0000; box-shadow: 0 0 14px rgba(255,0,0,.45); }

.etm-social-link[data-platform="twitter"]        { color: #c8ccd4; border-color: rgba(200,204,212,.25); }
.etm-social-link[data-platform="twitter"]:hover  { background: rgba(200,204,212,.08); border-color: #c8ccd4; box-shadow: 0 0 14px rgba(200,204,212,.25); }

/* ── Lightbox animations ── */
@keyframes etm-lb-in  { from { opacity:0; transform: translateY(18px) scale(.97); } to { opacity:1; transform: none; } }
@keyframes etm-lb-out { from { opacity:1; transform: none; } to { opacity:0; transform: translateY(12px) scale(.97); } }
@keyframes etm-bd-in  { from { opacity:0; } to { opacity:1; } }
@keyframes etm-bd-out { from { opacity:1; } to { opacity:0; } }

.etm-lightbox--in  .etm-lightbox__panel    { animation: etm-lb-in  .28s cubic-bezier(.22,.8,.46,1) both; }
.etm-lightbox--out .etm-lightbox__panel    { animation: etm-lb-out .22s ease both; }
.etm-lightbox--in  .etm-lightbox__backdrop { animation: etm-bd-in  .22s ease both; }
.etm-lightbox--out .etm-lightbox__backdrop { animation: etm-bd-out .24s ease both; }

/* ── Ripple ── */
@keyframes etm-ripple { from { transform: scale(0); opacity:.45; } to { transform: scale(3.5); opacity:0; } }
.etm-ripple-circle {
  position: absolute; border-radius: 50%;
  background: rgba(230,51,51,.22);
  width: 60px; height: 60px;
  margin-top: -30px; margin-left: -30px;
  pointer-events: none;
  animation: etm-ripple .55s ease-out forwards;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .etm-cols-2,
  .etm-cols-3,
  .etm-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .etm-grid   { gap: .625rem; }

  .etm-card__photo { width: 80px; height: 80px; }
  .etm-card        { padding: 1.25rem .75rem 1.1rem; }
  .etm-card__name  { font-size: 11px; letter-spacing: 1.5px; }
  .etm-card__role  { font-size: 10px; }
  .etm-card__tag   { font-size: 9px; letter-spacing: 2px; }
}

@media (max-width: 380px) {
  .etm-cols-2,
  .etm-cols-3,
  .etm-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .etm-grid   { gap: .5rem; }
  .etm-card__photo { width: 70px; height: 70px; }
}

/* ── Mobile lightbox ── */
@media (max-width: 480px) {
  .etm-lightbox { padding: .75rem; }
  .etm-lightbox__panel { clip-path: none; border-radius: 4px; max-height: 95vh; }
  .etm-lightbox__body  { padding: 1.25rem 1.25rem 1.75rem; }
  .etm-lightbox__photo { width: 120px; height: 120px; }
  .etm-lightbox__photo-wrap { padding: 1.5rem 0 0; }
}