/*
 * Global single Post hero refinements.
 *
 * Keep the article body measure narrow while giving the title area enough room
 * to form a calmer heading and the featured image a controlled editorial crop.
 */

.single-post-layout {
  padding-top: clamp(30px, 4vw, 54px);
}

.single-post-layout .isp-post-breadcrumbs {
  width: min(calc(100% - 40px), 1040px);
  margin-bottom: 32px;
  font-size: .9rem;
  line-height: 1.45;
}

.single-post-layout .isp-post-breadcrumbs ol {
  gap: 8px;
}

.single-post-layout .isp-post-breadcrumbs li + li::before {
  margin-right: 8px;
  color: #b8b3b6;
}

.single-post-layout .isp-post-breadcrumbs [aria-current="page"] span {
  max-width: 34ch;
  color: #817c80;
}

.single-post-layout .single-entry-header {
  width: min(calc(100% - 40px), 960px);
}

.single-post-layout .entry-kicker {
  min-height: 30px;
  margin-bottom: 26px;
  padding: 6px 10px;
  border-color: rgba(115, 192, 238, .3);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .065em;
}

.single-post-layout .entry-title {
  max-width: 900px;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.01;
  text-wrap: balance;
}

.single-post-layout .entry-subheading {
  width: auto;
  max-width: 780px;
  margin: 22px 0 0;
  color: #5f5b5e;
  font-size: clamp(1.16rem, 1.7vw, 1.4rem);
  line-height: 1.58;
  text-wrap: pretty;
}

.single-post-layout .entry-meta {
  gap: 7px 10px;
  margin-top: 27px;
  color: #777276;
  font-size: .92rem;
  line-height: 1.5;
}

.single-post-layout .entry-meta__author {
  color: #5d585b;
}

.single-post-layout .entry-meta__author a {
  font-weight: 850;
}

.single-post-layout .entry-meta__separator {
  color: #aaa4a8;
}

.single-post-layout .entry-meta time {
  font-variant-numeric: tabular-nums;
}

/*
 * Featured images are editorial imagery, not a second page hero. A fixed crop
 * gets readers to useful content sooner and keeps differently shaped uploads
 * from changing the rhythm of the article opening.
 */
.single-post-layout .entry-featured-image {
  width: min(calc(100% - 40px), 1120px);
  aspect-ratio: 16 / 9;
  margin: clamp(46px, 4.5vw, 56px) auto clamp(34px, 4.5vw, 48px);
  overflow: hidden;
  border: 1px solid var(--isp-border);
  border-radius: 20px;
  background: #f7fbfd;
  box-shadow: 0 14px 38px rgba(68, 68, 68, .065);
}

.single-post-layout .entry-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* One article-image radius across featured imagery, content imagery and cards. */
.single-post-layout .entry-content img,
.single-post-layout .wp-block-image img,
.single-post-layout .wp-block-cover,
.single-post-layout .isp-related-card {
  border-radius: 20px;
}

@media (max-width: 1024px) {
  .single-post-layout .single-entry-header {
    width: min(calc(100% - 36px), 900px);
  }

  .single-post-layout .entry-title {
    max-width: 860px;
    font-size: clamp(2.8rem, 6.4vw, 4.1rem);
  }

  .single-post-layout .entry-featured-image {
    width: min(calc(100% - 32px), 1040px);
  }
}

@media (max-width: 700px) {
  .single-post-layout {
    padding-top: 24px;
  }

  .single-post-layout .isp-post-breadcrumbs,
  .single-post-layout .single-entry-header {
    width: min(calc(100% - 24px), 820px);
  }

  .single-post-layout .isp-post-breadcrumbs {
    margin-bottom: 26px;
    font-size: .84rem;
  }

  .single-post-layout .isp-post-breadcrumbs li:not(:first-child):not(:nth-last-child(2)):not(:last-child),
  .single-post-layout .isp-post-breadcrumbs [aria-current="page"] {
    display: none;
  }

  .isp-breadcrumb-hide-home .single-post-layout .isp-post-breadcrumbs li:nth-last-child(2)::before {
    content: none;
  }

  .single-post-layout .entry-kicker {
    min-height: 28px;
    margin-bottom: 20px;
    padding: 5px 9px;
    font-size: .73rem;
  }

  .single-post-layout .entry-title {
    max-width: none;
    font-size: clamp(2.35rem, 10.5vw, 3.35rem);
    letter-spacing: -.04em;
    line-height: 1.03;
  }

  .single-post-layout .entry-subheading {
    max-width: none;
    margin-top: 18px;
    font-size: clamp(1.08rem, 4.6vw, 1.24rem);
    line-height: 1.55;
  }

  .single-post-layout .entry-meta {
    gap: 5px;
    margin-top: 22px;
    font-size: .88rem;
  }

  .single-post-layout .entry-featured-image {
    width: min(calc(100% - 24px), 820px);
    margin-top: 38px;
    margin-bottom: 32px;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(68, 68, 68, .055);
  }
}