/* ==========================================================================
 * lua-button.css — the CTA button canon for landing.ua. ONE source of truth.
 *
 * Every CTA on this site carries .btn. This file is the only place allowed
 * to size one. A button that looks wrong is fixed HERE — never with a new
 * per-component override, and never with !important.
 *
 * The rule that removes the whole class of bugs we kept hitting: THE LABEL
 * NEVER CARRIES ITS OWN SIZE. Whatever class the inner <span> has —
 * .desc-btn-text, .mobile-text-balance, or nothing at all — it inherits from
 * .btn. Markup that forgets the class still renders correctly. Before this,
 * the button and the label each declared a size and every new button landed
 * on the wrong one.
 *
 * rem: the theme scales rem as 100vw/50 below 1024px and pins it at 7.5px
 * above, so the mobile figures below hold at any phone width.
 *
 *                       <= 1023px            >= 1024px
 *   height              min 6.2rem / 48px    7.2rem      = 54px
 *   padding             .8rem 2.2rem         1.6rem 2.133rem
 *   radius              1.818rem  = 16px     1.6rem      = 12px
 *   gap                 1.2rem               1.5rem
 *   justify             center               space-between
 *   label               1.75rem / 400        1.8rem / 400
 *   icon circle         4.4rem    = 39px     5.6rem      = 42px
 *   arrow               1.8rem    = 16px     1.6rem      = 12px
 *
 * Exceptions, declared once and only here: .purpose_item__btn is a vertical
 * side tab on the home page, .library-item__link is an article card in
 * /knowledge/. Both carry .btn for its colour scheme only; their box is
 * their own and the canon leaves it alone.
 * ========================================================================== */

/* ---- The label inherits. Always. ---------------------------------------
   The :not() chain repeats on every rule in this file on purpose: the two
   exceptions must be excluded from the SHARED rules too, not only from the
   sized ones. Leaving it off here collapsed both of them once already.
   Descendant, not child: .fractional__pay wraps its label two levels deep
   (<span class="...-left"><span class="...-text">), and a direct-child
   selector would miss it. */
.btn:not(.purpose_item__btn):not(.library-item__link) span,
.btn:not(.purpose_item__btn):not(.library-item__link) span[class] {
  font-size: inherit;
  font-weight: inherit;
}

/* ---- The icon is a circle with a centred arrow -------------------------- */
.btn:not(.purpose_item__btn):not(.library-item__link) > i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
}

/* ---- Mobile: <= 1023px -------------------------------------------------- */
@media (max-width: 1023px) {

  .btn:not(.purpose_item__btn):not(.library-item__link) {
    height: auto;
    min-height: max(48px, 6.2rem);
    padding: .8rem 2.2rem;
    border-radius: 1.818rem;
    gap: 1.2rem;
    /* Desktop parity: label left, circle right. On a button that stretches to
       its card this is the only thing separating them; on an auto-width button
       it renders identically to flex-start, so it is safe everywhere. */
    justify-content: space-between;
    font-size: 1.75rem;
    font-weight: 400;
  }

  .btn:not(.purpose_item__btn):not(.library-item__link) > i {
    width: 4.4rem;
    height: 4.4rem;
  }

  .btn:not(.purpose_item__btn):not(.library-item__link) > i > svg {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* ---- Desktop: >= 1024px. Current design, codified, not changed. --------- */
@media (min-width: 1024px) {

  .btn:not(.purpose_item__btn):not(.library-item__link) {
    height: 7.2rem;
    padding: 1.6rem 2.133rem;
    border-radius: 1.6rem;
    gap: 1.5rem;
    justify-content: space-between;
    font-size: 1.8rem;
    font-weight: 400;
  }

  .btn:not(.purpose_item__btn):not(.library-item__link) > i {
    width: 5.6rem;
    height: 5.6rem;
  }

  .btn:not(.purpose_item__btn):not(.library-item__link) > i > svg {
    width: 1.6rem;
    height: 1.6rem;
  }
}

/* ---- The two exceptions, stated explicitly ----------------------------
   .purpose_item__btn (the round CTA on the home purpose cards) and
   .library-item__link (article card, /knowledge/) are excluded from every
   canon rule above by the :not() chain, because the theme styles both of
   them on its own.

   .purpose_item__btn takes nothing from this file at all - see the note
   inside the mobile block below for why. .library-item__link still needs
   the old blanket crutch reproduced for it alone: same properties, same
   descendant form, same specificity (0,2,1). A restoration, not a new
   design. */
@media (max-width: 1023px) {

  /* .purpose_item__btn dropped here 2026-09-16. The theme already gives it a
     complete mobile shape: 5.1rem circle, radius 50%, top 5% / right 0. The
     inherited crutch set height:auto + min-height, which fought that fixed
     height; with bottom:3.2rem still live on the base rule the box stretched
     top-to-bottom into a 45x252 white strip over the video, icon marooned in
     the middle. Owning nothing here is the fix. */
  body.lua-m .library-item__link {
    border-radius: 16px;
    justify-content: center;
    height: auto;
    min-height: max(48px, 6.2rem);
  }

  body.lua-m .library-item__link i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    width: 4.4rem;
    height: 4.4rem;
  }

  body.lua-m .library-item__link i .icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* ---- 5. MOTION — arrow reveal (PROTOTYPE: home hero button only) --------
   The button and its label arrive together on the theme's own reveal
   (.fade-in -> .visible, opacity .6s). The arrow lands a beat after, so the
   eye is pulled to it instead of to the whole block at once.

   Only opacity and transform are animated. The <i> is flex:0 0 auto with a
   fixed size, so the circle scales in place and nothing reflows — measured
   before and after: icon 42x42, button h54, no layout shift.

   The arrow flies in along its own diagonal (it points up-right, so it
   starts down-left) and lands with a small overshoot — scale peaks at 1.047
   around 1.13s and settles by 1.42s. That overshoot is the "noticeable" part;
   without it the reveal reads as a plain fade.

   Scoped to .hero__connect_btn until the pattern is approved. For the
   site-wide rollout, remember: inside .lua-slider the IntersectionObserver
   never fires, so .visible never lands there — those arrows need
   `.lua-slider .btn > i { opacity: 1; transform: none; }` or they stay
   invisible forever. */
@media (prefers-reduced-motion: no-preference) {

  .hero__connect_btn.fade-in > i {
    opacity: 0;
    transform: translate(-.6rem, .6rem) scale(.45);
  }

  .hero__connect_btn.fade-in.visible > i {
    opacity: 1;
    transform: none;
    transition: opacity .26s ease-out .42s,
                transform .5s cubic-bezier(.34, 1.56, .64, 1) .42s;
  }
}

/* ---- 6. FORM ARROW DEDUPE ----------------------------------------------
   The theme drew the form's arrow as a ::after on the <label> that wraps the
   submit, because an <input type="submit"> cannot hold a child element. The
   submit is a <button> now and carries the canon arrow itself, so the pseudo
   became a duplicate - two circles side by side. Kill the pseudo, keep the
   real icon. :has(button) scopes it: a form still rendering <input> keeps the
   theme's pseudo-arrow instead of ending up with no arrow at all. */
.popup_form__btn_w:has(button)::after,
.quiz-submit:has(button)::after {
  content: none;
}