/* The home page, from the 6 September 2026 design handover.
 *
 * Its own file rather than more of ticket-talkies.css, because none of it is
 * reusable: a full-bleed hero, a search panel, an event grid and a split
 * organiser section exist on exactly one page. ticket-talkies.css stays the
 * design system, this is one composition made from it.
 *
 * Every colour here comes from the tokens in that file. The prototype declared
 * its own copies, which would have been a second set of brand values to keep in
 * step with the first.
 */

/* ---------------------------------------------------------------- header -- */
/* Over the hero, not above it, so the image runs to the top of the window. */
.home-head {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  height: 76px; display: flex; align-items: center;
  padding: 0 max(5vw, 24px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(5, 5, 8, .84), transparent);
}
.home-brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--tt-display); font-weight: 800; font-size: 20px;
  letter-spacing: -.6px; color: var(--tt-text); text-decoration: none;
}
.home-brand > span > span {
  background: var(--tt-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Two tilted tabs, a torn ticket stub. Cheaper than an image and it scales. */
.home-mark {
  width: 31px; height: 28px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px; transform: rotate(-5deg); flex: none;
}
.home-mark i { background: linear-gradient(150deg, var(--tt-cyan), var(--tt-blue)); border-radius: 4px 1px 1px 4px; }
.home-mark i + i { background: linear-gradient(150deg, var(--tt-blue), var(--tt-violet)); border-radius: 1px 4px 4px 1px; }

.home-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 42px; }
.home-nav a, .home-tickets { font-size: 14px; color: #d8d8df; text-decoration: none; }
.home-nav a:hover, .home-tickets:hover { color: #fff; }
/* margin-left:auto lives here rather than on the nav, which is hidden on a
   phone and so stops pushing anything anywhere. */
.home-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  height: min(880px, 100vh); min-height: 740px;
  position: relative; overflow: hidden; display: flex; align-items: center;
}
.hero-image {
  position: absolute; inset: 0;
  background-image: image-set(url("/assets/img/hero.webp") type("image/webp"),
                              url("/assets/img/hero.jpg") type("image/jpeg"));
  background-image: url("/assets/img/hero.jpg");
  background-image: -webkit-image-set(url("/assets/img/hero.webp") type("image/webp"),
                                      url("/assets/img/hero.jpg") type("image/jpeg"));
  background-size: cover; background-position: center;
}
/* Two shades, not one. The sideways one keeps the headline legible over a busy
   crowd; the upward one stops the search panel floating on nothing. */
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 8, .95) 0%, rgba(5, 5, 8, .78) 35%, rgba(5, 5, 8, .1) 70%),
    linear-gradient(0deg, rgba(5, 5, 8, .75), transparent 42%);
}
.hero-content { position: relative; z-index: 2; width: min(1160px, 90vw); margin: 50px auto 0; }

.home-eyebrow {
  text-transform: uppercase; letter-spacing: 2.8px; font-size: 12px;
  font-weight: 700; color: #d1d1da; margin: 0 0 20px;
  display: flex; align-items: center; gap: 9px;
}
.home-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tt-cyan);
  box-shadow: 0 0 15px var(--tt-cyan); flex: none;
}
.home-eyebrow.coral { color: var(--tt-cyan); margin-bottom: 12px; }

