/* ──────────────────────────────────────────────────────────────
   Početna — Haus Vajbz. Mobile first; ≥768 and ≥1100 add columns.
   Reads only tokens from tokens.css + hv/theme.css: radius 0, no shadows,
   no gradients, rules instead of boxes, → as the only ornament.
   Spec: plan/hausvajbz/05_pocetna_page.md
   ────────────────────────────────────────────────────────────── */

.home { display: block; }

/* ── Hero band: copy | disk, ticker under both ───────────────── */
.hero { background: var(--bg); color: var(--text); overflow: hidden; }
.hero__inner { padding-block: 1.6rem 1.8rem; display: grid; gap: 1.8rem; }
.hero__kicker { margin: 0 0 1.2rem; }
.hero__title { font-size: clamp(3rem, 15vw, 5.6rem); }
.hero__line { display: block; }
.hero__swap { display: inline-block; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero__swap.is-out { opacity: 0; transform: translateY(-0.15em); }
.hero__lead { margin: 1.6rem 0 0; max-width: 34ch; color: var(--text-dim); }

/* the disk: the deck's vinyl — the only circle in the system.
   Big on purpose: 68vw on phones, 260–360px from 768, 360–440px from 1100. */
.disk {
  position: relative; display: block;
  width: min(68vw, 320px); aspect-ratio: 1; margin-inline: auto;
  border-radius: 50%; overflow: hidden;
  background: var(--ink); color: var(--paper);
}
.disk:focus-visible { outline: none; }
/* the spin lives on the inner layer so it never fights the landing rise. The layer is
   round itself: iOS Safari composites an animated child on its own layer and stops
   clipping it to the parent's border-radius, so a square layer showed its corners turning. */
.disk__spin {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);   /* forces the clip on older WebKit */
  animation: hv-spin 14s linear infinite;
}
.disk:hover .disk__spin, .disk:focus-visible .disk__spin { animation-play-state: paused; }
.disk__spin img, .disk__spin picture { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.95); }
.disk__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(1.4rem, 8vw, 2.6rem); }
.disk__grooves { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--paper); stroke-width: 0.35; opacity: 0.28; }
.disk__hole {
  position: absolute; left: 50%; top: 50%; width: 12%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--ink); border: 3px solid var(--paper);
}
.disk.hv-grain::after { border-radius: 50%; }
/* @keyframes hv-spin lives in hv/theme.css (shared with the result page's vinyl) */

/* ticker: the metadata strip in motion */
.ticker { border-top: 1px solid var(--line); overflow: hidden; padding-block: 0.55rem; }
.ticker__track { display: flex; width: max-content; gap: 2.2rem; animation: hv-ticker 48s linear infinite; }
.ticker__item { white-space: nowrap; color: var(--text); }
.ticker__item b { font-weight: 500; color: var(--ink); margin-left: 0.4rem; }
@keyframes hv-ticker { to { transform: translateX(calc(-50% - 1.1rem)); } }

/* landing: the lines rise in one after another (hv-rise lives in theme.css) */
.hero__kicker, .hero__line, .hero__lead, .disk { animation-name: hv-rise; animation-duration: 0.6s; animation-timing-function: var(--ease); animation-fill-mode: both; }
.hero__line:nth-child(2) { animation-delay: 0.08s; }
.hero__lead { animation-delay: 0.16s; }
.disk { animation-delay: 0.24s; }

.hv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Next up (row rules .nu* live in theme.css) ──────────────── */
.nu-sec { padding-top: 1.4rem; }
.nu-sec__label { margin: 0 0 0.6rem; }

/* ── Category pills: one scrolling row on mobile ─────────────── */
.cats { padding-top: 1.6rem; }
.cats__list {                       /* bleeds to the viewport edge so the row scrolls under the gutter */
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.4rem;
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cats__list::-webkit-scrollbar { display: none; }
.cats__list a { text-decoration: none; padding: 0.7em 0.9em 0.62em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.cats__list a:hover, .cats__list a:focus-visible { background: var(--red); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--red); outline: none; }

/* ── Section head + rail (card rules .hvc live in theme.css) ── */
.rail-sec { padding-top: 1.8rem; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--text); margin-bottom: 1.2rem; }
.sec-title { font-size: clamp(1.6rem, 7vw, 2.6rem); color: var(--red); }
.sec-link { text-decoration: none; white-space: nowrap; }
.sec-link:hover { color: var(--red); }

