/* =====================
   Midight — Buttons.

   Source of truth: Figma node 4253:7246 (Buttons block in styleguide).

   Single button family: `.button_cta` — green (Main Green), 6px radius,
   white inset frame border, semi-bold Inter text, drop+inset shadows.

   Sizes:
     - default = Desktop (16/24, padding 12/18, gap 6)
     - `.is-mobile` modifier = Mobile (14/20, padding 10/14, gap 4)
     - At <= 767px the default auto-shrinks to Mobile.

   States:
     - hover -> Main Green Hover (#A9FFB3)
===================== */

.button_cta {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.375rem;          /* 6px */
  padding:         0.75rem 1.125rem;  /* 12px 18px */
  border-radius:   0.375rem;          /* 6px */

  background-color: var(--color--button-bg, #90F99C);
  color:            var(--color--button-text, #000000);

  font-family:     "Inter", sans-serif;
  font-weight:     600;
  font-size:       1rem;     /* 16px */
  line-height:     1.5;      /* 24px */

  border: 2px solid var(--color--button-border-frame, rgba(255, 255, 255, 0.12));
  box-shadow:
    inset 0 0 0 1px rgba(16, 24, 40, 0.18),
    inset 0 -2px 0 0 rgba(16, 24, 40, 0.05),
    0 1px 2px 0 rgba(16, 24, 40, 0.05);

  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.button_cta:hover,
.button_cta:focus-visible {
  background-color: var(--color--button-bg-hover, #A9FFB3);
}

.button_cta:focus-visible {
  outline: 2px solid var(--color--main-green-hover, #A9FFB3);
  outline-offset: 2px;
}

/* Mobile sizing — explicit modifier (used when previewing both variants
   side-by-side in styleguide / when the design forces the small size on a
   wide screen). */
.button_cta.is-mobile {
  gap:         0.25rem;            /* 4px */
  padding:     0.625rem 0.875rem;  /* 10px 14px */
  font-size:   0.875rem;           /* 14px */
  line-height: 1.4286;             /* 20/14 */
}

/* Mobile breakpoint — auto-shrink unless `.is-desktop` locks desktop. */
@media (max-width: 767px) {
  .button_cta:not(.is-desktop) {
    gap:         0.25rem;
    padding:     0.625rem 0.875rem;
    font-size:   0.875rem;
    line-height: 1.4286;
  }
}