/* ===== Färger och typsnitt ===== */
:root {
  --bg: #131217;
  --bg-body: #050807;
  --pink: #FF78F1;
  --lime: #CFFF45;
  --purple: #C255D4;
  --white: #FFFFFF;
  --line: #5C5C5C;

  --font-display: 'Alfa Slab One', serif;
  --font-kicker: 'Abril Fatface', serif;
  --font-body: 'Afacad', sans-serif;
}

/* Allt skalas med rem, precis som på Carrd */
html { font-size: 18pt; }
@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px)  { html { font-size: 11pt; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg-body);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-text-size-adjust: none;
}

h1, h2, p, ul, figure { margin: 0; padding: 0; }
img, video, iframe { display: block; max-width: 100%; }

/* ===== EP ===== */
.hero {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg) url(images/bg-pattern.svg) center / cover no-repeat;
}

.hero-media {
  position: relative;
  flex: 0 0 50%;
}

.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  flex: 0 0 50%;
  align-self: center;
  padding: 2rem;
}

.logo { width: 2.25rem; height: auto; }

.kicker {
  margin: 1rem 0;
  color: var(--lime);
  font-family: var(--font-kicker);
  font-size: 1.25rem;
  text-transform: uppercase;
}

h1 {
  margin: 0.25rem 0;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
}

.intro { margin: 0.5rem 0; font-size: 1.25rem; }
.intro p + p { margin-top: 1rem; }

hr {
  margin: 1.25rem 0;
  border: 0;
  height: 1px;
  background: var(--line);
}

.tracks { display: grid; gap: 0.25rem; }
.tracks iframe {
  width: 100%;
  height: 119px;
  border: 0;
  background: rgba(32, 32, 32, 0.25);
}

.label { margin: 1rem 0; font-size: 1.25rem; }

/* ===== Behind the scenes ===== */
.behind {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem;
  background: var(--bg);
  text-align: center;
}

.behind h2 {
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.5;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
}

.gallery a { display: block; cursor: zoom-in; }
.gallery img { width: auto; height: 15rem; }

/* ===== Request a song ===== */
.request {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem;
  background: var(--bg) url(images/bg-grid.svg) center / 100% 150% no-repeat;
}

.request-image { width: 9.75rem; height: auto; }

.request-body { width: 17rem; max-width: 100%; }

.request h2 {
  margin-bottom: 1.5rem;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
}

#request-form input[type="text"] {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: 1.25rem var(--font-body);
  outline: none;
}
#request-form input[type="text"]::placeholder { color: var(--white); opacity: 0.55; }
#request-form input[type="text"]:focus { border-color: var(--pink); }

.botcheck { display: none; }

#request-form button {
  margin-top: 1rem;
  height: 2.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--purple);
  color: var(--white);
  font: 1.25rem var(--font-body);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
#request-form button:hover { background: #cf6ae0; }
#request-form button:disabled { opacity: 0.6; cursor: wait; }

.form-message { margin-top: 1rem; font-size: 1.25rem; }

/* ===== Bildvisare ===== */
.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(19, 18, 23, 0.94);
  color: var(--white);
}
.lightbox::backdrop { background: transparent; }

.lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  padding: 3rem 4rem;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100% - 3rem);
  object-fit: contain;
}

.lightbox figcaption { font-size: 1.25rem; text-align: center; }

.lightbox button {
  position: absolute;
  width: 4rem;
  height: 4rem;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.5rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.lightbox button:hover { opacity: 1; }

.lightbox-close {
  top: 0.5rem;
  right: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 20l24 24M20 44l24-24' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  translate: 0 -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8l24 24-24 24' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.lightbox-prev { left: 0; transform: scaleX(-1); }
.lightbox-next { right: 0; }

/* ===== Mobil ===== */
@media (max-width: 736px) {
  .hero { flex-direction: column; }
  .hero-media { flex: none; }
  .hero-media video { position: static; height: auto; aspect-ratio: 1280 / 768; }
  .hero-content { flex: none; align-self: stretch; }

  .gallery li { width: calc(50% - 0.25rem); }
  .gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

  .request { flex-direction: column; gap: 2rem; }
  .request-image { width: 11.625rem; }
  .request-body { width: 100%; }

  .lightbox figure { padding: 4rem 1rem; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 0.5rem; translate: none; }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  .behind h2 { font-size: 2rem; }
  .request h2 { font-size: 1.5rem; }
}