.rail {                             /* bleeds to the edge on phones like the pill row */
  display: flex; gap: var(--gutter);
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
/* rail card: the .hvc base (theme.css) stacks the square photo over the
   copy, so the photos line up side by side — two per view on phones,
   three from 768, four from 1100 (the rail still snaps one card at a time) */
.rail > .hvc { flex: 0 0 calc((100% - var(--gutter)) / 2); scroll-snap-align: start; }
.rail .hvc__body { padding-top: 0.55rem; min-width: 0; }
.rail .hvc__name { font-size: 0.95rem; }
.rail .hvc__meta span { display: block; }               /* narrow column: date and venue on their own lines, no dangling · */
.rail .hvc__meta span + span::before { content: none; }
.rail-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.rail-ctl__count { font-variant-numeric: tabular-nums; }
.rail-ctl__count b { font-weight: 600; color: var(--text); }
.rail-ctl__btns { display: flex; gap: 0.5rem; }

/* ── Editorial rows: left-rule cards, no boxes. Phones stack photo over
   copy; from 768 each card is one row, photo | copy, sides alternating ── */
.edit { padding-top: 3rem; }
.edit__grid { display: grid; gap: 2.4rem; }
.edit__card { border-left: 3px solid var(--ink); padding-left: 1rem; display: grid; gap: 1rem; }
.edit__card:nth-child(even) { border-left: 0; padding-left: 0; border-right: 3px solid var(--ink); padding-right: 1rem; }   /* "Built with…" / "Designed for the after": rule on the right */
.edit__copy { display: flex; flex-direction: column; gap: 0.6rem; }
.edit__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.edit__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.95); }
.edit__title { font-size: clamp(1.5rem, 6.5vw, 2.2rem); color: var(--red); }
.edit__card .hv-mono { margin: 0; }
.edit__body { margin: 0; color: var(--ink-2); max-width: 48ch; }
.edit__cta { width: auto; align-self: start; margin-top: 0.4rem; }

/* ── Organizer CTA band: everything centred ──────────────────── */
.cta { margin-top: 3rem; background: var(--bg); color: var(--text); }
.cta__inner { padding-block: 2.4rem 2.6rem; display: grid; gap: 1.4rem; justify-items: center; text-align: center; }
.cta__kicker { margin: 0 0 0.6rem; }
.cta__title { font-size: clamp(2rem, 9.5vw, 3.6rem); }
.cta__btn { width: auto; }

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero__inner { padding-block: 2.6rem 2.8rem; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
  .hero__title { font-size: clamp(4rem, 8.5vw, 7rem); }
  .disk { width: clamp(260px, 32vw, 360px); margin-inline: 0; }
  .cats__list { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .rail > .hvc { flex-basis: calc((100% - 2 * var(--gutter)) / 3); }   /* three photos side by side */
  .rail .hvc__body { gap: 0.5rem; padding-top: 0.7rem; }
  .rail .hvc__name { font-size: 1.1rem; }
  .rail .hvc__meta span { display: inline; }
  .rail .hvc__meta span + span::before { content: '·'; }
  /* photo takes the narrower column (2/5), copy the wider one; even rows swap sides */
  .edit__grid { gap: 2.4rem; }
  .edit__card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: calc(var(--gutter) * 1.5); align-items: center; }
  .edit__card:nth-child(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .edit__card:nth-child(even) .edit__media { order: 1; }
  .cta__inner { padding-block: 3.2rem 3.4rem; gap: 1.8rem; }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .hero__inner { grid-template-columns: 7fr 5fr; padding-block: 3.2rem 3.4rem; gap: 3rem; }
  .disk { width: clamp(360px, 34vw, 440px); justify-self: end; }
  .nu-sec { padding-top: 2rem; }
  .rail-sec { padding-top: 2.4rem; }
  .rail { gap: calc(var(--gutter) * 1.25); }
  .rail > .hvc { flex-basis: calc((100% - 3 * 1.25 * var(--gutter)) / 4); }   /* four photos side by side */
  /* editorial: a fixed 340px square photo beside the copy, wide gutter between */
  .edit__card { grid-template-columns: 340px minmax(0, 1fr); gap: calc(var(--gutter) * 3); }
  .edit__card:nth-child(even) { grid-template-columns: minmax(0, 1fr) 340px; }
  .edit__media { aspect-ratio: 1; }
  .edit__body { max-width: 52ch; }
}

/* ── Reduced motion: still disk, static strip, first word ────── */
@media (prefers-reduced-motion: reduce) {
  .disk, .disk__spin, .ticker__track, .hero__kicker, .hero__line, .hero__lead { animation: none; }
}