/* static/css/league_showcase.css - templates/leagues/league_showcase.html
   only. Reuses base.css's sitewide tokens/.hl-* vocabulary (--primary,
   --bg-card, .hl-card, .hl-card-grid, .hl-empty, .hl-avatar-placeholder)
   rather than redefining a parallel design system - only the genuinely
   page-specific shapes (bigger member portrait, photo gallery tiles) live
   here. Loaded unconditionally from templates/base/league_public_base.html's
   extra_head block, same as every other public-page stylesheet - see that
   file's own comment for why (hx-boost only swaps #hl-league-shell, so a
   page-specific stylesheet must load upfront, not per-page).

   Both grids below carry .hl-card-grid (not just their own ls-* class) so
   the shared [data-lh-reveal] .hl-card-grid > * scroll-reveal + per-item
   stagger rule in base.css applies for free - see that rule's own comment
   ("the generic per-item version every OTHER converted page reaches for
   instead of writing its own copy") for why this page doesn't define its
   own copy. Each card/tile carries `style="--i: {{ forloop.counter0 }}"`
   from the template so the stagger delay increases per item rather than
   everything fading in at once. */

/* ─── League Management (ShowcaseMember) ───────────────────────────── */
/* Same column sizing as the Awards page's Double-Double / Triple-Double
   leader cards (.stl-grid in stat_leaders.css) via the shared
   --hl-tile-min token. Two classes so it also beats base.css's
   max-width:480px `.hl-card-grid { 1fr }` rule, which is redundant here
   since --hl-tile-min already caps at 100%. */
.ls-member-grid.hl-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--hl-tile-min), 1fr));
}

.ls-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  transition: transform 0.25s cubic-bezier(0.16, 0.84, 0.44, 1), border-color 0.25s ease;
}

/* base.css's `.hl-card + .hl-card { margin-top: var(--space-3) }` is meant
   for a plain vertically-stacked list of cards - it doesn't know this
   .hl-card is a grid item here, so the adjacent-sibling selector still
   matches DOM order and adds margin-top to every card but the first,
   regardless of which grid row it lands in. .hl-card-grid's own `gap`
   already spaces grid items, so that margin is pure overlap: it pushes
   every non-first card down within its row, invisible when a row's cards
   happen to be the same height, but visible here since the Commissioner's
   (first, no margin) and their row-mate's (second, +12px) bios differ in
   length - confirmed via getComputedStyle().marginTop before this rule. */
.ls-member-grid.hl-card-grid > .hl-card + .hl-card {
  margin-top: 0;
}
.ls-member-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}

.ls-member-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.ls-member-card .ls-member-avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: 26px;
}

.ls-member-card-body h3 { font-size: 15px; margin: 0 0 6px; }
.ls-member-card-body .hl-badge { margin-bottom: 6px; }
.ls-member-card-body p { margin: var(--space-2) 0 0; }

/* First card in display_order gets a primary-tinted accent, so whoever a
   league lists first (by convention, its Commissioner/top admin) reads as
   the lead of the chart rather than just another tile - no separate
   "leadership" field needed, this only ever depends on ordering the
   league already controls from /league/<slug>/showcase/manage/. Not a
   larger portrait/size boost - users read the mismatched card size
   against otherwise-identical siblings as a layout bug rather than
   intentional emphasis. */
.ls-member-card--featured {
  border-color: rgba(var(--primary-rgb), 0.4);
  background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.08), transparent 65%);
}
.ls-member-card--featured .ls-member-photo,
.ls-member-card--featured .ls-member-avatar-placeholder {
  border-color: rgba(var(--primary-rgb), 0.5);
  border-width: 2px;
}

/* ─── Gallery (ShowcasePhoto) ───────────────────────────────────────── */
/* Higher specificity than the base .hl-card-grid rule (two classes vs.
   one) so a smaller minimum column width wins here without !important -
   gallery tiles read better narrower than a text card does, and this lets
   two tiles sit side by side on a phone instead of one full-bleed tile. */
.ls-photo-grid.hl-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.ls-photo-tile {
  /* A <button> now (opens the lightbox), not an <a> - reset the button
     chrome the browser adds by default so it still reads as a plain
     image tile. */
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ls-photo-tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.ls-photo-tile:hover {
  border-color: var(--border-strong);
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.65);
}

.ls-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.ls-photo-tile:hover img { transform: scale(1.04); }

.ls-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent);
}

/* ─── Lightbox ────────────────────────────────────────────────────────
   Hand-rolled <dialog> (not templates/core/_modal.html's generic include
   - that include renders one fixed body per uid, but the lightbox needs
   its body to swap per photo off one Alpine activeIndex) reusing that
   include's own base classes/animation (static/css/modal.css's
   dialog.hl-modal-dialog rules) for visual consistency, just wider/taller
   via the extra .ls-lightbox class - two classes beats the base rule's
   one on specificity alone, same trick .ls-photo-grid.hl-card-grid above
   already uses. */
dialog.hl-modal-dialog.ls-lightbox {
  width: min(94vw, 960px);
  max-height: min(92dvh, 800px);
  background: var(--bg-page);
}
.ls-lightbox-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5);
  max-height: inherit;
}
.ls-lightbox-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  z-index: 1;
}
.ls-lightbox-img {
  max-width: 100%;
  max-height: min(72dvh, 620px);
  object-fit: contain;
  border-radius: 8px;
}
.ls-lightbox-caption {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}
.ls-lightbox-count {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.ls-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ls-lightbox-nav:hover { background: var(--bg-raised); border-color: var(--border-strong); }
.ls-lightbox-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ls-lightbox-prev { left: var(--space-3); }
.ls-lightbox-next { right: var(--space-3); }
/* No chevron-right in either self-hosted icon set - reuses chevron-left,
   mirrored here rather than hand-drawing a new SVG. */
.ls-lightbox-next svg { transform: scaleX(-1); }

@media (max-width: 480px) {
  /* Tighter card padding + a slightly smaller portrait on narrow phones,
     so a member card doesn't read as mostly whitespace around one photo. */
  .ls-member-card { padding: var(--space-4) var(--space-3); }
  .ls-member-photo,
  .ls-member-card .ls-member-avatar-placeholder {
    width: 72px;
    height: 72px;
  }
  .ls-member-card .ls-member-avatar-placeholder { font-size: 22px; }
  .ls-photo-grid.hl-card-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .ls-lightbox-panel { padding: var(--space-4) var(--space-3); }
  .ls-lightbox-nav { width: 34px; height: 34px; }
  .ls-lightbox-prev { left: var(--space-2); }
  .ls-lightbox-next { right: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .ls-member-card,
  .ls-photo-tile,
  .ls-photo-tile img {
    transition: none;
  }
}