/* ==========================================================================
   Section: Process cards — Figma 92:1336
   ========================================================================== */

.trustav-process-cards__head {
  display: flex;
  flex-direction: column;
  gap: 28px; /* Figma 92:1293 */
  width: min(638px, 100%);
  margin-inline: auto;
  text-align: center;
}

.trustav-process-cards__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);
  color: var(--c-text);
}

.trustav-process-cards__intro {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-muted);
}

.trustav-process-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; /* Figma 92:1317 */
  margin: 70px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: trustav-step;
}

.trustav-step-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.trustav-step-card__media {
  margin: 0;
  aspect-ratio: 295 / 180; /* Figma 92:1304 */
}

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

.trustav-step-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  padding: 28px 24px;
  border: var(--border);
  border-block-start: 0;
}

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

.trustav-step-card__title {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
}

.trustav-step-card__text {
  margin: 18px 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-muted);
}

@media (max-width: 1024px) {
  .trustav-process-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--space-3xl);
  }
}

@media (max-width: 560px) {
  .trustav-process-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Two across — Figma 124:3451 (Production) -----------------------------
   Wide cards: a 590x368 image, 56px of air, then the step number inline with
   the title and an optional text link at the foot.                          */
.trustav-process-cards--cols-2 .trustav-process-cards__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px; /* Figma 124:3451 */
  align-items: start;
}

.trustav-process-cards--cols-2 .trustav-step-card {
  gap: 56px; /* Figma 124:3499 */
}

.trustav-process-cards--cols-2 .trustav-step-card__media {
  aspect-ratio: 590 / 368; /* Figma 124:3500 */
}

.trustav-process-cards--cols-2 .trustav-step-card__body {
  gap: 19px; /* Figma 124:3502 */
  padding: 0;
  border: 0; /* the wide cards have no frame — only the narrow ones do */
}

.trustav-process-cards--cols-2 .trustav-step-card__title {
  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);
}

.trustav-step-card__num {
  color: var(--c-accent);
}

.trustav-process-cards--cols-2 .trustav-step-card__text {
  font-size: var(--fs-body-sm);
}

.trustav-process-cards--cols-2 .trustav-text-link {
  width: 100%;
  margin-block-start: 9px; /* Figma 126:3724 — 28px gap, less the body gap. */
  border-bottom-color: var(--c-border);
}

/* --- Split heading — Figma 155:3179 (Vzorkovna) ---------------------------
   Headline left at 441px, intro right at 590px, bottoms aligned.           */
.trustav-process-cards--head-split .trustav-process-cards__head {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  width: 100%;
  text-align: start;
}

.trustav-process-cards--head-split .trustav-process-cards__title {
  max-width: 441px; /* Figma 155:3180 */
}

.trustav-process-cards--head-split .trustav-process-cards__intro {
  max-width: 590px; /* Figma 155:3181 */
}

@media (max-width: 900px) {
  .trustav-process-cards--head-split .trustav-process-cards__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }
}

/* --- Three with images — Figma 155:3207 (Vzorkovna) -------------------------
   390x320 photo over the same bordered body as the four-across card.      */
.trustav-process-cards--cols-3i .trustav-process-cards__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px; /* Figma 155:3207 */
}

.trustav-process-cards--cols-3i .trustav-step-card__media {
  aspect-ratio: 390 / 320; /* Figma 155:3209 */
}

.trustav-process-cards--cols-3i .trustav-step-card__title {
  font-size: var(--fs-body);
}

.trustav-process-cards--cols-3i .trustav-step-card__text {
  font-size: var(--fs-small);
}

@media (max-width: 1024px) {
  .trustav-process-cards--cols-3i .trustav-process-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .trustav-process-cards--cols-3i .trustav-process-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Three numbered — Figma 149:1773 (Montáž) ------------------------------
   Text-only bordered cards: a 48px number badge beside the title.          */
.trustav-process-cards--cols-3 .trustav-process-cards__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px; /* Figma 149:1773 */
}

.trustav-process-cards--cols-3 .trustav-step-card__body {
  gap: 26px; /* Figma 149:1775 */
  padding: 26px; /* Figma 149:1774 */
  border-block-start: var(--border);
}

.trustav-step-card__head {
  display: flex;
  align-items: center;
  gap: 21px; /* Figma 149:1776 */
}

.trustav-step-card__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px; /* Figma 149:1777 */
  height: 48px;
  font-family: var(--ff-heading);
  font-size: var(--fs-small);
  line-height: var(--lh-heading);
  color: var(--c-accent);
  background-color: var(--c-primary);
}

.trustav-process-cards--cols-3 .trustav-step-card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.trustav-process-cards--cols-3 .trustav-step-card__text {
  margin: 0;
  font-size: var(--fs-body-sm);
}

@media (max-width: 1024px) {
  .trustav-process-cards--cols-3 .trustav-process-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .trustav-process-cards--cols-3 .trustav-process-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .trustav-process-cards--cols-2 .trustav-process-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xl);
  }

  .trustav-process-cards--cols-2 .trustav-step-card {
    gap: var(--space-xl);
  }
}

/* Buttons under the grid (Granty copy 2026-09-29; not in Figma). */
.trustav-process-cards__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-2xl);
}

@media (max-width: 560px) {
  .trustav-process-cards__buttons .trustav-btn {
    flex: 1 1 100%;
  }
}