/* =========================================================
   ODIN SOCCER RECRUITING PROFILE
   Mobile-first static stylesheet
   No external fonts, scripts, or libraries
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {
  --bg: #0b1117;
  --bg-2: #111a23;
  --panel: #15212c;
  --panel-soft: #eef2f4;

  --text: #f6f7f8;
  --muted: #aeb8c2;
  --ink: #17212b;

  --accent: #d8ff3e;
  --accent-dark: #afcf1e;

  --line: rgba(255, 255, 255, 0.12);

  --radius: 18px;

  --shadow:
    0 18px 50px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   BASE / RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #ffffff;
  color: var(--ink);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.55;

  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  display: block;

  max-width: 100%;
  height: auto;
}


/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}


/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header {
  position: sticky;

  top: 0;
  z-index: 10;

  background:
    rgba(11, 17, 23, 0.96);

  color: var(--text);

  border-bottom:
    1px solid var(--line);
}

.header-inner {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  min-height: 68px;
}

.brand {
  text-decoration: none;

  font-size: 1.25rem;
  font-weight: 900;

  letter-spacing: 0.14em;
}


/* =========================================================
   PRIMARY NAVIGATION
   ========================================================= */

.primary-nav {
  display: flex;

  align-items: center;

  gap: 1rem;

  flex-wrap: wrap;
}

.primary-nav a {
  color: var(--muted);

  text-decoration: none;

  font-size: 0.94rem;
  font-weight: 700;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] {
  color: var(--text);
}


/* =========================================================
   HERO / PLAYER INTRO
   ========================================================= */

.hero,
.page-hero {
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(216, 255, 62, 0.12),
      transparent 30%
    ),
    linear-gradient(
      160deg,
      var(--bg),
      #101923 62%,
      #172531
    );

  color: var(--text);
}

.hero {
  padding:
    5.5rem 0
    4.5rem;
}

.page-hero {
  padding:
    4.5rem 0
    3.6rem;
}


/* =========================================================
   HERO GRID
   Base layout = stacked for mobile
   ========================================================= */

.hero-grid {
  display: grid;

  gap: 2rem;
}


/* =========================================================
   HERO TEXT
   ========================================================= */

.eyebrow {
  margin:
    0 0
    0.7rem;

  color: var(--accent-dark);

  font-size: 0.78rem;
  font-weight: 900;

  letter-spacing: 0.18em;
}

.hero h1,
.page-hero h1 {
  margin: 0;

  font-size:
    clamp(
      3.7rem,
      15vw,
      8.5rem
    );

  line-height: 0.86;

  letter-spacing: -0.055em;
}

.page-hero h1 {
  font-size:
    clamp(
      3rem,
      11vw,
      6rem
    );
}

.hero-position {
  margin:
    1.4rem 0
    0.25rem;

  font-size:
    clamp(
      1.2rem,
      4vw,
      1.75rem
    );

  font-weight: 800;
}

.hero-position span {
  color: var(--accent);
}

.hero-club,
.page-hero p {
  color: var(--muted);

  max-width: 700px;
}


/* =========================================================
   HERO ACTION BUTTONS
   ========================================================= */

.hero-actions {
  display: grid;

  gap: 0.75rem;

  margin-top: 2rem;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
  display: inline-flex;

  min-height: 48px;

  align-items: center;
  justify-content: center;

  padding:
    0.9rem
    1.2rem;

  border-radius: 999px;

  text-decoration: none;

  font-weight: 900;

  letter-spacing: 0.01em;

  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.button:hover,
.button:focus-visible {
  transform:
    translateY(-1px);
}

.button-primary {
  background: var(--accent);

  color: #10150d;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #e4ff6b;
}

.button-secondary {
  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  color: var(--text);

  background:
    rgba(255, 255, 255, 0.04);
}


/* =========================================================
   QUICK PLAYER STATS
   ========================================================= */

.quick-stats {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 0.75rem;

  padding: 0;

  margin:
    2rem 0
    0;

  list-style: none;
}

.quick-stats li {
  padding: 1rem;

  border:
    1px solid
    var(--line);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.035);
}

