/* Forbes Lepsi Cesko 2024 - static archive.
   The only hand-written stylesheet in this project. It supplies the few
   declarations the original produced from JavaScript at runtime (framer-motion
   inline transitions, Radix panel sizing) so that the archive can drive the
   same visuals with plain CSS transitions instead of a React runtime. */

/* The original sets html.lenis; keep the document scrollable if the class is
   ever absent, since the base reset pins html/body to height:100%. */
html,
body {
  height: auto;
}

body {
  overflow-x: clip;
}

/* --- Header: hide while scrolling down, reveal while scrolling up --- */
header {
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

header[data-hidden='true'] {
  transform: translateY(-120%);
}

/* --- Mobile menu panel --- */
.lc-menu-links {
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Frosted backdrop the original mounts only while the menu is open. */
.lc-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4999;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.lc-menu-backdrop[data-open='true'] {
  opacity: 1;
  pointer-events: auto;
}

/* --- Scroll-linked pieces --- */
.sc-17e75077-0 {
  will-change: transform;
}

.sc-ePKekS {
  will-change: transform;
}

/* Words of the intro headline light up one by one on scroll. */
.sc-byRegH {
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.sc-byRegH[data-lit='true'] {
  opacity: 1;
}

/* --- Carousels --- */
.sc-fuBaRS,
.sc-gTXUq {
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.lc-article-slide {
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.lc-dragging .sc-fuBaRS,
.lc-dragging .sc-gTXUq,
.lc-dragging .lc-article-slide {
  transition: none;
}

/* --- Partner grid filtering --- */
.lc-hidden {
  display: none !important;
}

/* --- Ticket "what's included" overlay --- */
[data-ticket-detail] {
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Radix collapsible panels: supply the height custom property --- */
[role='region'][data-state='closed'] {
  height: 0;
  overflow: hidden;
}

[role='region'][data-state='open'] {
  height: var(--radix-collapsible-content-height);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Navigation: the original rendered two different nav components and
       switched between them at 80em. The archive ships both and swaps here. --- */
nav[data-nav='mobile'] { display: flex; }
nav[data-nav='desktop'] { display: none; }

@media (min-width: 80em) {
  nav[data-nav='mobile'] { display: none; }
  nav[data-nav='desktop'] { display: grid; }
}

/* --- "Event already happened" dialog -------------------------------------
   The 2024 ticket shop is closed, so every link to it opens this instead.
   Colours, radii and easing are the site's own tokens. --------------------- */
.lc-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(4, 2, 23, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0s linear 0.3s;
}

.lc-modal[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lc-modal__card {
  position: relative;
  width: min(32rem, 100%);
  background: rgb(255, 255, 255);
  border-radius: 1.5rem;
  padding: 3.25rem 1.5rem 2rem;
  text-align: center;
  color: rgb(4, 2, 23);
  transform: scale(0.96) translateY(0.5rem);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 48em) {
  .lc-modal__card { padding: 3.5rem 2.5rem 2.5rem; }
}

.lc-modal[data-open='true'] .lc-modal__card { transform: none; }

.lc-modal__close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 100%;
  cursor: pointer;
  color: rgb(4, 2, 23);
  background-color: rgb(238, 238, 246);
  transition: color 0.2s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.lc-modal__close:hover,
.lc-modal__close:focus-visible {
  color: rgb(255, 255, 255);
  background-color: rgb(19, 15, 255);
}

.lc-modal__close svg { width: 1.25rem; height: 1.25rem; }

.lc-modal__text {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: 0.01em;
  margin-bottom: 2rem;
  text-wrap: balance;
}

@media (min-width: 48em) {
  .lc-modal__text { font-size: 1.25rem; }
}

/* The CTA reuses the site's own gradient-button class for an exact match.
   That button paints its gradient on a ::before at z-index:-1, which would sit
   behind the card's white background — isolate it so the layer stays inside. */
.lc-modal__actions {
  display: flex;
  justify-content: center;
  isolation: isolate;
}

/* --- Hero background ------------------------------------------------------
   The hero was an empty pastel panel. It now carries a Forbes event photo,
   already black and white, so a brand-blue wash tints it without any colour
   clash. The gradient stays light at the top — the header sits over the hero
   and its logo and links are near-black — and deepens toward the bottom so the
   white date/location pills read against it. ------------------------------- */
.lc-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.lc-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(1) contrast(1.04);
}

.lc-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* keep the top pale so the fixed header stays legible */
    linear-gradient(
      180deg,
      rgb(238, 238, 246) 0%,
      rgba(238, 238, 246, 0.86) 9%,
      rgba(238, 238, 246, 0) 34%
    ),
    /* brand wash deepening toward the pills, staying blue rather than black */
    linear-gradient(
      180deg,
      rgba(19, 15, 255, 0) 24%,
      rgba(19, 15, 255, 0.34) 54%,
      rgba(0, 4, 219, 0.7) 82%,
      rgba(0, 4, 219, 0.88) 100%
    );
}

@media (prefers-reduced-motion: no-preference) {
  .lc-hero-media img { will-change: transform; }
}