/* Canonical buttons — block styles jl-primary / jl-ghost on core/button.
   The site's two primary CTA buttons; used by the hero and every homepage
   section. Pill shape, ink primary, ghost outline. Reference implementation of
   the --jl2-btn-* token layer (jl-tokens.css). Registered in hero-setup.php. */
.is-style-jl-primary > .wp-block-button__link,
.is-style-jl-ghost > .wp-block-button__link {
  min-height: var(--jl2-btn-min-h); display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--jl2-btn-pad-x); border-radius: var(--jl2-radius-pill);
  font-family: var(--jl2-font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.25;
  transition: var(--jl2-btn-transition);
}
.is-style-jl-primary > .wp-block-button__link {
  background: var(--jl2-color-ink); color: var(--jl2-color-cream); border: 1px solid var(--jl2-color-ink);
  box-shadow: var(--jl2-btn-primary-shadow);
}
.is-style-jl-ghost > .wp-block-button__link {
  background: transparent; color: var(--jl2-color-ink); border: 1px solid var(--jl2-color-ink);
}
@media (hover: hover) {
  .is-style-jl-primary > .wp-block-button__link:hover,
  .is-style-jl-ghost > .wp-block-button__link:hover { transform: translateY(-2px); }
  .is-style-jl-ghost > .wp-block-button__link:hover { background: var(--jl2-color-ink); color: var(--jl2-color-cream); }
}

/* ============================================================
   CANONICAL BUTTON — .jl-cta, the one component for every button.
   All appearance comes from the BUTTON CONTROL PANEL (--jl2-btn-*
   in jl-tokens.css). Edit the panel, every .jl-cta updates.
   Variants: --primary (ink) · --ghost (outline) · --gold (brass)
   · --wa (WhatsApp green) · --text (link). Shape/size are shared.
   ============================================================ */
.jl-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--jl2-btn-min-h); padding: 0 var(--jl2-btn-pad-x); border-radius: var(--jl2-btn-radius);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  font-family: var(--jl2-btn-font); font-size: var(--jl2-btn-size); font-weight: var(--jl2-btn-weight); letter-spacing: var(--jl2-btn-tracking); line-height: 1.25;
  transition: var(--jl2-btn-transition);
}
.jl-cta--primary { background: var(--jl2-btn-primary-bg); color: var(--jl2-btn-primary-fg); border-color: var(--jl2-btn-primary-border); box-shadow: var(--jl2-btn-primary-shadow); }
.jl-cta--ghost   { background: var(--jl2-btn-ghost-bg); color: var(--jl2-btn-ghost-fg); border-color: var(--jl2-btn-ghost-border); }
.jl-cta--gold    { background: var(--jl2-btn-gold-bg); color: var(--jl2-btn-gold-fg); border-color: var(--jl2-btn-gold-bg); }
.jl-cta--wa      { background: var(--jl2-btn-wa-bg); color: var(--jl2-btn-wa-fg); border-color: var(--jl2-btn-wa-bg); }
.jl-cta--text    { min-height: 0; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--jl2-btn-text-fg); text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
@media (hover: hover) {
  .jl-cta--primary:hover, .jl-cta--ghost:hover, .jl-cta--gold:hover, .jl-cta--wa:hover { transform: translateY(var(--jl2-btn-hover-lift)); }
  .jl-cta--ghost:hover { background: var(--jl2-btn-primary-bg); color: var(--jl2-btn-primary-fg); }
}
/* JL-REMOVE(when: homepage sections use canonical component patterns instead of
   .jlh-home-*-actions rows): gives the current section CTA rows top spacing
   (groups zero their block-gap). Only true action rows — not the meta button/hero. */
.jlh-homepage-main .jlh-home-custom-actions,
.jlh-homepage-main .jlh-home-projects-actions,
.jlh-homepage-main .jlh-home-dealership-actions,
.jlh-homepage-main .jlh-home-final-cta__actions,
.jlh-homepage-main .jlh-home-category-guidance__actions { margin-top: 1.35rem; }

/* Homepage CTA rows stack full-width on small screens (homepage-specific override) */
@media (max-width: 560px) {
  .jlh-homepage-main .wp-block-buttons { flex-direction: column; }
  .jlh-homepage-main .wp-block-buttons .wp-block-button,
  .jlh-homepage-main .wp-block-buttons .wp-block-button__link { width: 100%; }
}