/* Single post. single-post.php, parts/post/.
 * 2022 Figma "News & Insights" post, white background (no gradient).
 * Figma 1440: content x183, main col 632, sidebar x1030 (847 in). Wrap 1180.
 * Doubled classes beat Uncode heading, list and link rules.
 */

.hlb-post-page {
  --hlb-post-wrap:  1180px;
  --hlb-post-main:  632px;
  --hlb-post-gut:   48px;
  --hlb-post-line:  #DDE2E8;
  --hlb-post-end:   160px; /* Last block to pre-footer, any combo */
  --hlb-post-gap:   96px;  /* Article to Related Content */

  background: #fff;
  color: var(--hlb-black);
}

.hlb-post {
  width: min(var(--hlb-post-wrap), 100% - var(--hlb-post-gut) * 2);
  margin: 0 auto;
  padding: 72px 0 var(--hlb-post-end);
}

/* Related Content follows: it owns the end space */
.hlb-post:has(+ .hlb-post-related) {
  padding-bottom: var(--hlb-post-gap);
}

@media (max-width: 1023px) {
  .hlb-post-page { --hlb-post-end: 128px; }
}

@media (max-width: 767px) {
  .hlb-post-page {
    --hlb-post-gut: 20px;
    --hlb-post-end: 96px;
    --hlb-post-gap: 64px;
  }

  .hlb-post { padding-top: 40px; }
}

.hlb-post-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Header --- */

.hlb-post__head {
  max-width: var(--hlb-post-main);
}

/* Back link: Careers panel CTA motion, mirrored. Underline runs under arrow
   and text, slides out on hover. Arrow is hlb_cap_button_arrow(), flipped */
.hlb-post .hlb-post__back,
.hlb-post .hlb-post__back:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) right bottom / 100% 1px no-repeat;
  font: 500 13px/1.4 var(--hlb-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hlb-blue);
  transition: background-size .3s cubic-bezier(.4, 0, .2, 1);
}

.hlb-post .hlb-post__back:hover {
  background-position: left bottom;
  background-size: 0 1px;
  color: var(--hlb-blue);
}

.hlb-post .hlb-post__back:focus-visible {
  outline: 2px solid var(--hlb-navy);
  outline-offset: 4px;
}

/* Same 46px box, 1px stroke and travel as careers.css, pointing left.
   Negative margin on the left: the head's travel room sits there once flipped */
.hlb-post__back .hlb-button__arrow {
  flex: 0 0 auto;
  width: 46px;
  height: 8px;
  margin-left: -10px;
  overflow: visible;
  fill: none;
  transform: scaleX(-1);
}

.hlb-post__back .hlb-button__arrow-shaft,
.hlb-post__back .hlb-button__arrow-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.hlb-post__back .hlb-button__arrow-shaft {
  transform-origin: left center;
  transform: scaleX(0.778);
}

.hlb-post__back .hlb-button__arrow-head {
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-10px);
}

.hlb-post__back:hover .hlb-button__arrow-shaft,
.hlb-post__back:focus-visible .hlb-button__arrow-shaft {
  transform: scaleX(1);
}

.hlb-post__back:hover .hlb-button__arrow-head,
.hlb-post__back:focus-visible .hlb-button__arrow-head {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .hlb-post .hlb-post__back,
  .hlb-post__back .hlb-button__arrow-shaft,
  .hlb-post__back .hlb-button__arrow-head {
    transition: none;
  }
}

/* Current site title sizing */
.hlb-post .hlb-post__title {
  margin: 44px 0 0;
  padding: 0;
  font: 500 36px/1.25 var(--hlb-font-display);
  letter-spacing: 0;
  color: var(--hlb-ink);
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .hlb-post .hlb-post__title {
    margin-top: 28px;
    font-size: 28px;
  }
}

/* Chip + date left, share + actions right. Wraps under on small screens */
.hlb-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
}

