/* Even8 landing pages — static stylesheet.
   Replaces the Tailwind CDN runtime compiler (cdn.tailwindcss.com), which
   ships ~400KB of render-blocking JS that has to execute in the browser
   before any styling appears — a documented anti-pattern Tailwind itself
   warns against in production, and the dominant cause of a 41 Mobile
   PageSpeed score. This file hand-replicates only the exact utility
   classes actually used across the landing pages (index.php, terms.php,
   privacy.php, support.php, partners.php, evente.php, event.php,
   pyetje.php, 404.php, header.php, footer.php) — nothing more. If a new
   page introduces a class not defined here, it will silently not be
   styled; grep the codebase for `class="` and add the missing utility. */

@font-face {
  font-family: 'Inter';
  src: url('/landing-assets/fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* ---- Preflight (minimal reset, matching Tailwind's baseline) ---- */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: rgba(255,255,255,0.1); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; background: #000000; }
html, body { overflow-x: hidden; max-width: 100%; }
body { margin: 0; line-height: inherit; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; margin: 0; }
p { margin: 0; }
img, svg { display: block; vertical-align: middle; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: inherit; }
button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; background-color: transparent; background-image: none; padding: 0; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
details summary { cursor: pointer; }

/* ---- Base theme ---- */
body { font-family: 'Inter', system-ui, sans-serif; }
.bg-ink { background-color: #000000; }
.bg-surface { background-color: #0F0F0F; }
.bg-surface2 { background-color: #151515; }
.bg-surface2\/95 { background-color: rgba(21,21,21,0.95); }
.bg-black { background-color: #000000; }
.bg-black\/70 { background-color: rgba(0,0,0,0.7); }
.bg-white { background-color: #ffffff; }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/90 { background-color: rgba(255,255,255,0.9); }
.text-white { color: #ffffff; }
.text-black { color: #000000; }
.text-muted { color: #A1A1A6; }
.border-surface2 { border-color: #151515; }
.border-white\/10 { border-color: rgba(255,255,255,0.1); }
.border-white\/15 { border-color: rgba(255,255,255,0.15); }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Reusable glass surface + subtle top highlight (already used inline via
   custom classes, kept as their own rules for readability). */
.glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.glass-highlight { background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent 40%); }

/* ---- Long-form content (terms/privacy) ---- */
.prose-even8 h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose-even8 h2:first-child { margin-top: 0; }
.prose-even8 p, .prose-even8 > div { color: #A1A1A6; line-height: 1.75; margin-bottom: 1rem; }
.prose-even8 ul { padding-left: 1.25rem; list-style: disc; margin-bottom: 1rem; }
.prose-even8 li { margin-bottom: 0.375rem; }
.prose-even8 a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Layout ---- */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
/* Explicit single-column base — relying on the browser's implicit
   auto-placement (no grid-template-columns at all) is inconsistent across
   engines for how many items land per row; make mobile always 1 column.
   minmax(0, 1fr), not bare 1fr: a bare 1fr track's minimum is content-based
   (auto), so a card with long unbreakable text (or a broken-image alt-text
   render) can force the whole grid — and page — wider than the viewport,
   silently clipped by the global overflow-x:hidden with no scrollbar and no
   ellipsis. Same reasoning already applied to every responsive grid variant
   below (sm:grid-cols-*, artist-grid, footer-grid); this base rule was the
   one gap. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0 { top: 0; }
.top-2 { top: 0.5rem; }
.right-0 { right: 0; }
.right-2 { right: 0.5rem; }
.right-2\.5 { right: 0.625rem; }
.bottom-0 { bottom: 0; }
.bottom-2 { bottom: 0.5rem; }
.left-0 { left: 0; }
.left-2 { left: 0.5rem; }
.left-2\.5 { left: 0.625rem; }
.z-20 { z-index: 20; }
.z-40 { z-index: 40; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.group { }

/* gap */
.gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; }
.gap-x-6 { column-gap: 1.5rem; } .gap-y-2 { row-gap: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

/* margin-top */
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}
.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}
.mb-4{margin-bottom:1rem}

/* padding */
.p-4{padding:1rem}.p-6{padding:1.5rem}.p-10{padding:2.5rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-6{padding-top:1.5rem}.pt-10{padding-top:2.5rem}
.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-16{padding-bottom:4rem}

/* sizing */
.w-4{width:1rem}.w-5{width:1.25rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}
.w-12{width:3rem}.w-24{width:6rem}.w-40{width:10rem}.w-64{width:16rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0px}
.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-9{height:2.25rem}
.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-full{height:100%}
.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}.max-w-6xl{max-width:72rem}
.aspect-16-10{aspect-ratio:16/10}.aspect-16-9{aspect-ratio:16/9}
.aspect-4-3{aspect-ratio:4/3}.aspect-9-19{aspect-ratio:9/19}
.scale-90{transform:scale(.9)}

/* typography */
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}
.text-6px{font-size:6px}.text-8px{font-size:8px}.text-9px{font-size:9px}
.text-10px{font-size:10px}.text-11px{font-size:11px}.text-15px{font-size:15px}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}
.leading-105{line-height:1.05}
.tracking-tight{letter-spacing:-.025em}
.tracking-wide{letter-spacing:.025em}
.uppercase{text-transform:uppercase}
.text-center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-pre-line{white-space:pre-line}
.list-none{list-style:none}
.cursor-pointer{cursor:pointer}
.underline{text-decoration-line:underline}

/* borders / radius */
.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-y{border-top-width:1px;border-bottom-width:1px}
.border-dashed{border-style:dashed}
.border-6{border-width:6px}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}
.rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}
.rounded-2-5rem{border-radius:2.5rem}.rounded-3rem{border-radius:3rem}

/* effects */
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-2xl.shadow-black-80{box-shadow:0 25px 50px -12px rgba(0,0,0,.8)}
.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-90{opacity:.9}
.blur-3xl{filter:blur(64px)}
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.object-cover{object-fit:cover}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}

/* gradients */
/* Only two gradient combinations exist in the codebase (hero overlay,
   phone-mockup card overlay) — combined rules instead of trying to
   replicate Tailwind's --tw-gradient-* variable chaining, which breaks
   when from/via/to classes on the same element try to set the same
   custom property independently. */
.bg-gradient-to-b.from-black-40.via-black-70.to-black {
  background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.7), #000);
}
.bg-gradient-to-t.from-black-90.via-black-10.to-transparent {
  background-image: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.1), transparent);
}
.hero-radial-glow{
  background-image: radial-gradient(ellipse at top, rgba(255,255,255,0.08), transparent 60%);
}