.quick-stats strong,
.quick-stats span {
  display: block;
}

.quick-stats strong {
  font-size: 1.05rem;
}

.quick-stats span {
  margin-top: 0.2rem;

  color: var(--muted);

  font-size: 0.8rem;
}


/* =========================================================
   PROFILE PHOTO
   ========================================================= */

.hero-photo-panel {
  display: flex;

  justify-content: center;
  align-items: center;
}

.hero-photo {
  width:
    min(
      100%,
      300px
    );

  height: auto;

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  padding: 0.5rem;

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.18);
}


/* =========================================================
   RECRUITING SNAPSHOT
   ========================================================= */

.hero-card {
  padding: 1.5rem;

  border-radius:
    var(--radius);

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid
    var(--line);

  box-shadow:
    var(--shadow);
}

.card-kicker {
  margin-top: 0;

  color: var(--accent);

  font-weight: 900;

  letter-spacing: 0.08em;

  font-size: 0.82rem;
}

.hero-card dl {
  margin: 0;
}

.hero-card dl div {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  padding:
    0.9rem 0;

  border-bottom:
    1px solid
    var(--line);
}

.hero-card dl div:last-child {
  border-bottom: none;
}

.hero-card dt {
  color: var(--muted);
}

.hero-card dd {
  margin: 0;

  font-weight: 800;
}

.hero-note {
  margin-bottom: 0;

  color: var(--muted);

  font-size: 0.9rem;
}


/* =========================================================
   GENERIC SECTIONS
   ========================================================= */

.section {
  padding:
    4.5rem 0;
}

.section-dark {
  background:
    var(--bg-2);

  color:
    var(--text);
}

