/* ==========================================================================
   home.css — styles only the landing page uses
   ========================================================================== */

.hero {
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 0 64px;
  text-align: center;
}

.hero h1 {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero p {
  max-width: 520px;
  margin: 20px auto 0;
  color: var(--fg-2);
}

.hero-search {
  max-width: 480px;
  margin: 32px auto 0;
}

.hero-search .search-box {
  height: 44px;
  padding: 0 14px;
  gap: 10px;
}

.hero-search .search-box input {
  font-size: 15px;
}

.featured {
  max-width: 880px;
  margin: 0 auto;
}

.featured .chart-plot {
  height: 240px;
}

/* The chart's top row changes with the company, so nothing in it may wrap:
   a longer name must not make the row taller and push the page down */
.featured .chart-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured .chart-link {
  white-space: nowrap;
}

.ticker-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 880px;
  margin: 48px auto 32px;
}

/* A button per company (pressing one switches the chart above), then a
   link to the rest of the companies */
.ticker-pills button,
.ticker-pills a {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 18px;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    color 0.12s;
}

.ticker-pills button:hover {
  background: var(--hover);
  color: var(--fg);
}

/* the company the chart is showing */
.ticker-pills button[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

/* the link is filled in, so it reads as "the rest" and not a 13th company */
.ticker-pills a {
  background: var(--hover);
  color: var(--fg);
}

.ticker-pills a:hover {
  border-color: var(--fg-3);
  text-decoration: none;
}

@media (max-width: 640px) {
  .hero {
    padding: 48px 0 40px;
    text-align: left;
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero p {
    margin-left: 0;
  }

  /* the name on one line, then the tag and the link on the next */
  .featured .chart-top {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .featured .chart-name {
    flex: 0 0 100%;
  }

  .featured .chart-link {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }

  .ticker-pills {
    justify-content: flex-start;
  }
}