/* ==========================================================================
   Event page: Live Pitch Event, July 29, 2026 (/event/2026-07-29/)
   --------------------------------------------------------------------------
   Contents
     1. Page tokens and helpers
     2. Hero
     3. Key facts
     4. Why this event
     5. Hosts
     6. Founders
   ========================================================================== */


/* 1. Page tokens and helpers -------------------------------------------- */

:root {
  --event-max: 1200px;              /* content width of this page */
  --event-text-soft: #4a4d53;       /* running text inside cards */
  --event-text-faint: #9a9da3;      /* labels and roles */
  --event-stage-scale: #b7e8ce;     /* "Scale stage" pill */
  --event-stage-mvp: #bfe0ff;       /* "MVP stage" pill */
  --color-linkedin: #0a66c2;
}

.container--event {
  max-width: calc(var(--event-max) + 2 * var(--gutter));
}

/* Section headings ("Your hosts", "Meet the founders") */
.event-heading {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Small link with an icon in front (Website, LinkedIn) */
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.2s;
}

.icon-link:hover {
  color: var(--color-red-text);
}

.icon-link__icon {
  flex: 0 0 auto;
}

.icon-link__icon--linkedin {
  fill: var(--color-linkedin);
}


/* 2. Hero ----------------------------------------------------------------
   Full-width red band. The artwork (rocket on red) fills the band and is
   anchored right, so the plain red left part sits behind the text. On small
   screens the text comes first and the rocket is shown underneath it. */

.event-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-red-bright);
  color: var(--color-white);
}

.event-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  animation: event-hero-zoom 1.6s var(--ease-out) both;
}

.event-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 38vw, 600px);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.event-hero__content {
  max-width: 30rem;
}

.event-hero__title {
  margin-bottom: 1rem;
  font-weight: 700;
  animation: event-rise-in 1s 0.15s var(--ease-out) both;
}

.event-hero__lead {
  margin-bottom: 2rem;
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: 1.4;
  animation: event-rise-in 1s 0.3s var(--ease-out) both;
}

/* Date chip */
.event-hero__date {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / 0.28);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  animation: event-rise-in 1s 0.45s var(--ease-out) both;
}

.event-hero__date-icon {
  flex: 0 0 auto;
}

/* Registration buttons (currently commented out in the page) */
.event-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

@keyframes event-hero-zoom {
  from {
    transform: scale(1.06);
  }
}

@keyframes event-rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@media (max-width: 960px) {
  .event-hero {
    display: flex;
    flex-direction: column;
  }

  .event-hero__inner {
    min-height: 0;
    padding-bottom: 0;
  }

  /* The artwork becomes a block under the text, cropped to the rocket. */
  .event-hero__art {
    position: static;
    order: 2;
    height: auto;
    aspect-ratio: 5 / 4;
    object-position: 92% center;
  }
}


/* 3. Key facts (date, time, format, where) ------------------------------ */

/* The facts, the "why" block and the sections below all use the page's
   section padding, so the spacing is the same all down the page. */
.event-facts-section {
  padding-top: var(--section-sm);
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin: 0;
  padding-bottom: var(--section-sm);
  border-bottom: 1px solid var(--color-line);
}

.event-facts__label {
  margin-bottom: 0.5rem;
  color: var(--event-text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-facts__value {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.event-facts__sub {
  color: var(--color-muted);
  font-weight: 500;
}


/* 4. Why this event ----------------------------------------------------- */

.event-why {
  padding-block: var(--section-sm);
}

.event-why__title {
  margin-bottom: 1.5rem;
  font-weight: 700;
}


/* 5. Hosts -------------------------------------------------------------- */

.event-hosts .event-heading {
  margin-bottom: 2.5rem;
}

.hosts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.host {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--color-white);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.host:hover {
  box-shadow: 0 20px 40px -28px rgb(0 0 0 / 0.35);
  transform: translateY(-4px);
}

.host__photo {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-red-bright);
  object-fit: cover;
}

.host__name {
  color: var(--color-ink);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.host__role {
  margin: 0.15rem 0 0.65rem;
  color: var(--color-red-bright);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.host__bio {
  margin-bottom: 0.75rem;
  color: var(--event-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

@media (max-width: 420px) {
  .host {
    flex-direction: column;
  }
}


/* 6. Founders ----------------------------------------------------------- */

.event-founders__header {
  margin-bottom: 2.75rem;
}

.event-founders__header .event-heading {
  margin-bottom: 0.75rem;
}

.event-founders__intro {
  color: var(--color-muted);
  font-size: 1.0625rem;
}

/* Three columns, two on tablets, one on phones */
.founders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

@media (max-width: 900px) {
  .founders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .founders {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.founder-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.founder-card:hover {
  box-shadow: 0 24px 44px -30px rgb(0 0 0 / 0.4);
  transform: translateY(-4px);
}

.founder-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-red-bright);
  object-fit: cover;
}

.founder-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.375rem 1.375rem 1.5rem;
}

.founder-card__company {
  margin-bottom: 0.4rem;
  color: var(--color-red-bright);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.founder-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.founder-card__country {
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.founder-card__name {
  margin-bottom: 0.1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.founder-card__role {
  margin-bottom: 0.75rem;
  color: var(--event-text-faint);
  font-size: 0.8125rem;
  font-weight: 600;
}

.founder-card__text {
  flex: 1;
  margin-bottom: 1rem;
  color: var(--event-text-soft);
  font-size: 0.90625rem;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.founder-card__links {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding-top: 0.25rem;
}

.founder-card__docs {
  display: flex;
  gap: 0.5rem;
}

/* Stage pill */
.stage {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stage--scale {
  background: var(--event-stage-scale);
}

.stage--mvp {
  background: var(--event-stage-mvp);
}

/* One Pager / Pitch Deck: two equal outlined buttons */
.doc-button {
  flex: 1;
  padding: 0.65rem 0.5rem;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.doc-button:hover {
  border-color: var(--color-red-button-bright);
  background: var(--color-red-button-bright);
  color: var(--color-white);
}