/* ==========================================================================
   Expert profile pages (pages/page-expert-*.php)
   Figma: HealthySmiles → Raysa Expert Page (desktop 1440 / mobile 375).
   Everything is scoped under .hs-expert so it can't leak into other pages.
   ========================================================================== */

.main-menu.fixed + .hs-expert { margin-top: 70px; }   /* same offset the theme gives other pages */

.hs-expert {
  --hs-teal: #44B9CB;
  --hs-calm: #E7F8FB;
  --hs-gray: #F6F6F6;
  --hs-lime: #EDFBDC;
  --hs-quote: #BAE7D7;
  --hs-card-bg: #F6FAFE;
  overflow: hidden;
  color: #000;
}
.hs-expert *,
.hs-expert *::before,
.hs-expert *::after { box-sizing: border-box; }

.hs-expert-container {
  width: 100%;
  max-width: 1200px;           /* 1170px content, like the Figma grid (x 135 → 1305) */
  margin: 0 auto;
  padding: 0 15px;
}

.hs-expert h1,
.hs-expert h2 {
  font-weight: 600;
  font-size: 58px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
}
.hs-expert p { margin: 0; }

/* ---------- Arrows (shared) ---------- */
.hs-expert-arrows { display: flex; gap: 21px; }
.hs-expert-arrow {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s;
}
.hs-expert-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  transform: translate(-65%, -50%) rotate(45deg);
}
.hs-expert-arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.hs-expert-arrow.is-disabled { opacity: .3; cursor: default; }
.hs-expert-arrow:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.hs-expert-arrows--teal .hs-expert-arrow { background: var(--hs-teal); }
.hs-expert-arrows--black .hs-expert-arrow { background: #000; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hs-expert-hero {
  position: relative;
  min-height: 637px;
  background: var(--hs-calm);
}
.hs-expert-hero__text {
  position: relative;
  z-index: 2;
  padding-top: 227px;
  max-width: 600px;
}
.hs-expert-hero h1 { margin-bottom: 16px; }
.hs-expert-hero__divider { display: none; }
.hs-expert-hero__role {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
}
.hs-expert-hero__photo {
  position: absolute;
  top: 27px;
  left: calc(50% - 55px);
  width: 739px;
  z-index: 1;
}
.hs-expert-hero__photo img { display: block; width: 100%; height: auto; }
.hs-expert-hero::after {        /* white wave at the bottom of the hero */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: max(1600px, 100%);
  height: 103px;
  transform: translateX(-50%);
  background: url("../img/experts/raysa/wave-hero.svg") no-repeat center bottom / 100% 100%;
  z-index: 3;
  pointer-events: none;
}

/* ==========================================================================
   About
   ========================================================================== */
.hs-expert-about { padding-top: 48px; }
.hs-expert-about h2 { margin-bottom: 25px; }
.hs-expert-about__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.hs-expert-about__cols p {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 300;
}

/* ==========================================================================
   Experience & Expertise
   ========================================================================== */
.hs-expert-experience {
  position: relative;
  margin-top: 72px;
  padding: 181px 0 173px;     /* title 181px below the wave top / 70 + 103 wave */
  background:
    url("../img/experts/raysa/wave-gray-top.svg") no-repeat center top / max(1600px, 100%) 103px,
    linear-gradient(var(--hs-gray), var(--hs-gray)) no-repeat 0 103px / 100% calc(100% - 103px);
}
.hs-expert-experience::after {  /* white wave closing the gray band */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(1600px, 100%);
  height: 103px;
  transform: translateX(-50%);
  background: url("../img/experts/raysa/wave-gray-bottom.svg") no-repeat center bottom / 100% 100%;
}
.hs-expert-experience h2 { text-align: center; }
.hs-expert-swipe { display: none; }