.section-soft {
  background:
    var(--panel-soft);
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section-heading {
  margin-bottom: 2rem;
}

.section-heading h2,
.contact-panel h2 {
  margin: 0;

  font-size:
    clamp(
      2rem,
      7vw,
      3.3rem
    );

  line-height: 1;

  letter-spacing:
    -0.035em;
}

.section-copy {
  max-width: 680px;
}

.row-heading {
  display: flex;

  flex-direction: column;

  gap: 1rem;
}


/* =========================================================
   TEXT LINKS
   ========================================================= */

.text-link {
  font-weight: 900;

  text-decoration-thickness: 2px;

  text-underline-offset: 4px;
}


/* =========================================================
   PLAYER PROFILE GRID
   ========================================================= */

.profile-grid,
.academic-grid {
  display: grid;

  gap: 0.85rem;

  margin: 0;
}

.profile-grid > div,
.academic-grid > div {
  padding: 1.2rem;

  border:
    1px solid
    #dfe5e9;

  border-radius: 14px;

  background: #ffffff;
}

.profile-grid dt,
.academic-grid dt {
  color: #63717d;

  font-size: 0.78rem;
  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.profile-grid dd,
.academic-grid dd {
  margin:
    0.35rem 0
    0;

  font-size: 1.05rem;

  font-weight: 800;
}


/* =========================================================
   HIGHLIGHT FEATURE PANEL
   ========================================================= */

.feature-panel,
.highlight-placeholder {
  display: flex;

  flex-direction: column;

  gap: 1rem;

  padding: 1.5rem;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:
    rgba(255, 255, 255, 0.04);
}

.feature-panel h3,
.highlight-placeholder h2 {
  margin:
    0.55rem 0
    0.25rem;

  font-size: 1.5rem;
}

.feature-panel p,
.highlight-placeholder p {
  margin: 0;

  color:
    var(--muted);
}

.highlight-placeholder {
  background:
    var(--bg-2);

  color:
    var(--text);
}


/* =========================================================
   STATUS LABEL
   ========================================================= */

.status-pill {
  display: inline-block;

  width: fit-content;

  padding:
    0.35rem
    0.65rem;

  border-radius: 999px;

  background:
    rgba(216, 255, 62, 0.14);

  color:
    var(--accent);

  font-size: 0.72rem;
  font-weight: 900;

  letter-spacing: 0.12em;
}


/* =========================================================
   MATCH GRID / MATCH CARDS
   ========================================================= */

.match-grid {
  display: grid;

  gap: 1rem;
}

.match-card {
  padding: 1.25rem;

  border:
    1px solid
    #dfe5e9;

  border-radius: 14px;

  background: #ffffff;
}

.match-card time {
  color: #65737d;

  font-size: 0.82rem;

  font-weight: 800;
}

.match-card h3,
.match-card h2 {
  margin:
    0.35rem 0
    0.2rem;

  font-size: 1.2rem;
}

.match-card p {
  margin:
    0 0
    1rem;

  color:
    #65737d;
}

.match-card a {
  font-weight: 900;
}


/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-panel {
  display: grid;

  gap: 1.5rem;

  align-items: center;
}

.contact-panel p {
  max-width: 650px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  padding:
    2rem 0;

  background:
    var(--bg);

  color:
    var(--muted);

  border-top:
    1px solid
    var(--line);
}

.footer-inner {
  display: flex;

  flex-direction: column;

  gap: 0.35rem;
}

.footer-inner p {
  margin: 0;
}

.footer-inner a {
  color:
    var(--text);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 640px) {

  .hero-actions {
    display: flex;

    flex-wrap: wrap;
  }


  .quick-stats {
    grid-template-columns:
      repeat(4, 1fr);
  }


  .profile-grid,
  .academic-grid,
  .match-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .row-heading {
    flex-direction: row;

    align-items: end;
    justify-content: space-between;
  }


  .feature-panel {
    flex-direction: row;

    align-items: center;
    justify-content: space-between;
  }


  .footer-inner {
    flex-direction: row;

    justify-content: space-between;
  }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

  /*
     Three-column player intro:

     [ Player Info ]
     [ Profile Photo ]
     [ Recruiting Snapshot ]
  */

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(220px, 0.7fr)
      minmax(260px, 0.8fr);

    align-items: center;
  }


  .profile-grid {
    grid-template-columns:
      repeat(4, 1fr);
  }


  .academic-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }


  .match-grid {
    grid-template-columns:
      repeat(4, 1fr);
  }


  /*
     Used by matches.html
  */

  .archive-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }


  .contact-panel {
    grid-template-columns:
      1fr auto;
  }

}


/* =========================================================
   MOBILE / SMALL SCREEN ADJUSTMENTS
   ========================================================= */

@media (max-width: 700px) {

  /*
     Avoid a sticky header consuming too much
     vertical space on phones.
  */

  .site-header {
    position: static;
  }


  .header-inner {
    align-items: flex-start;

    flex-direction: column;

    padding:
      0.9rem 0;
  }


  .primary-nav {
    width: 100%;

    gap:
      0.7rem
      1rem;
  }


  .hero {
    padding-top: 4rem;
  }


  /*
     Large tap targets for recruiters using phones.
  */

  .hero-actions .button {
    width: 100%;
  }


  /*
     Keep profile image from becoming too large
     on smaller screens.
  */

  .hero-photo {
    width:
      min(
        78vw,
        300px
      );
  }

}


/* =========================================================
   ACCESSIBILITY
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .button {
    transition: none;
  }

}
/* =========================================================
   Highlight Videos
   ========================================================= */

.highlight-card {
  margin-bottom: 3rem;
}

.highlight-video {
  width: 100%;
  background: #000;
  overflow: hidden;
  border-radius: 8px;
}

.highlight-video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
  background: #000;
}

.highlight-info {
  padding-top: 1.25rem;
}

.highlight-info h2 {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.highlight-info p {
  max-width: 700px;
}