/* ==========================================================================
   Component: Blog article — Figma 191:2957 (single.php)
   One 900px column: hero, table of contents, body, author card; then the
   related cards, which reuse the .trustav-posts card styles.
   ========================================================================== */

.trustav-article {
  background-color: var(--c-white);
}

.trustav-article__container {
  width: min(900px, calc(100% - 2 * var(--space-md)));
  margin-inline: auto;
}

/* --- Hero — Figma 191:2982 ----------------------------------------------- */
.trustav-article__head {
  display: flex;
  flex-direction: column;
  gap: 39px;
  padding-block: 83px 90px; /* 128px below the frame top, under a 45px crumb strip */
}

.trustav-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) 20px;
}

.trustav-article__category {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background-color: var(--c-neutral-1);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-white);
  transition: background-color var(--dur) var(--ease);
}

.trustav-article__category:hover,
.trustav-article__category:focus-visible {
  background-color: var(--c-accent);
  color: var(--c-white);
}

.trustav-article__title {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-align: center;
  color: var(--c-black);
}

.trustav-article__visual {
  position: relative;
}

.trustav-article__figure {
  height: 463px; /* Figma 191:2962 */
  margin: 0;
  overflow: hidden;
  background-color: var(--c-neutral-3);
}

.trustav-article__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma 235:4578 — 224×241, 23px right of the column. */
.trustav-article__cta {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(100% + 23px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 224px;
  height: 241px;
  padding: 21px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--c-neutral-1);
}

.trustav-article__cta-image,
.trustav-article__cta-image::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.trustav-article__cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trustav-article__cta-image::after {
  content: "";
  z-index: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.35) 26%, rgb(0 0 0 / 0) 75%);
}

.trustav-article__cta-title {
  max-width: 170px;
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h6);
  color: var(--c-white);
}

.trustav-article__cta .trustav-btn {
  width: 182px; /* Figma 235:4573 */
  padding-inline: 24px;
}

/* --- Rich text — Figma 191:3015 ------------------------------------------ */
.trustav-article__intro,
.trustav-article__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
}

.trustav-article .trustav-rte > * + * {
  margin-block-start: 13px; /* Figma 191:3013 */
}

.trustav-article .trustav-rte h2,
.trustav-article .trustav-rte h3 {
  margin-block: 70px 0; /* two 35px section paddings */
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-black);
  scroll-margin-block-start: calc(var(--header-height) + var(--space-md));
}

.trustav-article .trustav-article__body > h2:first-child {
  margin-block-start: 0;
}

.trustav-article .trustav-rte h2 + *,
.trustav-article .trustav-rte h3 + * {
  margin-block-start: 30px; /* Figma 191:3017 */
}

.trustav-article .trustav-rte ul {
  padding-inline-start: 27px;
  list-style: disc;
}

.trustav-article .trustav-rte li + li {
  margin-block-start: 0;
}

.trustav-article .trustav-rte img {
  height: auto;
}

.trustav-article__body {
  padding-block: 90px 35px; /* 55px under the contents box + 35px */
}

/* --- Table of contents — Figma 191:3006 ---------------------------------- */
.trustav-article__toc {
  padding: 30px;
  background-color: var(--c-neutral-4);
  border: var(--border);
}

/* A native <details>: open by default, the heading toggles it. */
.trustav-article__toc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.trustav-article__toc-title::-webkit-details-marker {
  display: none;
}

.trustav-article__toc[open] .trustav-article__toc-title {
  margin-block-end: 30px;
}

.trustav-article__toc-toggle {
  flex: 0 0 auto;
  color: var(--c-accent);
  transition: transform var(--dur) var(--ease);
}

.trustav-article__toc-toggle svg {
  display: block;
  width: 14px;
  height: 14px;
}

.trustav-article__toc[open] .trustav-article__toc-toggle {
  transform: rotate(180deg);
}

.trustav-article__toc-title:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .trustav-article__toc-toggle {
    transition: none;
  }
}

