/* ==========================================================================
   WordPress additions: blog, articles, pages, admin bar.
   The landing page itself is styled by site.css (shared with the static site).
   ========================================================================== */

/* WordPress' own hidden-text class (pagination, forms) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Keep the sticky menu below the admin bar when logged in */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .nav { top: 0; } }

.container--narrow { max-width: 880px; }
.section--page { padding-top: 40px; min-height: 50vh; }
.page-head { margin-bottom: 8px; }
.page-head__intro { max-width: 680px; margin: -16px auto 36px; text-align: center; color: var(--muted); }
.empty-note { padding: 32px; text-align: center; color: var(--muted); }
.more-link { margin-top: 32px; text-align: center; }

/* ---------- Article cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; }
.post-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--grad-panel);
  overflow: hidden;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
@media (hover: hover) { .post-card:hover .post-card__media img { transform: scale(1.04); } }
.post-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.post-card__placeholder .logo__text { width: 46%; height: auto; filter: drop-shadow(0 6px 14px rgba(6, 22, 70, 0.4)); }
.post-card__placeholder .logo__mark { display: none; }
.post-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.post-card__meta { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--primary); }
.post-card__title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.post-card__title a:hover { color: var(--primary); }
.post-card__excerpt { font-size: 14px; color: var(--muted); }

/* ---------- Pagination ---------- */
.pagination { margin-top: 36px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  font-weight: 600;
}
.pagination .page-numbers.current { background: var(--grad-btn); color: #fff; }
.pagination a.page-numbers:hover { color: var(--primary); }

/* ---------- One article / page ---------- */
.article { padding: clamp(24px, 5vw, 48px); }
.article__head { margin-bottom: 24px; }
.article__meta { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 8px; }
.article__meta a:hover { text-decoration: underline; }
.article__title { font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.2; color: var(--text); }
.article__cover { margin: 0 0 28px; border-radius: var(--radius-sm); overflow: hidden; }
.article__cover img { width: 100%; height: auto; }
.article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.article__tags a {
  padding: 4px 14px;
  border-radius: var(--pill);
  background: var(--light);
  color: var(--deep);
  font-size: 13px;
  font-weight: 600;
}
.related { margin-top: var(--section-y); }
.not-found { text-align: center; }
.not-found p { margin-top: 16px; color: var(--muted); }

/* Readable article text (site.css resets lists and margins for the landing page) */
.prose { font-size: 17px; line-height: 1.8; color: #1f2d5c; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--text); }
.prose h3 { margin-top: 1.5em; font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--text); }
.prose h4 { margin-top: 1.4em; font-size: 18px; font-weight: 700; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose strong { color: var(--text); }
.prose img { height: auto; border-radius: var(--radius-sm); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 16px 22px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--light);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--light); }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--light); font-size: 0.9em; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.prose .wp-block-button__link { display: inline-block; padding: 12px 26px; border-radius: var(--pill); background: var(--grad-btn); color: #fff; text-decoration: none; font-weight: 600; }

@media (max-width: 1023.98px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .post-grid { grid-template-columns: 1fr; gap: 14px; }
  .section--page { padding-top: 24px; }
  .prose { font-size: 16px; }
}