.hero h1, .organiser-copy h2 {
  font-family: var(--tt-display); font-size: clamp(48px, 7vw, 108px);
  letter-spacing: -.06em; line-height: .93; margin: 0; max-width: 760px;
}
.hero h1 em, .organiser-copy h2 em {
  font-style: normal; background: var(--tt-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy { font-size: 19px; line-height: 1.55; color: #c5c5ce; max-width: 570px; margin: 38px 0 30px; }

.search-panel {
  width: min(1040px, 90vw); min-height: 76px;
  background: rgba(15, 15, 20, .78); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px;
  display: grid; grid-template-columns: 1.65fr .8fr .85fr auto; padding: 7px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
.search-field, .location-field, .date-field {
  display: flex; align-items: center; gap: 12px; padding: 0 17px;
  border: 0; border-right: 1px solid rgba(255, 255, 255, .12);
  background: none; text-align: left; color: var(--tt-text);
}
.search-panel svg { width: 21px; min-width: 21px; fill: none; stroke: var(--tt-muted); stroke-width: 1.7; }
.search-panel span { display: flex; flex-direction: column; }
.search-panel small {
  color: #777784; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.3px; font-weight: 700; margin-bottom: 3px;
}
.search-field input { border: 0; background: none; outline: 0; color: #fff; width: 100%; font-size: 15px; }
.search-field input::placeholder { color: #dedee4; }
.search-button {
  border: 0; border-radius: 11px;
  background: var(--tt-grad);
  color: var(--tt-on-accent); padding: 0 24px; font-weight: 700;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.search-button svg { stroke: var(--tt-on-accent); }
.search-panel :focus-visible, .home-head :focus-visible { outline: 2px solid var(--tt-cyan); outline-offset: 2px; }

.quick-links { margin-top: 21px; display: flex; align-items: center; gap: 12px; color: #888894; font-size: 13px; }
.quick-links a {
  border: 1px solid rgba(255, 255, 255, .12); color: #d8d8df; border-radius: 99px;
  padding: 7px 12px; background: rgba(255, 255, 255, .04); text-decoration: none;
}
.hero-meta {
  position: absolute; z-index: 2; right: 5vw; bottom: 45px; display: grid; gap: 7px;
  border-left: 2px solid var(--tt-cyan); padding-left: 17px;
}
.hero-meta > span { text-transform: uppercase; color: var(--tt-cyan); font-size: 10px; letter-spacing: 2px; }
.hero-meta strong { font-family: var(--tt-display); font-size: 17px; }
.hero-meta a { font-size: 12px; color: #c4c4cc; text-decoration: none; }

/* ---------------------------------------------------------- event cards -- */
.home-section { width: min(1180px, 90vw); margin: auto; }
.events-section { padding: 104px 0 120px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.section-heading h2 { font-family: var(--tt-display); font-size: clamp(32px, 4vw, 58px); letter-spacing: -.045em; margin: 0; }
.section-controls { display: flex; align-items: center; gap: 8px; }
.section-controls a { font-size: 14px; border-bottom: 1px solid #fff; padding-bottom: 4px; text-decoration: none; white-space: nowrap; }

.filter-row { display: flex; gap: 8px; overflow: auto; padding: 36px 0 24px; }
.filter-row a {
  white-space: nowrap; padding: 10px 17px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .12); background: transparent;
  color: #b9b9c2; text-decoration: none;
}
.filter-row a.active { background: #fff; color: #09090c; border-color: #fff; }

/* Drawn for three cards, but only two events are real, so it has to compose at
   two and at one as well rather than leaving a hole where an invented event
   used to sit. Three columns are the upgrade, not the default. */
.event-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 20px; }
.event-grid:has(> :nth-child(3)) { grid-template-columns: 1.18fr 1fr 1fr; }
.event-grid:has(> :only-child) { grid-template-columns: minmax(0, 640px); }
.event-card { min-width: 0; display: block; color: inherit; text-decoration: none; }
.event-art {
  height: 340px; border-radius: 18px; position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}
.feature-card .event-art { height: 400px; }
.art-one { background: radial-gradient(circle at 70% 20%, rgba(180, 90, 255, .75), transparent 30%), linear-gradient(145deg, #082f3c, #0f1118 60%, #301447); }
.art-two { background: radial-gradient(circle at 65% 35%, rgba(255, 77, 115, .8), transparent 25%), linear-gradient(155deg, #2d0d19, #111016 58%, #33205d); }
.art-three { background: radial-gradient(circle at 25% 20%, rgba(77, 236, 215, .55), transparent 28%), linear-gradient(145deg, #072d2b, #15131e 55%, #30235b); }
.event-art::after {
  content: ""; position: absolute; width: 260px; height: 260px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%;
  right: -70px; bottom: -90px;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, .025), 0 0 0 70px rgba(255, 255, 255, .018);
}
.poster-type {
  font-family: var(--tt-display); position: absolute; left: 28px; bottom: 27px;
  font-size: 26px; line-height: .92; letter-spacing: -1px; color: #fff;
}
.poster-type strong { font-size: 44px; letter-spacing: -3px; }
.poster-type small {
  display: block; font-family: var(--tt-body); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; margin-top: 14px; color: #c7c7d0;
}
.poster-small { font-size: 24px; }
.poster-small strong { font-size: 39px; }
.availability {
  position: absolute; top: 17px; left: 17px; background: var(--tt-bad); color: #fff;
  padding: 7px 10px; border-radius: 7px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.availability.free { background: var(--tt-good); color: #111; }

/* The last slot when there is room for it. Dashed and unlit on purpose: it is
   an invitation, and nobody should mistake it for an event they can buy a
   ticket to. */
.art-cta {
  background: linear-gradient(150deg, #0d1016, #12121a 60%, #171426);
  border-style: dashed; border-color: rgba(255, 255, 255, .22);
}
.art-cta::after { display: none; }
.art-cta .poster-type { color: #d5d5de; }
.cta-card .event-info div > span { color: var(--tt-cyan); }

.event-info { display: flex; gap: 16px; padding: 18px 4px; }
.event-info time { color: var(--tt-cyan); font-size: 11px; letter-spacing: 1px; text-align: center; font-weight: 800; }
.event-info time b { display: block; color: #fff; font-family: var(--tt-display); font-size: 27px; letter-spacing: -1px; }
.event-info h3 { font-family: var(--tt-display); font-size: 18px; margin: 1px 0 6px; letter-spacing: -.4px; }
.event-info p { color: #8e8e9a; font-size: 13px; margin: 0 0 9px; }
.event-info div > span { font-size: 13px; font-weight: 700; }
.event-card:hover .event-info h3 { color: var(--tt-cyan); }

/* ----------------------------------------------------- organiser section -- */
.organiser-section {
  position: relative; background: linear-gradient(120deg, #0c151a, #111018 55%, #1a1024);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 100px max(5vw, 24px); display: grid; grid-template-columns: 1fr 1fr;
  gap: 8vw; align-items: center; overflow: hidden;
}
.organiser-section::before {
  content: ""; position: absolute; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(74, 193, 255, .12), transparent 60%);
  left: -200px; top: -200px;
}
/* The perforated edge of a ticket, punched out of the section itself. */
.ticket-edge {
  position: absolute; left: -2px; top: 0; bottom: 0; width: 8px;
  background: radial-gradient(circle at left, transparent 5px, var(--tt-bg) 6px) 0 0 / 8px 16px;
}
.organiser-copy { position: relative; }
.organiser-copy h2 { font-size: clamp(40px, 6vw, 82px); letter-spacing: -.06em; }
.organiser-copy > p:not(.home-eyebrow) { color: #aaaab5; line-height: 1.65; max-width: 550px; font-size: 18px; margin: 28px 0; }
.organiser-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.text-link { font-weight: 600; font-size: 14px; text-decoration: none; }
.text-link span { color: var(--tt-cyan); margin-left: 7px; }

.price-card {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 23px; padding: 30px; backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25); transform: rotate(1deg);
}
.price-card > p:first-of-type { font-size: 13px; text-transform: uppercase; letter-spacing: 1.8px; color: #8d8d9b; margin: 0; }
.price-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; padding: 26px 0; }
.price-compare > div:not(.equals) { display: flex; flex-direction: column; }
.price-compare small { color: #92929f; }
.price-compare strong { font-family: var(--tt-display); font-size: clamp(34px, 4vw, 52px); letter-spacing: -3px; margin: 5px 0; }
.price-compare span { font-size: 12px; color: #797985; }
.price-compare .equals { color: #62626e; font-size: 28px; }
.price-compare .highlight {
  background: linear-gradient(140deg, rgba(78, 228, 220, .13), rgba(170, 112, 255, .15));
  border: 1px solid rgba(99, 218, 238, .2); border-radius: 15px; padding: 20px;
}
.price-compare .highlight strong { background: var(--tt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.saving { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; display: flex; justify-content: space-between; gap: 1rem; color: #90909c; font-size: 12px; }
.saving strong { color: var(--tt-cyan); font-size: 13px; }

/* --------------------------------------------------- closing and footer -- */
.closing-section { text-align: center; padding: 110px 24px; }
.closing-section p { color: #777783; margin: 8px; }
.ainthinai { font-family: var(--tt-display); font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -2px; text-decoration: none; color: var(--tt-text); }
.ainthinai span { background: var(--tt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.home-foot {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 38px 5vw;
  display: flex; align-items: center; gap: 35px; color: #777783; font-size: 13px;
  flex-wrap: wrap;
}
.home-foot a { color: inherit; text-decoration: none; }
.home-foot a:hover { color: #fff; }
.home-foot .home-brand { font-size: 16px; }
.home-foot .home-mark { width: 24px; height: 21px; }
.foot-links { display: flex; gap: 25px; margin-left: auto; flex-wrap: wrap; }
.home-foot small { font-size: 12px; }

@media (max-width: 900px) {
  .home-nav, .home-tickets { display: none; }
  .home-head { height: 68px; }
  /* The header sits over the hero, so on a phone the content has to start
     below it or the headline runs underneath the brand. padding-top clears it
     and the hero grows to fit rather than clipping. */
  .hero { height: auto; min-height: 760px; align-items: flex-end; padding: 96px 0 96px; }
  .hero-image { background-position: 64% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(5, 5, 8, .97) 8%, rgba(5, 5, 8, .65) 62%, rgba(5, 5, 8, .35)); }
  .hero-content { margin: 0 auto; }
  .hero h1 { font-size: clamp(44px, 15vw, 78px); letter-spacing: -.05em; }
  .hero-copy { font-size: 16px; max-width: 490px; }
  .search-panel { grid-template-columns: 1fr auto; min-height: 0; background: rgba(15, 15, 20, .92); }
  .search-field { height: 66px; border-right: 0; }
  /* Named through the panel, because .search-panel span sets display:flex at
     0,1,1 and these are spans rather than the prototype's buttons. A button
     that cannot be pressed is a worse thing to ship than a longer selector. */
  .search-panel .location-field, .search-panel .date-field { display: none; }
  .search-button { margin: 7px; padding: 0 18px; }
  .search-button span { display: none; }
  .quick-links { overflow: auto; padding-bottom: 5px; }
  /* Hidden, not repositioned. It is a sibling of .hero-content inside a flex
     row, so taking it out of absolute positioning puts it beside the headline
     and squeezes everything. Pinned to the bottom it collided with the
     category pills, because this hero carries two buttons the prototype's did
     not. Nothing is lost: the event it points at is the first card directly
     below. */
  .hero-meta { display: none; }
  .events-section { padding: 72px 0 80px; }
  .event-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -5vw; padding-right: 5vw; }
  .event-card { min-width: 78vw; scroll-snap-align: start; }
  .event-card.feature-card .event-art, .event-art { height: 330px; }
  .organiser-section { grid-template-columns: 1fr; padding-top: 78px; padding-bottom: 78px; }
  .price-card { transform: none; margin-top: 30px; }
  .closing-section { padding: 82px 24px; }
  .foot-links { margin-left: 0; }
  .home-foot small { margin-left: auto; }
}

@media (max-width: 560px) {
  .home-actions { gap: 12px; }
  /* The brand and the create button stop fitting side by side. The button
     stays: the design handover asks for Create an event to be visible on
     mobile, so the brand gives up the room instead. */
  .home-brand { font-size: 17px; gap: 8px; }
  .home-mark { width: 26px; height: 23px; }
  .home-head { padding: 0 16px; }
  .home-head .tt-btn { font-size: 14px; padding: .55rem .8rem !important; min-height: 40px !important; }
  .hero { min-height: 720px; }
  .hero-content { width: 90vw; }
  .hero-copy { margin: 20px 0 24px; }
  .quick-links > span { display: none; }
  .section-heading { align-items: center; }
  .event-card { min-width: 84vw; }
  .organiser-actions { align-items: flex-start; flex-direction: column; }
  .price-card { padding: 20px; }
  .price-compare { gap: 8px; }
  .price-compare .highlight { padding: 14px; }
  .saving { flex-direction: column; gap: 7px; }
  .home-foot { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ---------------------------------------------------------------- links -- */
/* ticket-talkies.css paints every anchor cyan and the browser underlines it.
   That is right for a link inside a sentence and wrong for every composed
   control on this page: a card, a pill, a nav item, a brand mark. The selector
   there is `.tt a`, specificity 0,1,1, so a bare class cannot win and each of
   these has to name the element too.
   Three keep a deliberate colour: the arrow on the text link, the gradient on
   the brand, and the white on the coral search button. */
.tt .home-head a, .tt .home-foot a, .tt .quick-links a, .tt .filter-row a,
.tt .section-controls a, .tt .hero-meta a, .tt a.event-card,
.tt a.search-button, .tt a.text-link, .tt a.ainthinai, .tt a.home-brand {
  color: inherit;
  text-decoration: none;
}
.tt a.search-button { color: #fff; }
.tt .text-link span { color: var(--tt-cyan); }
.tt .home-brand > span > span, .tt .ainthinai span {
  background: var(--tt-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* The one place the design does want an underline, so it is asked for rather
   than inherited from the browser. */
.tt .section-controls a { border-bottom: 1px solid #fff; padding-bottom: 4px; }
.tt .home-foot a:hover, .tt .quick-links a:hover, .tt .filter-row a:hover { color: #fff; }
/* The reset above outranks .filter-row a.active, which sets the dark ink for
   the selected pill. White on white is invisible, so it is restated here at a
   specificity that wins. */
.tt .filter-row a.active { color: #09090c; }

/* Measured, not guessed: at 390px the wordmark ends at 153px and the create
   button starts at 237px, so there is 84px of clear space between them and
   nothing wraps. It only gets tight on a 320px screen. Every other page on the
   site keeps the wordmark at phone width, and the home page is the one a
   stranger lands on first, so it says its own name here too. The footer is
   never affected: it has the whole width to itself. */
@media (max-width: 340px) {
  .home-head .home-brand > span:last-child { display: none; }
}