/* Styles for templates/index_v2.html — the opt-in city page redesign (hero
   and upcoming-events tickets only; the rest of that page is the classic
   markup and styling). Plain CSS under an hv- prefix rather than Tailwind
   utilities, so the page works without a Tailwind rebuild and can be removed
   as one unit. Loaded via url_for, so it gets main.css's ?v= cache busting.

   Every colour here is solid. No rgba/alpha fills, translucent borders or
   shadows, backdrop blur or fade masks — the frosted, half-see-through card
   look is deliberately not part of this design. */

.hv {
    --hv-brown: #331603;
    --hv-deep: #1e0e02;
    --hv-board: #3b1c07;
    --hv-cream: #fff0e0;
    --hv-gold: #ffcb00;
    --hv-gold-dark: #e0b400;
    --hv-ink: #331603;
    --hv-text: #f3e6d8;
    --hv-text-soft: #d4c2b2;
    --hv-text-dim: #b39a85;
    --hv-muted: #8a6a52;
    --hv-live: #ef4444;
    --hv-live-dark: #991b1b;
    --hv-ticket-line: #e6d5c3;
    color: #fff;
}

.hv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.hv-muted { color: var(--hv-muted); font-size: .85rem; }

.hv-eyebrow {
    font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--hv-gold); margin-bottom: .6rem;
}
.hv-h2 {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.15; color: var(--hv-ink);
}

.hv-section { padding: 72px 0; }
.hv-section--cream { background: var(--hv-cream); color: var(--hv-ink); }
.hv-section__head {
    display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 28px;
}

.hv-link {
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .95rem;
    color: #fff; border-bottom: 2px solid var(--hv-gold-dark); padding-bottom: 2px; transition: border-color .2s, color .2s;
}
.hv-link:hover { color: var(--hv-gold); border-color: var(--hv-gold); }
.hv-link--dark { color: var(--hv-ink); border-color: var(--hv-ink); white-space: nowrap; }
.hv-link--dark:hover { color: #6b462a; border-color: #6b462a; }
.hv-link--admin { border-color: #60a5fa; }

.hv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
    transition: transform .15s, background-color .2s, border-color .2s, color .2s; cursor: pointer;
}
.hv-btn:active { transform: scale(.97); }
.hv-btn--gold { background: var(--hv-gold); color: var(--hv-ink); }
.hv-btn--gold:hover { background: var(--hv-gold-dark); }
/* Both hero buttons live on the cream card. */
.hv-btn--ghost { border: 1.5px solid var(--hv-ink); color: var(--hv-ink); }
.hv-btn--ghost:hover { background: var(--hv-ink); color: var(--hv-cream); }
/* Joined state. tournament_actions.js toggles Tailwind colour classes on the
   button; data-action is what it sets reliably, so style off that. */
.hv .tournament-action-btn[data-action="leave"] { background: var(--hv-cream); color: var(--hv-ink); border: 1.5px solid var(--hv-ink); }
.hv .tournament-action-btn[data-action="leave"]:hover { border-color: var(--hv-live-dark); color: var(--hv-live-dark); }

/* Live marker: blinks between two solid reds rather than a fading halo. */
.hv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hv-live); animation: hv-blink 1.2s steps(1) infinite; }
@keyframes hv-blink { 50% { background: var(--hv-live-dark); } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hv-hero { position: relative; overflow: hidden; padding: 56px 0 72px; background: var(--hv-brown); }
/* A chessboard laid flat and receding into the background, in two solid
   browns only a shade apart. */
.hv-hero__board {
    position: absolute; left: 50%; bottom: -30%; width: 160%; height: 75%;
    transform: translateX(-50%) perspective(700px) rotateX(62deg);
    background-image: conic-gradient(var(--hv-board) 25%, var(--hv-brown) 0 50%, var(--hv-board) 0 75%, var(--hv-brown) 0);
    background-size: 90px 90px;
    pointer-events: none;
}
.hv-hero__grid { position: relative; display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .hv-hero__grid { grid-template-columns: 1.3fr 1fr; column-gap: 56px; row-gap: 0; grid-template-areas: "intro next" "more next"; }
    .hv-hero__intro { grid-area: intro; align-self: end; }
    .hv-hero__more { grid-area: more; align-self: start; }
    .hv-next { grid-area: next; }
}
/* On a phone the next-event card sits right under the H1. */
@media (max-width: 899px) {
    .hv-hero__grid { gap: 24px; }
    .hv-hero__lead { margin-top: 0; }
    .hv-next { order: 2; }
    .hv-hero__more { order: 3; }
}
.hv-hero__title {
    font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.08;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
}
.hv-hero__lead { color: var(--hv-text-soft); font-size: 1.05rem; line-height: 1.65; margin: 1rem 0 1.5rem; max-width: 34rem; }
.hv-hero__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* The next-event card is plain solid cream, like the tickets below it. A
   dark card one shade off the brown hero read as a see-through panel even
   with solid fills; a hard offset shadow and thick outline were tried after
   that and felt overblown. Kept deliberately compact and quiet. */
.hv-next {
    background: var(--hv-cream); color: var(--hv-ink);
    border-radius: 16px; overflow: hidden; width: 100%; max-width: 440px; justify-self: end;
}
.hv-next--live { outline: 2px solid var(--hv-live); }
.hv-next__cover { position: relative; display: block; aspect-ratio: 5 / 2; overflow: hidden; background: var(--hv-brown); }
.hv-next__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.hv-next__cover:hover img { transform: scale(1.04); }
.hv-next__badge {
    position: absolute; z-index: 1; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; color: var(--hv-ink); font-size: .72rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 999px;
}
.hv-next__body { padding: 16px 18px 18px; }
.hv-next--empty .hv-next__body { text-align: center; padding: 32px 22px; color: var(--hv-muted); }
/* The Zienz mark in the header's dark circle, not a generic chess-piece glyph. */
.hv-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 9999px;
    background: #331604; margin-bottom: 1rem;
}
.hv-empty-icon img { height: 1.5rem; width: auto; }
.hv-next__name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.hv-next__name a:hover { color: #6b462a; }
.hv-next__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .35rem; color: #6b462a; font-size: .82rem; }
.hv-next__meta i { color: var(--hv-ink); margin-right: .3rem; }
.hv-next__meta a { text-decoration: underline; text-underline-offset: 3px; }
.hv-next__meta a:hover { color: var(--hv-ink); }
.hv-next__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 14px; }
.hv-next .hv-btn { padding: .5rem 1rem; font-size: .85rem; }