/* hover / group states */
.hover\:text-white:hover{color:#ffffff}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,0.1)}
.hover\:bg-white\/90:hover{background-color:rgba(255,255,255,0.9)}
.hover\:underline:hover{text-decoration-line:underline}
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }

/* ---- Responsive (mobile-first, matching Tailwind's default breakpoints) ---- */
@media (min-width: 640px) {
  .sm\:block{display:block}
  .sm\:flex{display:flex}
  .sm\:flex-row{flex-direction:row}
  .sm\:inline{display:inline}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:h-7{height:1.75rem}
  .sm\:w-72{width:18rem}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-16{padding-top:4rem;padding-bottom:4rem}
  .sm\:py-20{padding-top:5rem;padding-bottom:5rem}
  .sm\:py-24{padding-top:6rem;padding-bottom:6rem}
  .sm\:py-28{padding-top:7rem;padding-bottom:7rem}
  .sm\:pb-20{padding-bottom:5rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-6xl{font-size:3.75rem;line-height:1}
}
@media (min-width: 768px) {
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width: 640px) {
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- Sub-hero stat strip ---- */
.subhero-stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 640px) { .subhero-stat-value { font-size: 2.5rem; } }
.subhero-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.12); }

/* ---- Showcase "coming soon" placeholder (reused by any empty section) ---- */
.showcase-coming-soon {
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 1rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* ---- Events carousel: continuous CSS-only marquee strip ----
   Pure `transform: translateX()` animation, not scroll-position-based —
   an earlier version drove this via JS `scrollIntoView()`, which in some
   browsers nudges the whole page's vertical scroll position along with
   the horizontal one (reported live: "karuseli prish skrollin"). A CSS
   transform never touches any scroll position, so that class of bug is
   structurally impossible here. index.php renders the card list twice
   back-to-back when there are ≥2 events; animating exactly -50% along X
   lands precisely at the start of the second (identical) copy, so the
   loop reads as continuous with no visible seam or reset-jump. */
.landing-carousel {
  overflow: hidden;
  width: 100%;
}
.landing-carousel-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
}
.landing-carousel-track--playing {
  animation-name: landing-carousel-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.landing-carousel-track--playing:hover,
.landing-carousel-track--playing:focus-within {
  animation-play-state: paused;
}
@keyframes landing-carousel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-carousel-track--playing { animation: none; }
}
.landing-carousel-card {
  flex-shrink: 0;
  width: 82vw;
  max-width: 320px;
}
@media (min-width: 640px) {
  .landing-carousel-card { width: 320px; }
}

