/* ==========================================================================
   Section: Hero — Figma 69:550
   Top block 587px tall, centred content, seal floating right; then a
   four-image strip with a 10px gutter.
   ========================================================================== */

.trustav-hero {
  padding-block: 0;
  background-color: var(--c-white);
}

/* --- Top ----------------------------------------------------------------- */
.trustav-hero__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 587px;
  padding-block: var(--space-3xl);
}

.trustav-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 39px;
  text-align: center;
}

/* Eyebrow: Manrope Medium 12px, 3.72px tracking, uppercase. */
.trustav-hero__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: 0.31em;
  text-transform: uppercase;
  color: var(--c-accent);
}

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

/* Figma: Lora 74 / 100% / -5%, wrapped at 697px. */
.trustav-hero__title {
  max-width: 43.5rem;
  margin: 0;
  color: var(--c-black);
}

/* Figma: Manrope 18 / 150% / -1%, wrapped at 615px. */
.trustav-hero__text {
  max-width: 38.4rem;
  margin: 0;
  color: var(--c-neutral-1);
}

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

/* --- Seal — Figma 69:528, 211px, rotated -7deg --------------------------- */
.trustav-hero__seal {
  position: absolute;
  top: 29px;
  left: 76.2%;
  display: grid;
  place-items: center;
  width: 211px;
  height: 211px;
  transform: rotate(-7deg);
  pointer-events: none;
}

/* Gold artwork from the designer's Seal.svg (2026-09-24): starburst, gradient
   and inner ring. Icon and wording sit on top in --c-seal-ink. */
.trustav-seal__ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  filter: drop-shadow(var(--shadow-seal));
}

.trustav-seal__ring svg {
  width: 100%;
  height: 100%;
}

.trustav-seal__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px; /* Seal.svg: icon 43–99, title from 108 */
  width: 150px;
  text-align: center;
  color: var(--c-seal-ink);
}

.trustav-seal__icon svg {
  width: 56px;
  height: 56px;
}

.trustav-seal__title {
  font-family: var(--ff-heading);
  text-transform: uppercase;
  font-size: 0.9375rem; /* Seal.svg: SPOLUPRACUJEME spans ~140 of 211px */
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Figma 69:497 — semibold uppercase, Primary/Secondary like the title. */
.trustav-seal__text {
  margin-block-start: 6px; /* Seal.svg: 15px from title to subline */
  max-width: 120px; /* the ring narrows at the bottom; longer EN/DE lines wrap */
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-transform: uppercase;
}

.trustav-seal__title,
.trustav-seal__text {
  color: var(--c-seal-ink);
}

/* --- Image strip --------------------------------------------------------- */
.trustav-hero__gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-inline: 10px;
}

.trustav-hero__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1389 / 1850;
  overflow: hidden;
  background-color: var(--c-neutral-4);
}

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

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1280px) {
  /* Keep the seal clear of the headline as the column narrows. */
  .trustav-hero__seal {
    left: auto;
    right: var(--gutter);
    width: 170px;
    height: 170px;
  }

  /* Same layout as 211px, scaled to 170. */
  .trustav-seal__body {
    width: 150px;
    transform: scale(0.806);
  }

}

@media (max-width: 1024px) {
  .trustav-hero__top {
    min-height: 0;
    padding-block: var(--space-4xl) var(--space-3xl);
  }

  /* The client wants the seal on phones too (2026-09-29): stack the top
     block and let the seal sit in flow under the pills, centred. */
  .trustav-hero__top {
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .trustav-hero__seal {
    position: static;
    width: 170px;
    height: 170px;
  }

  .trustav-seal__body {
    transform: scale(0.806);
  }

  .trustav-hero__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Phone and tablet — Figma 281:3531 (Hero Mobile, 360px) ---------------
   The seal leaves the copy and sits centred over the 2 × 2 photo grid, 165px,
   turned -8.63deg. The grid closes the hero, so its centre is one photo plus
   half a gutter up from the bottom edge; cqw keeps that exact at any width. */
@media (max-width: 1024px) {
  .trustav-hero:has(.trustav-hero__gallery) {
    position: relative;
    container-type: inline-size;
  }

  .trustav-hero:has(.trustav-hero__gallery) .trustav-hero__top {
    position: static;
  }

  .trustav-hero:has(.trustav-hero__gallery) .trustav-hero__seal {
    position: absolute;
    top: auto; /* Let the gallery-relative bottom override the desktop top. */
    z-index: 1; /* Keep the seal above the positioned gallery figures. */
    bottom: calc((100cqw - 30px) / 2 * 1850 / 1389 + 5px); /* photo height + half the 10px gutter */
    left: 50%;
    width: 165px; /* Figma 281:3671 */
    height: 165px;
    translate: -50% 50%;
    transform: rotate(-8.63deg);
  }

  .trustav-hero:has(.trustav-hero__gallery) .trustav-seal__body {
    transform: scale(0.782); /* 165 / 211 */
  }
}

@media (max-width: 640px) {
  /* Figma 281:3594 — the desktop 39px / 19px rhythm holds on the phone. */
  .trustav-hero__top {
    padding-block: var(--space-2xl);
  }
}

/* Figma 281:3644 — four pills as a 2 × 2 grid of equal halves, 10px type. */
@media (max-width: 480px) {
  .trustav-hero__pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }

  .trustav-hero__pills .trustav-pill {
    justify-content: center;
    min-width: 0;
    font-size: var(--fs-pill-xs);
    text-align: center;
  }

  .trustav-hero__pills .trustav-pill--rating {
    text-transform: uppercase;
  }

  .trustav-hero__pills .trustav-pill__icon svg {
    width: 11px; /* Figma 281:3604 */
    height: 11px;
  }

  .trustav-hero__pills .trustav-pill__rating {
    margin-inline-start: -5px;
  }

  .trustav-hero__pills .trustav-pill__stars svg {
    width: 62px; /* Figma 281:3611 */
    height: 10px;
  }
}