/* ==== The Extra Inch - shared design system ====
   Tokens live in mainnav.css (:root --tei-*), which every page loads.
   This file holds page-level pieces: body type, footer, and the components
   the redesigned pages are built from. Classes are tei- prefixed so they
   never collide with Bootstrap or older page styles.
*/

/* Body type for pages built on base.html */
body{font-family:var(--tei-font-body)}

/* ---------- Footer ---------- */
.tei-footer{margin-top:72px;background:var(--tei-ink);border-top:1px solid var(--tei-line);color:var(--tei-fg-dim);font-family:var(--tei-font-body);font-size:15px}
.tei-footer__inner{max-width:1280px;margin:0 auto;padding:28px 24px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px}
.tei-footer__brand{font-family:var(--tei-font-display);font-size:18px;letter-spacing:1px;text-transform:uppercase;color:var(--tei-fg)!important;text-decoration:none!important}
.tei-footer__links{display:flex;flex-wrap:wrap;gap:4px 20px}
.tei-footer__links a{color:var(--tei-fg-dim)!important;text-decoration:none!important}
.tei-footer__links a:hover{color:var(--tei-accent)!important}

/* ---------- Dark page shell (opt in with <body class="tei-dark">) ---------- */
body.tei-dark{background:var(--tei-ink);color:var(--tei-fg)}
.tei-dark a{color:var(--tei-fg);text-decoration:none}
.tei-dark a:hover{color:var(--tei-accent);text-decoration:none}
/* neutralise older global rules (base_styles.css centres every h1/h2/p) */
.tei-dark p{text-align:left}
.tei-dark h1,.tei-dark h2,.tei-dark h3{text-align:left}
.tei-home__stack{display:flex;flex-direction:column}

.tei-container{max-width:1280px;margin:0 auto;padding:0 24px}
.tei-section{margin-top:56px}
.tei-section:first-child{margin-top:40px}
.tei-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.tei-h1,.tei-h2{margin:0;font-family:var(--tei-font-display);font-weight:400;letter-spacing:1px;text-transform:uppercase;line-height:1;color:var(--tei-fg);text-align:left}
.tei-h1{font-size:clamp(48px,8vw,96px);line-height:.92}
.tei-h2{font-size:clamp(30px,4vw,40px)}
.tei-label{font-family:var(--tei-font-label);font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--tei-fg-dim)}
.tei-label--accent{color:var(--tei-accent)}
.tei-more{font-family:var(--tei-font-label);font-weight:600;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:var(--tei-accent)!important}
.tei-muted{color:var(--tei-fg-dim)}

/* Grids */
.tei-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tei-grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}

/* Cards */
.tei-card{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:var(--tei-radius);background:var(--tei-panel);border:1px solid var(--tei-line);color:var(--tei-fg)}
a.tei-card:hover{border-color:#2a3a5c;color:var(--tei-fg)}
.tei-card--dashed{border-style:dashed}
.tei-card--feature{justify-content:space-between;gap:40px;min-height:180px;padding:24px}
.tei-card--glow{background:linear-gradient(160deg,#10203a,var(--tei-panel))}
.tei-card__title{font-family:var(--tei-font-label);font-weight:700;font-size:30px;line-height:1.05;text-transform:uppercase}
.tei-card__text{margin-top:6px;color:var(--tei-fg-dim);font-size:16px}

/* Game card (Tonight) */
.tei-game__top{display:flex;justify-content:space-between}
.tei-game__teams{display:flex;flex-direction:column;gap:8px;font-family:var(--tei-font-label);font-weight:700;font-size:28px;text-transform:uppercase;line-height:1.1}
.tei-game__row{display:flex;justify-content:space-between;gap:12px}
.tei-game__odds{color:var(--tei-fg-dim);font-size:20px;font-variant-numeric:tabular-nums}
.tei-game__foot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--tei-line);padding-top:12px;font-size:15px;color:var(--tei-fg-dim)}
.tei-game__cta{color:var(--tei-accent);font-weight:600}

/* League block (Jump in) */
.tei-league{padding:28px;gap:20px}
.tei-league__name{font-family:var(--tei-font-display);font-size:56px;line-height:1;text-transform:uppercase}
.tei-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tei-tile{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:10px;background:var(--tei-panel-2);font-family:var(--tei-font-label);font-weight:600;font-size:18px;text-transform:uppercase;color:var(--tei-fg)}
.tei-tile--soon{color:var(--tei-fg-dim);border:1px dashed var(--tei-line);background:transparent}

/* Hero banner */
.tei-hero{position:relative;margin-top:24px}
.tei-hero__img{display:block;width:100%;height:360px;object-fit:cover;border-radius:16px}
.tei-hero__chip{position:absolute;left:24px;bottom:24px;padding:6px 12px;border-radius:999px;background:rgba(7,12,22,.8);border:1px solid var(--tei-line)}

/* Mobile-only intro (C-style headline) and list views */
.tei-intro{display:none}
.tei-list{list-style:none;margin:12px 0 0;padding:0;border-top:2px solid var(--tei-fg)}
.tei-list li{border-bottom:1px solid var(--tei-line)}

/* ---------- Page header with stat row ---------- */
.tei-pagehead{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;padding:48px 0 28px;border-bottom:1px solid var(--tei-line)}
.tei-pagehead .tei-h1{margin-top:8px;font-size:clamp(44px,6vw,72px)}
.tei-stats{display:flex;gap:12px;margin:0;flex-wrap:wrap}
.tei-stats>div{min-width:120px;padding:12px 16px;border-radius:12px;background:var(--tei-panel);border:1px solid var(--tei-line)}
.tei-stats dt{font-family:var(--tei-font-label);font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--tei-fg-dim)}
.tei-stats dd{margin:4px 0 0;font-family:var(--tei-font-label);font-weight:700;font-size:26px;font-variant-numeric:tabular-nums}
.tei-stats dd span{font-size:18px;color:var(--tei-fg-dim)}
.tei-footnote{margin:24px 0 0;font-size:14px}

