/**
 * Contact Card Component Styles
 *
 * Orientations: portrait (image top, stacked) | landscape (image left, side-by-side)
 * On mobile (< 768px) both orientations render as stacked.
 *
 * Figma nodes: 863:28935 (landscape), 863:28937 (portrait), 863:28943 (mobile)
 */

/* ── Component-scoped custom properties (mobile defaults) ── */
.contact-card {
  --cc-bg:           var(--ambience-500);
  --cc-text:         var(--trust, #550a2d);
  --cc-name-size:    18px;
  --cc-name-ls:      -0.216px;
  --cc-role-size:    16px;
  --cc-content-padding:    var(--spacing-200) var(--spacing-200) var(--spacing-250);
  --cc-content-gap:  var(--spacing-350, 28px);
  --cc-identity-gap: 0px;
  --cc-actions-gap:  var(--spacing-150, 12px);
  --cc-column-span:  4;
  --cc-max-width: calc(
    var(--cc-column-span) * var(--grid-column-width--desktop)
    + (var(--cc-column-span) - 1) * var(--grid-gutter--desktop)
  );
}

.contact-card--dark {
  --cc-bg:   var(--trust);
  --cc-text: var(--white);
}

/* ── Base layout: mobile-first stacked ── */
.contact-card {
  position: relative;
  border-radius: var(--border-radius-m);
  max-width: var(--cc-max-width);
  overflow: hidden; /* makes border-radius take effect */
}


.contact-card__image {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;

  & img,
  & picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

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

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

/* ── Content ── */
.contact-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--cc-content-gap);
  padding: var(--cc-content-padding);
  background-color: var(--cc-bg);
  color: var(--cc-text);
  flex: 1;
}

/* ── Identity: name + role ── */
.contact-card__identity {
  display: flex;
  flex-direction: column;
  gap: var(--cc-identity-gap);
  padding: 0 var(--spacing-100, 8px);
}

.contact-card__company {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--trust);
  margin: var(--spacing-100, 8px) 0;
}

.contact-card__name {
  margin: 0;
  font-weight: 700;
  font-size: var(--cc-name-size);
  line-height: 1.3;
  letter-spacing: var(--cc-name-ls);
}

.contact-card__role {
  margin: 0;
  font-weight: 400;
  font-size: var(--cc-role-size);
  line-height: 1.3;
}

.contact-card__address {
  font-size: var(--cc-role-size);
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.16px;
}

/* ── Actions: links + email button ── */
.contact-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--cc-actions-gap);
  flex-grow: 1;
  justify-content: flex-end;
}

/* ── Contact links container ── */
.contact-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-075, 6px);
}

/* ── Individual link (mobile = full-width pill button) ── */
.contact-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-150, 12px);
  width: 100%;
  height: 44px;
  padding: 0 var(--spacing-300, 24px);
  background-color: var(--ambience-500, #dbd4ce);
  border-radius: var(--border-radius-round, 9999px);
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.18px;
  color: var(--cc-text);
  white-space: nowrap;
  font-feature-settings: 'zero';
}

.contact-card__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.contact-card__link-icon svg {
  width: 100%;
  height: 100%;
}

/* ── Badge label (absolute, top-left over image) ── */
.contact-card .label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}

.contact-card__email .button__container {
  padding-block: 0;
}

/* -------------------------------------------------------
 * Tablet+ (≥ 768px): portrait desktop layout + shared link styles
 * ------------------------------------------------------- */
@media (min-width: 768px) {

  /* ── Portrait: larger image, roomier content ── */
  .contact-card--portrait {
    display: grid;
    grid-template-rows: auto 1fr; /* makes sure container slots are filled vertically by the card */

    --cc-name-size:    1.25rem;
    --cc-name-ls:      -0.24px;
    --cc-content-padding:    var(--spacing-300);
    --cc-content-gap:  var(--spacing-400, 32px);
    --cc-identity-gap: var(--spacing-025, 2px);
    --cc-actions-gap:  var(--spacing-200, 16px);
  }

  .contact-card--portrait .contact-card__image {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  /* ── Desktop: contact links → text-style inline links ── */
  .contact-card__links {
    padding-left: var(--spacing-075, 6px);
  }

  .contact-card__link {
    display: inline-flex;
    justify-content: flex-start;
    width: auto;
    height: 32px;
    padding: var(--spacing-100, 8px) var(--spacing-025, 2px);
    background-color: transparent;
    border-radius: var(--border-radius-s, 2px);
  }

  /* ── Desktop: email button → auto width ── */
  .contact-card__email .button {
    width: auto;
    justify-content: flex-start;
  }
}

/* -------------------------------------------------------
 * Landscape: side-by-side — desktop (≥ 1024px) only.
 *
 * Note: @container cannot style the container element itself
 * (only its descendants). display: grid must live in a plain
 * @media rule so it actually applies to .contact-card--landscape.
 * The height-chain rules below DO use the container query because
 * they target *children* of .contact-card (the container).
 * ------------------------------------------------------- */
@media (min-width: 1024px) {

  .contact-card--landscape {
    --cc-name-size: 1.5rem;
    --cc-name-ls: -0.288px;
    --cc-role-size: 20px;
    --cc-content-padding: var(--spacing-400);
    --cc-identity-gap: var(--spacing-025);
    --cc-actions-gap: var(--spacing-150);
    --cc-column-span: 8;

    display: grid;
    grid-template-columns: 1fr 1fr;

    .contact-card__content {
      flex: 1;
      justify-content: space-between;
    }
  }

  /* Image fills row height so image === content height.
   * Without aspect-ratio, content drives the row height.
   * Each Drupal wrapper in the chain gets height: 100% so the
   * cover-cropped img fills the stretched grid cell. */
  .contact-card--landscape .contact-card__image .image,
  .contact-card--landscape .contact-card__image .image__media,
  .contact-card--landscape .contact-card__image .media,
  .contact-card--landscape .contact-card__image .media__image-wrap,
  .contact-card--landscape .contact-card__image .field,
  .contact-card--landscape .contact-card__image .field__item {
    height: 100%;
  }

  /* Higher specificity than .image img { height: auto } in image.css */
  .contact-card--landscape .contact-card__image img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}