/* ============================================================
   IronWood — blog
   ------------------------------------------------------------
   Loaded only on /blog/ and post pages, so the marketing pages
   pay nothing for it.

   Every colour, radius and font here comes from the tokens in
   styles.css. No new palette, no second design system.

   The image placement classes (.pi--*) are what the `figure`,
   `float`, `fullbleed` and `gallery` shortcodes emit.
   ============================================================ */

/* ---------- Post header ---------- */
.pagehead--post { padding-bottom: 0; }

.post-back { margin: 0 0 1.5rem; font-size: .95rem; }
.post-back a { font-weight: 600; text-decoration: none; }
.post-back a:hover { text-decoration: underline; }

.post-date {
  display: block;
  color: var(--copper-link);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
}

.post-cover {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--r);
  margin: 2.5rem 0 0;
  background: var(--surface-2);
}

/* ---------- Post body ----------
   `flow-root` contains any float that runs past the end of its
   text, so a float at the bottom of a post cannot overlap the
   footer. Deliberately NOT `overflow: hidden`, because .pi--bleed
   needs to break out horizontally. */
.post-body {
  display: flow-root;
  max-width: 44rem;
  margin: 3rem auto 0;
  font-size: 1.075rem;
}

.post-body > :first-child { margin-top: 0; }

.post-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 2.5em;
  clear: both;
}
.post-body h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  margin-top: 2em;
  clear: both;
}

.post-body p { max-width: none; }

.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.post-body li { margin-bottom: .5em; }

.post-body blockquote {
  margin: 2em 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--copper);
  color: var(--ink-soft);
  font-style: italic;
  clear: both;
}

.post-body code {
  background: var(--surface-2);
  border-radius: 6px;
  padding: .15em .4em;
  font-size: .9em;
}

.post-body pre {
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--r);
  padding: 1.25rem 1.4rem;
  overflow-x: auto;
  margin: 2em 0;
  clear: both;
}
.post-body pre code { background: none; padding: 0; font-size: .9rem; }

.post-body a { font-weight: 500; }

.post-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3em 0;
  clear: both;
}

.post-tags {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0;
  max-width: 44rem;
  margin: 3.5rem auto 0;
}
.post-tags li {
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .85rem;
  font-weight: 500;
}

/* ============================================================
   IMAGE PLACEMENT
   ============================================================ */

.pi { margin: 2.5em 0; }
.pi img { border-radius: var(--r); background: var(--surface-2); width: 100%; }

.pi figcaption {
  margin-top: .65rem;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.5;
}

/* ---------- Blocking: nothing wraps beside it ---------- */
.pi--block { clear: both; }

/* ---------- Wide: breaks out past the text column ---------- */
.pi--wide { clear: both; }
@media (min-width: 68rem) {
  .pi--wide { margin-inline: -4rem; }
}

/* ---------- Float: text wraps around it ----------
   Below 40rem every float becomes a full-width block. This is
   deliberate and not configurable: a half-width float on a phone
   leaves roughly seven characters per line. */
.pi--float { margin: 1.5em 0; }

@media (min-width: 40rem) {
  .pi--float { margin-block: .4em 1.2em; }

  .pi--left  { float: left;  margin-right: 2rem; }
  .pi--right { float: right; margin-left: 2rem; }

  .pi--sm { width: 33%; }
  .pi--md { width: 50%; }
  .pi--lg { width: 66%; }
}

/* Ends a float run early. */
.pi-clear { clear: both; }

/* ---------- Full bleed: edge to edge ----------
   Pushes to the horizontal centre of the viewport then pulls back
   half a viewport width each side. Requires that no ancestor sets
   overflow-x: hidden. */
