/*
 * Buttons (README "Buttons"): pill, 700, no wrapping. Kinds: primary (gold), secondary (outline),
 * ghost (blue link), danger (outline), dark (pager "Next"). Sizes: default 44px / 15px,
 * small 38px / 13.5px, large 52px (full-width and mobile). Use btn_class / ui_link_button /
 * ui_button_to / ui_button. Icon buttons: .icon-btn (36px) and .round-btn (44px, mobile header).
 */
@layer components {
  .btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .btn .icon { font-size: 17px; }
  .btn:hover { color: var(--color-text); text-decoration: none; }

  .btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
  .btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

  .btn--secondary { border-color: var(--color-btn-border); }
  .btn--secondary:hover { background: var(--color-btn-hover); }

  /* Blue text uses --color-blue-deep: #1d6aa1 is 4.3:1 on the surface tone (WCAG AA needs 4.5:1);
     #145d91 is 5.2:1 there and 5.9:1 on the page background. Hover underlines. */
  .btn--ghost {
    padding: 0 6px;
    color: var(--color-blue-deep);
  }
  .btn--ghost:hover { color: var(--color-blue-deep); text-decoration: underline; }

  .btn--danger {
    border-color: var(--color-err-border);
    color: var(--color-err-text);
  }
  .btn--danger:hover { background: var(--color-err-soft); color: var(--color-err-text); }

  .btn--dark { background: var(--color-text); color: var(--color-bg); }
  .btn--dark:hover { background: var(--color-neutral-800); color: var(--color-bg); }

  .btn--sm {
    height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
  }
  .btn--sm .icon { font-size: 15px; }
  .btn--sm.btn--ghost { padding: 0 6px; }

  .btn--lg { height: 52px; }

  .btn--block { width: 100%; }

  .btn:disabled,
  .btn.is-disabled,
  .btn[aria-disabled="true"] {
    border-color: transparent;
    background: var(--color-neutral-300);
    color: var(--color-neutral-700);
    cursor: not-allowed;
    text-decoration: none;
  }
  .btn--ghost:disabled,
  .btn--ghost.is-disabled,
  .btn--ghost[aria-disabled="true"] {
    background: transparent;
    color: var(--color-neutral-600);
  }

  /* button_to wraps its <button> in a <form>; keep it inline. */
  .button-to { display: inline-flex; margin: 0; }
  .button-to--block { display: flex; width: 100%; }

  /* Circular icon buttons -------------------------------------------------------------------- */
  .icon-btn {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 17px;
    text-decoration: none;
  }
  .icon-btn:hover { background: var(--color-neutral-300); color: var(--color-text); }
  .icon-btn[aria-expanded="true"],
  .icon-btn.is-active { background: var(--color-text); color: var(--color-bg); }
  .icon-btn--surface { background: var(--color-surface); }
  .icon-btn--lg { width: 38px; height: 38px; font-size: 18px; }

  .round-btn {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 19px;
    text-decoration: none;
  }
  .round-btn:hover { background: var(--color-neutral-300); color: var(--color-text); }
  .round-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
  .round-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
  .round-btn--back .icon { transform: scaleX(-1); }

  /* Text link with trailing arrow ("Open →", "View all") */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-blue-deep);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
  }
  .link-arrow .icon { font-size: 15px; }
  .link-arrow:hover { text-decoration: underline; }

  .link-strong {
    color: var(--color-blue-deep);
    font-size: 14px;
    font-weight: 700;
  }
  .link-strong:hover { text-decoration: underline; }

  /* Touch: keep every target at least 44px. */
  @media (pointer: coarse) {
    .btn--sm { min-height: 44px; }
    .icon-btn { width: 44px; height: 44px; }
  }
}