/* ============================================================
   Blog — one template for every post. Shared header, footer and
   buttons live in styles.css.
   ============================================================ */

.post-page { background: #F8F6F0; color: #1B2A4A; padding: 108px 24px 100px; }
.post-wrap { max-width: 880px; margin: 0 auto; }

/* Blog header: the picture, the date, the title, the author row */
.post-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 60% at 12% 80%, rgba(255,107,43,0.35) 0%, rgba(255,107,43,0) 70%),
    radial-gradient(ellipse 45% 60% at 90% 15%, rgba(124,58,237,0.32) 0%, rgba(124,58,237,0) 70%),
    linear-gradient(135deg, #FBE9DC 0%, #EFE6FB 100%);
  box-shadow: 0 30px 80px rgba(27,42,74,0.12), 0 4px 16px rgba(27,42,74,0.05);
  margin-bottom: 28px;
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-hero .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(27,42,74,0.45);
}
.post-date { font-size: 0.82rem; font-weight: 600; color: #7F8A9E; margin: 0 0 12px; }
.post-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  max-width: 20ch;
}
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 44px; font-size: 0.86rem; font-weight: 700; color: #3C4A66; }
.post-author { display: inline-flex; align-items: center; gap: 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #FF6B2B, #7C3AED);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8rem; font-weight: 800;
}
.post-read { display: inline-flex; align-items: center; gap: 6px; color: #5F6B80; }
.post-read svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The reading column */
.post-body { max-width: 720px; }
.post-body p { font-size: 1.1rem; line-height: 1.75; color: #2A3752; margin: 0 0 22px; }
.post-body .lead { font-size: 1.22rem; line-height: 1.65; color: #1B2A4A; font-weight: 500; }
.post-body h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 52px 0 18px; }
.post-body h3 { font-size: 1.15rem; font-weight: 800; margin: 30px 0 8px; color: #1B2A4A; }
.post-body h3 .n { color: #FF6B2B; margin-right: 6px; }
.post-body p b { color: #1B2A4A; font-weight: 800; }
.post-figure {
  margin: 36px 0;
  aspect-ratio: 16 / 6;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #EEF1F7 0%, #F3EDE2 100%);
  box-shadow: 0 20px 50px rgba(27,42,74,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(27,42,74,0.4);
}
.post-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* More posts */
.more-posts { margin-top: 80px; }
.more-posts h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 24px; }
.post-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.post-card {
  display: block;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(27,42,74,0.10), 0 4px 16px rgba(27,42,74,0.04);
  color: #1B2A4A;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 36px 90px rgba(27,42,74,0.14), 0 6px 18px rgba(27,42,74,0.06); }
.post-card .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #FBE9DC 0%, #EFE6FB 100%);
  display: flex; align-items: center; justify-content: center;
}
.post-card .thumb svg { width: 34px; height: 34px; fill: none; stroke: rgba(27,42,74,0.35); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.post-card .card-body { padding: 18px 20px 20px; }
.post-card .read { font-size: 0.74rem; font-weight: 700; color: #FF6B2B; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }
.post-card h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.01em; }
.post-card .date { font-size: 0.8rem; color: #7F8A9E; margin: 0; }

@media (min-width: 760px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 699px) {
  .post-page { padding: 92px 20px 80px; }
  .post-hero { aspect-ratio: 16 / 10; border-radius: 16px; }
  .post-meta { margin-bottom: 32px; }
  .post-body p { font-size: 1.05rem; }
}