/* ============================================================================
   Tour Host Team
   BEM under one block (.tour-host-team). Modifiers use the theme's leading-
   dash convention (.--light, .--dark, .--cols-2, .--anim, .--js, .--in-view).
   Colors come from theme tokens; typography from the .h*/.body* utility
   classes — no font-size is declared here. Per-element font fields are
   emitted inline by module.html, so they win over the utility class.

   Documented one-off dark-chrome shades (no theme token exists — same
   precedent as inside-the-tour / content-card-6):
     #141414 card surface · #262626 divider/border · #1f1f1f initials well
   ========================================================================== */

.tour-host-team {
  position: relative;
  z-index: 0;

  --tht-accent: var(--color-primary);
  --tht-accent-rgb: var(--color-primary-rgb);

  /* set inline by module.html from the Style tab */
  --tht-shot: 88px;
  --tht-cols: 2;
  --tht-radius: 16px;

  color: var(--tht-fg);
}

/* ---------- Color modes ---------- */
.tour-host-team.--light {
  --tht-bg: var(--color-white);
  --tht-fg: var(--color-black);
  --tht-muted: rgba(var(--color-black-rgb), 0.66);
  --tht-eyebrow: var(--color-black-40);
  --tht-divider: var(--color-black-20);
  --tht-shot-bg: var(--color-light-gray);
  --tht-shot-fg: var(--color-black-40);
  --tht-link-fg: var(--color-black);
}

.tour-host-team.--dark {
  --tht-bg: var(--color-black);
  --tht-fg: var(--color-white);
  --tht-muted: rgba(var(--color-white-rgb), 0.72);
  --tht-eyebrow: rgba(var(--color-white-rgb), 0.55);
  --tht-divider: #262626;
  --tht-shot-bg: #1f1f1f;
  --tht-shot-fg: rgba(var(--color-white-rgb), 0.5);
  --tht-link-fg: var(--tht-accent);
}

/* ---------- Full-bleed background ---------- */
.tour-host-team__background {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  background-color: var(--module-background, var(--tht-bg));
  z-index: -1;
}

/* No self-imposed container: theme modules inherit their width and side
   padding from main.body-container-wrapper (max-width var(--body-max-width),
   padding 0 var(--layout-padding)), the same as .event-host-team / .faq.
   Declaring a max-width or side padding here is what knocks the module out of
   alignment with its neighbours. */
.tour-host-team__inner { width: 100%; }
.tour-host-team__container { position: relative; width: 100%; }

/* ---------- Header ---------- */
.tour-host-team__header { max-width: 960px; }

.tour-host-team__eyebrow {
  margin: 0;
  letter-spacing: 0.11em;
  font-weight: 700;
  color: var(--tht-eyebrow);
}
.tour-host-team.--upper .tour-host-team__eyebrow { text-transform: uppercase; }

.tour-host-team__title {
  margin: 8px 0 0;
  font-weight: 800;
  color: var(--tht-fg);
}
/* bold words in the rich-text title get the yellow marker (content-card-3 pattern) */
.tour-host-team__title strong {
  background-color: var(--color-primary);
  color: var(--color-black);
}
/* optional whole-title highlight */
.tour-host-team__title.--highlight {
  display: inline;
  padding: 6px 0;
  line-height: 1.45;
  color: var(--color-black);
  background-color: var(--color-primary);
  box-shadow: 6px 0 0 var(--color-primary), -6px 0 0 var(--color-primary);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* rich text used in single-line contexts renders inline (collapse the editor's
   wrapping paragraph tag so there is no double paragraph / invalid nesting) */
.tour-host-team__title p { display: inline; margin: 0; }

/* ---------- Card grid ---------- */
.tour-host-team__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 48px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.tour-host-team__card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

/* headshot above the text instead of beside it */
.tour-host-team.--layout-above .tour-host-team__card {
  flex-direction: column;
  gap: 16px;
}

/* ---------- Headshot ---------- */
.tour-host-team__shot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tht-shot);
  height: var(--tht-shot);
  background-color: var(--tht-shot-bg);
  overflow: hidden;
}
.tour-host-team.--shot-circle .tour-host-team__shot { border-radius: 50%; }
.tour-host-team.--shot-rounded .tour-host-team__shot { border-radius: 12px; }
.tour-host-team.--shot-square .tour-host-team__shot { border-radius: 0; }

.tour-host-team__shot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tour-host-team__initials {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tht-shot-fg);
}

/* ---------- Card copy ---------- */
.tour-host-team__card-text { min-width: 0; }

.tour-host-team__name {
  margin: 0;
  font-weight: 700;
  color: var(--tht-fg);
}
/* the optional profile link inherits the name's size/weight so a font field set
   on the name still governs it */
.tour-host-team__name-link {
  font: inherit;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-duration, 0.3s) ease;
}
.tour-host-team__name-link:hover,
.tour-host-team__name-link:focus-visible {
  color: var(--tht-link-fg);
  border-bottom-color: currentColor;
}

.tour-host-team__role {
  margin: 4px 0 0;
  color: var(--tht-muted);
}

.tour-host-team__desc {
  margin: 14px 0 0;
  color: var(--tht-fg);
}
.tour-host-team__desc p { margin: 0; }
.tour-host-team__desc p + p { margin-top: 10px; }
.tour-host-team__desc a {
  color: var(--tht-link-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Scroll-in animation (progressive enhancement) ----------
   Cards render in their final state without JS. `.--js` opts into the hidden
   start state, `.--in-view` reveals them. Only opacity/transform animate. */
.tour-host-team.--anim.--js .tour-host-team__card {
  opacity: 0;
  transform: translateY(14px);
}
.tour-host-team.--anim.--js.--in-view .tour-host-team__card {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 420ms ease;
  transition-delay: calc(var(--tht-i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .tour-host-team.--anim.--js .tour-host-team__card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   Breakpoints — mobile-first base above, desktop/tablet overrides below.
   Theme breakpoints: 1439.98 / 991.98 / 767.98 / 575.98
   ========================================================================== */

/* tablet and up: switch to the configured column count */
@media (min-width: 768px) {
  .tour-host-team__cards {
    grid-template-columns: repeat(var(--tht-cols), minmax(0, 1fr));
  }
  .tour-host-team.--cols-2 { --tht-cols: 2; }
  .tour-host-team.--cols-3 { --tht-cols: 3; }
  .tour-host-team.--cols-4 { --tht-cols: 4; }
}

/* 3- and 4-up grids are too tight for a side-by-side card at tablet width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .tour-host-team.--cols-3 .tour-host-team__cards,
  .tour-host-team.--cols-4 .tour-host-team__cards {
    --tht-cols: 2;
  }
}

@media (max-width: 991.98px) {
  .tour-host-team__cards { gap: 32px 32px; margin-top: 32px; }
}

@media (max-width: 767.98px) {
  .tour-host-team__card { gap: 16px; }
  /* scale the headshot down on small screens without losing the editor's ratio */
  .tour-host-team__shot {
    width: min(var(--tht-shot), 72px);
    height: min(var(--tht-shot), 72px);
  }
  .tour-host-team__desc { margin-top: 10px; }
}

@media (max-width: 575.98px) {
  .tour-host-team__cards { gap: 28px; }
}