.hlb-post__tags {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hlb-post .hlb-post__chip {
  padding: 3px 8px;
  border: 1px solid var(--hlb-turquoise);
  font: 400 12px/16px var(--hlb-font-body);
  color: var(--hlb-ink);
  text-decoration: none;
  transition: background-color var(--hlb-speed) var(--hlb-ease);
}

.hlb-post .hlb-post__chip:hover,
.hlb-post .hlb-post__chip:focus-visible {
  background-color: rgba(28, 165, 161, .1);
}

.hlb-post__date {
  font: 400 15px/1 var(--hlb-font-body);
  color: var(--hlb-ink);
}

.hlb-post__image {
  margin: 30px 0 0;
}

.hlb-post__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Share + actions --- */

.hlb-post-acts {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hlb-post-acts__label {
  margin-right: 4px;
  font: 600 14px/1 var(--hlb-font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hlb-ink);
}

.hlb-post .hlb-post-acts__list {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlb-post .hlb-post-acts__list > li {
  position: relative;
  margin: 0;
  padding: 0;
}

.hlb-post .hlb-post-acts__list > li::before {
  content: none;
}

.hlb-post-acts__sep {
  width: 1px;
  height: 22px;
  background: var(--hlb-post-line);
}

/* 32px hit area, 22px icon */
.hlb-post .hlb-post-act {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--hlb-blue);
  cursor: pointer;
  list-style: none;
  transition: color var(--hlb-speed) var(--hlb-ease);
}

.hlb-post .hlb-post-act::-webkit-details-marker {
  display: none;
}

.hlb-post .hlb-post-act:hover,
.hlb-post .hlb-post-act:focus-visible,
.hlb-post-menu[open] > .hlb-post-act {
  color: var(--hlb-turquoise);
}

.hlb-post .hlb-post-act:focus-visible {
  outline: 2px solid var(--hlb-navy);
  outline-offset: 2px;
}

.hlb-post-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.hlb-post-icon--fill {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.hlb-post-icon--line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover / focus label under the icon */
.hlb-post-act__tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 3;
  padding: 6px 10px;
  background: var(--hlb-ink);
  color: #fff;
  font: 500 12px/1 var(--hlb-font-body);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity var(--hlb-speed) var(--hlb-ease), visibility var(--hlb-speed) var(--hlb-ease);
}

.hlb-post-act:hover > .hlb-post-act__tip,
.hlb-post-act:focus-visible > .hlb-post-act__tip {
  opacity: 1;
  visibility: visible;
}

/* Last icon: keep the label inside the column */
.hlb-post-acts__list > li:last-child .hlb-post-act__tip {
  left: auto;
  right: 0;
  transform: none;
}

.hlb-post-menu[open] .hlb-post-act__tip {
  display: none;
}

/* Menu, 2+ files or links */
.hlb-post .hlb-post-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 4;
  width: max-content;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 40px));
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--hlb-post-line);
  box-shadow: 0 8px 24px rgba(17, 21, 51, .12);
}

.hlb-post .hlb-post-menu__list > li {
  margin: 0;
  padding: 0;
}

.hlb-post .hlb-post-menu__list > li::before {
  content: none;
}

.hlb-post .hlb-post-menu__list a {
  display: block;
  padding: 9px 16px;
  font: 400 14px/1.35 var(--hlb-font-body);
  color: var(--hlb-ink);
  text-decoration: none;
}

.hlb-post .hlb-post-menu__list a:hover,
.hlb-post .hlb-post-menu__list a:focus-visible {
  color: var(--hlb-blue);
  background: #F4F6F8;
}

@media (max-width: 767px) {
  .hlb-post__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hlb-post .hlb-post-menu__list {
    right: auto;
    left: 0;
  }
}

/* --- Body + sidebar --- */

.hlb-post__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--hlb-post-main)) minmax(0, 333px);
  justify-content: space-between;
  column-gap: 48px;
  margin-top: 50px;
}

@media (max-width: 1023px) {
  .hlb-post__grid {
    grid-template-columns: minmax(0, var(--hlb-post-main));
    row-gap: 56px;
  }
}

.hlb-post .hlb-post__lead,
.hlb-post .hlb-post__lead p {
  font: 400 18px/28px var(--hlb-font-body);
  color: var(--hlb-turquoise);
}

.hlb-post .hlb-post__lead p {
  margin: 0 0 16px;
}

.hlb-post__lead {
  margin-bottom: 28px;
}

.hlb-post__lead > :last-child {
  margin-bottom: 0;
}

/* Intro links only: navy underline, blue on hover. Body links untouched */
.hlb-post .hlb-post__lead a {
  color: var(--hlb-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--hlb-speed) var(--hlb-ease);
}

.hlb-post .hlb-post__lead a:hover,
.hlb-post .hlb-post__lead a:focus-visible {
  color: var(--hlb-blue);
}

/* Prose */
.hlb-post .hlb-post__body,
.hlb-post .hlb-post__author {
  font: 400 15px/1.7 var(--hlb-font-body);
  color: var(--hlb-black);
}

.hlb-post .hlb-post__body p,
.hlb-post .hlb-post__author p {
  margin: 0 0 16px;
  font: inherit;
  color: inherit;
}

.hlb-post .hlb-post__body > :last-child,
.hlb-post .hlb-post__author > :last-child {
  margin-bottom: 0;
}

.hlb-post .hlb-post__body h2,
.hlb-post .hlb-post__body h3,
.hlb-post .hlb-post__body h4 {
  margin: 32px 0 12px;
  font: 500 18px/1.35 var(--hlb-font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hlb-ink);
}

.hlb-post .hlb-post__body h4 {
  font-size: 16px;
}

.hlb-post .hlb-post__body ul,
.hlb-post .hlb-post__body ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.hlb-post .hlb-post__body ul {
  list-style: disc;
}

.hlb-post .hlb-post__body ol {
  list-style: decimal;
}

.hlb-post .hlb-post__body li {
  margin: 0 0 12px;
  padding-left: 4px;
}

.hlb-post .hlb-post__body li::marker {
  color: var(--hlb-ink);
  font-size: .8em;
}

