/* Piotr Bukowski — site styles (layout, menu, panels, themes, mobile).
   Loaded on every page after css/fonts.css and css/events.css.

   Quick map:
     themes ............ colour variables for dark / light
     top bar ........... name, EN/PL, theme icon, menu
     glitch collage .... full-screen photo background
     panel ............. the dark box on the right with page content
     pages ............. bands, bio, media, contact
     MOBILE ............ phones (under 760 px) */

:root{
  --bk-font:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ----- themes (dark default = dark grey, light = bright) ----- */
:root, html[data-theme="dark"]{
  --bk-bg:#000000;           /* black */
  --bk-fg:#ffffff;
  --bk-muted:rgba(255,255,255,.58);
  --bk-dim:rgba(255,255,255,.38);
  --bk-border:#454545;
}
html[data-theme="light"]{
  --bk-bg:#f3f2ee;
  --bk-fg:#262626;
  --bk-muted:rgba(0,0,0,.55);
  --bk-dim:rgba(0,0,0,.4);
  --bk-border:#d9d6cf;
}

html, body{ transition:background-color .25s ease, color .25s ease; }
body.bk-body, .bk-body *{ font-family:var(--bk-font); }

html, body{ background:var(--bk-bg); color:var(--bk-fg); margin:0; }
body.bk-body{ font-family:var(--bk-font); line-height:1.5; min-height:100vh; }
.bk-body a{ color:inherit; }

/* ---------- top bar ---------- */
.bk-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:24px; padding:24px 34px;
}
.bk-wordmark{
  font-size:15px; letter-spacing:3px; text-transform:uppercase;
  text-decoration:none; color:var(--bk-fg); white-space:nowrap; padding-top:4px;
}
.bk-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }

.bk-lang{ font-size:12px; letter-spacing:1px; color:var(--bk-dim); }
.bk-lang button{
  background:none; border:0; padding:0 5px; cursor:pointer;
  color:var(--bk-dim); font:inherit; letter-spacing:1px;
}
.bk-lang button:hover{ color:var(--bk-fg); }
.bk-lang button.active{ color:var(--bk-fg); font-weight:600; }

/* theme toggle (inline SVG sun / moon, drawn by js/layout.js) */
.bk-lang .bk-theme{
  background:none; border:0; padding:0 8px 0 0; margin:0; cursor:pointer;
  line-height:1; vertical-align:-2px;
}
.bk-theme svg{ display:inline-block; }

