/* Reading room: the three article cards under the Book a Demo call to action on the
   signed out home page. Kept in its own file so nothing here can reach any other page.
   The type scale and card treatment deliberately match .fcard in main.css. */

.articles-section {
  background: #fff;
  border-top: 1px solid #e8eef6;
  padding: 72px 48px;
}

.articles-inner {
  max-width: 1040px;
  margin: 0 auto;
}

.articles-head {
  text-align: center;
  margin-bottom: 34px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.acard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 26px;
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}

.acard:hover,
.acard:focus-visible {
  border-color: #bfd3f5;
  box-shadow: 0 6px 20px rgba(15, 34, 65, 0.08);
  transform: translateY(-2px);
}

.acard .who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #2563eb;
  margin: 0 0 14px;
}

/* Same type as .fcard h3 in main.css, so these titles read as the site's card titles and
   not as something borrowed. The fixed two line block keeps the description, the word count
   and the link on the same baseline across all three cards, however long a headline runs. */
.acard h3 {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #0f2241;
  margin: 0 0 10px;
  min-height: 3em;
}

.acard p {
  font-size: 13px;
  line-height: 1.65;
  color: #64748b;
  margin: 0 0 18px;
}

.acard .meta {
  font-size: 12px;
  color: #94a3b8;
  margin: auto 0 12px;
}

.acard .go {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
}

.acard .go span {
  transition: margin-left 0.15s;
}

.acard:hover .go span {
  margin-left: 5px;
}

@media (max-width: 900px) {
  .articles-section {
    padding: 56px 24px;
  }
  .articles-grid {
    grid-template-columns: 1fr;
  }
  .acard h3 {
    min-height: 0;
  }
  .acard .meta {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acard,
  .acard .go span {
    transition: none;
  }
  .acard:hover,
  .acard:focus-visible {
    transform: none;
  }
}