/* ============================================================
   Winners Board — v2
   A podium-style presentation for the top three, built entirely
   with the existing markup (no template changes required).
   Class names are unchanged from the original stylesheet, so
   this file is a drop-in replacement.
   ============================================================ */

:root {
  /* Podium tones are tints/shades of the site's own navy + orange,
     not a generic gold/silver/bronze skin, so the board reads as
     part of the same brand rather than a bolted-on medal graphic. */
  --wb-1st-1: #ffcfa0;
  --wb-1st-2: var(--orange, #f5871f);
  --wb-2nd-1: #c3cee2;
  --wb-2nd-2: #52618a;
  --wb-3rd-1: #f0bd94;
  --wb-3rd-2: #c06a35;
  --wb-card-bg: #ffffff;
  --wb-card-border: #e4e8ee;
  --wb-radius: 22px;
}

/* ---------- Section framing ---------- */

.winner-board-group { margin: 2rem 0 3.5rem; }
.winner-board-group-title { margin-bottom: 1.25rem; }

/* ---------- Layout: podium ---------- */

.winner-grid,
.winner-board-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;      /* bottoms align → height differences create the podium step */
  justify-content: center;
  gap: 1.75rem 1.5rem;
  padding-top: 2.5rem;         /* room for the 1st-place crown to float above the card */
}

.event-feature .winner-grid { gap: 1.75rem 1.5rem; }

/* Reading order: 1st — 2nd — 3rd. 1st still reads as the winner because
   it's taller and wider, not because of position. */
.winner-card.rank-1st_prize { order: 1; }
.winner-card.rank-2nd_prize { order: 2; }
.winner-card.rank-3rd_prize { order: 3; }

/* ---------- The card itself ---------- */

.winner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  min-height: 300px;
  gap: 0.55rem;
  overflow: hidden;
  border: 1px solid var(--wb-card-border);
  border-radius: var(--wb-radius);
  padding: 1.75rem 1.25rem 0;
  background: var(--wb-card-bg);
  box-shadow: 0 1px 2px rgba(13, 27, 62, 0.04), 0 16px 32px -16px rgba(13, 27, 62, 0.18);
  text-align: center;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;
}



.winner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(13, 27, 62, 0.06), 0 22px 40px -16px rgba(13, 27, 62, 0.26);
}

.winner-card.rank-1st_prize {
  width: 272px;
  min-height: 336px;
  z-index: 2;
  border-color: #f3c896;
  box-shadow: 0 1px 2px rgba(13, 27, 62, 0.04), 0 20px 42px -18px rgba(245, 135, 31, 0.35);
}

.winner-card.rank-2nd_prize,
.winner-card.rank-3rd_prize {
  width: 250px;
  min-height: 300px;
}

/* A quiet marker above the winner — restrained, not a sticker explosion */
.winner-card.rank-1st_prize::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 9px;
  background: linear-gradient(135deg, var(--wb-1st-1), var(--wb-1st-2));
  box-shadow: 0 6px 14px -4px rgba(245, 135, 31, 0.55);
}

/* Reorder each card's own children into: media → name → meta → action → base plate */
.winner-card > * { order: 3; }
.winner-photo,
.winner-photo-placeholder,
.winner-team-avatars { order: 1; }
.winner-name,
.winner-team-name { order: 2; margin-top: 0.15rem; }
.winner-category,
.winner-school,
.winner-member-count-pill { order: 3; }
.btn-view-team { order: 4; }
.winner-rank-badge { order: 5; }

/* ---------- Photo / avatar ---------- */

.winner-photo {
  width: 92px;
  height: 92px;
  border: 3px solid var(--wb-card-bg);
  border-radius: 50%;
  outline: 3px solid var(--wb-card-border);
  background: #eef1f5;
  object-fit: cover;
}

.rank-1st_prize .winner-photo { width: 104px; height: 104px; outline-color: var(--wb-1st-2); }
.rank-2nd_prize .winner-photo { outline-color: var(--wb-2nd-2); }
.rank-3rd_prize .winner-photo { outline-color: var(--wb-3rd-2); }

