/*
 * Voldabobla-appen (app.voldabobla.no).
 * Mobil-først PWA-lag oppå components.css.
 */

body.surface-app {
  background: var(--vb-bg);
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--vb-brand-700);
  color: #fff;
  padding-top: env(safe-area-inset-top);
}
.appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--vb-3);
  padding: var(--vb-3) var(--vb-4);
  max-width: var(--vb-page-max);
  margin: 0 auto;
}
.appbar__title {
  font-family: var(--vb-font-display);
  font-weight: 800;
  font-size: var(--vb-text-lg);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--vb-2);
  color: #fff;
  text-decoration: none;
}
.appbar__actions { margin-left: auto; display: flex; gap: var(--vb-2); }
.appbar__icon {
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
}
.appbar__icon:hover { background: rgba(255, 255, 255, 0.26); }

.app-main {
  max-width: var(--vb-page-max);
  margin: 0 auto;
  padding: var(--vb-4) var(--vb-4) var(--vb-6);
}

/* --- Botnnavigasjon ---------------------------------------------------- */

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--vb-surface);
  border-top: 1px solid var(--vb-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--vb-2) 0 var(--vb-2);
  color: var(--vb-ink-muted);
  text-decoration: none;
  font-size: var(--vb-text-xs);
  font-weight: 650;
  min-height: 56px;
}
.tabbar a[aria-current="page"] { color: var(--vb-brand-700); }
.tabbar__icon { font-size: 1.35rem; line-height: 1; }
@media (min-width: 48rem) {
  .tabbar { position: static; grid-template-columns: repeat(4, max-content); gap: var(--vb-4); border-top: 0; background: none; justify-content: center; }
  body.surface-app { padding-bottom: 0; }
}

/* --- Filter ------------------------------------------------------------ */

.filterbar { display: grid; gap: var(--vb-3); margin-bottom: var(--vb-5); }
.filterbar__search { display: flex; gap: var(--vb-2); }
.chips { display: flex; gap: var(--vb-2); overflow-x: auto; padding-bottom: var(--vb-1); scrollbar-width: thin; }
.chip {
  flex: none;
  border: 1px solid var(--vb-line);
  background: var(--vb-surface);
  color: var(--vb-ink);
  border-radius: var(--vb-radius-pill);
  padding: var(--vb-2) var(--vb-4);
  font: inherit;
  font-size: var(--vb-text-sm);
  font-weight: 650;
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--vb-brand-700); border-color: var(--vb-brand-700); color: #fff; }

/* --- Dagsgrupper ------------------------------------------------------- */

.daygroup { margin-bottom: var(--vb-6); }
.daygroup__head {
  position: sticky;
  top: 3.5rem;
  z-index: 5;
  background: var(--vb-bg);
  padding: var(--vb-2) 0;
  display: flex;
  align-items: baseline;
  gap: var(--vb-2);
}
.daygroup__day { font-family: var(--vb-font-display); font-weight: 800; font-size: var(--vb-text-lg); margin: 0; }
.daygroup__rel { color: var(--vb-ink-muted); font-size: var(--vb-text-sm); }
.daygroup__list { display: grid; gap: var(--vb-3); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--vb-3); margin-bottom: var(--vb-3); }
.section-head h2 { margin: 0; }
.section-head a { font-size: var(--vb-text-sm); font-weight: 650; }

/* --- Arrangementsside -------------------------------------------------- */

.event-hero {
  border-radius: var(--vb-radius-lg);
  overflow: hidden;
  background: var(--vb-surface-2);
  margin-bottom: var(--vb-4);
}
.event-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.event-hero--empty {
  aspect-ratio: 16 / 6;
  background: linear-gradient(135deg, var(--vb-brand-800), var(--vb-bubble));
}

.event-title { font-size: var(--vb-text-3xl); margin-bottom: var(--vb-2); }

.facts { display: grid; gap: var(--vb-3); margin: 0 0 var(--vb-5); padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--vb-2); align-items: start; }
.facts__icon { font-size: 1.1rem; line-height: 1.4; }
/* Kvar opplysning på si eiga linje – elles klistrar detaljen seg til tittelen. */
.facts li > div > * { display: block; }

.actionbar { display: flex; gap: var(--vb-2); flex-wrap: wrap; margin-bottom: var(--vb-5); }
.actionbar .btn { flex: 1 1 auto; min-width: 9rem; }

.prose { max-width: var(--vb-content-max); }
.prose p { white-space: pre-wrap; }

.capacity {
  display: flex; align-items: center; gap: var(--vb-2);
  font-size: var(--vb-text-sm); color: var(--vb-ink-muted);
  margin-bottom: var(--vb-3);
}
.capacity__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--vb-surface-2); overflow: hidden; max-width: 12rem; }
.capacity__fill { height: 100%; background: var(--vb-brand-600); }
.capacity__fill--full { background: var(--vb-accent); }

/* --- Foreiningar ------------------------------------------------------- */

.org-card { display: flex; gap: var(--vb-3); align-items: center; }
.org-card__logo {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; background: var(--vb-surface-2); flex: none;
}
.org-card__logo--placeholder {
  display: grid; place-items: center;
  background: var(--vb-brand-100); color: var(--vb-brand-700);
  font-weight: 800; font-size: var(--vb-text-lg);
}

/* --- Diverse ----------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--vb-ink);
  color: var(--vb-bg);
  padding: var(--vb-2) var(--vb-4);
  border-radius: var(--vb-radius-pill);
  box-shadow: var(--vb-shadow-lg);
  z-index: 60;
  font-weight: 600;
  font-size: var(--vb-text-sm);
  max-width: min(90vw, 30rem);
  text-align: center;
}

.offline-banner {
  background: var(--vb-warn-100);
  color: var(--vb-warn);
  text-align: center;
  padding: var(--vb-2);
  font-size: var(--vb-text-sm);
  font-weight: 650;
}

.install-hint {
  display: flex; gap: var(--vb-3); align-items: center;
  background: var(--vb-brand-50); border: 1px solid var(--vb-brand-100);
  border-radius: var(--vb-radius); padding: var(--vb-3) var(--vb-4);
  margin-bottom: var(--vb-4);
}
.install-hint p { margin: 0; font-size: var(--vb-text-sm); }

.skeleton-card { height: 92px; margin-bottom: var(--vb-3); }