/* ---- Artists grid: round avatars, name + event count ---- */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
}
@media (min-width: 640px) { .artist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .artist-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.artist-avatar {
  width: 84px;
  height: 84px;
  border-radius: 9999px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}
.artist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-name { margin-top: 0.75rem; font-weight: 600; font-size: 0.9375rem; text-align: center; }
.artist-count { margin-top: 0.125rem; font-size: 0.8125rem; color: #A1A1A6; text-align: center; }

/* ---- Footer: brand column (wider) + 3 grouped link columns ---- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); }
}
.footer-col-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; }
.footer-col-links { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col-links a { font-size: 0.875rem; }

/* ---- iOS-style day/month/year scroll wheel (events date-range filter) ----
   Sheet positioning/sizing gets dedicated rules rather than utility
   classes: this file only defines the utility subset already used
   elsewhere in the site, and things like sm:max-w-xs or arbitrary flex
   values were never added to it. */
.ev-date-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
.ev-date-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-radius: 1.5rem 1.5rem 0 0;
  overflow: hidden;
  background-color: rgba(21,21,21,0.97);
}
@media (min-width: 640px) {
  .ev-date-panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: 20rem;
    border-radius: 1.5rem;
  }
}
.ev-date-panel-header { padding: 1.25rem 1.25rem 0.5rem; }
.ev-date-panel-body { position: relative; padding: 0.5rem 1.25rem 1.5rem; }
.ev-date-highlight {
  pointer-events: none;
  position: absolute;
  left: 1.25rem; right: 1.25rem; top: 50%;
  transform: translateY(-50%);
  height: 2.5rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.1);
}

/* Each column is a snap-scrolling list; row height (40px) matches the JS
   ROW_H constant in evente.php. The mask fades rows out near the top/
   bottom edges — the same visual cue iOS's native UIPickerView uses
   instead of a hard cutoff — leaving only the row(s) nearest the center
   highlight band fully legible. */
.ev-wheel-row { height: 200px; }
.ev-wheel {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, transparent 0, black 76px, black 124px, transparent 200px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 76px, black 124px, transparent 200px);
}
.ev-wheel::-webkit-scrollbar { display: none; }
.ev-wheel-day, .ev-wheel-year { flex: 1; }
.ev-wheel-month { flex: 1.5; }
.ev-wheel-pad { height: 80px; }
.ev-wheel-item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  scroll-snap-align: center;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.55);
}
.ev-wheel-item--active { color: #ffffff; font-weight: 600; }