/* The blog and the other inner pages, on the tokens and components of style.css: a soil header under the top
   bar, cards like the game's chunky panels and a cream "paper" page for long reading. */

.page-inner .topbar .topbar__inner {
  background: linear-gradient(180deg, var(--navy-top), var(--navy-face) 60%);
  border-color: var(--navy);
  box-shadow: inset 0 -6px 0 var(--navy-lip), 0 6px 0 rgba(16, 22, 58, 0.4);
}
.page-inner main { background: var(--core-3); }

.flashes { display: grid; gap: 10px; padding-top: calc(var(--topbar-h) + 24px); }
.flashes + .page-head { padding-top: 40px; }
.flash {
  padding: 12px 18px;
  border: 3px solid var(--navy);
  border-radius: 16px;
  background: var(--navy-face);
  color: #fff;
  font-weight: 700;
}
.flash--success { background: #23861B; }
.flash--error { background: #9C1A17; }
.flash--info { background: var(--navy-face); }

/* ---------- Header of an inner page ---------- */

.page-head {
  padding: calc(var(--topbar-h) + clamp(48px, 7vw, 90px)) 0 clamp(70px, 9vw, 120px);
  overflow: hidden;
}
.page-head__inner { display: grid; gap: 14px; justify-items: start; max-width: 860px; }
.page-head .section-lede { color: #fff; font-weight: 600; text-shadow: 0 2px 0 rgba(16, 22, 58, 0.55); }
.page-head--error { min-height: 70vh; display: grid; align-items: center; }

.section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: none;
}

/* ---------- Article cards ---------- */

.blog-list { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 130px); }
.news { padding: clamp(70px, 9vw, 110px) 0; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.post-card { height: 100%; }
.post-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border: var(--border) solid var(--navy);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--navy-top), var(--navy-face) 30%);
  box-shadow: inset 0 -9px 0 var(--navy-lip), 0 8px 0 rgba(0, 0, 0, 0.35);
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-card__link:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: inset 0 -9px 0 var(--navy-lip), 0 12px 0 rgba(0, 0, 0, 0.35); }
.post-card__image {
  aspect-ratio: 16 / 9;
  border-bottom: var(--border) solid var(--navy);
  background: linear-gradient(160deg, var(--soil-1), var(--soil-3));
  overflow: hidden;
}
.post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card__link:hover .post-card__image img { transform: scale(1.04); }
.post-card__placeholder { display: grid; place-items: center; height: 100%; color: rgba(255, 242, 206, 0.5); }
.post-card__placeholder svg { width: 64px; height: 64px; }
.post-card__body { display: grid; align-content: start; gap: 10px; padding: 18px 20px 24px; }
.post-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: #fff;
  -webkit-text-stroke: 0.18em var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 0.08em 0 var(--navy);
}
.post-card__body p { color: #DCE2FF; font-size: 0.97rem; }
.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-display);
  color: var(--flash);
}
.post-card__more svg { width: 18px; height: 18px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: clamp(32px, 5vw, 56px); }
.pager__info { font-family: var(--font-display); color: var(--cream); }

.empty-state { display: grid; gap: 12px; justify-items: start; max-width: 640px; }
.empty-state a { color: var(--flash); }

/* ---------- One article ---------- */

.page-head--post { padding-bottom: clamp(60px, 8vw, 100px); }
.post__head { display: grid; gap: 16px; justify-items: start; max-width: 920px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.post__title { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 0 var(--navy), 0 0 3px var(--navy);
}
.back-link svg { width: 20px; height: 20px; transform: rotate(-90deg); filter: drop-shadow(0 2px 0 var(--navy)); }
.chip--draft { background: repeating-linear-gradient(-45deg, #FFD60A 0 10px, #E8B800 10px 20px); color: var(--navy); }

.post__main { padding: 10px 0 clamp(80px, 10vw, 130px); }
.post__wrap { display: grid; gap: clamp(24px, 4vw, 40px); max-width: 920px; }
.post__image {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * clamp(40px, 6vw, 80px));
  border: 6px solid var(--navy);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.4);
  background: var(--navy);
}
.post__image img { width: 100%; }

/* The article's body: cream paper, readable measure, media at full width. */
.prose {
  padding: clamp(24px, 5vw, 56px);
  border: var(--border) solid var(--navy);
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFDF4, #FFF6DC);
  box-shadow: inset 0 -10px 0 #E9D9A8, 0 10px 0 rgba(0, 0, 0, 0.35);
  color: #1B2140;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.prose > * + * { margin-top: 1.1em; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--navy);
  margin-top: 1.6em;
}
.prose h2 { font-size: 1.9em; }
.prose h3 { font-size: 1.45em; }
.prose h4 { font-size: 1.2em; }
.prose a { color: #4F22B0; font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose strong { color: #10163A; }
.prose ul, .prose ol { padding-left: 1.4em; list-style: revert; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote {
  margin-inline: 0;
  padding: 0.6em 1.1em;
  border-left: 6px solid var(--moss);
  border-radius: 0 14px 14px 0;
  background: rgba(157, 187, 56, 0.14);
  font-style: italic;
}
.prose img, .prose video, .prose iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 4px solid var(--navy);
  border-radius: 18px;
  background: var(--navy);
}
.prose iframe { aspect-ratio: 16 / 9; }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 0.5em; font-size: 0.9em; color: #4A5170; text-align: center; }
.prose hr { border: 0; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--soil-1) 0 18px, transparent 18px 28px); }
.prose code { padding: 0.1em 0.35em; border-radius: 6px; background: rgba(16, 22, 58, 0.08); font-size: 0.92em; }
.prose pre { padding: 1em; border-radius: 14px; background: #10163A; color: #FFF2CE; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.prose th, .prose td { padding: 0.5em 0.7em; border: 2px solid #D9C99A; text-align: left; }
.prose th { background: #F3E5B8; }

.store-link .btn__icon { width: 1.3em; height: 1.3em; }

@media (max-width: 899px) {
  .page-inner .flashes { padding-top: calc(var(--topbar-h) + 12px); }
}