/* Insights post pages (insights/<slug>.html + insights/_template-post.html).
   Shared by every post, so a design change happens here once instead of in each page. */

.post-hero { padding: clamp(100px, 11vw, 150px) 0 60px; position: relative; overflow: hidden; }
.post-hero::before { content:''; position: absolute; inset: 0; background: var(--grad-hero); pointer-events: none; }
.post-meta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.post-hero h1 { font-size: clamp(40px, 6vw, 88px); line-height: 1.05; letter-spacing: -0.02em; max-width: 22ch; text-transform: none; }
.post-hero h1:lang(el) { text-transform: uppercase; } /* Greek: all display headings in capitals (vibrande.css) */
@media (max-width: 480px) { .post-hero h1 { font-size: min(40px, 10.4vw); } }  /* fits 360px (mobile 4.2) */
.post-hero .lead { margin-top: 32px; max-width: 60ch; }
.post-cover { aspect-ratio: 16/9; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--viridian), var(--black)); margin-top: 60px; position: relative; overflow: hidden; }
.post-cover::after { content:''; position: absolute; inset: 0; background: radial-gradient(50% 50% at 30% 40%, rgba(136,208,148,0.4), transparent 70%); }
.post-cover.has-img { background: var(--black-2); }
.post-cover.has-img::after { content: none; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Discreet AI disclosure under the cover, only when the cover image is AI-generated (data-cover="ai") */
.post-cover-note { margin-top: 8px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; color: rgba(124, 138, 126, 0.55); text-align: right; } /* --text-mute at 55%: faint via colour, since .reveal.in resets opacity to 1 */

.post-body { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.post-body > * { min-width: 0; } /* wide tables / long URLs scroll inside, never widen the column */
@media (max-width: 900px) { .post-body { grid-template-columns: 1fr; gap: 32px; } }

/* Author */
.post-author { position: sticky; top: 120px; align-self: flex-start; }
@media (max-width: 900px) { .post-author { position: static; } }
.post-author .label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-mute); text-transform: uppercase; }
.post-author .who { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.post-author .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--de-york), var(--viridian)); }
.post-author .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.post-author .who strong { display: block; font-size: 16px; }
.post-author .who strong a { color: inherit; text-decoration: none; }
.post-author .who strong a:hover { color: var(--de-york); }
.post-author .who span { color: var(--text-mute); font-size: 12px; font-family: var(--f-mono); letter-spacing: 0.04em; }
.post-author p { color: var(--text-dim); font-size: 13px; line-height: 1.55; margin-top: 16px; }
.post-author .share { margin-top: 24px; display: flex; gap: 8px; }
.post-author .share a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: all var(--dur-fast);
}
.post-author .share a:hover,
.post-author .share a.copied { border-color: var(--de-york); color: var(--de-york); }

/* Article body */
.post-content { max-width: 70ch; }
.post-content > * + * { margin-top: 24px; }
.post-content p { color: var(--text-dim); font-size: 18px; line-height: 1.7; }
.post-content p strong { color: var(--text); }
.post-content a { color: var(--de-york); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-content a:hover { text-decoration-thickness: 2px; }
.post-content h2 { font-family: var(--f-display); font-size: 28px; letter-spacing: -0.01em; line-height: 1.15; text-transform: uppercase; margin-top: 56px; }
.post-content h3 { font-family: var(--f-body); font-weight: 600; font-size: 22px; line-height: 1.25; text-transform: none; letter-spacing: 0; margin-top: 36px; }
.post-content ul,
.post-content ol { padding-left: 22px; color: var(--text-dim); font-size: 17px; line-height: 1.7; }
.post-content li + li { margin-top: 8px; }
.post-content li strong { color: var(--text); }
.post-content blockquote {
  border-left: 3px solid var(--de-york);
  padding: 8px 24px;
  color: var(--text);
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.post-content figure { margin: 40px 0; }
.post-content figure img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.post-content figcaption { margin-top: 12px; font-size: 14px; color: var(--text-mute); }
.post-content code { font-family: var(--f-mono); font-size: 14px; background: var(--black-3); padding: 2px 8px; border-radius: 4px; color: var(--de-york); }

/* "In short": the direct answer at the top (what search engines and LLMs lift) */
.post-summary {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(60,124,108,0.14), rgba(4,4,4,0));
}
.post-summary .label { display: block; margin-bottom: 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--de-york); text-transform: uppercase; }
.post-content .post-summary p { color: var(--text); font-size: 18px; }

/* Data tables */
.post-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.post-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post-table th,
.post-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.post-table thead th { font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.post-table td { color: var(--text-dim); line-height: 1.45; }
.post-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.post-table td.num { color: var(--text); font-weight: 600; }
.post-table tbody tr:last-child td { border-bottom: 0; }
.post-content .post-note { font-size: 14px; line-height: 1.5; color: var(--text-mute); margin-top: 12px; }

/* FAQ + sources */
.post-faq h3 { margin-top: 28px; }
.post-faq h3 + p { margin-top: 10px; }
.post-sources ol { font-size: 15px; line-height: 1.55; }
.post-sources li { color: var(--text-mute); }
.post-content .post-sources a { word-break: break-word; }

/* Related posts */
.related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px) { .related { grid-template-columns: 1fr; } }
.related a {
  display: block;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--black-2);
  transition: all var(--dur-md);
  text-decoration: none;
}
.related a:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.related .label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--de-york); text-transform: uppercase; }
.related h3 { font-family: var(--f-body); font-weight: 600; font-size: 18px; line-height: 1.3; text-transform: none; letter-spacing: 0; margin-top: 12px; }