/**
 * @file
 * Homepage Hero Card styles.
 *
 * Desktop: Figma 29999:58185 / 29999:57225 (Card - Gradient bar).
 * Mobile: Figma 29999:57228.
 *
 * Place three instances in a columns layout. Add background class
 * `hero-cards` on that columns instance so the row overlaps the
 * homepage-hero band (Figma: −32px desktop, −28px mobile).
 */

.layout-container {

  /*
   * Columns wrapper immediately after homepage-hero.
   * Set Columns → Background class = hero-cards in Canvas.
   */
  .columns.hero-cards {
    position: relative;
    z-index: 2;
    margin-top: -32px;
    padding-bottom: 40px;
  }

  .homepage-hero-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: var(--space-lg);
    /* DONI-870: intentional — crops children to the border-radius. */
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--color-white);
    box-shadow: var(--shadow-header);
    font-family: var(--font-agenda);
  }

  .homepage-hero-card__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .homepage-hero-card__title,
  .homepage-hero-card__title p {
    margin: 0;
    color: var(--color-coral);
    font-family: var(--font-agenda);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: normal;
    text-transform: uppercase;
  }

  .homepage-hero-card__title strong,
  .homepage-hero-card__title b {
    font-weight: var(--font-weight-bold);
  }

  /* Footnote marker fails WCAG AA at coral: --sup-ratio (0.645em) shrinks
     it to ~12.9px, below the 18.67px-bold large-text exemption, so it
     needs 4.5:1, not 3:1. Coral only clears 3.03:1. Dark-coral-original
     (#bb5844) measures 4.84:1 here — scoped to the marker only, title
     text itself stays regular coral. */
  .homepage-hero-card__title sup,
  .homepage-hero-card__title p sup {
    color: var(--color-dark-coral-original);
  }

  .homepage-hero-card__text,
  .homepage-hero-card__text p {
    margin: 0;
    color: var(--color-steel);
    font-family: var(--font-agenda);
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    line-height: normal;
  }

  .homepage-hero-card__text strong,
  .homepage-hero-card__text b {
    font-weight: var(--font-weight-bold);
  }

  .homepage-hero-card__button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 48px;
    margin-top: auto;
    padding: 12px 16px 10px 24px;
    box-sizing: border-box;
    border-radius: var(--radius-full);
    background: var(--color-coral);
    color: var(--color-white);
    font-family: var(--font-agenda);
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
  }

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

  .homepage-hero-card__button-label {
    line-height: 1;
  }

  .homepage-hero-card__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  @media (max-width: 768px) {

    .columns.hero-cards {
      margin-top: -28px;
      padding-bottom: 40px;
    }

    .homepage-hero-card__button {
      width: 100%;
    }

    .homepage-hero-card__button-label {
      flex-grow: 1;
      text-align: center;
    }
  }

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

    .homepage-hero-card__button {
      transition: none;
    }
  }

  @media (min-width: 767px) and (max-width: 1024px) {
    .hero-cards .columns__wrapper {
      grid-template-columns: 1fr;
      padding-left: 120px;
      padding-right: 120px;
    }
  }

  @media (min-width: 426px) and (max-width: 768px) {
    .homepage-hero-card__button {
        width: 50%;
    }
  }
}