.hs-expert-experience__track {
  margin-top: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(15px, calc(50% - 585px));
  padding-left: max(15px, calc(50% - 585px));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.hs-expert-experience__track::-webkit-scrollbar { display: none; }
.hs-expert-experience__row {
  display: flex;
  gap: 30px;
  width: max-content;
  padding-right: max(15px, calc(50% - 585px));
}
.hs-expert-card {
  flex: 0 0 370px;
  min-height: 147px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px 19px;
  background: #fff;
  border-radius: 26px;
  scroll-snap-align: start;
}
.hs-expert-card__icon { flex: 0 0 104px; width: 104px; height: 101px; }
.hs-expert-card__text {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 400;
}
.hs-expert-experience .hs-expert-arrows { margin-top: 46px; position: relative; z-index: 1; }
.hs-expert-dots { display: none; }

/* ==========================================================================
   Areas of Expertise
   ========================================================================== */
.hs-expert-areas {
  position: relative;
  padding: 112px 0 194px;      /* title at +112 from the gray band; photo ends 107px above Philosophy */
}
.hs-expert-areas__content { margin-left: 400px; }
.hs-expert-areas h2 { margin-bottom: 41px; }
.hs-expert-areas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 370px);
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  column-gap: 30px;
  row-gap: 16px;
}
.hs-expert-areas__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 11px 10px 11px 16px;
  background: var(--hs-calm);
  border-radius: 999px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
}
.hs-expert-areas__list img { flex: 0 0 40px; width: 40px; height: 40px; }
.hs-expert-areas__photo {
  position: absolute;
  top: 22px;
  left: calc(50% - 787px);
  width: 596px;
  height: 596px;
  clip-path: circle(46% at 50% 50%);   /* 274px circle, hides the photo's straight left edge */
}

/* ==========================================================================
   Philosophy
   ========================================================================== */
.hs-expert-philosophy {
  max-width: 1440px;
  margin: 0 auto;
  padding: 88px 0 69px;
  background: var(--hs-lime);
  border-radius: 60px;
}
.hs-expert-philosophy h2 { text-align: center; }
.hs-expert-philosophy__body {
  position: relative;
  margin-top: 23px;
  padding: 50px 186px 0;
}
.hs-expert-quote {
  position: absolute;
  width: 146px;
  height: 99px;
}
.hs-expert-quote--open { top: 0; left: 0; }
.hs-expert-quote--close { right: 0; bottom: -60px; transform: rotate(180deg); }
.hs-expert-philosophy__quotes { position: relative; max-width: 767px; margin: 0 auto; display: grid; }
.hs-expert-philosophy__quote {
  grid-area: 1 / 1;          /* all quotes share one cell → the box keeps the tallest height */
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility .35s;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
}
.hs-expert-philosophy__quote.is-active { visibility: visible; opacity: 1; }
.hs-expert-philosophy__quote p { margin: 0; font: inherit; color: inherit; }
.hs-expert-philosophy .hs-expert-arrows { justify-content: center; margin-top: 26px; position: relative; z-index: 1; }

/* ==========================================================================
   External Links
   ========================================================================== */
