/**
 * @file
 * Support Services Card styles.
 *
 * Desktop: Figma 29999:57230 > 28641:13975 (1200×234 card).
 * Mobile: Figma 29999:57236 > 28641:14001.
 *
 * Width is 100%; place inside a coral band container for page context.
 */

.layout-container {

  .support-services-card {
    --support-services-card-silver-gradient: linear-gradient(
      90deg,
      #dfe1e3 0%,
      #e5e6e4 5%,
      #f1f0e5 14%,
      #fdf9e6 24%,
      #f5f0dd 33%,
      #e9e3d2 42%,
      #ded6c8 52%,
      #d6cec3 61%,
      #e2ddd8 71%,
      #edeceb 80%,
      #e2e1d4 89%,
      #d6d4bb 100%
    );

    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    width: 100%;
    min-height: 234px;
    padding: var(--space-xl);
    border: 8px solid transparent;
    border-radius: var(--radius-2xl);
    background:
      linear-gradient(var(--color-white), var(--color-white)) padding-box,
      var(--support-services-card-silver-gradient) border-box;
    box-shadow: var(--shadow-header);
    font-family: var(--font-agenda);
  }

  .support-services-card__logo {
    flex: none;
    width: 266px;
    max-width: 100%;
  }

  .support-services-card__logo-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .support-services-card__copy {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-width: 0;
  }

  .support-services-card__body,
  .support-services-card__body p {
    margin: 0;
    color: var(--color-charcoal);
    font-family: var(--font-agenda);
    font-size: 22px;
    font-weight: var(--font-weight-normal);
    line-height: normal;
    font-feature-settings: "liga" 0;
  }

  .support-services-card__body a {
    color: var(--color-dark-coral);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    white-space: nowrap;
  }

  .support-services-card__body strong,
  .support-services-card__body b {
    font-weight: var(--font-weight-bold);
  }

  .support-services-card__time {
    font-size: 16px;
  }

  .support-services-card__button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    box-sizing: border-box;
    max-width: 100%;
    height: 48px;
    padding: 12px var(--space-md) 10px var(--space-lg);
    border-radius: var(--radius-full);
    background: var(--color-coral);
    color: var(--color-white);
    font-family: var(--font-agenda);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
  }

  .support-services-card__button:hover {
    background: var(--color-dark-coral-original);
  }

  .support-services-card__button-label {
    line-height: 1;
  }

  .support-services-card__button-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  @media (max-width: 900px) {

    .support-services-card {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-lg);
      min-height: 0;
    }

    .support-services-card__logo {
      flex: none;
      width: 200px;
      max-width: 100%;
    }

    .support-services-card__logo-image {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: left center;
    }

    .support-services-card__copy {
      width: 100%;
    }

    .support-services-card__button {
      align-self: stretch;
      width: 100%;
      height: auto;
      min-height: 48px;
      gap: 4px;
      padding: 8px var(--space-md) 8px var(--space-lg);
      white-space: normal;
    }

    .support-services-card__button-label {
      flex: 1 1 0;
      min-width: 0;
      line-height: normal;
      text-align: left;
    }
  }

  @media (max-width: 768px) {

    .support-services-card {
      padding: 24px;
    }

    .support-services-card__logo {
      width: 100%;
      max-width: 263px;
      aspect-ratio: 305 / 176;
    }

    .support-services-card__logo-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: left center;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .support-services-card__button {
      transition: none;
    }
  }
}