/* ASSITEJ — page-level styles for the navigable template set (Plakat / C) */

html, body { margin: 0; background: var(--bg); }

/* nav + interactive hovers */
.nav-link { transition: color var(--dur-fast) var(--ease-out); }
.nav-link:hover { color: var(--ink); }

/* news cards (archive / related grids) — real WP <img> in .media */
.news-card { transition: transform var(--dur-base) var(--ease-out); }
.news-card h3 { transition: color var(--dur-fast) var(--ease-out); }
.news-card:hover h3 { color: var(--accent); }
.news-card .media { transition: filter var(--dur-base) var(--ease-out); overflow: hidden; border-radius: var(--r-3); background: var(--bg-sunken); }
.news-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card:hover .media { filter: brightness(0.96); }

.news-row { transition: background var(--dur-fast) var(--ease-out); position: relative; }
.news-row:hover { background: var(--accent-tint); z-index: 5; }
.news-row .news-arrow { transition: transform var(--dur-base) var(--ease-out); }
.news-row:hover .news-arrow { transform: translateX(5px); }

/* news index — featured image pops in on hover (one .row-thumb per row) */
.news-row .row-thumb {
  position: absolute; right: 20px; top: 50%;
  width: 168px; height: 210px;
  display: block;
  background: var(--bg-sunken);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  overflow: hidden;
  transform: translateY(-50%) translateX(32px) scale(0.8) rotate(-4deg);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 3;
}
.news-row .row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-row:hover .row-thumb {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1) rotate(-3deg);
}
.news-row .row-date { transition: opacity var(--dur-fast) var(--ease-out); }
.news-row:hover .row-date { opacity: 0; }

.cat-chip { transition: border-color var(--dur-fast), color var(--dur-fast); }
.cat-chip:hover { border-color: var(--ink); color: var(--ink); }
.page-btn { transition: color var(--dur-fast), background var(--dur-fast); }
.page-btn:hover { color: var(--ink); }

/* editorial article body */
.article-body p { font-size: 19px; line-height: 1.78; color: var(--ink-2); margin: 0 0 26px; }
.article-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 46px 0 18px; }
.article-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.18; letter-spacing: -0.01em; color: var(--ink); margin: 36px 0 14px; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 32px; line-height: 1.32; color: var(--ink);
  margin: 44px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--accent);
}
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 78px; line-height: 0.78;
  float: left; margin: 8px 14px 0 0; color: var(--accent);
}
.article-body img, .article-body figure img { max-width: 100%; height: auto; border-radius: var(--r-3); display: block; }
.article-body figure { margin: 40px 0; }
.article-body figcaption { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-4); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.06em; }

/* featured image — floated right, outset past the reading column into the gutter */
.article-body .article-figure--right {
  float: right;
  width: clamp(280px, 42%, 460px);
  margin: 6px -88px 26px 36px; /* negative right margin = outset */
  shape-outside: margin-box;
}
.article-body .article-figure--right img { width: 100%; }
@media (max-width: 900px) {
  .article-body .article-figure--right { margin-right: -40px; }
}
@media (max-width: 760px) {
  .article-body .article-figure--right { float: none; width: 100%; margin: 8px 0 26px; }
}
.article-body ul, .article-body ol { font-size: 19px; line-height: 1.7; color: var(--ink-2); margin: 0 0 26px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }

/* static page body (no drop-cap) */
.page-body p { font-size: 19px; line-height: 1.75; color: var(--ink-2); margin: 0 0 24px; }
.page-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.page-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); margin: 48px 0 16px; }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); margin: 32px 0 12px; }
.page-body ul { margin: 0 0 24px; padding: 0; list-style: none; }
.page-body ul li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.page-body ul li::before { content: '✶'; position: absolute; left: 0; color: var(--accent); font-size: 13px; top: 3px; }
.page-body img { max-width: 100%; height: auto; border-radius: var(--r-3); }
.toc-link { transition: color var(--dur-fast); }
.toc-link:hover { color: var(--ink); }

/* responsive grid reflow */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .grid-fest { grid-template-columns: 1fr 1fr !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .page-shell { grid-template-columns: 1fr !important; gap: 40px !important; }
  .page-toc { position: static !important; }
}
@media (max-width: 560px) {
  .grid-3, .grid-fest { grid-template-columns: 1fr !important; }
}