.winner-photo-placeholder {
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 1.9rem;
}

/* ---------- Team avatar stack ---------- */

.winner-team-avatars {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
}

.winner-team-avatar,
.winner-team-avatar-placeholder,
.winner-team-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  margin-left: -18px;
  border: 3px solid var(--wb-card-bg);
  border-radius: 50%;
  background: #e4ecea;
  color: var(--navy);
  box-shadow: 0 4px 10px rgba(13, 27, 62, 0.14);
  font-size: 1rem;
  font-weight: 700;
  object-fit: cover;
}

.winner-team-avatar:first-child,
.winner-team-avatar-placeholder:first-child { margin-left: 0; }

.winner-team-avatar-placeholder {
  background: linear-gradient(135deg, #eef1f5, #dfe6ec);
  text-transform: uppercase;
}

.winner-team-icon {
  width: 84px;
  margin-left: 0;
  background: #e4ecea;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.rank-1st_prize .winner-team-avatar,
.rank-1st_prize .winner-team-avatar-placeholder { outline: 2px solid var(--wb-1st-2); }
.rank-2nd_prize .winner-team-avatar,
.rank-2nd_prize .winner-team-avatar-placeholder { outline: 2px solid var(--wb-2nd-2); }
.rank-3rd_prize .winner-team-avatar,
.rank-3rd_prize .winner-team-avatar-placeholder { outline: 2px solid var(--wb-3rd-2); }

/* ---------- Name / meta ---------- */

.winner-name,
.winner-team-name {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.winner-category,
.winner-school {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.winner-member-count-pill {
  display: inline-flex;
  border: 1px solid #d8e6e2;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  color: #2d6157;
  background: #eef7f4;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---------- View-details action ---------- */

.btn-view-team {
  width: 100%;
  margin-top: 0.4rem;
  border: 0;
  border-top: 1px solid var(--wb-card-border);
  padding: 0.75rem 0.5rem;
  color: var(--navy);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Same accent as "Register Your Team" elsewhere on the page, so the
   whole site agrees on what color means "click this". */
.btn-view-team:hover,
.btn-view-team:focus-visible {
  color: var(--orange);
  background: rgba(245, 135, 31, 0.1);
  border-top-color: rgba(245, 135, 31, 0.35);
}

/* ---------- Base plate (rank badge, restyled as a podium step) ---------- */

.winner-rank-badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  width: calc(100% + 2.5rem);
  margin-top: auto;
  margin-right: -1.25rem;
  margin-bottom: 0;
  margin-left: -1.25rem;
  padding: 0.55rem 0 0.6rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.winner-rank-badge::before {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.rank-1st_prize .winner-rank-badge {
  padding-top: 0.95rem;
  padding-bottom: 1rem;
  background: linear-gradient(160deg, var(--wb-1st-1), var(--wb-1st-2) 78%);
}
.rank-1st_prize .winner-rank-badge::before { content: "1"; }

.rank-2nd_prize .winner-rank-badge {
  padding-top: 0.7rem;
  background: linear-gradient(160deg, var(--wb-2nd-1), var(--wb-2nd-2) 78%);
}
.rank-2nd_prize .winner-rank-badge::before { content: "2"; }

.rank-3rd_prize .winner-rank-badge {
  padding-top: 0.5rem;
  padding-bottom: 0.55rem;
  background: linear-gradient(160deg, var(--wb-3rd-1), var(--wb-3rd-2) 78%);
}
.rank-3rd_prize .winner-rank-badge::before { content: "3"; }

/* Any winner outside the podium (e.g. a 4th entry) — flat, no step */
.winner-card:not(.rank-1st_prize):not(.rank-2nd_prize):not(.rank-3rd_prize) {
  order: 4;
}
.winner-card:not(.rank-1st_prize):not(.rank-2nd_prize):not(.rank-3rd_prize) .winner-rank-badge {
  background: var(--muted);
}

/* ---------- Entrance (single orchestrated reveal, not per-hover noise) ---------- */

.winner-grid .winner-card {
  animation: wb-rise 520ms cubic-bezier(.2,.7,.3,1) both;
}
.winner-grid .rank-1st_prize { animation-delay: 0ms; }
.winner-grid .rank-2nd_prize { animation-delay: 90ms; }
.winner-grid .rank-3rd_prize { animation-delay: 180ms; }

@keyframes wb-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Modal — team roster / winner profile
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(9, 20, 45, 0.6);
  backdrop-filter: blur(3px);
  animation: wb-fade 160ms ease-out;
}

.modal-dialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--wb-card-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 60px rgba(9, 20, 45, 0.32);
  animation: wb-rise-modal 200ms cubic-bezier(.2,.8,.3,1);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--wb-card-border);
}

.modal-kicker {
  margin: 0;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.modal-team-name { margin: 0.3rem 0 0; color: var(--navy); font-size: 1.3rem; }
.modal-event-label { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.8rem; }

.modal-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--wb-card-border);
  border-radius: 50%;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  transition: background 160ms ease, transform 160ms ease;
}
.modal-close:hover { transform: rotate(90deg); background: #f5f7fa; }

.modal-body { padding: 1.4rem 1.5rem 1.6rem; }
.modal-body > .winner-rank-badge {
  display: inline-flex;
  width: auto;
  margin: 0 0 1.1rem;
  border-radius: 999px;
  padding: 0.35rem 0.9rem 0.35rem 0.7rem;
}
.modal-body > .winner-rank-badge::before { font-size: 0.95rem; }

.team-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.winner-profile-detail {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
  text-align: center;
}

.team-member-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--wb-card-border);
  border-radius: 18px;
  padding: 1.1rem 0.75rem;
  background: #fafbfd;
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease;
}
.team-member-card:hover { border-color: #d3dbe4; background: #fff; }

.team-member-photo {
  width: 72px;
  height: 72px;
  border: 3px solid #fff;
  border-radius: 50%;
  outline: 2px solid var(--wb-card-border);
  background: #eef1f5;
  object-fit: cover;
}

.team-member-photo-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 0.66rem; font-weight: 600; }
.team-member-name { color: var(--navy); font-size: 0.92rem; font-weight: 700; }
.team-member-role { border-radius: 999px; padding: 0.18rem 0.55rem; color: #2d6157; background: #eef7f4; font-size: 0.7rem; font-weight: 600; }
.team-member-school { color: var(--muted); font-size: 0.74rem; }
.team-modal-empty { margin: 0; color: var(--muted); text-align: center; }

@keyframes wb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wb-rise-modal { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .winner-board-grid { gap: 1.25rem; }
}

@media (max-width: 640px) {
  .winner-grid,
  .winner-board-grid,
  .event-feature .winner-grid,
  .team-member-grid {
    flex-direction: column;
    align-items: center;
  }
  .winner-card,
  .winner-card.rank-1st_prize { width: 100%; max-width: 320px; }
  .winner-card.rank-1st_prize { order: 1; }
  .winner-card.rank-2nd_prize { order: 2; }
  .winner-card.rank-3rd_prize { order: 3; }
  .team-member-grid { grid-template-columns: 1fr; }
  .modal-header { padding: 1.1rem 1rem 0.9rem; }
  .modal-body { padding: 1.1rem 1rem 1.3rem; }
}

@media (max-width: 420px) {
  .modal-backdrop { padding: 0.6rem; }
  .modal-dialog { border-radius: 18px; max-height: calc(100vh - 1.2rem); }
  .modal-header { gap: 0.6rem; padding: 1rem 0.85rem 0.8rem; }
  .modal-kicker { font-size: 0.66rem; }
  .modal-team-name { font-size: 1.1rem; word-break: break-word; }
  .modal-event-label { font-size: 0.74rem; }
  .modal-close { width: 30px; height: 30px; font-size: 1.25rem; }
  .modal-body { padding: 1rem 0.85rem 1.2rem; }
  .team-member-photo,
  .team-member-photo-placeholder { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .winner-card,
  .modal-backdrop,
  .modal-dialog,
  .btn-view-team,
  .modal-close,
  .team-member-card {
    animation: none;
    transition: none;
  }
}