/*
 * Team page — page-only tweaks.
 * Shared hero / breadcrumbs / contact / team-card live in global sheets.
 *
 * Hero matches Locations: same rq-archive-hero shell — only photo focus and
 * overlays differ. Do not re-pin height / translate copy here.
 *
 * Enqueue conditions (any one is enough): page ID 40622, slug team|our-team,
 * or Elementor class rq-team-page on the document.
 */

/* Page marker — used by enqueue conditions; no visual effect. */
.rq-page .rq-team-page {
  display: block;
}

/*
 * Desktop: lift copy toward crumbs like React Team
 * (copyWrapperClassName: md:-translate-y-[75px] lg:-translate-y-[67px]).
 * Use top (not transform) so it doesn't fight .rq-reveal-up. Mobile untouched.
 */
@media (min-width: 768px) {
  .rq-page .rq-team-page .rq-archive-hero__copy {
    position: relative;
    top: -75px;
  }
}

@media (min-width: 1024px) {
  .rq-page .rq-team-page .rq-archive-hero__copy {
    position: relative;
    top: -67px;
  }
}

.rq-page .rq-team {
  scroll-margin-top: 8rem;
}

/* React: md:object-[right_58%] on the workshop portrait. */
.rq-page .rq-team-hero .rq-archive-hero__photo img {
  object-position: center center;
}

@media (min-width: 768px) {
  .rq-page .rq-team-hero .rq-archive-hero__photo img {
    object-position: right 58%;
  }
}

/*
 * React Team overlays (same stack as Locations):
 * - rightGradient: from-30% / via-60% / to-92%
 * - flat wash bg-background/20
 * - edgeVeils top/bottom
 * Photo also gets shared archive-hero feather mask (md+).
 */
.rq-page .rq-team-hero::before {
  background-color: color-mix(in oklab, var(--rq-background) 20%, transparent);
  background-image: linear-gradient(
    to right,
    var(--rq-background) 30%,
    color-mix(in oklab, var(--rq-background) 60%, transparent) 55%,
    transparent 92%
  );
}

@media (min-width: 768px) {
  .rq-page .rq-team-hero::before {
    background-color: color-mix(in oklab, var(--rq-background) 20%, transparent);
    background-image: linear-gradient(
      to right,
      var(--rq-background) 30%,
      color-mix(in oklab, var(--rq-background) 60%, transparent) 55%,
      transparent 92%
    );
  }
}

/* Extra edge veils (React edgeVeils) for readability on the photo hero. */
.rq-page .rq-team-hero::after {
  background-image:
    linear-gradient(
      to bottom,
      var(--rq-background),
      color-mix(in oklab, var(--rq-background) 60%, transparent),
      transparent
    ),
    linear-gradient(
      to top,
      var(--rq-background),
      color-mix(in oklab, var(--rq-background) 70%, transparent),
      transparent
    );
  background-size: 100% 6rem, 100% 10rem;
  background-position: top, bottom;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .rq-page .rq-team-hero::after {
    background-size: 100% 8rem, 100% 14rem;
  }
}

/* ---------------------------------------------------------------- leadership
 * React WebsiteSectionHeading: clamp(1.75rem, 7cqi, 2.875rem) / leading 1.18
 * / font-semibold. h2-fit must be full width or cqi collapses to ~28px.
 */
.rq-page .rq-team__head .rq-h2-fit {
  width: 100%;
  max-width: 100%;
  container-type: inline-size;
}

.rq-page .rq-team__head .rq-h2 .elementor-heading-title,
.rq-page .rq-team .rq-h2 .elementor-heading-title {
  font-size: clamp(1.75rem, 7cqi, 2.875rem);
  font-weight: 600;
  line-height: 1.18;
}

.rq-page .rq-team__head .rq-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* React: mt-5 between eyebrow and h2; mt-5 + max-w-xl body */
.rq-page .rq-team__head .rq-headline {
  margin-block-start: 1.25rem;
}

.rq-page .rq-team__intro {
  margin-block-start: 1.25rem;
  max-width: 36rem; /* max-w-xl */
}

.rq-page .rq-team__intro,
.rq-page .rq-team__intro p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625;
  color: color-mix(in oklab, var(--rq-foreground) 70%, transparent);
}

@media (min-width: 768px) {
  .rq-page .rq-team__intro,
  .rq-page .rq-team__intro p {
    font-size: 1.125rem; /* md:text-lg */
  }
}

/* React: mt-8 before the card grid */
.rq-page .rq-team__grid {
  margin-block-start: 2rem;
}