/* ---------- Badges ---------- */
.tei-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--tei-line);font-family:var(--tei-font-label);font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--tei-fg-dim)}
.tei-badge--on{border-color:transparent;background:rgba(63,214,138,.14);color:var(--tei-accent)}

/* ---------- Matchup cards (game previews) ---------- */
.tei-matchups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:16px;margin-top:32px}
.tei-matchup{display:flex;flex-direction:column;border-radius:var(--tei-radius);background:var(--tei-panel);border:1px solid var(--tei-line);overflow:hidden}
.tei-matchup__top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--tei-line)}
.tei-matchup__team{display:grid;grid-template-columns:44px minmax(0,1fr) auto 48px;align-items:center;gap:14px;padding:14px 18px}
.tei-matchup__team+.tei-matchup__team{border-top:1px dashed var(--tei-line)}
.tei-matchup__logo{width:44px;height:44px;object-fit:contain}
.tei-matchup__name{display:flex;flex-direction:column;min-width:0}
.tei-matchup__city{font-family:var(--tei-font-label);font-weight:700;font-size:23px;line-height:1;text-transform:uppercase;overflow-wrap:break-word}
.tei-matchup__cols{display:grid;grid-template-columns:44px minmax(0,1fr) auto 48px;gap:14px;padding:10px 18px 0;font-family:var(--tei-font-label);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--tei-fg-dim)}
.tei-matchup__cols span:nth-child(3),.tei-matchup__cols span:nth-child(4){text-align:right}
.tei-matchup__at{color:var(--tei-fg-dim);margin-right:6px}
.tei-matchup__nick{font-size:14px;color:var(--tei-fg-dim)}
.tei-matchup__line{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.tei-matchup__spread{font-family:var(--tei-font-label);font-weight:700;font-size:22px}
.tei-matchup__ml{font-size:13px;color:var(--tei-fg-dim)}
.tei-matchup__pred{justify-self:end;font-family:var(--tei-font-display);font-size:28px;color:var(--tei-accent);font-variant-numeric:tabular-nums}
.tei-matchup__picks{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid var(--tei-line);background:rgba(18,32,58,.45);flex:1}
.tei-matchup__picks p{margin:0;font-size:15px}
.tei-pick{display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;background:var(--tei-panel-2)}
.tei-pick span{font-family:var(--tei-font-label);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--tei-fg-dim)}
.tei-pick strong{font-family:var(--tei-font-label);font-weight:700;font-size:18px;color:var(--tei-fg)}
.tei-dark a.tei-matchup__cta,.tei-matchup__cta{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 18px;border-top:1px solid var(--tei-line);font-family:var(--tei-font-label);font-weight:700;font-size:17px;letter-spacing:.5px;text-transform:uppercase;color:var(--tei-accent)}
.tei-dark a.tei-matchup__cta:hover{background:var(--tei-panel-2)}

/* ---------- Phone layout: A's look on C's layout ---------- */
@media (max-width:640px){
  .tei-container{padding:0 16px}
  .tei-section{margin-top:36px}
  .tei-intro{display:block;padding:28px 0 24px;border-bottom:1px solid var(--tei-line)}
  .tei-hero{order:99}
  .tei-hero__img{height:130px;border-radius:12px}
  .tei-hero__chip{display:none}
  .tei-games .tei-card{border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--tei-line);padding:12px 0;gap:6px}
  .tei-games{gap:0;border-top:2px solid var(--tei-fg)}
  .tei-games .tei-game__teams{font-size:22px}
  .tei-games .tei-game__foot{border-top:0;padding-top:0}
  .tei-card--feature{min-height:0;gap:12px}
  .tei-card__title{font-size:24px}
  .tei-league{padding:16px}
  .tei-league__name{font-size:30px}
  .tei-tile{font-size:16px;min-height:44px}
  .tei-pagehead{padding:28px 0 20px}
  .tei-stats>div{min-width:0;flex:1;padding:10px 12px}
  .tei-stats dd{font-size:22px}
  .tei-matchup__team{grid-template-columns:36px minmax(0,1fr) auto 40px;gap:10px;padding:12px 14px}
  .tei-matchup__cols{grid-template-columns:36px minmax(0,1fr) auto 40px;gap:10px;padding:10px 14px 0}
  .tei-matchup__logo{width:36px;height:36px}
  .tei-matchup__city{font-size:20px}
  .tei-matchup__pred{font-size:24px}
  .tei-matchup__top,.tei-matchup__picks,.tei-matchup__cta{padding-left:14px;padding-right:14px}
}