.pi--bleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-block: 3.5em;
  clear: both;
}
.pi--bleed img {
  border-radius: 0;
  max-height: 70vh;
  object-fit: cover;
}
.pi--bleed figcaption {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

/* ---------- Gallery: side by side ---------- */
.pi--gallery { clear: both; }

.pi-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .pi--cols-2 .pi-grid { grid-template-columns: repeat(2, 1fr); }
  .pi--cols-3 .pi-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Grid blowout guard, same rule the marketing pages use. */
.pi-grid > * { min-width: 0; }

.pi-cell__cap {
  display: block;
  margin-top: .5rem;
  color: var(--ink-soft);
  font-size: .875rem;
}

/* ---------- Callout ---------- */
.pi-callout {
  clear: both;
  margin: 2.5em 0;
  padding: 1.35rem 1.5rem;
  border-radius: var(--r);
  border-left: 4px solid var(--copper);
  background: var(--surface-2);
}
.pi-callout > :last-child { margin-bottom: 0; }
.pi-callout__title { font-weight: 700; margin-bottom: .5rem; }

.pi-callout--warn {
  border-left-color: #b4442c;
  background: color-mix(in srgb, #b4442c 8%, var(--surface));
}
.pi-callout--warn {
  border-left-color: #e08163;
  background: color-mix(in srgb, #e08163 12%, var(--surface));
}

/* ============================================================
   BLOG INDEX
   ============================================================ */

.postlist { list-style: none; padding: 0; margin: 0; }

.postlist > li {
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
}
.postlist > li:first-child { border-top: 0; padding-top: 0; }

.postcard { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 46rem) {
  .postcard { grid-template-columns: 15rem 1fr; }
  /* `cover` is optional. Without one there is no media cell, and the body
     would otherwise be squeezed into the 15rem image column. */
  .postcard--nocover { grid-template-columns: 1fr; }
}
.postcard > * { min-width: 0; }

.postcard-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--surface-2);
}

.postcard-body time {
  color: var(--copper-link);
  font-weight: 600;
  font-size: .9rem;
}
.postcard-body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin: .25rem 0 .5rem;
}
.postcard-body h2 a { text-decoration: none; color: var(--ink); }
.postcard-body h2 a:hover { color: var(--copper-link); }
.postcard-body p { color: var(--ink-soft); margin-bottom: 0; }

.postcard-tags {
  display: flex; flex-wrap: wrap; gap: .45rem;
  list-style: none; padding: 0; margin: .9rem 0 0;
}
.postcard-tags li {
  background: var(--surface-2);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .8rem;
}

/* ---------- Two-column card variant, used on the blog index ----------
   Six stacked full-width entries made the listing far longer than it needed
   to be. As cards in two columns it reads in about half the scroll.

   Scoped to a modifier rather than changed on .postlist itself: the compact
   variant on the home page shares the base class but has none of the
   .postcard markup this relies on. */
.postlist--cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .postlist--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
/* The stacked layout separates entries with rules. Cards carry their own
   edges, so the rules and their padding come off. */
.postlist--cards > li { padding: 0; border-top: 0; display: flex; min-width: 0; }

/* Beats .postcard's grid at any width — the 15rem media column belongs to the
   stacked layout and would squeeze the body inside a half-width card. */
.postlist--cards .postcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s var(--ease), transform .12s var(--ease);
}
.postlist--cards .postcard:hover {
  border-color: var(--copper-link);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .postlist--cards .postcard:hover { transform: none; }
}

/* A cover, if a post ever carries one, spans the top of the card. Square
   corners: the card's overflow clips it to the radius. */
.postlist--cards .postcard-media img { aspect-ratio: 16 / 9; border-radius: 0; }

.postlist--cards .postcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
}
.postlist--cards .postcard-body h2 { font-size: clamp(1.22rem, 1.7vw, 1.5rem); }

/* The whole card is the tap target. The real link stays on the title, so
   nothing changes for a screen reader or for the link list; this only widens
   where a finger or a cursor can land. */
.postlist--cards .postcard-body h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Tags sit on the floor of the card, so a short description and a long one
   still line their tag rows up across a row. */
.postlist--cards .postcard-tags { margin-top: auto; padding-top: 1.1rem; }

/* Compact variant used in the "Worth knowing" block on the home page. */
.postlist--compact > li { padding: 1.5rem 0; }
.postlist--compact time { color: var(--copper-link); font-weight: 600; font-size: .9rem; }
.postlist--compact h3 { margin: .2rem 0 .35rem; }
.postlist--compact h3 a { text-decoration: none; color: var(--ink); }
.postlist--compact h3 a:hover { color: var(--copper-link); }
.postlist--compact p { color: var(--ink-soft); margin: 0; }

.empty { color: var(--ink-soft); }

/* ---------- Pager ----------
   Three-column so the page counter stays centred even when only one of the
   two links is present. The empty <span> placeholders in the markup hold
   their grid cells open. */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.pager > a:first-child { justify-self: start; }
.pager > a:last-child { justify-self: end; }
.pager-count {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9rem;
  text-align: center;
  white-space: nowrap;
}

/* On phones the counter is noise — drop it and let the two buttons share
   the row. */
@media (max-width: 34rem) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-count { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .pi--bleed { position: static; width: auto; margin-inline: 0; left: auto; right: auto; }
  .pi--float { float: none; width: auto; }
}