/**
 * Expert Card Component Styles
 *
 * Card with portrait image, person data, and a CTA button.
 * Background: ambience beige (--ambience, #ebe6e1) for the content area.
 *
 * Figma node: 863:29097
 */

/* ── Component-scoped custom properties ── */
.expert-card {
  --ec-bg:             var(--ambience);
  --ec-text:           var(--trust);
  --ec-padding:        var(--spacing-300, 24px);
  --ec-data-px:        var(--spacing-100, 8px);
  --ec-inner-gap:      var(--spacing-400, 32px);
  --ec-data-gap:       var(--spacing-200, 16px);
  --ec-name-size:      1.5rem;
  --ec-body-size:      1rem;
  --ec-font-ls:        -1.2%;
  --ec-column-span:    4;
  --ec-max-width:      calc(
    var(--ec-column-span) * var(--grid-column-width--desktop)
    + (var(--ec-column-span) - 1) * var(--grid-gutter--desktop)
  );
}
.expert-card--dark {
  --ec-bg:   var(--trust);
  --ec-text: var(--white);
}

/* ── Base layout ── */
.expert-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr; /* makes sure container slots are filled vertically by the card */
  border-radius: var(--border-radius-m, 4px);
  overflow: hidden;
  max-width: var(--ec-max-width);
  flex-grow: 1; /* stretch vertically in container */
}

/* ── Image ── */
.expert-card__image {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--ambience-500);
  aspect-ratio: 4 / 3;

  & img,
  & picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease-in-out;

    #storybook-root & {
      width: 100.5%; /* prevents a rounding error glitch */
    }
  }

  &.expert-card__image--placeholder {
    background-color: var(--ambience-600);

    .icon {
      stroke-width: 0.075rem;
      color: var(--ambience);

      width: 100%;
      height: 100%;
      padding: var(--ec-padding);
    }
  }
}



/* ── Hover-body (quote/text overlay, fades in over the image on hover) ── */
.expert-card--with-hover {
  .expert-card__hover-body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ec-padding) calc(var(--ec-padding) + var(--ec-data-px));
    background-color: var(--ec-bg);
    line-height: 1.3;
    font-size: 1.75rem;
    letter-spacing: var(--ec-font-ls);
    color: var(--ec-text);
    opacity: 0;
    /* stagger after image fades out */
    transition: opacity 0.25s ease-out 0.2s;


    p {
      margin: 0;
    }
  }

  /* ── Hover state (pointer devices only) ── */
  @media (hover: hover) {
    &.expert-card:hover {
      .expert-card__image img {
        opacity: 0;
      }
      .expert-card__hover-body {
        opacity: 1;
      }
    }
  }
}

/* ── Badge (top-left of image) ── */
.expert-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

/* ── Content area ── */
.expert-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--ec-inner-gap);
  padding: var(--ec-padding);
  background-color: var(--ec-bg);
  color: var(--ec-text);
  letter-spacing: var(--ec-font-ls);
}

/* ── Data (name + body) ── */
.expert-card__data {
  display: flex;
  flex-direction: column;
  gap: var(--ec-data-gap);
  padding-left: var(--ec-data-px);
  padding-right: var(--ec-data-px);
}

/* ── Name ── */
.expert-card__name {
  margin: 0;
  font-weight: 700;
  font-size: var(--ec-name-size);
  line-height: 1.3;
}

/* ── Body text ── */
.expert-card__body {
  margin: 0;
  font-size: var(--ec-body-size);
  line-height: 1.5;
}

.expert-card__body p {
  margin: 0;
}

/* ── CTA button ── */
.expert-card__cta {
  /*transition: background-color 0.2s ease-in-out;*/

  &:hover {
    background-color: var(--attitude);
  }
}

/* -------------------------------------------------------
 * Tablet+ (≥ 768px)
 * ------------------------------------------------------- */
@media (min-width: 768px) {
  .expert-card {
    --ec-name-size:    24px;
    --ec-body-size:    16px;
  }
}