/* LSL Pro Home - premium, mobile-first. Scoped to .lsl-home wrapper */

.lsl-home{
  --bg:#0b1220;
  --bg2:#0f1b32;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111827;
  --brand:#0ea5e9;
  --good:#16a34a;
  --bad:#ef4444;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 18px;
  --radius2: 14px;
  --max: 980px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--text);
}

/* Ensure bottom nav doesn't overlap content */
.lsl-home{ padding-bottom: 86px; }

.lsl-home-hero{
  background: radial-gradient(1200px 400px at 20% 0%, rgba(14,165,233,.22), transparent 60%),
              radial-gradient(1200px 450px at 80% 10%, rgba(34,197,94,.18), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  padding: 18px 14px 16px;
}

.lsl-home-brand{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  gap: 12px;
  align-items:center;
}

.lsl-home-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}

.lsl-home-logo-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
}

.lsl-home-title{ color:#fff; }
.lsl-home-club{ font-weight: 800; font-size: 20px; line-height: 1.2; }
.lsl-home-season{ font-size: 14px; opacity:.85; margin-top: 2px; }

.lsl-home-quick{
  max-width: var(--max);
  margin: 14px auto 0;
  display:grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.lsl-qcard{
  text-decoration:none;
  color:#0b1220;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 16px;
  padding: 12px 12px;
  display:flex;
  gap: 12px;
  align-items:center;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.lsl-qicon{ font-size: 22px; width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; color: #0ea5e9; }
.lsl-qtitle{ font-weight: 800; font-size: 16px; line-height: 1.1; }
.lsl-qsub{ font-size: 13px; color: #6b7280; margin-top: 2px; }

.lsl-home-main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px;
}

.lsl-home-section{ margin: 14px 0 20px; }

.lsl-home-section-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 4px 10px;
}

.lsl-home-section-head h2{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

.lsl-link{
  text-decoration:none;
  font-weight: 700;
  color: #0ea5e9;
  font-size: 13px;
}

.lsl-muted{ color: var(--muted); font-size: 13px; }

/* Wrap core cards nicely */
.lsl-home .lsl-card{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.lsl-home .lsl-title{ font-size: 16px !important; }

/* Make embedded grids breathe */
.lsl-home .lsl-grid,
.lsl-home .lsl-fixtures-grid{
  gap: 12px !important;
}

/* Mobile bottom nav */
.lsl-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(17,24,39,.08);
  padding: 10px 10px;
  display:flex;
  gap: 8px;
  justify-content: space-between;
  backdrop-filter: blur(8px);
}

.lsl-bnav{
  flex: 1;
  text-decoration:none;
  color: #111827;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
}

.lsl-bnav .dashicons{ font-size: 18px; width: 18px; height: 18px; }

.lsl-bnav.is-active{
  background: rgba(14,165,233,.12);
  color: #0369a1;
}

/* Desktop enhancements */
@media (min-width: 760px){
  .lsl-home{ padding-bottom: 24px; }
  .lsl-home-hero{ padding: 22px 18px 18px; }
  .lsl-home-club{ font-size: 26px; }
  .lsl-home-season{ font-size: 15px; }
  .lsl-home-quick{ grid-template-columns: repeat(3, 1fr); }
  .lsl-qcard{ padding: 14px; }
  .lsl-home-section-head h2{ font-size: 20px; }
  .lsl-bottom-nav{ display:none; }
}

/* Extra small phones: keep everything readable */
@media (max-width: 360px){
  .lsl-home-club{ font-size: 18px; }
  .lsl-qtitle{ font-size: 15px; }
  .lsl-bnav{ font-size: 10px; }
}