@charset "UTF-8";

/* ============================================================
   CROSSTALK PAGE Styles
   Design comp: 1920px artboard → displayed at 1280px (×0.667)
   Class prefix: ct-
   ============================================================ */

/* ================================================================
   2. MEMBER PROFILE
   Comp: y=728–1100
   ================================================================ */
.ct-members {
  background-color: #dce9ef;
  padding: calc(72rem / 16) calc(60rem / 16) calc(80rem / 16);
}

.ct-members__inner {
  max-width: calc(1280rem / 16);
  margin: 0 auto;
}

.ct-members__label {
  display: block;
  font-family: var(--en-font-sans);
  font-size: calc(12rem / 16);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #0063ae;
  text-align: center;
  margin: 0 0 calc(48rem / 16);
}

.ct-members__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(32rem / 16) calc(36rem / 16);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual member card */
.ct-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12rem / 16);
  flex: 0 0 auto;
}

.ct-member__photo {
  width: calc(120rem / 16);
  height: calc(120rem / 16);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #becfdb;
  flex-shrink: 0;
}

.ct-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ct-member__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2rem / 16);
  text-align: center;
}

.ct-member__dept,
.ct-member__role,
.ct-member__name {
  font-family: var(--jp-font);
  font-size: calc(12rem / 16);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #231815;
  line-height: 1.6;
  display: block;
  margin: 0;
}

.ct-member__name {
  font-weight: 500;
}

/* ================================================================
   3. INTERVIEW THEMES
   Comp: y=1100–8400
   ================================================================ */
.ct-themes {
  background-color: #dce9ef;
}

/* Thin horizontal divider between themes */
.ct-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 0 calc(76rem / 16);
}

/* Individual theme section */
.ct-theme {
  padding: calc(80rem / 16) 0;
}

.ct-theme__inner {
  max-width: calc(1280rem / 16);
  margin: 0 auto;
  padding: 0 calc(76rem / 16);
}

/* Theme heading block */
.ct-theme__head {
  margin-bottom: calc(56rem / 16);
}

.ct-theme__label {
  font-family: var(--en-font-sans);
  font-size: calc(12rem / 16);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #231815;
  margin: 0 0 calc(16rem / 16);
}

.ct-theme__heading {
  font-family: var(--jp-font);
  font-size: calc(28rem / 16);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #231815;
  line-height: 1.55;
  margin: 0;
}

/* Theme body: stacked Q&A items */
.ct-theme__body {
  display: flex;
  flex-direction: column;
  gap: calc(16rem / 16);
}

/* ── Question (moderator) ── */
.ct-q {
  padding: calc(8rem / 16) 0;
  margin-top: 20px;
}

.ct-q__text {
  font-family: var(--jp-font);
  font-size: calc(16rem / 16);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #0063ae;
  line-height: 1.75;
  margin: 0;
}

/* ── Answer (speaker with photo) ── */
.ct-answer {
  display: grid;
  grid-template-columns: calc(65rem / 16) 1fr;
  gap: calc(16rem / 16);
  align-items: center;
}

.ct-answer__photo {
  width: calc(65rem / 16);
  height: calc(65rem / 16);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #becfdb;
  flex-shrink: 0;
}

.ct-answer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ct-answer__body {
  /*padding-top: calc(4rem / 16);*/
  display: flex;
  flex-direction: column;
  gap: calc(6rem / 16);
}

.ct-answer__text {
  font-family: var(--jp-font);
  font-size: calc(14rem / 16);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #231815;
  line-height: 1.9;
  margin: 0;
}

/* ================================================================
   4. NEXT CARD (uses global .ct-next from style.css)
   Override: background matches content area (#dce9ef), no card border
   ================================================================ */
.ct-next {
  background-color: #0063ae;
}

/* ================================================================
   RESPONSIVE — 1024px (tablet)
   ================================================================ */
@media (max-width: 1024px) {

  /* Members */
  .ct-members {
    padding: calc(56rem / 16) calc(40rem / 16) calc(64rem / 16);
  }

  .ct-member__photo {
    width: calc(100rem / 16);
    height: calc(100rem / 16);
  }

  /* Themes */
  .ct-theme {
    padding: calc(64rem / 16) 0;
  }

  .ct-theme__inner {
    padding: 0 calc(40rem / 16);
  }

  .ct-theme__heading {
    font-size: calc(24rem / 16);
  }
}

/* ================================================================
   RESPONSIVE — 768px (mobile)
   ================================================================ */
@media (max-width: 768px) {

  /* Members */
  .ct-members {
    padding: calc(48rem / 16) calc(24rem / 16) calc(56rem / 16);
  }

  .ct-members__label {
    font-size: calc(10rem / 16);
    margin-bottom: calc(32rem / 16);
  }

  .ct-members__list {
    gap: calc(24rem / 16) calc(20rem / 16);
    /* 4-up on mobile is too tight — wrap to 3+3+1 naturally */
    justify-content: center;
  }

  .ct-member {
    flex: 0 0 calc(80rem / 16);
  }

  .ct-member__photo {
    width: calc(72rem / 16);
    height: calc(72rem / 16);
  }

  .ct-member__dept,
  .ct-member__role,
  .ct-member__name {
    font-size: calc(10rem / 16);
  }

  /* Themes */
  .ct-theme {
    padding: calc(48rem / 16) 0;
  }

  .ct-theme__inner {
    padding: 0 calc(24rem / 16);
  }

  .ct-theme__head {
    margin-bottom: calc(36rem / 16);
  }

  .ct-theme__label {
    font-size: calc(8rem / 16);
  }

  .ct-theme__heading {
    font-size: calc(20rem / 16);
  }

  .ct-theme__body {
    gap: calc(24rem / 16);
  }

  .ct-q__text {
    font-size: calc(12rem / 16);
  }

  .ct-answer {
    grid-template-columns: calc(56rem / 16) 1fr;
    gap: calc(12rem / 16);
  }

  .ct-answer__photo {
    width: calc(56rem / 16);
    height: calc(56rem / 16);
  }

  .ct-answer__text {
    font-size: calc(11rem / 16);
    line-height: 1.8;
  }

  /* Divider extends edge-to-edge on mobile */
  .ct-divider {
    max-width: none;
  }
}