/* 60131.com — Homepage enhancement styles.
   Loaded ONLY on the front page (enqueued conditionally in functions.php).
   The template retains the original inline styles as a safety net, so the
   page still renders fully styled if this file fails to load. */

/* === Card link effects (shadow + hover lift) ===
   The link itself keeps its inline display:block / background / border /
   padding. These classes only add shadow + transition + hover so the
   inline safety-net styles are not overridden. */
.foot-league-home-card,
.foot-h2h-home-card{
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 1px 3px rgba(20,40,80,.06);
}
.foot-league-home-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20,40,80,.12);
}
.foot-h2h-home-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(29,107,80,.14);
}

/* === Browse by League: inner row + badge + body === */
.foot-league-home-row{
  display: flex;
  align-items: center;
  gap: 16px;
}
.foot-league-home-badge{
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--lc, #1d6b50);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: .02em;
}
.foot-league-home-body{ flex: 1; min-width: 0; }
.foot-league-home-title{
  font-size: 17px; font-weight: 700; color: #0f2a4a;
  line-height: 1.25; margin: 0 0 2px;
}
.foot-league-home-country{
  font-size: 11px; color: #7a8699; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 7px; font-weight: 700;
}
.foot-league-home-meta{
  font-size: 13px; color: #5a6678;
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0;
}
.foot-league-home-meta .dot{ color: #b8c2d0; }
.foot-league-home-arrow{
  flex: none;
  color: var(--lc, #1d6b50);
  font-size: 22px; font-weight: 700;
  transition: transform .18s; line-height: 1;
}
.foot-league-home-card:hover .foot-league-home-arrow{
  transform: translateX(4px);
}

/* === Popular Head-to-Head: matchup grid + logos + VS === */
.foot-h2h-home-matchup{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.foot-h2h-home-side{
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; min-width: 0;
}
.foot-h2h-home-logo{
  width: 44px; height: 44px; object-fit: contain; flex: none;
}
.foot-h2h-home-name{
  font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; color: #1a2230; margin: 0;
}
.foot-h2h-home-vs{
  background: #0f3a2e; color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .05em;
  border-radius: 20px; padding: 5px 11px; flex: none;
}
.foot-h2h-home-league{
  font-size: 12px; color: #7a8699; text-align: center;
  border-top: 1px dashed #e7ecf3; padding-top: 10px; margin-top: 2px;
}
.foot-h2h-home-title{
  font-size: 15px; font-weight: 600; line-height: 1.3; color: #0f2a4a; margin: 0;
}

/* === responsive === */
@media (max-width: 640px){
  .foot-h2h-home-logo{ width: 36px; height: 36px; }
  .foot-h2h-home-matchup{ gap: 6px; }
  .foot-h2h-home-name{ font-size: 12px; }
  .foot-league-home-badge{ width: 42px; height: 42px; font-size: 13px; }
  .foot-league-home-row{ gap: 12px; }
}