/* ============================================================
   soccer-news.css
   Styles for the USA Soccer News page
   Matches the mockup design — drop into /css/
============================================================ */

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sn-red:       #CC0000;
  --sn-red-dark:  #A80000;
  --sn-radius:    8px;
  --sn-radius-lg: 12px;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ── Ticker ─────────────────────────────────────────────── */
.sn-ticker-bar {
  background: var(--sn-red);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.sn-ticker-label {
  background: #fff;
  color: var(--sn-red);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .06em;
}
.sn-ticker-scroll { overflow: hidden; flex: 1; }
.sn-ticker-inner {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: sn-ticker 30s linear infinite;
}
.sn-ticker-inner span { opacity: .92; }
.sn-ticker-sep { opacity: .5; }
.sn-ticker-live { font-weight: 600; }
@keyframes sn-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Nav tabs ────────────────────────────────────────────── */
.sn-nav-strip {
  border-bottom: 0.5px solid #ddd;
  padding: 0 12px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: #fff;
}
.sn-nav-strip::-webkit-scrollbar { display: none; }
.sn-nav-pill {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.sn-nav-pill:hover { color: var(--sn-red); }
.sn-nav-pill.active { color: var(--sn-red); border-bottom-color: var(--sn-red); }

/* ── Page layout ─────────────────────────────────────────── */
.sn-main { max-width: 1200px; margin: 0 auto; padding: 12px 16px 40px; }
.sn-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .sn-layout { grid-template-columns: 1fr; }
  .sn-sidebar { order: -1; }
}

/* ── Section headers ─────────────────────────────────────── */
.sn-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 8px;
}
.sn-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sn-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--sn-red);
  border-radius: 2px;
}
.sn-see-all { font-size: 11px; color: var(--sn-red); cursor: pointer; }
.sn-see-all:hover { text-decoration: underline; }

