/* ==========================================================================
   BLOG  —  /page/blogs/ and /page/blogs/<slug>/
   --------------------------------------------------------------------------
   Two pages share this file: the listing (.blog-grid and its cards) and one
   post (.post and its prose body). They are together because the post page
   ends with three of the listing's cards, so splitting them would mean
   loading both files there anyway.

   Colours, radii and shadows all come from the tokens in main.css. Nothing
   here hard-codes a hex value, so the palette files under css/palettes/
   restyle the blog along with everything else.
   ========================================================================== */

/* ---------------------------------------------------------------- listing */
.blog-section { background: var(--page); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 30px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* The cover is a fixed 4:3 window, not the image's own shape: a listing of
   photographs taken by different people on different phones is otherwise a
   ragged row of different heights. object-fit crops rather than squashes. */
.blog-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--page-alt);
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__cat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--accent-deep);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}

.blog-card__date {
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .03em;
  margin: 0 0 8px;
}

.blog-card__title {
  font-size: 1.06rem;
  line-height: 1.4;
  margin: 0 0 10px;
  color: var(--ink);
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover { color: var(--accent-deep); }

/* The whole card is the hit area, so the title's link is stretched over it.
   The text keeps the accessible name; the rest of the card just becomes
   clickable, which is what people try first. */
.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-card { position: relative; }

.blog-card__excerpt {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
}

.blog-card__more {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ------------------------------------------------------------ empty state */
.blog-empty {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 28px;
  text-align: center;
  color: var(--muted);
  margin-top: 30px;
}

.blog-empty h3 {
  color: var(--ink);
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.blog-empty p { margin: 0; }

/* ------------------------------------------------------------- pagination */
.blog-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.blog-pager a,
.blog-pager span {
  min-width: 38px;
  padding: 8px 12px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .88rem;
}

.blog-pager a:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.blog-pager .is-current {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  font-weight: 600;
}

/* ================================================================== post == */
.post {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
}

.post__cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--page-alt);
}

.post__inner { padding: 30px 34px 38px; }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 14px;
}

.post__cat {
  background: rgb(var(--accent-rgb) / 12%);
  color: var(--accent-deep);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.post__title {
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 18px;
}

.post__rule {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
}

/* ------------------------------------------------------------ prose body */
/* Posts are written in the admin as HTML. Everything the writers actually
   use is styled here - headings, paragraphs, lists, quotes, links, tables -
   so a post needs no classes of its own and nobody has to remember any. */
.post__body { color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }

.post__body > *:first-child { margin-top: 0; }
.post__body > *:last-child  { margin-bottom: 0; }

.post__body h2 {
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 34px 0 12px;
}

.post__body h3 {
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--accent-deep);
  margin: 26px 0 10px;
}

.post__body p  { margin: 0 0 16px; }
.post__body ul,
.post__body ol { margin: 0 0 18px; padding-left: 22px; }
.post__body li { margin-bottom: 8px; }

.post__body a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post__body a:hover { color: var(--ink); }

.post__body strong { color: var(--ink); }

.post__body blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--accent);
  background: var(--page-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
}

.post__body blockquote p:last-child { margin-bottom: 0; }

.post__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 18px 0;
}

.post__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: .92rem;
}

.post__body th,
.post__body td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
}

.post__body th { background: var(--page-alt); color: var(--ink); }

/* --------------------------------------------------------------- post CTA */
.post__cta {
  margin-top: 30px;
  padding: 22px 24px;
  background: var(--page-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.post__cta p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.post__cta .btn {
  background: var(--accent-deep);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
}

.post__cta .btn:hover { background: var(--ink); }

/* ------------------------------------------------------------ back / more */
.post-back {
  max-width: 860px;
  margin: 22px auto 0;
}

.post-back a {
  color: var(--muted);
  text-decoration: none;
  font-size: .88rem;
}

.post-back a:hover { color: var(--accent-deep); }

.blog-more { margin-top: 54px; }

.blog-more .page-head { margin-bottom: 0; }

/* ----------------------------------------------------------- breakpoints */
@media (max-width: 991px) {
  .blog-grid  { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .post__inner { padding: 26px 24px 32px; }
  .post__title { font-size: 1.52rem; }
}

@media (max-width: 575px) {
  .blog-grid   { grid-template-columns: 1fr; gap: 18px; }
  .post__inner { padding: 22px 18px 28px; }
  .post__title { font-size: 1.3rem; }
  .post__cta   { flex-direction: column; align-items: flex-start; }
}