.trustav-article__toc-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-primary);
}

.trustav-article__toc .trustav-article__toc-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trustav-article__toc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
  transition: color var(--dur) var(--ease);
}

.trustav-article__toc-link:hover,
.trustav-article__toc-link:focus-visible {
  color: var(--c-accent);
}

.trustav-article__toc-icon {
  flex: 0 0 auto;
  color: var(--c-neutral-2);
}

.trustav-article__toc-icon svg {
  display: block;
  width: 10px;
  height: 10px;
  transform: rotate(-90deg);
}

/* --- Author card — Figma 191:3076 ---------------------------------------- */
.trustav-article__author-wrap {
  padding-block: 55px 90px;
}

.trustav-article__author {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 30px;
  background-color: var(--c-primary);
  color: var(--c-white);
}

.trustav-article__author-left {
  display: flex;
  flex: 0 0 305px;
  flex-direction: column;
  gap: 51px;
}

.trustav-article__author-label {
  margin: 0;
  font-size: 0.75rem; /* Figma 191:3052 — 12px, fixed. */
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: 0.31em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.trustav-article__author-person {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.trustav-article__author-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trustav-article__author-avatar {
  flex: 0 0 57px;
  width: 57px;
  height: 57px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--c-accent);
}

.trustav-article__author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trustav-article__author-name {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.trustav-article__author-role {
  margin: 4px 0 0;
  font-size: 0.75rem; /* Figma 191:3054 */
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-3);
  opacity: 0.6;
}

.trustav-article__author-quote {
  display: flex;
  gap: 12px;
  margin: 0;
}

.trustav-article__author-quote-icon {
  flex: 0 0 10px;
}

.trustav-article__author-quote-icon svg {
  display: block;
  width: 10px;
  height: 22px;
}

.trustav-article__author-quote p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.trustav-article__author-right {
  display: flex;
  flex: 1 1 455px;
  flex-direction: column;
  gap: 39px;
}

.trustav-article__author-text {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.trustav-article__author-buttons {
  display: flex;
  gap: 12px;
}

.trustav-article__author-buttons .trustav-btn {
  flex: 1 1 0;
  padding-inline: var(--space-sm);
}

/* Figma 191:3062 — the primary button is accent on the green card. */
.trustav-article__author-buttons .trustav-btn--primary {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

.trustav-article__author-buttons .trustav-btn--primary:hover,
.trustav-article__author-buttons .trustav-btn--primary:focus-visible {
  background-color: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-primary);
}

/* --- Related — Figma 191:3341 -------------------------------------------- */
.trustav-posts.trustav-article-related {
  padding-block: 90px 130px;
  background-color: var(--c-white);
}

.trustav-article-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: 60px;
}

.trustav-article-related__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-black);
}

.trustav-article-related .trustav-text-link {
  border-bottom-color: var(--c-neutral-3);
}

/* --- Responsive ---------------------------------------------------------- */
/* The side CTA needs 247px each side of the column. */
@media (max-width: 1399px) {
  .trustav-article__cta {
    position: relative;
    inset: auto;
    width: 100%;
    margin-block-start: var(--space-md);
  }
}

@media (max-width: 900px) {
  .trustav-article__author {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xl);
  }

  .trustav-article__author-left,
  .trustav-article__author-right {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .trustav-article__head {
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .trustav-article__figure {
    height: auto;
    aspect-ratio: 900 / 463;
  }

  .trustav-article__body {
    padding-block-start: var(--space-3xl);
  }

  .trustav-article .trustav-rte h2,
  .trustav-article .trustav-rte h3 {
    margin-block-start: var(--space-3xl);
  }

  .trustav-article__author-wrap {
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .trustav-article__author-buttons {
    flex-direction: column;
  }

  .trustav-posts.trustav-article-related {
    padding-block: var(--space-3xl);
  }

  .trustav-article-related__head {
    margin-block-end: var(--space-xl);
  }
}