/**
 * @file
 * Explore More CTA styles.
 *
 * Desktop: Figma node 29701:77326.
 * Mobile: Figma node 29701:77329.
 */

.layout-container {

  .explore-more-cta {
    /* Figma's Coral. This was hardcoded here because the theme's
       --color-coral used to hold the LEGACY coral (#f16b50) instead.
       FND-1 fixed that: --color-coral is now the Figma variable
       "Coral", and the legacy one is --color-nav-active. */
    --explore-more-cta-coral: var(--color-coral);

    width: 100%;
    padding-block: var(--space-lg);
    box-sizing: border-box;
    background: var(--explore-more-cta-coral);
    font-family: var(--font-agenda);
  }

  .explore-more-cta__inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
  }

  .explore-more-cta__title {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-agenda);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }

  .explore-more-cta__actions {
    display: flex;
    flex: 0 0 779px;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-md);
  }

  .explore-more-cta__button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 48px;
    padding: 12px var(--space-md) 10px var(--space-lg);
    box-sizing: border-box;
    /* DONI-870: intentional — crops children to the border-radius. */
    overflow: hidden;
    border: 2px solid var(--color-white);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-dark-coral);
    font-family: var(--font-agenda);
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .explore-more-cta__button:hover {
    background: transparent;
    color: var(--color-white);
  }

  /* The ring comes from the house standard in
     css/base/interaction.css (FND-4). This used to restate it as a 3px
     charcoal outline — which passes on this component's coral band at
     4.66:1, but had no white companion ring and so did not generalise.
     Nothing is declared here now; the house rule applies. */

  .explore-more-cta__button-label {
    line-height: 1;
  }

  .explore-more-cta__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  @media (max-width: 1199px) {

    .explore-more-cta {
      padding-inline: 48px;
    }

    .explore-more-cta__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-lg);
    }

    .explore-more-cta__title {
      flex: none;
      width: 100%;
      text-align: center;
    }

    .explore-more-cta__actions {
      flex: 0 1 auto;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }
  }

  @media (max-width: 640px) {

    .explore-more-cta {
      padding-inline: 0;
    }

    .explore-more-cta__title {
      font-size: 22px;
      text-align: center; 
    }

    .explore-more-cta__button {
      width: calc(100% - 48px);
    }

    .explore-more-cta__actions {
      gap: var(--space-lg);
    }

    .explore-more-cta__button-label {
      flex-grow: 1;
    }
  }

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

    .explore-more-cta__button {
      transition: none;
    }
  }
}