.hlb-post .hlb-post__body a,
.hlb-post .hlb-post__author a {
  color: var(--hlb-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hlb-post .hlb-post__body a:hover,
.hlb-post .hlb-post__author a:hover {
  color: var(--hlb-turquoise);
}

.hlb-post .hlb-post__body blockquote {
  margin: 28px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--hlb-turquoise);
  font-style: italic;
}

.hlb-post .hlb-post__body img {
  max-width: 100%;
  height: auto;
}

.hlb-post .hlb-post__body hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--hlb-post-line);
}

/* Tables. Any table pasted into Article Body. Inline widths from editors ignored.
 * Mobile: stacked cards (post-tables.js adds labels), else sideways scroll */
.hlb-post .hlb-post__body table {
  width: 100% !important;
  height: auto !important;
  margin: 32px 0;
  border: 0;
  border-collapse: collapse;
  font: 400 14px/1.5 var(--hlb-font-body);
  color: var(--hlb-black);
}

.hlb-post .hlb-post__body th,
.hlb-post .hlb-post__body td {
  width: auto !important;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--hlb-post-line);
  text-align: left;
  vertical-align: top;
}

.hlb-post .hlb-post__body thead th,
.hlb-post .hlb-post__body .hlb-post-table__head > * {
  background: var(--hlb-navy);
  color: #fff;
  font-weight: 600;
  vertical-align: bottom;
}

.hlb-post .hlb-post__body tbody tr:nth-child(even) {
  background: #F4F6F8;
}

/* First column is the row name */
.hlb-post .hlb-post__body tbody th,
.hlb-post .hlb-post__body tbody td:first-child {
  font-weight: 600;
  color: var(--hlb-ink);
}

.hlb-post .hlb-post__body td p {
  margin: 0 0 8px;
}

.hlb-post .hlb-post__body td > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  /* No header: scroll inside the column, page never scrolls sideways */
  .hlb-post .hlb-post__body table:not(.hlb-post-table--stack) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hlb-post .hlb-post__body table:not(.hlb-post-table--stack) td,
  .hlb-post .hlb-post__body table:not(.hlb-post-table--stack) th {
    min-width: 160px;
  }

  /* Stacked: one card per row, header text as labels */
  .hlb-post .hlb-post__body .hlb-post-table--stack,
  .hlb-post .hlb-post__body .hlb-post-table--stack tbody,
  .hlb-post .hlb-post__body .hlb-post-table--stack tr,
  .hlb-post .hlb-post__body .hlb-post-table--stack td,
  .hlb-post .hlb-post__body .hlb-post-table--stack tbody th {
    display: block;
  }

  .hlb-post .hlb-post__body .hlb-post-table--stack thead,
  .hlb-post .hlb-post__body .hlb-post-table--stack .hlb-post-table__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .hlb-post .hlb-post__body .hlb-post-table--stack tr,
  .hlb-post .hlb-post__body .hlb-post-table--stack tbody tr:nth-child(n) {
    padding: 4px 0;
    border-top: 3px solid var(--hlb-navy);
    background: none;
  }

  .hlb-post .hlb-post__body .hlb-post-table--stack tr + tr {
    margin-top: 24px;
  }

  .hlb-post .hlb-post__body .hlb-post-table--stack td,
  .hlb-post .hlb-post__body .hlb-post-table--stack tbody th {
    padding: 10px 0;
  }

  .hlb-post .hlb-post__body .hlb-post-table--stack td:last-child {
    border-bottom: 0;
  }

  .hlb-post .hlb-post__body .hlb-post-table--stack td:first-child {
    font-size: 16px;
  }

  .hlb-post .hlb-post__body .hlb-post-table--stack td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font: 600 11px/1.3 var(--hlb-font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hlb-blue);
  }
}

.hlb-post__author {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hlb-post-line);
}

/* Sidebar */
.hlb-post__block + .hlb-post__block {
  margin-top: 56px;
}

.hlb-post .hlb-post__block-title {
  margin: 0 0 28px;
  padding: 0;
  font: 500 16px/1.2 var(--hlb-font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hlb-ink);
}

/* Figma sidebar is 333 wide: 167 photo leaves ~140 for text */
@media (min-width: 1024px) {
  .hlb-post__side .hlb-pro-card--sm {
    column-gap: 24px;
  }
}

.hlb-post .hlb-post__caps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlb-post .hlb-post__caps > li {
  margin: 0;
  padding: 0;
}

.hlb-post .hlb-post__caps > li::before {
  content: none;
}

.hlb-post .hlb-post__caps a {
  font: 400 14px/1.5 var(--hlb-font-body);
  color: var(--hlb-blue);
  text-decoration: none;
  transition: color var(--hlb-speed) var(--hlb-ease);
}

.hlb-post .hlb-post__caps a:hover,
.hlb-post .hlb-post__caps a:focus-visible {
  color: var(--hlb-turquoise);
}

/* --- Related Content (old [single_post_related] for now) --- */

.hlb-post-related__inner {
  width: min(var(--hlb-post-wrap), 100% - var(--hlb-post-gut) * 2);
  margin: 0 auto;
  padding: 0 0 var(--hlb-post-end);
}