/*!
 * SoccerPapi Site Shell
 * Mobile-first layout helpers shared across pages.
 */

:root{
  --shell-max:1200px;
  --shell-pad:clamp(14px,4vw,28px);
  --section-gap:clamp(14px,3vw,22px);
  --card-gap:clamp(12px,2.8vw,18px);
  --card-radius:var(--round,16px);
  --frost:blur(10px);
  --shadow-soft:0 16px 32px rgba(0,0,0,.28);
  --shadow-strong:0 22px 46px rgba(0,0,0,.38);
}

body{
  background:#0B1426;
  color:var(--ink,#fff);
  min-height:100vh;
}

.page-shell{
  width:100%;
  max-width:var(--shell-max);
  margin:0 auto;
  padding:var(--shell-pad);
}

.page-shell--narrow{
  max-width:960px;
}

.section-stack{
  display:grid;
  gap:var(--section-gap);
}

.page-grid{
  display:grid;
  gap:var(--card-gap);
}

@media(min-width:1080px){
  .page-grid--with-rail{
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:flex-start;
  }
}

.surface-card{
  background:rgba(14,28,51,.94);
  border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:var(--card-radius);
  padding:clamp(16px,3vw,22px);
  box-shadow:var(--shadow-soft);
}

.surface-card--glass{
  background:rgba(10,18,36,.65);
  backdrop-filter:var(--frost);
}

.surface-card h1,
.surface-card h2,
.surface-card h3{
  margin:0 0 8px;
  font-weight:600;
  letter-spacing:.02em;
}

.surface-card p{
  margin:0 0 10px;
  color:var(--muted,#c9d7ef);
  line-height:1.65;
}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.section-heading h2{
  margin:0;
  font-size:clamp(18px,2.3vw,22px);
  color:#f1f6ff;
}

.section-heading p{
  margin:0;
  color:var(--muted,#c9d7ef);
  font-size:14px;
}

.kpi-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}

.kpi{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:90px;
}

.kpi span{
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.kpi strong{
  font-size:24px;
  letter-spacing:.03em;
}

.tabs,
.pills,
.pill-rail{
  display:flex;
  align-items:center;
  gap:8px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px 0;
}

.tabs::-webkit-scrollbar,
.pills::-webkit-scrollbar,
.pill-rail::-webkit-scrollbar{
  height:6px;
}

.tab,
.pill{
  border:none;
  background:rgba(255,255,255,.10);
  color:#e6eef7;
  padding:8px 13px;
  border-radius:12px;
  font-weight:600;
  font-size:13px;
  letter-spacing:.04em;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,transform .12s ease;
}

.tab:hover,
.pill:hover{
  background:rgba(255,255,255,.16);
}

.tab.is-active,
.tab.active,
.tab[aria-selected="true"],
.pill.is-active,
.pill.active,
.pill[aria-selected="true"]{
  background:var(--accent1,#F5FF6B);
  color:#0b1426;
}

.tab-rail{
  position:sticky;
  top:calc(var(--page-chrome-height,60px) + env(safe-area-inset-top));
  z-index:18;
  padding:8px var(--shell-pad);
  margin:-8px calc(var(--shell-pad) * -1) 6px;
  background:rgba(11,20,38,.92);
  backdrop-filter:var(--frost);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.list-rows{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.list-row__meta{
  margin-left:auto;
  color:var(--muted,#c9d7ef);
  font-size:13px;
}

.badge-line{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.badge-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-weight:600;
  font-size:13px;
}

.ad-card{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,16,30,.92);
  padding:14px;
  box-shadow:var(--shadow-soft);
}

.ad-card__label{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9fb2d3;
}

.ad-card__slot{
  width:100%;
}

.muted{
  color:var(--muted,#c9d7ef);
}

/* Breadcrumbs — unified */
.match-breadcrumbs,
.breadcrumb,
.crumbs{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(247,249,255,0.78);
}

.match-breadcrumbs ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.match-breadcrumbs li{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
}

.match-breadcrumbs li:not(:first-child)::before{
  content:'›';
  opacity:.55;
}

.match-breadcrumbs a{
  color:inherit;
  text-decoration:none;
  font-weight:600;
}

.match-breadcrumbs a:hover{
  text-decoration:underline;
}

.match-breadcrumbs span{
  opacity:.9;
}

.page-chrome__brand--stacked .match-breadcrumbs{
  margin-top:2px;
}

.breadcrumb,
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 14px;
  padding:0;
}

.breadcrumb a,
.crumbs a{
  color:inherit;
  text-decoration:none;
  font-weight:600;
}

.breadcrumb a:hover,
.crumbs a:hover{
  text-decoration:underline;
}

.match-crumb-current{
  font-weight:700;
  color:#f7f9ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Page chrome alignment for sport surfaces */
body.league-page .page-chrome__bar,
body.team-page .page-chrome__bar,
body.player-page .page-chrome__bar,
body.match-page .page-chrome__bar{
  max-width:var(--shell-max);
  margin:0 auto;
  justify-content:flex-start;
  align-items:center;
  padding-left:calc(12px + env(safe-area-inset-left));
  padding-right:calc(12px + env(safe-area-inset-right));
}

body.league-page .page-chrome__brand,
body.team-page .page-chrome__brand,
body.player-page .page-chrome__brand,
body.match-page .page-chrome__brand{
  justify-content:flex-start;
  align-items:center;
  min-width:0;
  flex:0 0 auto;
}

.page-chrome__brand--stacked{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
}

.page-chrome__brand--stacked .page-chrome__subtitle{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:rgba(247,249,255,0.72);
}

.page-chrome__brand--stacked .page-chrome__subtitle nav{
  flex:1;
  min-width:0;
}

@media (max-width:768px){
  .page-chrome__brand--stacked .page-chrome__subtitle{
    gap:6px;
  }
}

body.league-page .page-chrome__brand--stacked,
body.team-page .page-chrome__brand--stacked,
body.player-page .page-chrome__brand--stacked{
  align-items:flex-start;
  flex:0 0 auto;
}

/* Shared section tabs */
.section-tabs{
  position:sticky;
  top:calc(var(--page-chrome-height, var(--header-h, 0px)) + env(safe-area-inset-top));
  z-index:22;
  padding:8px 0;
  margin:0;
  background:var(--bg,#0B1426);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.section-tabs .pills{
  width:100%;
  max-width:var(--shell-max);
  margin:0 auto;
  padding:2px var(--shell-pad);
}

/* Mobile bottom ad bar */
.mobile-adbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  background:rgba(11,20,38,.96);
  border-top:1px solid rgba(255,255,255,.08);
  padding:6px 10px calc(env(safe-area-inset-bottom) + 10px);
  display:none;
  box-shadow:0 -10px 24px rgba(0,0,0,.38);
}

.mobile-adbar__inner{
  max-width:520px;
  margin:0 auto;
}

.mobile-adbar__slot{
  width:100%;
  max-width:520px;
  margin:0 auto;
}

.mobile-adbar ins.adsbygoogle{
  display:block!important;
  width:100%;
  height:65px;
}

@media(max-width:900px){
  .mobile-adbar{
    display:block;
  }
}