/*
 * Standard Post visual polish.
 *
 * Long-form reading stays calm. Motion is reserved for major components and
 * interaction feedback. Existing article widths, typography and spacing remain
 * authoritative.
 */

/* One-time component entrance motion. JS adds these classes only below the fold. */
.single-post-layout .isp-article-reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 420ms cubic-bezier(.2, .72, .25, 1),
    transform 420ms cubic-bezier(.2, .72, .25, 1);
  will-change: opacity, transform;
}

.single-post-layout .isp-article-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Conversion gets a slightly more deliberate arrival without becoming flashy. */
.single-post-layout .isp-post-component--resource-cta.isp-article-reveal {
  transition-duration: 480ms;
}

/* Structured Sections borrow the compact accent language used elsewhere on iSPH. */
.single-post-layout .isp-structured-section__heading::after {
  display: block;
  width: 38px;
  height: 2px;
  margin-top: var(--isp-article-space-3, 1rem);
  border-radius: var(--isp-article-radius-pill, 999px);
  background: color-mix(in srgb, var(--isp-article-color-link, #2378aa) 58%, transparent);
  content: "";
}

/*
 * Facts are an editorial metadata rail, not a floating card. A full reading-width
 * band keeps one, two and several facts attached to the section heading and
 * avoids the isolated small-box effect on sparse sections.
 */
.single-post-layout .isp-structured-section__facts {
  padding: var(--isp-article-space-3, 1rem) 0;
  border-top: var(--isp-article-border, 1px solid #eae9ea);
  border-right: 0;
  border-bottom: var(--isp-article-border, 1px solid #eae9ea);
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

/* Resource CTA gets one restrained accent line, not another decorative card system. */
.single-post-layout .isp-resource-cta {
  position: relative;
  overflow: hidden;
}

.single-post-layout .isp-resource-cta::before {
  position: absolute;
  top: 0;
  left: var(--isp-article-space-4, 1.5rem);
  width: 72px;
  height: 3px;
  border-radius: 0 0 var(--isp-article-radius-pill, 999px) var(--isp-article-radius-pill, 999px);
  background: linear-gradient(
    90deg,
    var(--isp-article-color-link, #2378aa),
    color-mix(in srgb, var(--isp-accent, #ebbf7a) 70%, var(--isp-article-color-link, #2378aa))
  );
  content: "";
  opacity: .72;
}

.single-post-layout .isp-resource-cta__button > span:last-child {
  transition: transform 180ms ease;
}

.single-post-layout .isp-resource-cta__button:hover > span:last-child,
.single-post-layout .isp-resource-cta__button:focus-visible > span:last-child {
  transform: translateX(3px);
}

/* Discovery headings use the same small-kicker hierarchy as stronger site sections. */
.single-post-layout .isp-related-posts__head > span {
  display: block;
  margin-bottom: var(--isp-article-space-1, .5rem);
  color: var(--isp-article-color-link, #2378aa);
  font-size: var(--isp-article-font-xs, .78rem);
  font-weight: 850;
  letter-spacing: .075em;
  line-height: var(--isp-article-line-ui, 1.45);
  text-transform: uppercase;
}

.single-post-layout .isp-related-posts__head h2 {
  margin-top: 0;
  text-wrap: balance;
}

.single-post-layout .isp-related-posts__head::after {
  display: block;
  width: 42px;
  height: 2px;
  margin-top: var(--isp-article-space-3, 1rem);
  border-radius: var(--isp-article-radius-pill, 999px);
  background: color-mix(in srgb, var(--isp-article-color-link, #2378aa) 48%, transparent);
  content: "";
}

/* Card links provide a consistent directional micro-interaction. */
.single-post-layout .isp-related-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.single-post-layout .isp-related-card__link::after {
  display: inline-block;
  content: "→";
  transition: transform 180ms ease;
}

.single-post-layout .isp-related-card:focus-within {
  border-color: color-mix(in srgb, var(--isp-primary, #73c0ee) 32%, var(--isp-article-color-border, #eae9ea));
  box-shadow: var(--isp-article-shadow-focus, 0 12px 28px rgba(68, 68, 68, .075));
}

.single-post-layout .isp-related-card:focus-within .isp-related-card__link::after {
  transform: translateX(3px);
}

@media (hover: hover) {
  .single-post-layout .isp-related-card:hover .isp-related-card__link::after {
    transform: translateX(3px);
  }
}

@media (max-width: 700px) {
  .single-post-layout .isp-resource-cta::before {
    left: var(--isp-article-padding-card, 1.25rem);
    width: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-post-layout .isp-article-reveal,
  .single-post-layout .isp-article-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .single-post-layout .isp-resource-cta__button > span:last-child,
  .single-post-layout .isp-related-card__link::after {
    transition: none !important;
    transform: none !important;
  }
}