/* ==========================================================================
   Buttons - four fills. Which one appears is a function of what is BEHIND
   it, not of importance.

   primary  green   the default commit action
   light    white   when the button sits on a dark panel or a photograph
   ink      ink     when the button sits on a warm or tan ground
   gold     gold    means EXACTLY ONE THING: this option is chosen
   outline  white   the SECOND action beside a primary, on a light ground
   ========================================================================== */

.c-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 32px;
  border:none;
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  cursor:pointer;
  /* colour only - the system never lifts, scales or re-shadows on hover */
  transition:background var(--c-ease), color var(--c-ease);
}

.c-btn--primary{
  background:var(--c-green);
  color:var(--c-white);
  border-radius:var(--c-r-surface);
  padding:0 var(--c-pad);
  font-weight:700;
}
.c-btn--primary:hover{ background:var(--c-ink); }

/* 29px of padding, not the 32 the token table carried: every light button in
   the file puts its label at x=29 inside its frame - "Свържи се" on Контакти
   (143), Услуги (155) and Екип (139), "Обадете се" on Listing (143) and
   "Работи с нас" on Екип (155). The differing widths are hand-dragged text
   boxes; the 29 is unanimous on five instances across four frames, and it is
   what makes the 139x49 button this frame draws five times come out at 139. */
.c-btn--light{
  background:var(--c-white);
  color:var(--c-ink);
  padding:0 29px;
}
.c-btn--light:hover{ background:var(--c-cream); }

/* 29px, the same inset the light button takes: the Listing frame's «Обадете
   се» is 143x50 around an 84px label, which is 84 + 2x29 to the pixel. That is
   a SIXTH instance of the 29 and the first on a fill that is not white, so the
   inset belongs to the button rather than to the light variant. The base's 32
   is left alone - the primary overrides it to 40 and nothing else uses it. */
.c-btn--ink{
  background:var(--c-ink);
  color:var(--c-white);
  padding:0 29px;
}
.c-btn--ink:hover{ background:var(--c-green); }

/* The quieter half of a pair: «Пишете ни» beside «Обадете се» on the offer
   page, which is where the client's mock-up puts it (2026-09-23) - white, a
   2px Estate Green stroke, an ink label. No frame measures it; the mock-up
   fixes the fill, the stroke and the size, which is the primary's own box.

   The stroke is an INSET shadow, not a border, so the box is the primary's
   to the pixel whatever the two are set to - the pair shares one height and
   one width with no arithmetic. Hover goes to Warm Cream, the form cards'
   own fill, because what this button opens is a form card. Same one green
   voice as the primary beside it: a stroke, not a second fill. */
.c-btn--outline{
  background:var(--c-white);
  color:var(--c-ink);
  border-radius:var(--c-r-surface);
  box-shadow:inset 0 0 0 2px var(--c-green);
  padding:0 var(--c-pad);
  font-weight:700;
}
.c-btn--outline:hover{ background:var(--c-cream-warm); }

.c-btn--gold{
  background:var(--c-gold);
  color:var(--c-ink);
}
.c-btn--gold:hover{ background:var(--c-gold-deep); }

.c-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

/* The inline "→ Виж всички имоти" link that closes a section. */
.c-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  /* It is a link on every desktop instance and a disclosure BUTTON on the
     mobile Search panel, so the UA's button chrome - a grey fill, a bevelled
     border and 1px of padding - has to go or the same class draws two
     different objects. None of it changes an <a>. */
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font:600 var(--c-fs-nav)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-green);
  transition:color var(--c-ease);
}
.c-more:hover{ color:var(--c-ink); }

/* The team card's own "Виж повече →" is a quarter the size of the section
   link: 12px, inked rather than green. It inks 78 against 81.4 at 12px, and
   nothing larger comes near its 85px box. */
.c-more--sm{
  font:400 var(--c-fs-caption)/var(--c-lh-sans) var(--c-sans);
  gap:4px;
  color:var(--c-ink);
}
.c-more--sm:hover{ color:var(--c-green); }

/* ==========================================================================
   393 - and the finding is that the button barely changes.

   THE HEIGHT IS DELIBERATELY LEFT AT 50. The four mobile frames draw eleven
   buttons and they do not resolve to a value: 41 twice (the Екип hero's CTA,
   the Listing page's «Свържете се»), 42 twice (both submits), 44 four times
   (the Search panel's three and the leadership card's) and 50 three times
   (the landing panel's «Търси» and both «Обадете се»). There is no majority
   worth the name, the three 50s reproduce the desktop button exactly, and 50
   is the only one of the four that clears the 44px touch floor on its own.
   So the component keeps its own number and the frames' 41s and 42s are read
   as hand-drawing - which is the same call DESIGN.md's light-button entry
   makes about the 143s that should be 139.

   What does change is that a label can no longer be assumed to fit: at 1920
   every button in the file is its label plus 29px each side on a line that
   always had room. At 393 «Разширено търсене» and «Изчисти търсене» are 98
   and 134 of ink inside a 361 column that is also holding something else.
   ========================================================================== */

@media (max-width: 639px){
  .c-btn{
    /* A button whose label does not fit is the failure mode here, and a
       centred two-line label inside a taller pill is a better one than a
       label overflowing its own fill. */
    height:auto;
    min-height:50px;
    padding-block:8px;
    text-align:center;
    /* 32 is the base's own padding and the primary's 40 is a 1920 number;
       both leave too little for the label inside a 264 form column. The
       light and ink variants keep their measured 29 - that inset is
       unanimous on six instances and is the button's own, not the width's. */
  }
  .c-btn--primary,
  .c-btn--outline{ padding-inline:24px; }

  /* A full-width commit action, which two mobile frames draw: the Listing
     page's «Свържете се» is 345 of a 393 screen and the Search panel's
     «Търси» is 217 of a 361 column. It is a modifier rather than a blanket
     rule, because the office cards' «Обадете се» is 143 on the same frames. */
  .c-btn--block{ width:100%; }

  /* The section link wraps rather than pushing the page sideways. */
  .c-more{ font-size:var(--c-fs-body); }
}