/* Blog post: a reading column. Wide: indented like the overview's titles, the title over the
   full width, date and share button below it. */
[qcms-mod="cont.blog.post"] > header {
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1rem 1.5rem;
  padding-block-end:2rem; margin-block-end:2.5rem;
  border-block-end:1px solid var(--color-line);
}
[qcms-mod="cont.blog.post"] > header > h1 {
  grid-column:1 / -1;
  font-size:clamp(2.5rem,5.2vw,5rem);
  max-inline-size:20ch;
  text-wrap:balance;
  margin-block-end:1rem;
}
[qcms-mod="cont.blog.post"] > header > time {
  margin:0;
  font-size:.73rem; letter-spacing:.1em; font-weight:600; text-transform:uppercase;
  color:var(--gray-dark);
}
[qcms-mod="cont.blog.post"] > header > [u2-behavior=share] {
  justify-self:start;
  display:inline-flex; align-items:center;
  padding:.45rem .9rem;
  font:inherit; font-size:.8rem; font-weight:600;
  color:inherit; background:none;
  border:1px solid var(--color-line); border-radius:var(--radius);
  cursor:pointer;
}
[qcms-mod="cont.blog.post"] > header > [u2-behavior=share]:is(:hover,:focus-visible) {
  color:var(--color); border-color:currentColor;
}

[qcms-mod="cont.blog.post"] > :not(header) { max-inline-size:44rem; }
[qcms-mod="cont.blog.post"] > div { font-size:1.08rem; }
[qcms-mod="cont.blog.post"] > div :is(h2,h3) { margin-block:2.8rem .6rem; }
[qcms-mod="cont.blog.post"] > div a { color:var(--color); }

[qcms-mod="cont.blog.post"] > section {
  margin-block-start:3.5rem;
  padding-block-start:2rem;
  border-block-start:1px solid var(--color-line);
}
[qcms-mod="cont.blog.post"] > section > h2 {
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin-block-end:1.2rem;
}
[qcms-mod="cont.blog.post"] > section > div { padding-inline:0; }

@media (min-width:48rem) {
  [qcms-mod="cont.blog.post"] > :not(header) { margin-inline-start:10.5rem; }
  [qcms-mod="cont.blog.post"] > header > time { margin-inline-start:10.5rem; }
}