/* ==========================================================================
   Section: Page hero — Figma 78:382
   Breadcrumb strip (45px), a 660px centred text block, then a 600px image
   band inset 10px from the viewport edges.
   ========================================================================== */

.trustav-page-hero {
  padding-block: 0;
}

.trustav-page-hero__top {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
}

.trustav-page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 39px;
  min-height: 615px; /* Figma 660 minus the 45px breadcrumb strip. */
  padding-block: var(--space-3xl);
  text-align: center;
}

/* --- Type ---------------------------------------------------------------- */
.trustav-page-hero__eyebrow {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: 0.31em;
  color: var(--c-accent);
  text-transform: uppercase;
}

.trustav-page-hero__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.trustav-page-hero__title {
  max-width: 740px; /* Figma 78:387 is 697px; Lora renders a touch wider, so allow the design's two lines */
  margin: 0;
  font-size: var(--fs-h1);
  color: var(--c-black);
}

.trustav-page-hero__text {
  max-width: 615px; /* Figma 78:388 */
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
}

.trustav-page-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm); /* Figma 149:3173 */
}

.trustav-page-hero__buttons .trustav-btn {
  min-width: 222px; /* Figma 149:3174 */
}

@media (max-width: 560px) {
  .trustav-page-hero__buttons .trustav-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

.trustav-page-hero__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Stats row — Figma 176:2495 (Reference) ------------------------------
   Three equal figures between hairlines, split by 104px vertical rules.   */
/* Two classes deep: the base reset's ul[role="list"] would otherwise zero
   the padding. */
.trustav-page-hero__top .trustav-page-hero__stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 0 75px; /* Figma 176:2495 — 644 to the 719 frame edge */
  padding: 30px 0; /* Figma 176:2495 */
  list-style: none;
  border-block: var(--border);
}

.trustav-page-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* Figma 176:2476 */
  padding-block: 0;
  text-align: center;
}

.trustav-page-hero__stat + .trustav-page-hero__stat {
  border-inline-start: var(--border);
}

.trustav-page-hero__stat-value {
  font-family: var(--ff-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-accent);
}

.trustav-page-hero__stat-label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
}

/* With stats the copy block no longer needs the tall min-height. */
.trustav-page-hero__top:has(.trustav-page-hero__stats) .trustav-page-hero__content {
  min-height: 0;
  padding-block: 83px 60px; /* Figma 176:2401 — 128px from the top, less the strip */
}

@media (max-width: 640px) {
  .trustav-page-hero__top .trustav-page-hero__stats {
    grid-auto-flow: row;
    margin-block-end: var(--space-2xl);
    padding-block: 0;
  }

  .trustav-page-hero__stat {
    padding-block: var(--space-lg);
  }

  .trustav-page-hero__stat + .trustav-page-hero__stat {
    border-inline-start: 0;
    border-block-start: var(--border);
  }
}

/* --- Image band ---------------------------------------------------------- */
.trustav-page-hero__banner {
  padding-inline: 10px; /* Figma 78:431 */
  background-color: var(--c-white);
}

.trustav-page-hero__figure {
  margin: 0;
  overflow: hidden;
  height: 600px;
  background-color: var(--c-neutral-4);
}

.trustav-page-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* Figma crops from the top of the facade. */
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .trustav-page-hero__content {
    min-height: 0;
    gap: var(--space-xl);
    padding-block: var(--space-4xl);
  }

  .trustav-page-hero__figure {
    height: clamp(18rem, 42vw, 37.5rem);
  }
}

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

  .trustav-page-hero__banner {
    padding-inline: 0;
  }
}

/* --- Overlay variant — Figma 94:1662 (About Us, Team, Production) ---------
   Same content, but the copy sits on a 700px image under a 65% scrim. The
   breadcrumb strip stays opaque above it.                                   */
.trustav-page-hero--overlay .trustav-page-hero__top {
  isolation: isolate;
  background-color: var(--c-black);
}

.trustav-page-hero--overlay .trustav-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.trustav-page-hero--overlay .trustav-page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; /* Figma 94:1663 anchors to the sill line. */
}

/* rgba(28,28,28,0.65) — Figma 94:1663. */
.trustav-page-hero--overlay .trustav-page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(28 28 28 / 65%);
}

.trustav-page-hero--overlay .trustav-page-hero__content {
  min-height: 655px; /* Figma 700 minus the 45px breadcrumb strip. */
}

.trustav-page-hero--overlay .trustav-page-hero__eyebrow {
  color: var(--c-neutral-3);
}

.trustav-page-hero--overlay .trustav-page-hero__title {
  color: var(--c-white);
}

.trustav-page-hero--overlay .trustav-page-hero__text {
  max-width: 541px; /* Figma 94:1668 */
  color: var(--c-neutral-3);
}

.trustav-page-hero--overlay .trustav-btn--primary {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

.trustav-page-hero--overlay .trustav-btn--primary:hover,
.trustav-page-hero--overlay .trustav-btn--primary:focus-visible {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}

@media (max-width: 1024px) {
  .trustav-page-hero--overlay .trustav-page-hero__content {
    min-height: clamp(24rem, 55vw, 40.9375rem);
  }
}

/* --- Category tabs — Figma 186:3793 (Blog) -------------------------------
   38px tabs 10px apart; the Blog hero is 560px, not 660px.                */
.trustav-page-hero__content:has(.trustav-page-hero__tabs) {
  min-height: 515px; /* Figma 186:3652 — 560 minus the 45px breadcrumb strip */
}

/* Two classes deep so the reset's ul[role="list"] loses. */
.trustav-page-hero__tabs .trustav-page-hero__tab-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trustav-page-hero__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height-sm);
  padding-inline: 24px;
  font-size: var(--fs-btn-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-button);
  white-space: nowrap;
  color: var(--c-neutral-2);
  background-color: var(--c-neutral-4);
  border: var(--border);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.trustav-page-hero__tab:hover,
.trustav-page-hero__tab:focus-visible {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.trustav-page-hero__tab.is-current {
  color: var(--c-white);
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

.trustav-page-hero__content:has(.trustav-page-hero__tabs) .trustav-page-hero__title {
  max-width: 777px; /* Figma 186:3671 */
}

/* --- Compact — Figma 192:3472 (Recenze) ---------------------------------- */
/* 52px headline, 615px copy, 528px tall including the breadcrumb strip. */
.trustav-page-hero--compact .trustav-page-hero__content {
  min-height: 483px;
}

.trustav-page-hero--compact .trustav-page-hero__title {
  max-width: 615px;
  font-size: var(--fs-h2);
}

@media (max-width: 1024px) {
  .trustav-page-hero--compact .trustav-page-hero__content {
    min-height: 0;
  }
}