/* ==========================================================================
   Norske spillere i utlandet — frontpage teaser module
   --------------------------------------------------------------------------
   Same design language as the full portal (css/norske-utlandsproffer.css):
   near-monochrome, hairline borders, no elevation, initial avatars instead
   of player photos, league as metadata. The Norwegian flag is the single
   deliberate spot of colour in the resting state.

   This is a separate stylesheet rather than loading the portal's own, which
   is ~750 lines of page-specific layout (split panels, bottom sheets, date
   strips) that the frontpage has no use for. The shared tokens are declared
   locally on .nsu-fp because the originals live on .nsu-page.
   ========================================================================== */

.nsu-fp-section {
  padding: 2rem 15px;
  background-color: var(--bg-body);
}

.nsu-fp {
  --nsu-hair: var(--border-light);
  --nsu-radius: 8px;
  --nsu-mono: 'Inter', system-ui, sans-serif;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /*border: 1px solid var(--nsu-hair);*/
  /*border-radius: var(--nsu-radius);*/
  /*background: var(--bg-card);*/
  overflow: hidden;
  color: var(--text-main);
}

/* ── Intro ──────────────────────────────────────────────────────── */
.nsu-fp-intro { padding: 18px 18px 16px; min-width: 0; }

.nsu-fp-titlelink {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.nsu-fp-flag {
  width: 26px; height: 26px; border-radius: 50%;
  flex-shrink: 0; object-fit: cover; display: block;
}
.nsu-fp-title {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.2; margin: 0; color: var(--text-main);
}
.nsu-fp-titlelink:hover .nsu-fp-title { text-decoration: underline; }
/* Phone-only affordance: the title row is the tap target up there. */
.nsu-fp-chev {
  margin-left: auto; font-size: 1.15rem; line-height: 1;
  color: var(--text-muted); flex-shrink: 0;
}

.nsu-fp-ingress {
  font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary);
  margin: 10px 0 0; max-width: 34ch;
}

.nsu-fp-figures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 16px;
}
.nsu-fp-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsu-fp-figure-v {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 1.5rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.035em; color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.nsu-fp-figure-l {
  font-family: var(--nsu-mono); font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  line-height: 1.3;
}

/* ── Match rows ─────────────────────────────────────────────────── */
.nsu-fp-matches { min-width: 0; border-top: 1px solid var(--nsu-hair); }

.nsu-fp-match {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 14px;
  gap: 12px; align-items: start;
  padding: 14px 18px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--nsu-hair);
  transition: background 0.12s;
}
.nsu-fp-match:last-child { border-bottom: 0; }
.nsu-fp-match:hover { background: var(--bg-surface); }
.nsu-fp-match:focus-visible {
  outline: 2px solid var(--text-main); outline-offset: -2px; border-radius: 3px;
}

.nsu-fp-when { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nsu-fp-time {
  font-family: var(--nsu-mono); font-size: 0.85rem; font-weight: 600;
  color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.nsu-fp-date {
  font-family: var(--nsu-mono); font-size: 0.65rem; color: var(--text-muted);
  line-height: 1.3; font-variant-numeric: tabular-nums;
}
/* Status is red AND says "Live" — colour never carries it alone. */
.nsu-fp-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--nsu-mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--red-600); line-height: 1.2;
}
.nsu-fp-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--red-600); animation: nsu-fp-pulse 1.6s infinite;
}
@keyframes nsu-fp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .nsu-fp-dot { animation: none; } }

