/* [samadhi_library_rail] - library cards on a page outside the library.
 *
 * Tokens and card geometry are deliberately the same values as se-library-vNN.css so a rail on the
 * home page and a card in the library are recognisably the same object. They are re-declared here
 * rather than shared because that stylesheet is machine-scoped to #se-library-root and pulling it in
 * for one strip would import the library's whole reset onto a marketing page.
 *
 * Every selector is under .se-rail. Nothing here leaks out, and the properties the theme is likely
 * to bleed in on (anchor colour and underline, heading margins, img max-width) are all set.
 */
.se-rail {
  --se-ink: #33312e;
  --se-ink-soft: #615c53;
  --se-ink-faint: #948d80;
  --se-paper: #fff;
  --se-border: #e3e0d8;
  --se-orange: #c46a26;
  --se-shadow: 0 1px 2px rgba(51, 49, 46, .04), 0 8px 24px -12px rgba(51, 49, 46, .14);
  --se-rail-cols: 3;
}

.se-rail .se-rail-h {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--se-ink);
}

.se-rail .se-rail-grid {
  display: grid;
  grid-template-columns: repeat(var(--se-rail-cols), minmax(0, 1fr));
  gap: 18px;
}

/* An anchor, so it needs the theme's link styling taken off it explicitly. */
.se-rail a.se-rail-card,
.se-rail a.se-rail-card:hover,
.se-rail a.se-rail-card:focus {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}

.se-rail .se-rail-card {
  display: flex;
  flex-direction: column;
  background: var(--se-paper);
  border: 1.5px solid var(--se-border);
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}

.se-rail .se-rail-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--se-shadow);
  border-color: var(--se-ink-faint);
}

.se-rail .se-rail-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: #f0eee9;
  overflow: hidden;
}

.se-rail .se-rail-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

.se-rail .se-rail-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  padding: 14px 15px 15px;
}

.se-rail .se-rail-meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--se-ink-faint);
}

.se-rail .se-rail-t {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--se-ink);
}

.se-rail .se-rail-b {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--se-ink-soft);
}

.se-rail .se-rail-more {
  margin: 18px 0 0;
}

.se-rail .se-rail-more a {
  font-size: 14px;
  font-weight: 700;
  color: var(--se-orange);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}

/* Editor-only notice for a mistyped type attribute. */
.se-rail-err {
  padding: 10px 14px;
  border: 1.5px dashed #c46a26;
  border-radius: 10px;
  color: #a2551d;
  font-size: 14px;
}

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

@media (max-width: 560px) {
  .se-rail .se-rail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .se-rail .se-rail-h {
    font-size: 22px;
  }

  .se-rail .se-rail-t {
    font-size: 14px;
  }

  /* The blurb is the first thing to go when there is no room for it. */
  .se-rail .se-rail-b {
    display: none;
  }
}