/*
 * Aperina «مجله» — the post card (template-parts/blog/card.php) and the grid it sits in.
 *
 * Self-contained on purpose: the homepage rail «از مجله» loads this sheet and nothing else of the
 * blog, so everything a card needs to look right is here — the meta hairline included.
 * Role and scale tokens only, logical properties only.
 *
 * Variants: card (photo 3:2 over the words) · lead (photo 16:9, display title) · compact (words only)
 * · row (one line of an index, a small photo at its end).
 * A post without a photo is a text card: a hairline where the photo would be, and a larger title so
 * the words carry the space the picture would have.
 */

/* =========================================================
   Meta line — the one separator the blog uses
   -----------------------------------------------------------------
   A thin upright hairline between the parts, never «·», «•» or «|»:
   beside Persian digits a middle dot is read as the digit «۰».
   ========================================================= */
.blog-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; }
/* It trails the part it belongs to rather than leading the next one: a row that wraps then ends a
   line with the hairline instead of starting the next line with one. */
.blog-meta > *:not(:last-child)::after {
  content: ""; display: inline-block; width: 1px; height: 0.9em;
  margin-inline-start: var(--space-3); background: var(--border-strong); vertical-align: -0.1em;
}

/* =========================================================
   Card
   ========================================================= */
.blog-card { display: grid; align-content: start; gap: var(--space-4); min-width: 0; }

/* Square corners: a photograph in a magazine is a print, not a button. */
.blog-card__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-sunken); }
.blog-card__media img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: opacity var(--dur-base) var(--ease-out);
}
.blog-card:hover .blog-card__media img { opacity: 0.88; }

.blog-card__body { display: grid; justify-items: start; gap: var(--space-2); min-width: 0; }

.blog-card__kicker {
  font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 500;
  color: var(--text-muted); text-decoration: none;
}
.blog-card__kicker:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }

/* 500, not 600: the titles belong to the same family voice as the ExtraLight headlines above them. */
.blog-card__title { margin: 0; font-size: var(--text-title); font-weight: 500; line-height: var(--lh-title); text-wrap: balance; }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.blog-card__title a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.blog-card__excerpt {
  margin: 0; color: var(--text-muted); font-size: var(--text-small); line-height: var(--lh-small);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.blog-card__meta { color: var(--text-muted); }
.blog-card__meta time { color: inherit; }

/* No photo: a hairline in its place, and the title a step larger, so the card is not a smaller
   version of its neighbours but a different, deliberate kind of item. */
.blog-card--card.blog-card--text { padding-block-start: var(--space-5); border-block-start: 1px solid var(--border-strong); }
.blog-card--card.blog-card--text .blog-card__title { font-size: var(--text-h3); font-weight: 400; line-height: var(--lh-h3); }
.blog-card--card.blog-card--text .blog-card__excerpt { -webkit-line-clamp: 5; }

/* =========================================================
   Compact — words only
   ========================================================= */
.blog-card--compact { gap: 0; }
.blog-card--compact .blog-card__title { font-size: var(--text-title); font-weight: 500; line-height: var(--lh-title); }
.blog-card--compact .blog-card__excerpt { -webkit-line-clamp: 2; }

/* =========================================================
   Row — one line of an index
   -----------------------------------------------------------------
   Phone and tablet: the words, and a small photo at the end of the row.
   From 1024 three columns — where and when | what | the photo — so
   the titles of a whole page of rows stand on one edge.
   A post without a photo leaves its photo column empty rather than
   letting its title start somewhere else.
   ========================================================= */
.blog-card--row {
  grid-template-columns: minmax(0, 1fr) 120px;
  grid-template-areas: "kicker media" "title media" "excerpt media" "meta media";
  column-gap: var(--space-4); row-gap: var(--space-1); align-items: start;
}
.blog-card--row .blog-card__body { display: contents; }
.blog-card--row .blog-card__media { grid-area: media; }
.blog-card--row .blog-card__kicker { grid-area: kicker; justify-self: start; }
.blog-card--row .blog-card__title { grid-area: title; font-size: var(--text-title); font-weight: 500; line-height: var(--lh-title); }
.blog-card--row .blog-card__excerpt { grid-area: excerpt; -webkit-line-clamp: 2; }
.blog-card--row .blog-card__meta { grid-area: meta; margin-block-start: var(--space-1); }
/* On a phone the excerpt is the first thing to go: title, then when, is what a list is scanned for. */
@media (max-width: 639px) {
  .blog-card--row .blog-card__excerpt { display: none; }
}
@media (max-width: 1023px) {
  .blog-card--row.blog-card--text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "excerpt" "meta"; }
}
@media (min-width: 640px) {
  .blog-card--row { grid-template-columns: minmax(0, 1fr) 200px; column-gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .blog-card--row {
    grid-template-columns: 12rem minmax(0, 1fr) 280px;
    grid-template-areas: "kicker title media" "meta excerpt media" ". . media";
    column-gap: var(--space-10); row-gap: var(--space-2);
  }
  .blog-card--row .blog-card__title { max-inline-size: 26em; font-size: var(--text-h3); font-weight: 400; line-height: var(--lh-h3); }
  .blog-card--row .blog-card__excerpt { max-inline-size: 40em; font-size: var(--text-body); line-height: var(--lh-body); }
  .blog-card--row .blog-card__kicker { padding-block-start: 0.4em; }
  /* Beside the title the meta stacks — author, date, time — one to a line, without hairlines. */
  .blog-card--row .blog-card__meta { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
  .blog-card--row .blog-card__meta > *::after { content: none !important; }
}

/* =========================================================
   Lead — the story that opens page one
   -----------------------------------------------------------------
   SIZE carries the hierarchy, not weight: ExtraLight at the display
   scale, the ink of the page.
   ========================================================= */
.blog-card--lead { gap: var(--space-5); }
.blog-card--lead .blog-card__media { aspect-ratio: 16 / 9; }
.blog-card--lead .blog-card__body { gap: var(--space-3); }
.blog-card--lead .blog-card__title {
  font-size: var(--text-h2); font-weight: 200; line-height: var(--lh-h2);
  color: var(--text); text-wrap: balance;
}
.blog-card--lead .blog-card__excerpt {
  max-inline-size: 38em; color: var(--text-muted);
  font-size: var(--text-body); line-height: var(--lh-body); -webkit-line-clamp: 4;
}
@media (min-width: 1024px) {
  .blog-card--lead .blog-card__title { font-size: var(--text-h1); line-height: var(--lh-h1); }
}

/* =========================================================
   Grid — 1 / 2 / 3 columns on a hairline
   ========================================================= */
.blog-grid {
  list-style: none; margin: 0; padding: 0;
  padding-block-start: var(--space-8); border-block-start: 1px solid var(--divider);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10);
}
.blog-grid > li { display: grid; min-width: 0; }

@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); }
}
@media (min-width: 768px) {
  .blog-grid { padding-block-start: var(--space-10); }
}
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__media img { transition: none; }
}