/* ── Hero ────────────────────────────────────────────────── */
.sn-hero {
  position: relative;
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  margin-bottom: 16px;
  cursor: pointer;
}
.sn-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
}
.sn-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sn-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
  z-index: 1;
}
.sn-score-badge {
  position: absolute; top: 12px; right: 12px;
  background: rgba(204,0,0,.92);
  color: #fff; font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 3px; letter-spacing: .05em;
  z-index: 2;
}
.sn-hero-content { position: relative; z-index: 2; }
.sn-hero-tag {
  display: inline-block;
  background: var(--sn-red);
  color: #fff; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px;
}
.sn-hero-title {
  font-size: 18px; font-weight: 600; color: #fff;
  line-height: 1.35; margin-bottom: 6px;
}
.sn-hero-title a { color: #fff; }
.sn-hero-title a:hover { text-decoration: underline; }
.sn-hero-meta { font-size: 11px; color: rgba(255,255,255,.6); }

/* ── Score cards ─────────────────────────────────────────── */
.sn-scores-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.sn-scores-row::-webkit-scrollbar { display: none; }
.sn-score-card {
  background: #fff;
  border: 0.5px solid #e0e0e0;
  border-radius: var(--sn-radius);
  padding: 9px 11px;
  min-width: 135px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .15s;
}
.sn-score-card:hover { border-color: #bbb; }
.sn-score-league {
  font-size: 9px; font-weight: 600;
  color: #888; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 5px;
}
.sn-score-matchup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.sn-score-team { font-size: 11px; font-weight: 600; color: #111; }
.sn-score-nums { font-size: 14px; font-weight: 600; color: #111; white-space: nowrap; }
.sn-score-status {
  font-size: 9px; color: var(--sn-red); font-weight: 600;
  text-align: center; margin-top: 5px; letter-spacing: .04em;
}
.sn-score-status.final { color: #888; font-weight: 400; }
.sn-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--sn-red);
  border-radius: 50%;
  margin-right: 4px;
  animation: sn-pulse 1s infinite;
}
@keyframes sn-pulse {
  0%,100% { opacity: 1; } 50% { opacity: .3; }
}

/* ── News grid ───────────────────────────────────────────── */
.sn-news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .sn-news-grid { grid-template-columns: 1fr; } }
.sn-news-card {
  background: #fff;
  border: 0.5px solid #e0e0e0;
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  display: block;
  transition: border-color .15s, transform .15s;
}
.sn-news-card:hover { border-color: #bbb; transform: translateY(-1px); }
.sn-news-img {
  height: 76px;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.sn-news-body { padding: 9px 11px; }
.sn-news-tag {
  font-size: 9px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 3px;
}
.sn-news-headline {
  font-size: 12px; font-weight: 600; color: #111;
  line-height: 1.4; margin-bottom: 4px;
}
.sn-news-meta { font-size: 10px; color: #aaa; }

/* ── Standings ───────────────────────────────────────────── */
.sn-standings-mini {
  background: #fafafa;
  border: 0.5px solid #e0e0e0;
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.sn-standings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 0.5px solid #e0e0e0;
}
.sn-standings-title { font-size: 12px; font-weight: 600; color: #111; }
.sn-standings-tabs { display: flex; gap: 4px; }
.sn-standings-tab {
  font-size: 10px; padding: 3px 8px; border-radius: 10px;
  cursor: pointer; border: 0.5px solid #ddd;
  background: none; color: #666;
  transition: background .15s, color .15s;
}
.sn-standings-tab:hover { background: #f0f0f0; }
.sn-standings-tab.active { background: var(--sn-red); color: #fff; border-color: var(--sn-red); }
.sn-standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.sn-standings-table th {
  padding: 6px 8px;
  text-align: center;
  color: #aaa; font-weight: 500; font-size: 10px;
  border-bottom: 0.5px solid #e0e0e0;
}
.sn-standings-table th.sn-team-name { text-align: left; padding-left: 14px; }
.sn-standings-table td {
  padding: 7px 8px;
  text-align: center;
  color: #333;
  border-bottom: 0.5px solid #f0f0f0;
}
.sn-standings-table tr:last-child td { border-bottom: none; }
.sn-standings-table td.sn-rank { color: #aaa; font-size: 10px; }
.sn-standings-table td.sn-team-name {
  text-align: left; padding-left: 14px;
  font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.sn-team-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.sn-standings-table td.sn-pts { font-weight: 700; color: #111; }
.sn-standings-table tr.sn-playoff { border-left: 2px solid var(--sn-red); }
.sn-form-w { color: #1A8F3C; font-weight: 600; }
.sn-form-d { color: #888; }
.sn-form-l { color: var(--sn-red); }
.sn-standings-key {
  font-size: 10px; color: #aaa;
  padding: 6px 14px;
  display: flex; align-items: center; gap: 5px;
}
.sn-playoff-key {
  display: inline-block;
  width: 10px; height: 10px;
  border-left: 2px solid var(--sn-red);
}

/* ── Trending list ───────────────────────────────────────── */
.sn-trending-list { margin-bottom: 16px; }
.sn-list-story {
  display: flex; gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid #f0f0f0;
  align-items: flex-start;
  cursor: pointer;
}
.sn-list-story:last-child { border-bottom: none; }
.sn-list-story:hover .sn-list-headline { color: var(--sn-red); }
.sn-list-num {
  font-size: 20px; font-weight: 700;
  color: #e0e0e0; min-width: 24px; line-height: 1;
  margin-top: 1px;
}
.sn-list-content { flex: 1; }
.sn-list-headline {
  font-size: 12px; font-weight: 600; color: #111;
  line-height: 1.4; margin-bottom: 3px;
  transition: color .15s;
}
.sn-list-meta { font-size: 10px; color: #aaa; }

/* ── Player of the Week card ─────────────────────────────── */
.sn-player-stat-card {
  background: #fafafa;
  border: 0.5px solid #e0e0e0;
  border-radius: var(--sn-radius-lg);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.sn-player-top {
  display: flex; align-items: center; gap: 11px; margin-bottom: 10px;
}
.sn-player-avatar {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.sn-player-avatar-img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.sn-player-info { flex: 1; }
.sn-player-name { font-size: 13px; font-weight: 700; color: #111; }
.sn-player-sub  { font-size: 10px; color: #888; margin-top: 1px; }
.sn-player-match { font-size: 10px; color: var(--sn-red); margin-top: 2px; font-weight: 600; }
.sn-stat-row { display: flex; gap: 6px; margin-bottom: 10px; }
.sn-stat-box {
  flex: 1; background: #fff;
  border-radius: var(--sn-radius);
  padding: 6px 8px; text-align: center;
  border: 0.5px solid #e0e0e0;
}
.sn-stat-val { font-size: 17px; font-weight: 700; color: #111; }
.sn-stat-lbl {
  font-size: 9px; color: #aaa;
  text-transform: uppercase; letter-spacing: .04em;
}
.sn-player-summary {
  font-size: 11px; color: #555; line-height: 1.55;
  margin-bottom: 8px;
}
.sn-player-week {
  font-size: 10px; color: #aaa;
  text-align: right;
}

/* ── Sidebar newsletter ──────────────────────────────────── */
.sn-newsletter {
  background: #fff;
  border: 0.5px solid #e0e0e0;
  border-radius: var(--sn-radius-lg);
  padding: 14px;
}
.sn-newsletter h3 {
  font-size: 13px; font-weight: 700; color: #111; margin-bottom: 5px;
}
.sn-newsletter p { font-size: 11px; color: #666; line-height: 1.5; margin-bottom: 10px; }
.sn-newsletter-form { display: flex; flex-direction: column; gap: 6px; }
.sn-newsletter-form input {
  padding: 8px 10px; border: 0.5px solid #ddd;
  border-radius: var(--sn-radius); font-size: 12px; outline: none;
  transition: border-color .15s;
}
.sn-newsletter-form input:focus { border-color: var(--sn-red); }
.sn-newsletter-form button {
  padding: 8px; background: var(--sn-red); color: #fff;
  border: none; border-radius: var(--sn-radius);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.sn-newsletter-form button:hover { background: var(--sn-red-dark); }

/* ── Ad slot ─────────────────────────────────────────────── */
.sn-ad-slot {
  background: #f5f5f5;
  border: 0.5px dashed #ccc;
  border-radius: var(--sn-radius);
  min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  color: #bbb; font-size: 11px;
  margin-bottom: 16px;
}

/* ── Skeleton / loading states ───────────────────────────── */
.sn-loading { color: #bbb; font-size: 12px; padding: 16px; text-align: center; }
.sn-empty   { color: #bbb; font-size: 12px; padding: 16px; text-align: center; }
.sn-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: sn-shimmer 1.4s ease infinite;
  border-radius: var(--sn-radius-lg);
  min-height: 140px;
}
@keyframes sn-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}