/*
 * 05 Dream team.
 *
 * Two panel hairline grid plus the 2x2 tile block. The prototype used
 * container queries and cqw units against a wrapper this theme does not
 * have, so the one breakpoint that matters here is a media query at 640px.
 * There is deliberately no 1100px rule: this grid carried .m-stack only and
 * never .t-stack, so the two panels hold their split all the way down.
 */

.ad-team {
  padding: 0 var(--ad-space-page) var(--ad-space-section);
}

/* --------------------------------------------------------- hairline grid */

/*
 * The 1px lines are the parent's background showing through a 1px gap, the
 * same recipe the AI and agencies grids use. Each child paints its own
 * opaque fill on top.
 */
.ad-team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ad-space-hairline);
  background: var(--ad-color-hairline);
  border: var(--ad-space-hairline) solid var(--ad-color-hairline);
}

/* An editor who removes every tile gets a full width panel, not half a grid. */
.ad-team__grid:not(:has(.ad-team__tiles)) {
  grid-template-columns: 1fr;
}

/*
 * SC 2.4.7. The reveal defined in hero.css starts at opacity 0, and the
 * observer can leave a partly visible block hidden while the CTA inside it
 * is already tabbable, which draws a focus ring on invisible content. Focus
 * anywhere inside forces the reveal. Scoped to this section so the shared
 * [data-reveal] rules are not redefined.
 */
.js .ad-team__grid:focus-within {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ left panel */

.ad-team__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  /* Grid items default to min-width:auto, which lets a long word push the
     column wider than the viewport (SC 1.4.10). */
  min-width: 0;
  padding: 64px 56px;
  background: var(--ad-color-panel);
}

.ad-team__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ad-color-accent);
}

.ad-team__title {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: pretty;
}

.ad-team__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ad-color-text-secondary);
  text-wrap: pretty;
}

/*
 * align-self keeps the link box the width of its own text. As a stretched
 * flex child it would span the whole panel, so the focus ring would outline
 * an area far larger than the target it belongs to.
 */
.ad-team__cta {
  display: inline-flex;
  align-self: start;
  align-items: center;
  gap: 10px;
  /* SC 2.5.8. The 15px label alone is a 20px tall target. */
  min-height: var(--ad-size-hit);
  font-size: 15px;
  font-weight: 600;
  color: var(--ad-color-accent);
}

.ad-team__cta svg {
  flex: none;
}

/* ----------------------------------------------------------- tile grid */

/*
 * The tile block paints its own ground, so the 1px gaps between the four
 * tiles land on the same colour as the tiles and are invisible. That is what
 * the design shows: only the outer hairline and the accent tile's outline
 * read as lines. Do not give these gaps a border colour.
 */
.ad-team__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ad-space-hairline);
  min-width: 0;
  background: var(--ad-color-bg);
}

.ad-team__tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  min-height: 180px;
  padding: 40px 32px;
  background: var(--ad-color-bg);
  /* Transparent by default so the accent tile's outline does not shift the
     content of that one tile by a pixel. */
  border: var(--ad-space-hairline) solid transparent;
}

/*
 * The highlight is visual emphasis only. It does not mark a state, a
 * recommendation or a selection, so no non-colour signal is owed here
 * (SC 1.4.1). If it ever comes to mean something, it needs text.
 */
.ad-team__tile--accent {
  background: var(--ad-color-panel);
  border-color: var(--ad-color-accent);
}

.ad-team__tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ad-team__tile-icon {
  display: inline-flex;
  flex: none;
  color: var(--ad-color-accent);
}

/*
 * text-meta is the retoken of the prototype's #5B6470, which measured 3.32:1
 * and failed SC 1.4.3 at this size. It reaches 4.59:1 on the tile ground.
 * Note it is only 4.39:1 on the panel fill, which is why the accent tile's
 * letter takes the accent colour (7.13:1) instead.
 */
.ad-team__tile-letter {
  font-family: var(--ad-font-mono);
  font-size: 11px;
  color: var(--ad-color-text-meta);
}

.ad-team__tile--accent .ad-team__tile-letter {
  color: var(--ad-color-accent);
}

.ad-team__tile-name {
  font-size: 20px;
  font-weight: 600;
  /* Last resort at 320px, where a 2x2 grid inside the page gutter leaves a
     single long word wider than its column (SC 1.4.10). */
  overflow-wrap: break-word;
}

.ad-team__tile-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ad-color-text-muted);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 640px) {
  /*
   * .m-py added a top padding the desktop layout does not have, so the gap
   * between sections is 72px + 72px on mobile against 140px on desktop.
   * Reproduced as measured.
   */
  .ad-team {
    padding: var(--ad-space-section-mobile) var(--ad-space-page-mobile);
  }

  .ad-team__grid {
    grid-template-columns: 1fr;
  }

  .ad-team__panel {
    padding: 64px var(--ad-space-page-mobile);
  }

  .ad-team__title {
    font-size: 34px;
  }

  /*
   * The tiles stay 2x2 on purpose. At 320px, 32px of side padding inside the
   * 20px page gutter leaves about 74px of text width per tile, which forces
   * horizontal scrolling, so the inline padding drops to the gutter value
   * here (SC 1.4.10). The 40px block padding and the 180px floor are
   * unchanged.
   */
  .ad-team__tile {
    padding-inline: var(--ad-space-page-mobile);
  }
}

/* --------------------------------------------------------------- motion */

/*
 * The tile block is the target of the design's vertical scrub. No script in
 * this theme drives it yet, but large amplitude scroll coupled parallax is
 * the likeliest thing on this page to make a vestibular visitor unwell, so
 * the guard ships with the section rather than after it. !important because
 * a scrub writes an inline transform.
 */
@media (prefers-reduced-motion: reduce) {
  .ad-team__tiles {
    transform: none !important;
  }
}

/* Same treatment when the visitor has asked for motion to stop (SC 2.2.2). */
[data-ad-motion="off"] .ad-team__tiles {
  transform: none !important;
}