/* Countdown digits sit in solid brown blocks on the cream card. */
.hv-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.hv-countdown > div { background: var(--hv-brown); border-radius: 10px; padding: 11px 4px 10px; text-align: center; }
.hv-countdown strong { display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.1rem; line-height: 1; color: var(--hv-gold); font-variant-numeric: tabular-nums; }
.hv-countdown span { display: block; margin-top: 6px; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-text-dim); }
.hv-countdown.is-zero strong { color: #fff; }

.hv-live-round { margin-top: 12px; font-size: .95rem; color: var(--hv-ink); }
.hv-live-round strong { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--hv-live-dark); }

.hv-seats { margin-top: 12px; }
.hv-seats__label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--hv-ink); margin-bottom: 5px; }
.hv-seats__label .hv-muted { color: var(--hv-muted); }
.hv-seats__bar { height: 5px; border-radius: 999px; background: var(--hv-ticket-line); overflow: hidden; }
.hv-seats__bar span { display: block; height: 100%; background: var(--hv-brown); border-radius: inherit; }

/* ── Tickets ──────────────────────────────────────────────────────────── */
.hv-tickets {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin: 0 -2px;
    scrollbar-width: thin; scrollbar-color: var(--hv-ticket-line) var(--hv-cream);
}
@media (min-width: 1000px) { .hv-tickets { grid-auto-columns: calc((100% - 36px) / 3); } }
.hv-ticket {
    position: relative; display: flex; scroll-snap-align: start; min-height: 150px;
    background: #fff; border: 1px solid var(--hv-ticket-line); border-radius: 16px;
    transition: transform .2s, border-color .2s;
}
.hv-ticket:hover { transform: translateY(-3px); border-color: var(--hv-gold-dark); }
.hv-ticket__hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.hv-ticket__stub {
    position: relative; flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--hv-brown); color: #fff; border-radius: 15px 0 0 15px; padding: 12px 6px; text-align: center;
}
.hv-ticket--live .hv-ticket__stub { background: #7f1d1d; }
/* Perforation between stub and body: two notches plus a dashed line. */
.hv-ticket__stub::before, .hv-ticket__stub::after {
    content: ''; position: absolute; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--hv-cream);
}
.hv-ticket__stub::before { top: -10px; }
.hv-ticket__stub::after { bottom: -10px; }
.hv-ticket__main { flex: 1; min-width: 0; padding: 16px 18px 14px 22px; border-left: 2px dashed var(--hv-ticket-line); display: flex; flex-direction: column; }
/* Full day/month names ("Cumartesi", "сентябрь"), so tighter tracking than
   the eyebrow and room to wrap rather than being cut. */
.hv-ticket__dow { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-gold); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.hv-ticket__day { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 700; line-height: 1; margin: 4px 0; }
.hv-ticket__mon { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hv-text-soft); line-height: 1.2; overflow-wrap: anywhere; }
.hv-ticket__name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--hv-ink); }
.hv-ticket__meta { font-size: .85rem; color: var(--hv-muted); margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-ticket__meta i { margin-right: .25rem; }
.hv-sep { margin: 0 .25rem; }
.hv-ticket__foot { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.hv-ticket__count { font-size: .9rem; color: var(--hv-ink); }
.hv-tag {
    display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin-bottom: .4rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    background: #f7f2e8; color: var(--hv-ink); padding: .2rem .55rem; border-radius: 999px;
}
.hv-tag--live { background: #fee2e2; color: var(--hv-live-dark); }
.hv-tag--in { background: #16a34a; color: #fff; margin: 0 0 0 auto; }
.hv-empty { text-align: center; color: var(--hv-muted); padding: 40px 0; }

@media (prefers-reduced-motion: reduce) {
    .hv *, .hv *::before, .hv *::after { animation: none !important; transition: none !important; }
}