/* =========================
   BattlePass — clean style.css
   ========================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#0b0b0b;
  --fg:#ffffff;
  --muted:#9a9a9a;
  --border: rgba(255,255,255,.10);
  --card: rgba(255,255,255,.03);
  --header-bg: rgba(11,11,11,.75);

  /* Background image (optional) */
  --bg-image: none;
  --bg-overlay: rgba(0,0,0,0.25);
}

:root[data-theme="light"]{
  --bg:#ffffff;
  --fg:#0b0b0b;
  --muted:#555555;
  --border: rgba(0,0,0,.12);
  --card: rgba(0,0,0,.04);
  --header-bg: rgba(255,255,255,.75);

  /* Put your light bg here */
  --bg-image: url("/img/bg-light.jpeg");
  --bg-overlay: rgba(255,255,255,0.10);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
  color: var(--fg);
  background:
    var(--bg-image) center / cover no-repeat fixed,
    var(--bg);
}

a{ color: var(--fg); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 0;
}

.brand{ display:flex; align-items:center; }

.brand-logo{
  height:44px;
  width:auto;
  display:block;
}

.nav{
  display:flex;
  gap:16px;
  align-items:center;
}

.nav-link{
  color: var(--muted);
  font-size:14px;
  letter-spacing:.2px;
  padding:8px 10px;
  border-radius:10px;
}

.nav-link:hover{
  color: var(--fg);
  background: var(--card);
  text-decoration:none;
}

/* ---------- Typography ---------- */
h1{
  margin:0 0 10px;
  font-size:48px;
  letter-spacing:.5px;
}

.lead{
  margin:0 0 12px;
  font-size:18px;
  color: var(--fg);
}

.muted{
  margin:0;
  color: var(--muted);
  font-size:16px;
}

/* ---------- Hero ---------- */
.hero{
  padding:72px 0 24px;
  text-align:center;
}

.hero-inner{
  max-width: 760px;
}

/* Fullscreen hero variant (optional): add class "hero-logo" to the section */
.hero.hero-logo{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
}

.hero.hero-logo::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bg-overlay);
  pointer-events:none;
}

.hero .hero-inner > img.theme-logo{
  width: clamp(220px, 22vw, 320px);
  max-height: 28vh;
  height: auto ;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}



/* ---------- Sections ---------- */
.section{
  padding:56px 0;
  border-top: 1px solid var(--border);
}

.section h2{
  margin:0 0 12px;
  font-size:20px;
  letter-spacing:.2px;
}

.section h3{
  margin: 0 0 12px;
}

/* Two-column layout */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.split-content p{
  margin: 0 0 16px;
}

.split-content ul{
  padding-left: 18px;
  margin: 0 0 16px;
}

.split-content ul li{
  margin-bottom: 6px;
  color: var(--muted);
}

/* Media */
.media img{
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  background: #000;
  justify-self: center;
  display:block;
}

/* ---------- Vertical images (posters, portraits) ---------- */
.media .img-vertical{
  width: min(32vw, 320px);
  max-height: 70vh;
  height: auto;

  aspect-ratio: 3 / 5.35; /* стандартный постер */
  object-fit: contain;

  display: block;
  margin: 0 auto;

  border-radius: 14px;
  background: #000;
}

/* ---------- Legal pages ---------- */
.page{
  padding:56px 0;
}

.page h1{
  font-size:32px;
  margin:0 0 8px;
}

.page h2{
  font-size:18px;
  margin:24px 0 8px;
}

.page ul{
  margin:8px 0 0 18px;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 28px 0;
}

.footer-inner{
  text-align:center;
  font-size:14px;
  color: var(--muted);
}

.site-footer a{
  color: var(--muted);
  margin: 0 12px;
}

.site-footer a:hover{
  color: var(--fg);
  text-decoration:none;
}

.footer-copy{ margin-top: 12px; }

/* ---------- Theme toggle button ---------- */
.theme-toggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);

  transition: transform .12s ease;
}

.theme-toggle:hover{ transform: translateY(-1px); }
.theme-toggle:active{ transform: translateY(0px); }

.theme-toggle svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* show proper icon depending on theme */
:root[data-theme="dark"] .icon-sun{ display: none; }
:root[data-theme="light"] .icon-moon{ display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .split{
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  .img-vertical{
    width: min(70vw, 320px);
    max-height: 60vh;
  }

  .media img{
    max-width: 100%;
    margin-top: 18px;
  }

  h1{ font-size: 36px; }
}