/* Converted from src/components/site/blog/PostArticle.module.css (CSS Module): local classes are prefixed "blog-post-article__". */
/*
 * Blog post — "single post layout 2" of the original Ohio theme.
 * Desktop (≥1181px): two halves; the headline (left) sticks while the content (right) scrolls.
 * Below: one column, headline first. Values measured on the original at 1440px and 390px.
 */

/* 32px + the original's empty 1px "author" box between the post and what follows. */
.blog-post-article__layout {
  margin-bottom: 33px;
}

/* ----- Headline ----- */
.blog-post-article__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 30vh;
  margin-bottom: -16px;
  padding-top: var(--header-h);
}

.blog-post-article__holder {
  padding-block: 2rem;
}

.blog-post-article__inner {
  padding-inline: var(--container-gutter);
}

/*
 * Entrance of the theme's `.animated-holder > *` (slide_up_elements): from 3.25rem below, 350ms
 * `ease`, staggered by child position (.05s per child, starting at .05s): categories · reading
 * time .05s, title .1s, subtitle .15s. CSS only: the headline is visible without JavaScript.
 */
.blog-post-article__inner > * {
  animation: blog-post-article__post-headline-in var(--duration) ease 0.05s both;
}

.blog-post-article__inner > :nth-child(2) {
  animation-delay: 0.1s;
}

.blog-post-article__inner > :nth-child(3) {
  animation-delay: 0.15s;
}