/* MENU — black, bold (applies in both themes) */
.bk-top .bk-wordmark,
.bk-top .bk-nav a,
.bk-top .bk-lang button,
.bk-top .bk-lang span,
.bk-top .bk-theme{ color:#000 !important; font-weight:700 !important; }
.bk-top .bk-nav a:hover,
.bk-top .bk-lang button:hover,
.bk-top .bk-theme:hover{ color:#222 !important; }
.bk-top .bk-nav a.active{ border-bottom-color:#000 !important; }

.bk-nav{ display:flex; gap:26px; flex-wrap:wrap; justify-content:flex-end; }
.bk-nav a{
  text-decoration:none; text-transform:uppercase; letter-spacing:2px;
  font-size:14px; color:var(--bk-muted); padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.bk-nav a:hover{ color:var(--bk-fg); }
.bk-nav a.active{ color:var(--bk-fg); border-bottom-color:var(--bk-fg); }

/* ---------- main ---------- */
.bk-main{ max-width:1080px; margin:0 auto; padding:8px 34px 90px; }
.bk-page-title{
  font-size:13px; letter-spacing:4px; text-transform:uppercase;
  color:var(--bk-muted); margin:18px 0 34px;
}


/* ---------- glitch collage ---------- */
.gc{
  position:relative; width:100%; max-width:760px; margin:14px auto 46px;
  aspect-ratio:4/3; background:var(--bk-bg); overflow:hidden;
  user-select:none; -webkit-user-select:none;
}
@supports not (aspect-ratio:4/3){ .gc{ height:0; padding-bottom:75%; } }

/* full-screen fixed background variant (used on subpages) */
.gc-bg{
  position:fixed; inset:0; width:100vw; height:100vh; max-width:none;
  aspect-ratio:auto; margin:0; z-index:0; pointer-events:none;
}
.gc-bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); }
html[data-theme="light"] .gc-bg::after{ background:rgba(243,242,238,.6); }
.gc-bg.gc-noscrim::after{ display:none; }   /* full-screen background, no dimming */
.gc-bg.gc-home{ pointer-events:auto; cursor:pointer; }  /* click background -> home */
/* keep page content above the background */
body.bk-body .bk-top,
body.bk-body .bk-main{ position:relative; z-index:1; }

/* ---------- home (front) overlay ---------- */
body.bk-front .bk-top{ position:fixed; top:0; left:0; right:0; z-index:3; }
/* events schedule placed over the photo: vertically centred, right side,
   on a black panel with a 15px inset */
.bk-shows-overlay{
  position:fixed; right:5vw; top:50%; transform:translateY(-50%);
  z-index:2; width:min(420px, 44vw);
  margin:0; padding:15px; background:var(--bk-panel, #000);
  transition:background-color .25s ease;
}
.bk-shows-overlay h2{ text-align:left; color:#9a9a9a !important; }
/* always light text inside the black panel, regardless of theme */
.bk-shows-overlay .ec-wrap{
  --ec-accent:#ffffff !important;
  --ec-muted:#9a9a9a !important;
  --ec-past:#666666 !important;
  --ec-border:#2a2a2a !important;
}
/* SHOWS subpage: calendar inside the dark right panel — keep it light in any theme */
body.bk-front .bk-main .ec-wrap{
  --ec-accent:#ffffff; --ec-muted:#9a9a9a; --ec-past:#666666; --ec-border:#2a2a2a;
  max-width:none; margin:0;
}
body.bk-front .bk-main .ec-scroll{ max-height:62vh; }
/* home panel: no inner scrollbar — the panel itself grows / scrolls */
.bk-shows-overlay .ec-scroll{ max-height:none; overflow:visible; padding-right:0; }
.bk-shows-overlay .ec-more{ color:#9a9a9a; }
.bk-shows-overlay .ec-more:hover{ color:#fff; }
@media (max-width: 700px){
  .bk-shows-overlay{ right:14px; left:14px; width:auto;
    top:auto; bottom:6vh; transform:none; }
}

/* subpages: same treatment as the home events panel — content in a black,
   hue-drifting panel on the right (body.bk-front beats body.bk-body .bk-main) */
body.bk-front .bk-main{
  position:fixed; right:5vw; top:50%; transform:translateY(-50%);
  z-index:2; width:min(420px, 44vw); max-width:none; max-height:82vh; overflow:auto;
  margin:0; padding:15px; background:var(--bk-panel, #000);
  transition:background-color .25s ease;
  /* force light UI colors inside the dark panel, regardless of theme */
  --bk-fg:#ffffff; --bk-muted:rgba(255,255,255,.6); --bk-dim:rgba(255,255,255,.42);
  --bk-border:#2a2a2a; color:#fff;
}
body.bk-front .bk-main .bk-page-title{ margin-top:0; }

/* band subpages: photo + description + Bandcamp player inside the panel */
.bk-bandpage .bk-band-photo{ width:100%; height:auto; display:block; margin:2px 0 14px; }
.bk-bandpage p{ font-size:14px; color:var(--bk-muted); line-height:1.55; margin:0 0 14px; }
.bk-bandpage iframe.bc{ border:0; width:100%; height:472px; background:#000; display:block; margin:0 0 14px; }
@media (max-width: 700px){
  body.bk-front .bk-main{ right:14px; left:14px; width:auto;
    top:auto; bottom:5vh; transform:none; max-height:74vh; }
}

/* base (resting) layer — sizing/position set by JS (cover crop) */
.gc-base{ position:absolute; inset:0; background-repeat:no-repeat; }

/* tile grid overlay — fixed-size tiles, columns/rows set by JS */
.gc-grid{ position:absolute; inset:0; display:grid; }
.gc-cell{
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .07s linear;
}
.gc-cell.on{ opacity:1; }

.bk-shows{ max-width:560px; margin:0 auto; }
.bk-shows h2{
  font-size:13px; letter-spacing:4px; text-transform:uppercase;
  color:var(--bk-muted); margin:0 0 18px; text-align:center;
}

/* ---------- bands ---------- */
.bk-bands{ max-width:640px; margin:0 auto; }
.bk-band{ padding:22px 0; border-bottom:1px solid var(--bk-border); }
.bk-band a, .bk-band .bk-band-name{
  font-size:30px; letter-spacing:2px; text-decoration:none; color:var(--bk-fg);
  display:inline-block;
}
.bk-band a:hover{ color:var(--bk-muted); }
.bk-band .bk-band-desc{ color:var(--bk-muted); font-size:14px; margin-top:6px; }
.bk-band .bk-band-name.bk-nolink{ color:var(--bk-fg); }

/* ---------- bio ---------- */
.bk-bio{ max-width:620px; margin:0 auto; }
.bk-bio p{ font-size:16px; color:var(--bk-fg); opacity:.9; margin:0 0 18px; }

/* ---------- media / video ---------- */
.bk-player{
  position:relative; width:100%; max-width:960px; margin:0 auto;
  aspect-ratio:16/9; background:#000;
}
.bk-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@supports not (aspect-ratio:16/9){ .bk-player{ height:0; padding-bottom:56.25%; } }
.bk-cta{
  display:inline-block; margin-top:26px; color:var(--bk-fg); border:1px solid #777;
  padding:10px 22px; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none;
}
.bk-cta:hover{ border-color:var(--bk-fg); }
.bk-center{ text-align:center; }

/* ---------- contact ---------- */
.bk-contact{ max-width:560px; margin:0 auto; }
.bk-contact .bk-row{ padding:18px 0; border-bottom:1px solid var(--bk-border); }
.bk-contact .bk-label{
  font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--bk-dim);
  margin-bottom:6px;
}
.bk-contact a{ color:var(--bk-fg); text-decoration:none; font-size:17px; }
.bk-contact a:hover{ color:var(--bk-muted); }

/* ---------- i18n visibility ---------- */
.bk-lng{ display:none; }
html[data-lang="en"] .bk-lng.en{ display:block; }
html[data-lang="pl"] .bk-lng.pl{ display:block; }

/* ---------- events calendar: light theme colors ---------- */
html[data-theme="light"] .ec-wrap{
  --ec-accent:#262626;
  --ec-muted:#666666;
  --ec-past:#a6a6a6;
  --ec-border:#d9d6cf;
}

/* ============================================================
   MOBILE (phones / iPhone) — single readable column over the collage.
   Overrides the fixed right-panel layout used on desktop.
   ============================================================ */
@media (max-width: 760px){
  /* top bar: normal flow (scrolls with page), compact, wraps */
  body.bk-body .bk-top,
  body.bk-front .bk-top{
    position:relative; z-index:5;
    flex-direction:row; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:8px 14px; padding:14px 16px;
  }
  .bk-right{ flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; }
  .bk-nav{ gap:14px; justify-content:flex-end; }
  .bk-nav a{ font-size:13px; letter-spacing:1.5px; padding-bottom:2px; }
  .bk-wordmark{ font-size:14px; letter-spacing:2px; padding-top:0; }
  .bk-lang{ font-size:12px; }

  /* content panels flow in normal order, ABOVE the fixed collage background */
  body.bk-front .bk-main,
  .bk-shows-overlay{
    position:relative; z-index:2;
    left:auto; right:auto; top:auto; bottom:auto; transform:none;
    width:auto; max-width:620px; max-height:none; overflow:visible;
    margin:8vh 16px 40px; padding:18px;
  }
  /* home: let the photo show above the SHOWS card */
  .bk-shows-overlay{ margin-top:34vh; }

  /* let lists/calendars expand; the page scrolls instead of an inner box */
  body.bk-front .bk-main .ec-scroll,
  .bk-shows-overlay .ec-scroll{ max-height:none; }

  /* band players a touch shorter */
  .bk-bandpage iframe.bc{ height:430px; }

  /* type scaling */
  .bk-band a, .bk-band .bk-band-name{ font-size:26px; }
  .bk-bio p{ font-size:15px; }
  .bk-page-title{ margin:0 0 20px; }
}

@media (max-width: 420px){
  .bk-nav{ gap:10px; }
  .bk-nav a{ font-size:12px; letter-spacing:1px; }
  .bk-wordmark{ font-size:13px; letter-spacing:1.5px; }
  .bk-band a, .bk-band .bk-band-name{ font-size:22px; }
  .bk-shows-overlay{ margin-top:28vh; }
  body.bk-front .bk-main,
  .bk-shows-overlay{ margin-left:12px; margin-right:12px; padding:15px; }
}