/* Frigovin blog — builds on styles.css (tokens, header, buttons, footer). Colours from the v4 palette. */

.blog-page {
  --bg: var(--ivory); --fg-2: var(--warm-2); --line: var(--warm-line);
  background: var(--tex-stone), var(--ivory);
}
.blog-page .nav a[aria-current="page"] { color: var(--fg); }
.blog-page .nav a[aria-current="page"]::after { transform: scaleX(1); }
.blog-page .sheet nav a[aria-current="page"] { color: var(--fg-2); }

/* ---------- Listing ---------- */
.blog-head { padding-top: calc(var(--hdr) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(2rem, 4vw, 3rem); }
.blog-head h1 { font-size: var(--t-h2); }
.blog-lead { margin-top: 1.25rem; max-width: 34rem; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.5; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; font-size: var(--t-sm); color: var(--fg-2); }
.crumbs a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color 200ms ease, color 200ms ease; }
.crumbs a:hover { color: var(--fg); text-decoration-color: currentColor; }

.blog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.blog-filter a {
  padding: 0.55rem 1.1rem; border-radius: 99px; font-size: 0.875rem; font-weight: 500;
  border: 1px solid rgb(98 86 77 / 0.28); color: var(--fg-2);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.blog-filter a:hover { border-color: var(--fg); color: var(--fg); }
.blog-filter a[aria-current="page"] { background: var(--graphite); border-color: var(--graphite); color: var(--ivory); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.post-card { position: relative; border-radius: 4px; background: #e8e0d6; box-shadow: inset 0 0 0 1px rgb(169 154 139 / 0.28); transition: background-color 300ms ease; }
.post-card:hover { background: #e2d8cc; }
.post-card-link { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; min-height: 16rem; padding: clamp(1.5rem, 2.5vw, 2rem); }
.post-card-img {
  display: block; width: calc(100% + 2 * clamp(1.5rem, 2.5vw, 2rem)); max-width: none; height: auto; aspect-ratio: 760 / 504; object-fit: cover;
  margin: calc(-1 * clamp(1.5rem, 2.5vw, 2rem)) calc(-1 * clamp(1.5rem, 2.5vw, 2rem)) 0.35rem; border-radius: 4px 4px 0 0;
}
.post-card-title { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.post-card-desc { color: var(--fg-2); font-size: 0.9875rem; }
.post-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; }
.post-card-more svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 300ms var(--ease-out); }
.post-card:hover .post-card-more svg { transform: translateX(3px); }
.post-card-link:focus-visible { outline-offset: -4px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: var(--t-sm); color: var(--fg-2); }
.post-meta .post-cat { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; font-weight: 500; }
.draft-tag { position: absolute; top: 1rem; right: 1rem; padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.75rem; font-weight: 500; background: var(--graphite); color: var(--ivory); }

.blog-empty { padding: 2.5rem 0 1rem; color: var(--fg-2); font-size: var(--t-lead); max-width: 34rem; }

.blog-cta, .related { position: relative; margin-top: clamp(4rem, 8vw, 6.5rem); padding-top: 2rem; }
.blog-cta::before, .related::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.blog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(4rem, 8vw, 6rem); }
.blog-cta p { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 300; letter-spacing: -0.015em; }
.related { margin-bottom: clamp(4rem, 8vw, 6rem); }
.related h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.related .post-card-title { font-size: 1.3125rem; }

/* ---------- Article ---------- */
.post { padding-top: calc(var(--hdr) + clamp(2.5rem, 6vw, 5rem)); }
/* One centred reading column: head, body and call to action share the same axis */
.post-head, .post-body, .post-cta { max-width: 44rem; margin-inline: auto; }
.post-head h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); }
.post-lead { margin-top: 1.25rem; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.5; max-width: 40rem; }
.post-head .post-meta { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* Cover: wider than the text column, always captioned as an illustration */
.post-cover { max-width: 58rem; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.post-cover img { width: 100%; height: auto; aspect-ratio: 760 / 504; object-fit: cover; border-radius: 4px; }
.post-cover figcaption { margin-top: 0.6rem; font-size: 0.75rem; color: var(--fg-2); letter-spacing: 0.04em; text-transform: uppercase; }
.post-body { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: 1.125rem; line-height: 1.75; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; margin-top: 2.2em; }
.post-body h3 { font-size: 1.25rem; font-weight: 500; margin-top: 1.8em; }
.post-body h2 + *, .post-body h3 + * { margin-top: 0.6em; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: 0.4em; }
.post-body li::marker { color: var(--taupe); }
.post-body a { text-decoration: underline; text-decoration-color: var(--taupe); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 200ms ease; }
.post-body a:hover { text-decoration-color: currentColor; }
.post-body strong { font-weight: 500; }
.post-body blockquote { margin: 1.6em 0 0; padding: 0.2em 0 0.2em 1.25rem; border-left: 1px solid var(--umber); color: var(--fg-2); }
.post-table { overflow-x: auto; margin-top: 1.5em; }
.post-table table { width: 100%; border-collapse: collapse; font-size: 0.9875rem; line-height: 1.5; }
.post-table th, .post-table td { text-align: left; vertical-align: top; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid rgb(169 154 139 / 0.42); }
.post-table thead th { border-bottom-color: var(--fg); font-weight: 500; font-size: var(--t-sm); }
.post-table tbody th { font-weight: 400; }
.post-table td { color: var(--fg-2); }

.post-cta {
  margin-top: clamp(3rem, 6vw, 4rem); padding: 1.75rem 2rem 2rem; border-radius: 14px;
  background: #e6dcd0; box-shadow: inset 0 0 0 1px rgb(169 154 139 / 0.32);
}
.post-cta-kicker { font-size: var(--t-sm); color: var(--fg-2); }
.post-cta-kicker::before { content: ""; display: block; width: 2.75rem; height: 1px; background: var(--umber); margin-bottom: 1rem; }
.post-cta-line { margin-top: 0.6rem; }
.post-cta-line a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--taupe); text-underline-offset: 0.2em; }
.post-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }

/* Preview builds only */
body:has(.draft-bar) { padding-bottom: 2.75rem; }
.draft-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0.6rem var(--gutter); text-align: center; font-size: var(--t-sm); background: var(--graphite); color: var(--ivory); }

@media (max-width: 600px) {
  .post-body { font-size: 1.0625rem; }
  .post-cta { padding: 1.5rem 1.25rem 1.75rem; }
  .post-card-link { min-height: 0; }
}