@keyframes blog-post-article__post-headline-in {
  from {
    opacity: 0;
    transform: translateY(3.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-post-article__inner > * {
    animation: none;
  }
}

.blog-post-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.943rem; /* 15.09px */
  line-height: 1.6;
}

/* "•" before the reading time (brand green), as on the original */
.blog-post-article__estimate {
  white-space: nowrap;
}

.blog-post-article__estimate::before {
  content: "•";
  display: inline-block;
  margin: -2px 4px 0;
  font-size: 0.8em;
  color: var(--color-brand);
}

.blog-post-article__estimate:first-child::before {
  display: none;
}

.blog-post-article__title {
  max-width: 100%;
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  font-weight: var(--weight-semibold);
  line-height: var(--h1-leading);
  letter-spacing: -0.045em;
  color: var(--color-heading);
  overflow-wrap: break-word;
}

/* Without a subtitle the original still rendered its (empty) holder and its 1rem top margin. */
.blog-post-article__title:last-child {
  margin-bottom: 1rem;
}

.blog-post-article__subtitle {
  max-width: 100%;
  margin: 1rem 0 0;
  font-size: var(--text-lead);
  line-height: 1.6;
}

/* ----- Content ----- */
.blog-post-article__main {
  padding-inline: var(--container-gutter);
}

.blog-post-article__featured {
  margin: 1.55em 0;
}

.blog-post-article__featured img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-post-article__body {
  margin-bottom: 32px;
}

/* WordPress kept the top margin of the first block (site.css removes it for generic .prose). */
.blog-post-article__main .blog-post-article__body > :first-child:is(figure, .wp-block-image) {
  margin-top: 1.55em;
}

.blog-post-article__main .blog-post-article__body > p:first-child {
  margin-top: 1em;
}

/*
 * WordPress never upscaled content images (width attribute + max-width: 100%): a 900px image
 * stays 900px in the 921.6px column at 1024px, a 579px one in the 620.8px column at 1440px.
 * `revert-layer` drops the generic .prose `width: 100%` back to the width attribute (`auto` would
 * use the srcset's intrinsic width instead); where unsupported, images simply fill the column.
 */
.blog-post-article__main .blog-post-article__body :is(figure, .wp-block-image) img,
.blog-post-article__main .blog-post-article__body > img {
  width: revert-layer;
}

/* "size-large" was WordPress's 1024px rendition (our attributes carry the full upload's size):
   visible in the 1062px column at 1180px. */
.blog-post-article__main .blog-post-article__body .size-large img {
  max-width: min(100%, 1024px);
}

/*
 * Content links as on the original theme ("links-underline"): no underline at rest, the
 * surrounding weight; on hover the .18em underline (just under the descenders, at 0 110%) runs
 * its 400ms "underline" keyframes and the color fades to the brand green over .35s. On leave both
 * drop back at once (the theme had no transition at rest). Replaces the generic .prose underline.
 */
.blog-post-article__main .blog-post-article__body a {
  font-weight: inherit;
  text-decoration: none;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 0 110%;
  background-size: 100% 0.18em;
  transition: none;
}

.blog-post-article__main .blog-post-article__body a:hover {
  color: var(--color-brand);
  background-image: linear-gradient(currentColor, currentColor);
  transition: color var(--duration) var(--ease);
  animation: blog-post-article__post-link-underline 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
}

@keyframes blog-post-article__post-link-underline {
  0% {
    background-size: 100% 0.18em;
    background-position: 0 110%;
  }
  50% {
    background-size: 0 0.18em;
    background-position: 0 110%;
  }
  50.01% {
    background-size: 0 0.18em;
    background-position: right 0 top 110%;
  }
  100% {
    background-size: 100% 0.18em;
    background-position: right 0 top 110%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-post-article__main .blog-post-article__body a:hover {
    animation: none;
  }
}

/* Lists right after a small heading: the theme's `h4 + * { margin-top: .75rem }` won over the list margin. */
.blog-post-article__main .blog-post-article__body :is(h4, h5, h6) + :is(ul, ol) {
  margin-top: 0.75rem;
}

/* In one column (tablets and phones) the original dropped the top margin of the content headings. */
@media (max-width: 1180px) {
  .blog-post-article__main .blog-post-article__body :is(h2, h3, h4, h5, h6) {
    margin-top: 0;
  }
}

.blog-post-article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
  font-size: var(--text-ui);
  line-height: 1.6;
}

.blog-post-article__tagsCaption {
  margin-right: 8px;
}

.blog-post-article__tags .blog-post-article__tag {
  white-space: nowrap;
}

/* "Tagged with:" pills only darken their background on hover (the text keeps its color, unlike
   the category pills of the cards). */
.blog-post-article__tags .blog-post-article__tag:hover {
  color: var(--color-text);
}

@media (min-width: 769px) {
  .blog-post-article__title,
  .blog-post-article__subtitle {
    max-width: 85%;
  }
}

/* One column: the content's 32px bottom margin stays inside, even without tags (entry footer). */
@media (max-width: 1180px) {
  .blog-post-article__main {
    display: flow-root;
  }
}

/* Tablets: the theme's containers had 5% side padding (51.2px at 1024px), like RelatedPosts. */
@media (min-width: 769px) and (max-width: 1180px) {
  .blog-post-article__inner,
  .blog-post-article__main {
    padding-inline: 5%;
  }
}

/* ----- Desktop: sticky headline on the left half ----- */
@media (min-width: 1181px) {
  .blog-post-article__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 48px;
  }

  .blog-post-article__aside {
    position: sticky;
    top: 0;
    z-index: 2;
    align-self: start;
    min-height: 0;
    margin-bottom: 0;
  }

  /*
   * Outer gutter: half of the free space around the theme container, computed from the column
   * width (100% = half of the page): 99.2px at 1440px like the original (-1.6px measured offset).
   */
  .blog-post-article__holder {
    padding: var(--header-h) 0 6vh calc(100% - var(--container-width) / 2 - 1.6px);
  }

  .blog-post-article__inner {
    padding-inline: 0;
  }

  .blog-post-article__main {
    margin-top: var(--header-h);
    padding: var(--header-h) calc(100% - var(--container-width) / 2 - 1.6px) 0 0;
  }

  .blog-post-article__body {
    margin-bottom: 48px;
  }
}

@media (min-width: 1181px) and (max-width: 1440px) {
  .blog-post-article__title {
    font-size: 4rem;
  }
}