/* ==========================================================================
   Post cards — The Sri COM
   --------------------------------------------------------------------------
   The tiles were image + meta + title floating on the page background, which
   read as a list rather than a set of cards. This gives each one a real card:
   a border, a surface, rounded corners and internal padding.

   Applies to the home grid and the "More in ..." related grid, both of which
   use partials/post-tile.hbs.
   ========================================================================== */

.post-tile {
  --card-surface: #ffffff;
  --card-line: #e2e8f2;
  --card-line-hover: #2475e8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 10px 16px;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  background: var(--card-surface);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

html[data-theme="dark"] .post-tile {
  --card-surface: #16161a;
  --card-line: rgba(255, 255, 255, .10);
}

.post-tile:hover {
  border-color: var(--card-line-hover);
  box-shadow: 0 14px 34px rgba(18, 34, 62, .12);
  transform: translateY(-3px);
}

html[data-theme="dark"] .post-tile:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

/* The image sits inside the padding, so its corners tuck under the card's. */
.post-tile .post-tile-image {
  border-radius: 11px;
}

.post-tile .post-tile-copy {
  padding: 0 6px;
}

.post-tile .post-tile-copy .story-meta {
  margin-top: 13px;
}

/* Push the title block to fill, so cards in a row end level. */
.post-tile .post-tile-copy h3 {
  margin-bottom: 0;
}

@media (max-width: 650px) {
  .post-tile {
    padding: 9px 9px 14px;
    border-radius: 14px;
  }

  .post-tile .post-tile-copy { padding: 0 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .post-tile,
  .post-tile:hover { transition: none; transform: none; }
}