/* Dip Studio dip-site: blog index + post reading template. */

/* ------------------------------------------------------------- blog index */
.blog-grid { padding-top: 0; }
.blog-grid__inner { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) { .blog-grid__inner { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 4rem); } }
.blog-card { display: grid; gap: 0.8rem; align-content: start; }
.blog-card__media { aspect-ratio: 16 / 10; border: 1px solid var(--hairline); }
.blog-card__media picture { display: block; height: 100%; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-zoom) var(--ease-out); }
@media (hover: hover) { .blog-card:hover .blog-card__media img { transform: scale(1.045); } }
.blog-card__meta { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gray-600); margin-top: 0.4rem; }
.blog-card__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.blog-card .spark-link { justify-self: start; }

/* -------------------------------------------------------------- post page */
/* one reading column for the head, body and back link (launch review 2026-09-04) */
.post { --post-col: calc(64ch + 2 * var(--gutter)); }
.post__head { padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.post__head .container { max-width: var(--post-col); }
.post__date { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gray-600); margin-bottom: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.post__crumb { color: var(--gray-600); padding-block: 0.4rem; margin-block: -0.4rem; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 calc(100% - 0.35rem); transition: background-size 0.4s var(--ease-out); }
.post__crumb:hover, .post__crumb:focus-visible { background-size: 100% 2px; color: var(--ink); }
.post__head h1 { max-width: 22ch; }
.post__hero { margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); max-width: var(--container); padding-inline: var(--gutter); }
.post__hero img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover; }

/* measured reading column with a filled rail at desktop:
   the column centers, images break wider so the rail never reads empty */
.post__body { max-width: var(--post-col); display: grid; gap: 1.35rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 600px) and (max-width: 919.98px) { .post__body { max-width: calc(640px + 2 * var(--gutter)); } }
.post__body p { color: var(--ink); }
.post__body h2 {
  font-size: var(--fs-h3); margin-top: 1.6rem;
  padding-top: 1.6rem; border-top: 1px solid var(--hairline);
}
.post__figure { margin-block: 1.5rem; }
.post__figure img { border-radius: var(--radius); width: 100%; }
@media (min-width: 1120px) {
  .post__figure { --fig-w: min(calc(64ch + 14rem), calc(100vw - 2 * var(--gutter))); width: var(--fig-w); margin-inline: calc((64ch - var(--fig-w)) / 2); }
}
.post__back { max-width: var(--post-col); padding-bottom: clamp(3rem, 6vw, 5rem); }
.post__back .spark-link { padding-block: 0.5rem; background-position: 0 calc(100% - 0.4rem); }