/* =========================================================
   Technologies — cards (572:2283, 572:2345)
   ========================================================= */
/* White background; dividers are the cards' own borders (no grey shows through while cards fade in) */
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--container-width);
  margin-inline: auto;
  border-top: var(--stroke-1) solid var(--color-border);
  background: var(--color-bg);
}

.tech-card {
  display: grid;
  grid-template-columns: 1fr var(--tech-card-image-w);
  align-items: center;
  gap: var(--space-s-plus);
  padding: var(--space-60) var(--page-gutter);
  border-bottom: var(--stroke-1) solid var(--color-border);
  background: var(--color-bg);
}

.tech-card:nth-child(odd) {
  border-right: var(--stroke-1) solid var(--color-border);
}

.tech-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tech-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon);
  height: var(--btn-icon);
  margin-bottom: var(--space-20);
  border-radius: var(--radius-10);
  background: var(--color-grey-24);
  color: var(--color-white);
}

.tech-card__text {
  max-width: var(--tech-card-text-width);
  margin-top: var(--space-11-6);
  font-size: var(--fs-link);
  line-height: var(--lh-23-49);
  color: var(--color-text-muted);
}

.tech-card__label {
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
}

.tech-card__image {
  width: var(--tech-card-image-w);
  height: var(--tech-card-image-h);
  border-radius: var(--radius-5);
  object-fit: cover;
}

.tech-card__frame,
.tech-world__frame {
  display: block;
  overflow: hidden;
}

.tech-card__image--bi,
.tech-world__image--sat {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tech-card__image--bi {
  object-position: 50% 100%;
  transform: scale(var(--tech-bi-zoom));
  transform-origin: 50% 100%;
}

/* =========================================================
   Technologies — real world (572:2391)
   ========================================================= */
.tech-world {
  position: relative;
  overflow: hidden;
}

.tech-world__glow-2 {
  left: var(--glow-why-2-x);
  top: var(--glow-tech-2-y);
}

.tech-world__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-40);
  max-width: var(--container-width);
  margin-inline: auto;
  padding: var(--space-80) var(--page-gutter);
}

.tech-world__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: var(--tech-world-intro-width);
}

.tech-world__intro .lead {
  color: var(--color-white);
}

.tech-world__list {
  display: flex;
}

.tech-world__item {
  display: flex;
  flex-direction: column;
  width: var(--tech-world-col-width);
  padding: var(--space-28);
}

.tech-world__item + .tech-world__item {
  border-left: var(--stroke-1) solid var(--color-border-inverse);
}

.tech-world__item .h3-alt {
  margin-bottom: var(--space-13-5);
}

.tech-world__text {
  margin-bottom: var(--space-14);
  color: var(--color-text-inverse-muted);
}

.tech-world__image {
  width: var(--tech-card-image-w);
  height: var(--tech-world-image-h);
  margin-top: auto;
  border-radius: var(--radius-5);
  object-fit: cover;
}

.tech-world__image--ai {
  object-position: var(--tech-world-ai-position);
}

.tech-world__image--sat {
  transform: scale(var(--tech-world-sat-zoom));
}

/* =========================================================
   Technologies — projects (572:2430)
   ========================================================= */
.tech-projects {
  display: grid;
  grid-template-columns: var(--steps-aside-width) 1fr;
  max-width: var(--container-width);
  margin-inline: auto;
  border-bottom: var(--stroke-1) solid var(--color-border);
}

.tech-projects__title {
  display: flex;
  align-items: center;
  padding: var(--space-60) var(--space-12) var(--space-60) var(--page-gutter);
  border-right: var(--stroke-1) solid var(--color-border);
}

.tech-projects__list {
  display: flex;
}

.tech-project {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-60) var(--space-20);
}

.tech-project:first-child {
  padding-left: var(--page-gutter);
}

.tech-project:last-child {
  padding-right: var(--page-gutter);
}

.tech-project + .tech-project {
  border-left: var(--stroke-1) solid var(--color-border);
}

.tech-project__title {
  color: var(--color-black);
}

.tech-project__meta {
  margin-top: var(--space-10);
  color: var(--color-black);
  opacity: var(--opacity-70);
}

.tech-project__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tech-projects-media-h);
  margin-top: var(--space-10);
  border-radius: var(--radius-5);
  background: var(--color-border);
}

.tech-project__monitor {
  width: var(--tech-projects-monitor-w);
  height: auto;
}

.tech-project__phone {
  width: auto;
  height: var(--tech-projects-phone-h);
}

.tech-project__photo {
  width: 100%;
  height: var(--tech-projects-photo-h);
  margin-top: var(--space-10);
  border-radius: var(--radius-5);
  object-fit: cover;
}

.tech-project .link-more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--space-14);
}

/* ---------- Technologies — responsive ---------- */
@media (max-width: 1200px) {
  .tech-grid {
    grid-template-columns: 1fr;
  }

  .tech-card:nth-child(odd) {
    border-right: 0;
  }

  .tech-card__text {
    max-width: none;
  }

  .tech-world__inner {
    grid-template-columns: 1fr;
  }

  .tech-world__intro {
    max-width: none;
  }

  .tech-world__list {
    margin-inline: calc(-1 * var(--space-28));
  }

  .tech-world__item {
    flex: 1 1 0;
    width: auto;
  }

  .tech-world__image {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .tech-projects {
    grid-template-columns: 1fr;
  }

  .tech-projects__title {
    padding: var(--space-60) var(--page-gutter) var(--space-20);
    border-right: 0;
  }

  .tech-project {
    padding-top: var(--space-20);
  }
}

@media (max-width: 768px) {
  .tech-card {
    grid-template-columns: 1fr;
  }

  .tech-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .tech-world__list {
    flex-direction: column;
    margin-inline: 0;
  }

  .tech-world__item {
    padding-inline: 0;
  }

  .tech-world__item + .tech-world__item {
    border-left: 0;
    border-top: var(--stroke-1) solid var(--color-border-inverse);
  }

  .tech-world__image {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .tech-projects__list {
    flex-direction: column;
  }

  .tech-project,
  .tech-project:first-child,
  .tech-project:last-child {
    padding: var(--space-30) var(--page-gutter);
  }

  .tech-project + .tech-project {
    border-left: 0;
    border-top: var(--stroke-1) solid var(--color-border);
  }
}