.hs-expert-links { padding: 94px 0 80px; }
.hs-expert-links h2 { margin-bottom: 36px; }
.hs-expert-links__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 72px;
}
.hs-expert-link__media {
  display: block;
  aspect-ratio: 570 / 288;
  border-radius: 24px;
  overflow: hidden;
  background: var(--hs-card-bg);
}
.hs-expert-link__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-expert-link__media img[src*="tribune"] { object-position: center 26%; }
.hs-expert-link__media img[src*="bocanews"] { object-position: left top; }
.hs-expert-link__media img[src*="podcast"] { object-position: center 10%; }
.hs-expert-link__media.is-logo { display: flex; align-items: center; justify-content: center; }
.hs-expert-link__media.is-logo img { width: 50.2%; height: auto; object-fit: contain; }
.hs-expert-link__title {
  margin: 27px 0 0;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
}
.hs-expert-link__source {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 300;
}
.hs-expert-link__btn { margin-top: 18px; }
.hs-expert-link__btn:hover { color: #fff; text-decoration: none; }

/* ==========================================================================
   Large tablets / small desktops (992–1199)
   ========================================================================== */
@media (max-width: 1199px) {
  .hs-expert-hero__photo { width: 620px; left: calc(50% - 40px); top: auto; bottom: 0; }
  .hs-expert-hero__text { max-width: 460px; }
  .hs-expert-areas__content { margin-left: 330px; }
  .hs-expert-areas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-expert-areas__list li { font-size: 18px; }
  .hs-expert-areas__photo { width: 478px; height: 478px; left: -169px; top: 27px; }
  .hs-expert-philosophy { border-radius: 40px; }
  .hs-expert-philosophy__body { padding: 50px 120px 0; }
  .hs-expert-quote { width: 110px; height: 75px; }
}

/* ==========================================================================
   Tablet + mobile (≤ 991): stacked layout from the 375px Figma frame
   ========================================================================== */
@media (max-width: 991px) {
  .hs-expert-container { padding: 0 26px; max-width: 720px; }
  .hs-expert h1,
  .hs-expert h2 { font-size: 36px; line-height: 1.1; }

  /* Hero */
  .hs-expert-hero { min-height: 0; padding-bottom: 111px; text-align: center; }
  .hs-expert-hero__text { padding-top: 38px; max-width: none; }
  .hs-expert-hero h1 { margin-bottom: 0; }
  .hs-expert-hero__divider { display: block; width: 170px; height: 6px; margin: 27px auto 25px; }
  .hs-expert .hs-expert-hero__role { font-size: 24px; line-height: 1.2; max-width: 292px; margin: 0 auto; }
  .hs-expert-hero__photo {
    position: relative;
    top: auto; bottom: auto; left: auto;
    display: block;
    width: 526px;
    margin: 46px 0 0 calc(50% - 276px);
  }
  .hs-expert-hero::after {
    left: calc(50% - 565px);
    width: 882px;
    height: 178px;
    transform: none;
    background-image: url("../img/experts/raysa/wave-hero-mb.svg");
  }

  /* About */
  .hs-expert-about { position: relative; z-index: 4; margin-top: -69px; padding-top: 0; }
  .hs-expert-about h2 { text-align: center; margin-bottom: 24px; }
  .hs-expert-about__cols { grid-template-columns: 1fr; gap: 23px; }

  /* Experience */
  .hs-expert-experience {
    margin-top: 67px;
    padding: 87px 0 82px;    /* 32 wave + 55 / 50 + 32 wave */
    background:
      url("../img/experts/raysa/wave-gray-top-mb.svg") no-repeat center top / 497px 32px,
      linear-gradient(var(--hs-gray), var(--hs-gray)) no-repeat 0 32px / 100% calc(100% - 64px),
      url("../img/experts/raysa/wave-gray-bottom-mb.svg") no-repeat center bottom / 497px 32px;
  }
  .hs-expert-experience::after { display: none; }
  .hs-expert-experience h2 { max-width: 240px; margin: 0 auto; }
  .hs-expert-swipe { display: block; margin: 16px auto 0; width: 80px; height: 53px; }
  .hs-expert-experience__track {
    margin-top: 32px;
    padding-left: 28px;
    scroll-padding-left: 28px;
  }
  .hs-expert-experience__row { gap: 28px; padding-right: 28px; }
  .hs-expert-card {
    flex: 0 0 calc(100vw - 56px);
    max-width: 420px;
    min-height: 206px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    padding: 22px 23px 24px;
    text-align: center;
  }
  .hs-expert-experience .hs-expert-arrows { display: none; }
  .hs-expert-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 32px; }
  .hs-expert-dots button {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
  }
  .hs-expert-dots button.is-active { width: 9px; height: 9px; background: transparent; border: 1px solid #000; }

  /* Areas */
  .hs-expert-areas { padding: 42px 0 0; }
  .hs-expert-areas__content { margin-left: 0; }
  .hs-expert-areas h2 { text-align: center; margin-bottom: 32px; }
  .hs-expert-areas__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; max-width: 420px; margin: 0 auto; position: relative; z-index: 1; }
  .hs-expert-areas__list li { font-size: 20px; line-height: 1.06; min-height: 62px; }
  .hs-expert-areas__photo {
    position: relative;
    top: auto; left: auto;
    display: block;
    width: 461px;
    height: 461px;
    max-width: none;
    margin: -30px 0 0 calc(50% - 224px);
  }

  /* Philosophy */
  .hs-expert-philosophy { margin-top: 74px; padding: 44px 0 48px; border-radius: 34px; }
  .hs-expert-philosophy h2 { max-width: 240px; margin: 0 auto; }
  .hs-expert-philosophy__body { margin-top: 16px; padding: 67px 0 0; }
  .hs-expert-quote { width: 75px; height: 51px; }
  .hs-expert-quote--open { left: 0; top: 0; }
  .hs-expert-quote--close { right: 0; bottom: -34px; }
  .hs-expert-philosophy .hs-expert-arrows { margin-top: 60px; }

  /* External links */
  .hs-expert-links { padding: 50px 0 60px; }
  .hs-expert-links h2 { margin-bottom: 24px; }
  .hs-expert-links__grid { grid-template-columns: 1fr; row-gap: 40px; max-width: 420px; }
  .hs-expert-link__media { aspect-ratio: 324 / 182; border-radius: 9px; }
  .hs-expert-link__title { margin-top: 17px; font-size: 20px; line-height: 1.1; }
  .hs-expert-link__source { font-size: 14px; }
}

/* Wider tablets: keep the stacked layout but use the space a bit better */
@media (min-width: 600px) and (max-width: 991px) {
  .hs-expert-links__grid { max-width: none; grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
  .hs-expert-areas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; column-gap: 20px; }
}