/* The blog (TAP-481), on top of /site/tapas.css, which owns the tokens, the header and footer and
   the reading type (.tc-prose). This file lays out only the blog's own pieces: the index with its
   featured post and grid, the covers, and the article's head, byline and closing sections. */

/* ---- index ---- */
.bl-head { margin-bottom: var(--s5); }
.bl-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--s7); }
.bl-filters .tc-chips { margin-top: 0; }
.bl-rss { font: 500 var(--type-sm); color: var(--ink-2); text-decoration: none; }
.bl-rss:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Covers: the post's share card, or the title set in type on the accent wash, edged with the
   card hairline so a light cover never melts into the white page. */
.bl-cover { position: relative; display: block; overflow: hidden; border-radius: var(--r-img); aspect-ratio: 1200 / 630; background: var(--bg-raised); border: 1px solid var(--line-strong); }
.bl-cover-card img { width: 100%; height: 100%; object-fit: cover; }
.bl-cover-type { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 7% 8%; background: var(--accent-wash-2); }
.bl-cover-kicker { font: 600 var(--type-sm); color: var(--accent); }
.bl-cover-title { font: 700 var(--type-xl); letter-spacing: -0.01em; text-wrap: balance; }
.bl-featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; text-decoration: none; color: inherit; }
.bl-featured-text { display: flex; flex-direction: column; gap: 14px; }
.bl-featured-title { font: 700 var(--type-3xl); letter-spacing: -0.02em; text-wrap: pretty; }
.bl-featured-dek { font: 400 var(--type-md); color: var(--ink-2); max-width: 34em; }
.bl-featured .tc-more { margin-top: 4px; }
.bl-featured:hover .bl-featured-title, .bl-card a:hover .bl-card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(26, 20, 22, 0.35); }

/* The index is set as type, NYT Cooking's "latest" rows: each post opens under the heavy rule. The
   covers are the share cards, which only repeat the title beside it, so the index does not show
   them (a post with its own photograph is the time to bring a picture back). */
.bl-featured .bl-cover, .bl-card .bl-cover { display: none; }
.bl-featured { grid-template-columns: minmax(0, 760px); padding-top: 14px; border-top: 3px solid var(--ink); }
.bl-card a { padding-top: 14px; border-top: 3px solid var(--ink); }
.bl-grid { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s6); }
.bl-card a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.bl-card .bl-cover { margin-bottom: 8px; }
.bl-card-title { font: 600 var(--type-xl); letter-spacing: -0.01em; text-wrap: pretty; }
.bl-card-dek { color: var(--ink-2); font: 400 var(--type-md); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-empty { color: var(--ink-2); }

@media (max-width: 900px) {
  .bl-featured { grid-template-columns: 1fr; gap: var(--s5); }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bl-grid { grid-template-columns: 1fr; margin-top: var(--s7); gap: var(--s6); }
}

/* ---- article ---- */
.bl-post-head { max-width: 760px; margin: 0 auto var(--s7); }
.bl-post-head .tc-crumbs { margin-bottom: var(--s5); }
.bl-post-head h1 { font: 700 var(--type-3xl); letter-spacing: -0.02em; }
.bl-byline { display: flex; align-items: center; gap: 12px; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.bl-byline img { width: 32px; height: 32px; }
.bl-byline > span { display: flex; flex-direction: column; gap: 2px; }
.bl-author { font: 600 var(--type-sm); }
.bl-hero { max-width: 960px; margin: 0 auto var(--s7); }
.bl-hero img { width: 100%; border-radius: var(--r-img); }
/* One 760 column, centred; the head uses all of it and the body keeps to the prose measure inside
   it, so both share a left edge. */
.bl-post { max-width: 760px; margin-inline: auto; }
.bl-post-head { margin-inline: 0; }
.bl-body { max-width: var(--prose); }
.bl-body .tc-table { max-width: 760px; }
/* App screenshots (docs/STORE_ART.md, "Screenshots on the site and in demos"). A whole screen is
   shown at 300px with the home page's phone corner, 14% of its width, which is circular only on
   the full 1320 x 2868 aspect (6.44% = 14% x 1320/2868). A component lifted out of a screen (file
   name ends in -crop) is a different thing: it gets a 16px frame, and its export pads it to clear
   that by 24px, so it never borrows a device corner it does not have. */
.bl-body p > img { display: block; margin: 8px auto; width: min(100%, 300px); height: auto; border-radius: 14% / 6.44%; border: 1px solid var(--line-strong); }
.bl-body p > img[src$="-crop.jpg"] { width: min(100%, 340px); border-radius: var(--r-lg); }
.bl-body p:has(> img:only-child) { margin-block: 2em; }
.bl-body .tc-table { margin-block: 1.6em; }
.bl-body .tc-table td:first-child { font-weight: 600; }
.bl-body .tc-table + p, .bl-body .bl-rowcards + p { font: 400 var(--type-sm); color: var(--ink-3); }
.bl-appcard { max-width: 760px; margin: var(--s8) auto 0; }
.bl-more { margin-top: var(--s9); }
.bl-more .bl-grid { margin-top: var(--s5); padding-top: 0; border-top: 0; }
@media (min-width: 1100px) { .bl-more .bl-grid { gap: var(--s6); } }

.draft-flag { max-width: 760px; margin: 0 auto var(--s5); background: #FBF0DC; color: #6B4A12; border-radius: var(--r-sm); padding: 10px 14px; font: 400 var(--type-sm); }
.draft-tag { color: var(--marker); font-weight: 600; }
/* Comparison tables as cards below 640px: one card per row (blog.ts framedTables). */
.bl-rowcards { display: none; }
@media (max-width: 639px) {
  .bl-body .bl-has-cards { display: none; }
  .bl-rowcards { display: grid; gap: 12px; margin-block: 1.6em; }
  .bl-rowcard { background: var(--surface); border-radius: var(--r-img); padding: 16px 18px; border: 1px solid var(--line-strong); font: 400 var(--type-sm); }
  .bl-rowcard-k { font: 600 var(--type-md); color: var(--ink); }
  .bl-rowcard dl { margin: 10px 0 0; display: grid; gap: 10px; }
  .bl-rowcard dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  .bl-rowcard dt { font-weight: 600; color: var(--ink-3); }
  .bl-rowcard dd { margin: 0; color: var(--ink-2); }
  .bl-body .tc-table table { min-width: 560px; }
}