.nsu-fp-body { display: flex; flex-direction: column; min-width: 0; }
/* League is metadata — small, quiet, above the teams. */
.nsu-fp-league {
  font-family: var(--nsu-mono); font-size: 0.56rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  line-height: 1.3; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsu-fp-teams { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsu-fp-team {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; min-width: 0;
}
.nsu-fp-team-name {
  font-size: 0.86rem; font-weight: 400; color: var(--text-main);
  letter-spacing: -0.01em; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsu-fp-goals {
  font-family: var(--nsu-mono); font-size: 0.86rem; font-weight: 600;
  color: var(--text-main); font-variant-numeric: tabular-nums; flex-shrink: 0;
}

/* The Norwegians — the reason this module exists, so they get their own
   tinted chips rather than blending into the metadata. */
/* Same player card as the portal's match feed — avatar, name, club beneath.
   Unlike the feed these stay side by side rather than stacking: a frontpage
   teaser has to stay short, and two cards fit the row comfortably. */
.nsu-fp-players {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 8px;
}
.nsu-fp-player {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; flex: 0 1 auto; max-width: 100%;
  padding: 4px 9px 4px 5px; border-radius: 5px;
  background: var(--bg-surface);
  background: color-mix(in srgb, var(--text-main) 5%, transparent);
}
.nsu-fp-player-txt { display: flex; flex-direction: column; min-width: 0; }
.nsu-fp-player-name {
  font-size: 0.72rem; font-weight: 500; color: var(--text-main); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Club is supporting detail: a step down in both size and tone. */
.nsu-fp-player-club {
  font-size: 0.64rem; font-weight: 400; color: var(--text-muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsu-fp-more {
  font-family: var(--nsu-mono); font-size: 0.68rem; font-weight: 600;
  color: var(--text-muted); line-height: 1.2; white-space: nowrap;
  align-self: center; padding-left: 2px;
}
/* Desktop names two players, so its counter starts at the third. */
.nsu-fp-more--m { display: none; }

.nsu-fp-rowchev {
  font-size: 1.05rem; line-height: 1; color: var(--text-muted);
  align-self: center; justify-self: end;
}

.nsu-fp-empty {
  font-size: 0.82rem; color: var(--text-muted); margin: 0; padding: 20px 18px;
}

/* ── CTA ────────────────────────────────────────────────────────── */
.nsu-fp-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 18px; text-decoration: none;
  border-top: 1px solid var(--nsu-hair);
  font-family: var(--nsu-mono); font-size: 0.82rem; font-weight: 600;
  color: var(--text-main);
}
.nsu-fp-cta:hover { background: var(--bg-surface); }

/* ── Initial avatars — same ladder as the portal ────────────────── */
.nsu-fp .nsu-av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-surface); color: var(--text-secondary);
  font-family: var(--nsu-mono); font-weight: 600; letter-spacing: 0.01em;
  flex-shrink: 0; text-transform: uppercase;
}
.nsu-fp .nsu-av--sm { width: 24px; height: 24px; font-size: 0.6rem; }
/* Balances the two-line player card, same as .nsu-av--md in the portal. */
.nsu-fp .nsu-av--md { width: 26px; height: 26px; font-size: 0.63rem; }
/* Mixing against --text-main keeps the ladder correct in dark mode. */
.nsu-fp .nsu-av--t0 { background: color-mix(in srgb, var(--text-main)  6%, transparent); }
.nsu-fp .nsu-av--t1 { background: color-mix(in srgb, var(--text-main)  9%, transparent); }
.nsu-fp .nsu-av--t2 { background: color-mix(in srgb, var(--text-main) 12%, transparent); }
.nsu-fp .nsu-av--t3 { background: color-mix(in srgb, var(--text-main) 15%, transparent); }
.nsu-fp .nsu-av--t4 { background: color-mix(in srgb, var(--text-main) 18%, transparent); }

/* ── Desktop: intro left, matches right ─────────────────────────── */
@media (min-width: 900px) {
  /* Three children in DOM order (intro, matches, cta) so phones read the
     CTA last; here the grid lifts it back under the intro. */
  .nsu-fp {
    grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .nsu-fp-intro   { grid-column: 1; grid-row: 1; padding: 22px 22px 4px; }
  .nsu-fp-cta     { grid-column: 1; grid-row: 2; align-self: end;
                    justify-content: flex-start; border-top: 0; padding: 0 22px 22px; }
  .nsu-fp-cta:hover { background: none; text-decoration: underline; }
  .nsu-fp-matches { grid-column: 2; grid-row: 1 / span 2;
                    border-top: 0; border-left: 1px solid var(--nsu-hair); }

  .nsu-fp-chev { display: none; }
  .nsu-fp-title { font-size: 1.15rem; }
  .nsu-fp-figure-v { font-size: 1.7rem; }
}

/* ── Phone: one column, one player per match ────────────────────── */
@media (max-width: 899px) {
  .nsu-fp-section { padding: 1.25rem 15px; }
  .nsu-fp-ingress { display: none; }

  /* Keep the header block short — the matches are the payload. */
  .nsu-fp-intro { padding: 14px 14px 14px; }
  .nsu-fp-figures { margin-top: 12px; gap: 8px; }
  .nsu-fp-figure-v { font-size: 1.3rem; }
  .nsu-fp-figure-l { font-size: 0.56rem; }

  .nsu-fp-match { padding: 13px 14px; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  /* The row is obviously tappable at this width; the chevron is noise. */
  .nsu-fp-rowchev { display: none; }

  /* One name, then a count that includes the player desktop would have
     named second — hence the separate desktop/phone counters. */
  .nsu-fp-player--2 { display: none; }
  .nsu-fp-more--d { display: none; }
  .nsu-fp-more--m { display: inline; margin-left: auto; }

  /* ~44px comfortable tap target for the title row and the CTA. */
  .nsu-fp-titlelink { min-height: 44px; }
  .nsu-fp-cta { min-height: 48px; }
  .nsu-fp-empty { padding: 18px 14px; }
}