/* GoTo Player blog: the list of posts (/blog/) and the posts (12 Nov 2026).
   Loaded after /assets/home-b.css and /assets/pages-b.css. Those two files give the tokens, the header and footer,
   buttons, cards, the ticket, the device frames, the feature list, the FAQ boxes, the closing band, the notice,
   the page title block, the jump list, numbered steps, reading text, phone pictures and the two-column layout.
   This file adds only what the blog needs on top: the breadcrumb, the post title block with its byline,
   the post cards, wide app pictures, the call-to-action card and a few small layouts.
   Phone first: the base rules are for 360 px, then 600 px and 900 px. No fixed heights around text.
   When this file changes, raise the number in /assets/blog.css?v=N on every blog page at once. */

/* ---------- Breadcrumb: Home, Blog, this post. Always one line; a long title ends in "…" ---------- */
.crumbs { width: 100%; min-width: 0; }
.crumbs ol { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.crumbs li { display: flex; flex: none; align-items: center; min-width: 0; }
.crumbs li + li::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 1px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); }   /* a small arrow between the parts */
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; color: var(--muted); }   /* "Blog" is about 44 px wide: never less */
.crumbs .crumb-here { flex: 0 1 auto; }
.crumb-here span { min-width: 0; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Post title block: breadcrumb, title, byline, lead, jump list ---------- */
.post-hero { padding-top: 8px; }
.post-hero h1 { max-width: 17em; margin-top: 4px; font-size: clamp(1.625rem, 7.4vw, 2.125rem); }   /* a post title is longer than a page title */
.byline { margin-top: 12px; color: var(--muted); font-size: .875rem; line-height: 1.5; text-wrap: balance; }

/* ---------- Small pieces inside a post ---------- */
.howto + .after { margin-top: 16px; }
.tip { max-width: 44rem; margin: 16px auto 0; }                                             /* a card with one tip, under a list of steps */
.parts { justify-content: center; max-width: var(--measure); margin: 16px auto 0; }         /* the three parts of a login, as chips */
.feats-2 { margin-top: 24px; }                                                              /* a list of four: two in a row from 600 px */

/* ---------- Wide app pictures (Windows and TV screens are 16 to 9) ---------- */
.screen { width: 100%; min-width: 0; padding: 3px; border-radius: 12px; background: #1c2327; box-shadow: 0 0 0 1px #3a454b, 0 14px 28px rgba(0, 0, 0, .55); }
.screen img { display: block; width: 100%; border-radius: 9px; }
/* One laptop: the screen and the base are the home page's .dev-screen and .dev-base. The base is 10% wider than
   the screen, so the laptop takes 88% of the column and the base never touches the edge of the phone. */
.pc { width: 88%; max-width: 480px; min-width: 0; }
.post-pc { padding-top: 8px; background: radial-gradient(60% 64% at 50% 50%, rgba(200, 245, 106, .13), transparent 72%); }
/* Three screens: one wide and two small on phones, one row of three from 600 px */
.trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; min-width: 0; }
.trio > :first-child { grid-column: 1 / -1; }
.post-shots { margin-top: 24px; }
/* The home page's device picture with a TV in the middle, inside a figure with a caption */
.shots-fig .lineup { width: 100%; margin-bottom: 0; }
.lineup .dev-tv { flex: 0 0 60%; min-width: 0; }

/* ---------- Call-to-action: one per post. A lime-edged card (Windows) or the code ticket (TV) ---------- */
.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 44rem; min-width: 0; margin: 24px auto 0; text-align: center; }
.cta h3 { font-size: 1.25rem; line-height: 1.25; text-wrap: balance; }
.cta-line { max-width: 34rem; color: var(--muted); font-size: 1rem; line-height: 1.5; text-wrap: balance; }   /* never wider than the ticket under it */
.cta-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.cta-box { padding: 24px 16px; border: 1px solid var(--lime-edge); border-radius: var(--radius); background: linear-gradient(160deg, rgba(200, 245, 106, .1), rgba(200, 245, 106, 0) 60%), var(--surface); }
.cta .store-badge { flex: none; }
.cta .ticket { margin-top: 4px; }

/* ---------- Post cards: the list on /blog/ ---------- */
.blog-list { padding-top: 0; }
.posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.posts > li { display: flex; min-width: 0; }
.post-card { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; overflow: hidden; }
.post-pic { display: block; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--border); background: #000; overflow: hidden; }
.post-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; }
.post-title { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.post-title a { color: var(--text); text-decoration: none; }
/* The whole card is the link: the title's link is stretched over it */
.post-title a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius); }
.post-title a:focus-visible { outline: none; }
.post-title a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; }
.post-line { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.post-meta .i, .more-link > .i { color: var(--accent); }
.post-card:active { border-color: var(--lime-edge); }

/* ---------- "More from the blog": two slim cards at the end of a post ---------- */
.more-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 56rem; margin: 0 auto; }
.more-links > li { display: flex; min-width: 0; }
.more-link { flex-direction: row; align-items: center; gap: 12px; padding: 16px; }
.more-link .post-body { gap: 4px; padding: 0; }
.more-link .post-title { font-size: 1.125rem; }

/* ---------- From 600 px ---------- */
@media (min-width: 600px) {
  .post-hero { padding-top: 24px; }
  .post-hero h1 { font-size: 2.5rem; }
  .byline { font-size: .9375rem; }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .trio > :first-child { grid-column: auto; }
  .cta-box { padding: 24px; }
  .cta-row { flex-direction: row; justify-content: space-between; gap: 24px; text-align: left; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-body { padding: 20px; }
  .more-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .more-link { padding: 20px; }
}

/* ---------- From 900 px ---------- */
@media (min-width: 900px) {
  .post-hero { padding-top: 32px; }
  .post-hero h1 { font-size: 2.75rem; }
  /* a post has three questions: one column reads better than two */
  .post .faq { grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 42rem; margin: 0 auto; }
  .feats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; margin-left: auto; margin-right: auto; }
  /* The list: two big cards while there are one or two posts, three in a row from the third post on */
  .posts { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .posts > li { grid-column: span 3; }
  .posts > li:first-child:nth-last-child(n+3), .posts > li:first-child:nth-last-child(n+3) ~ li { grid-column: span 2; }
}

/* ---------- Hover (mouse only) ---------- */
@media (hover: hover) {
  .crumbs a:hover { color: var(--text); }
  .post-card:hover { border-color: var(--lime-edge); }
  .post-card:hover .post-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}

/* ---------- Motion: small and calm, only for people who have not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  .crumbs a, .post-card { transition: border-color .15s ease, color .15s ease; }
}