/* 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;
}

/* A fixed three line title 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: 19px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f2241;
  margin: 0 0 10px;
  min-height: 3.9em;
}

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

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

.acard .go {
  font-size: 14px;
  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;
  }
}