/* ==========================================================================
   Broker modal - what the Екип cards' «Виж повече» and the leadership cards'
   «Свържи се» open. docs/known-issues.md #24, closed.

   Built from two PNGs supplied outside Figma, so there is no node to query
   and every number below is measured off the export itself:
     siteassets/frames/Broker-Modal.png          673x765, the panel 652x742
     siteassets/frames-mobile/Broker-Modal.png   354x1972, the panel 334 wide

   Markup: brokers.tpl owns the <dialog>, its close form and the slot;
   components/c-broker-modal.tpl is the body swapped into the slot.

   THE ONE BEHAVIOURAL DECISION, and it is the client's (23 Sep 2026): when a
   broker has more reviews than the screen holds, ONLY THE REVIEWS COLUMN
   SCROLLS. The panel stops at the viewport, the profile column stands still
   beside it, and the list scrolls inside its own column. That holds wherever
   the two columns sit side by side. Below 640 the frame stacks them - six
   reviews under the profile - and there the profile alone is taller than a
   phone's screen, so a reviews region scrolling inside a sheet that has to
   scroll anyway would be a scroll inside a scroll; the sheet scrolls as one
   and the close button stays pinned.
   ========================================================================== */

/* --- the dialog ----------------------------------------------------------- */
/* 652 wide with the 2px Hairline Gold stroke on a Warm Cream ground: the
   frame samples #fff3e9 inside and #c2a170 in a 2px run at every edge. Warm
   Cream is the FORM card's colour, and a broker modal is the page's contact
   surface - it ends in «Обади се» - so it is the same kind of surface, not a
   new one. The 16 radius is solved from the corner diagonal (4-5px of gold
   before the fill), which is `--c-r-surface` and not the card's 20. */
.c-bmodal{
  width:min(652px, 100% - 2 * var(--c-page-gutter));
  max-width:none;
  max-height:calc(100dvh - 48px);
  margin:auto;
  padding:0;
  color:var(--c-ink);
  background:var(--c-cream-warm);
  border:2px solid var(--c-gold);
  border-radius:var(--c-r-surface);
  box-shadow:var(--c-sh-form);
  overflow:hidden;
}
/* Flex only while open: a display on the bare selector would beat the UA
   sheet's `dialog:not([open]) { display:none }` and draw a closed dialog. */
.c-bmodal[open]{
  display:flex;
  flex-direction:column;
}

/* A one-column profile when the broker has no reviews - 16 of 20 today -
   rather than a column announcing that there are none. */
.c-bmodal:has(.c-bmodal--solo){ width:min(338px, 100% - 2 * var(--c-page-gutter)); }

.c-bmodal::backdrop{ background:rgba(28,28,28,.55); }

/* With no script the server-rendered /ekip/<slug> dialog is open but NOT
   modal - it has no ::backdrop and the UA places it in flow. Fixed and
   centred, and the scrim is a spread shadow, so it still reads as the modal
   the script would have made it. */
.c-bmodal[open]:not(:modal){
  position:fixed;
  inset:0;
  z-index:100;
  box-shadow:var(--c-sh-form), 0 0 0 100vmax rgba(28,28,28,.55);
}

html:has(.c-bmodal:modal){ overflow:hidden; }

/* The one authored moment on the page: the panel settles up into place
   while the scrim fades in, on an exponential ease-out, and leaves on a
   plain fade. `display` and `overlay` are transitioned discretely so the
   exit animates before the dialog leaves the top layer. base.css cuts every
   duration to nothing under prefers-reduced-motion. */
.c-bmodal,
.c-bmodal::backdrop{
  transition:
    opacity .16s ease,
    translate .16s ease,
    display .16s allow-discrete,
    overlay .16s allow-discrete;
}
.c-bmodal:not([open]),
.c-bmodal:not([open])::backdrop{ opacity:0; }
.c-bmodal[open]{
  opacity:1;
  transition-duration:.36s;
  transition-timing-function:cubic-bezier(.16, 1, .3, 1);
}
.c-bmodal[open]::backdrop{ opacity:1; transition-duration:.24s; }
@starting-style{
  .c-bmodal[open]{ opacity:0; translate:0 14px; }
  .c-bmodal[open]::backdrop{ opacity:0; }
}

/* --- the panel ------------------------------------------------------------ */
/* Photo top and «Отзиви:» cap line agree on 28 below the stroke; the photo,
   the chips and the button open 40 in (x50 against the stroke at x10); the
   review cards close 37 short of the right stroke (x623 against x660). */
.c-bmodal__panel{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

.c-bmodal__slot{
  display:flex;
  flex:1 1 auto;
  min-height:0;
}

/* A zero-height sticky row at the top of the panel. On a wide screen the
   panel does not scroll and this is inert; on a phone it keeps the way out on
   screen however far down the reviews the visitor has read. */
.c-bmodal__closeform{
  position:sticky;
  top:0;
  z-index:2;
  height:0;
  margin:0;
}
/* The frame's X is 16px of ink centred 41 below the stroke and 51 in from
   the right; a 44 target around the same centre. */
.c-bmodal__close{
  position:absolute;
  top:19px;
  right:29px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  color:var(--c-ink);
  background:var(--c-cream-warm);
  border:0;
  border-radius:50%;
  cursor:pointer;
  transition:background var(--c-ease), color var(--c-ease);
}
.c-bmodal__close:hover{ background:var(--c-wash); }

/* --- the two columns ------------------------------------------------------ */
.c-bmodal__body{
  display:grid;
  grid-template-columns:254px minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr);
  column-gap:27px;
  flex:1 1 auto;
  min-height:0;
  padding:28px 37px 40px 40px;
}
.c-bmodal__body.c-bmodal--solo{
  grid-template-columns:254px;
  padding-right:40px;
}

/* --- profile -------------------------------------------------------------- */
/* Scrolls when the column outgrows the panel - a short viewport, and
   routinely once «Остави отзив» has swapped the review form in, which is
   ~200px taller than the contacts it replaces.

   The scroll region reaches 16px into the gutter on each side and pads it
   back, so the content keeps the frame's 254 and the scrollbar lands on that
   padding - an overlay scrollbar (Windows' and macOS's) is drawn over the
   padding edge, a classic one takes its width out of it - and never over a
   line of text, a field or the stars. The same 16 keeps `overflow` from
   clipping the fields' 3px focus rings at the column's edge. 16 fits both
   gutters: the panel's 40 on the left, the 27 before the reviews column on
   the right. */
.c-bmodal__profile{
  min-height:0;
  margin-inline:-16px;
  padding-inline:16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--c-gold) transparent;
}

/* 192x205 at a 10 radius (a 3px diagonal), left-aligned in the 254 column. */
.c-bmodal__photo{
  display:block;
  width:192px;
  height:205px;
  object-fit:cover;
  border-radius:var(--c-r-control);
}
.c-bmodal__photo.is-empty{ background:var(--c-wash); }

/* Name 16/700 and role 12 - the same pair, at the same sizes, as the Екип
   card the visitor has just clicked (c-person), so the modal reads as that
   card opened rather than as a new object. */
.c-bmodal__name{
  margin:14px 0 0;
  font:700 var(--c-fs-body)/19px var(--c-sans);
  text-wrap:balance;
}
.c-bmodal__role{
  margin:3px 0 0;
  font:400 var(--c-fs-caption)/14px var(--c-sans);
}

.c-bmodal__label{
  margin:24px 0 0;
  font:700 var(--c-fs-body)/19px var(--c-sans);
}

/* Glyphs are the broker strip's own phone.svg / mail.svg and a pin drawn to
   match them (img/icons/pin.svg, the same 3.33 stroke on a 30 box). One
   icon column, so the three values share a left edge - the frame's sit at
   x86, x89 and x100, which is three hand-placed text boxes, not a rule. */
.c-bmodal__contacts{
  display:grid;
  gap:10px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.c-bmodal__contact{
  display:grid;
  grid-template-columns:30px minmax(0, 1fr);
  align-items:center;
  column-gap:10px;
  font:400 var(--c-fs-body)/19px var(--c-sans);
}
.c-bmodal__contact img{ display:block; }
.c-bmodal__contact a{
  color:inherit;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.c-bmodal__contact a:hover{
  text-decoration:underline;
  text-decoration-color:var(--c-gold);
  text-underline-offset:3px;
}
.c-bmodal__contact--address{ align-items:start; }
.c-bmodal__contact--address > span{ padding-top:4px; }

/* 122x35, two to a row, 10 across and 15 down - 122 + 10 + 122 is the 254
   column exactly (x50-171 and x182-303, inclusive). Paper Cream would vanish
   into the Warm Cream ground; the frame fills them Field Grey (#f7f7f7 at
   zero spread) inside a 1px Hairline Gold stroke. They are statements, not
   controls, so they take no hover and no pointer. */
.c-bmodal__langs{
  display:grid;
  grid-template-columns:repeat(2, 122px);
  gap:15px 10px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.c-bmodal__lang{
  display:grid;
  place-items:center;
  min-height:35px;
  padding:0 8px;
  background:var(--c-field);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/19px var(--c-sans);
  text-align:center;
}

/* «Обади се» over «Остави отзив», 12 apart - the mobile frame's pair (y621
   and y683, both 50 tall). Full column width, and the corners are the 10 of a
   control (a 3px diagonal), not the primary button's usual 16. */
.c-bmodal__actions{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.c-bmodal__contacts + .c-bmodal__actions{ margin-top:28px; }

.c-bmodal__call{
  display:flex;
  width:100%;
  border-radius:var(--c-r-control);
  text-decoration:none;
}

/* The mobile frame's outlined button: a 1px Estate Green stroke round a
   green 16/700 label, on the panel's own Warm Cream. Drawn at every width -
   the desktop frame leaves it out, but the form behind it is what gives the
   sixteen brokers with no reviews a way to get their first. It is the same
   green voice as «Обади се» at a lower volume, not a second one, and it fills
   on hover the way the primary does. */
.c-bmodal__leave{
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
  color:var(--c-green);
  border:1px solid var(--c-green);
  border-radius:var(--c-r-control);
  font:700 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  text-decoration:none;
  transition:background var(--c-ease), color var(--c-ease);
}
.c-bmodal__leave:hover{ background:var(--c-green); color:var(--c-white); }

/* --- the swap: contacts <-> review form ----------------------------------- */
/* Two halves under the photo and name, one shown at a time. The script puts
   `.is-reviewing` on the profile; with no script the links' own fragments do
   it through :target, which is also where the endpoint's no-JS redirect lands
   (#form-review) - so the answer to a posted review opens on the form. */
.c-bmodal__rform{ display:none; }
.c-bmodal__profile.is-reviewing .c-bmodal__rform,
.c-bmodal__rform:target{ display:block; }
.c-bmodal__profile.is-reviewing .c-bmodal__info,
.c-bmodal__profile:has(.c-bmodal__rform:target) .c-bmodal__info{ display:none; }

/* The way back sits first, where «Контакти» was, so it is under the
   visitor's eye the moment the form opens. A 44 target for a 14px label. */
.c-bmodal__rform{ margin-top:14px; }
.c-bmodal__back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  margin-left:-2px;
  color:var(--c-ink);
  font:500 var(--c-fs-label)/var(--c-lh-sans) var(--c-sans);
  text-decoration:none;
}
.c-bmodal__back:hover{
  text-decoration:underline;
  text-decoration-color:var(--c-gold);
  text-underline-offset:3px;
}
.c-bmodal__rform__title{ margin:4px 0 16px; }
.c-bmodal__rform__title:focus{ outline:none; }

.c-bmodal__rform textarea.c-field__control{ min-height:120px; }
.c-bmodal__done{ margin-top:4px; }
.c-bmodal__send{
  width:100%;
  margin-top:20px;
  border-radius:var(--c-r-control);
}

/* The rating. Five 28px stars - the modal's own review cards draw 18, and a
   control that has to be tapped gets a larger mark - Star Off until chosen,
   Hairline Gold up to the chosen one, and up to the hovered one while the
   pointer previews. The radio inside each label is visually hidden, so the
   label carries its focus ring. */
.c-bmodal__stars{
  margin:0 0 12px;
  padding:0;
  border:0;
  min-width:0;
}
.c-bmodal__stars > legend{ padding:0; }
.c-bmodal__stars__row{ display:flex; gap:4px; }
.c-bmodal__star{
  position:relative;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:var(--c-r-control);
  cursor:pointer;
}
.c-bmodal__star svg{
  fill:var(--c-star-off);
  transition:fill var(--c-ease);
}
.c-bmodal__star:has(input:focus-visible){
  outline:2px solid var(--c-green);
  outline-offset:0;
}
.c-bmodal__stars.is-error .c-bmodal__star svg{ stroke:var(--c-error); stroke-width:1.5; }
.c-bmodal__stars__row:not(:has(.c-bmodal__star:hover)):has(.c-bmodal__star:nth-child(1) input:checked) .c-bmodal__star:nth-child(-n+1) svg,
.c-bmodal__stars__row:has(.c-bmodal__star:nth-child(1):hover) .c-bmodal__star:nth-child(-n+1) svg{ fill:var(--c-gold); }
.c-bmodal__stars__row:not(:has(.c-bmodal__star:hover)):has(.c-bmodal__star:nth-child(2) input:checked) .c-bmodal__star:nth-child(-n+2) svg,
.c-bmodal__stars__row:has(.c-bmodal__star:nth-child(2):hover) .c-bmodal__star:nth-child(-n+2) svg{ fill:var(--c-gold); }
.c-bmodal__stars__row:not(:has(.c-bmodal__star:hover)):has(.c-bmodal__star:nth-child(3) input:checked) .c-bmodal__star:nth-child(-n+3) svg,
.c-bmodal__stars__row:has(.c-bmodal__star:nth-child(3):hover) .c-bmodal__star:nth-child(-n+3) svg{ fill:var(--c-gold); }
.c-bmodal__stars__row:not(:has(.c-bmodal__star:hover)):has(.c-bmodal__star:nth-child(4) input:checked) .c-bmodal__star:nth-child(-n+4) svg,
.c-bmodal__stars__row:has(.c-bmodal__star:nth-child(4):hover) .c-bmodal__star:nth-child(-n+4) svg{ fill:var(--c-gold); }
.c-bmodal__stars__row:not(:has(.c-bmodal__star:hover)):has(.c-bmodal__star:nth-child(5) input:checked) .c-bmodal__star:nth-child(-n+5) svg,
.c-bmodal__stars__row:has(.c-bmodal__star:nth-child(5):hover) .c-bmodal__star:nth-child(-n+5) svg{ fill:var(--c-gold); }

/* --- the second column: «За брокера», then the reviews ------------------- */
/* The column the grid sizes; the reviews' list is the one part of it that
   gives way (and scrolls) when the panel is short. */
.c-bmodal__side{
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* The column's first label sits on the photo's own top line - same size and
   weight as «Контакти», which is the other label in the panel. Right padding
   keeps it clear of the close button. */
.c-bmodal__label--side{
  margin:0;
  padding-right:48px;
}

/* --- «За брокера» ---------------------------------------------------------- */
/* The bio, cut at BROKER_ABOUT_WORDS (files/inc/team.inc.php) with «...» and a
   toggle under it; js1/page-team.js swaps `hidden` and the label. 12/18, the
   role's size on the review text's loose line - a note, not prose. */
.c-bmodal__about{ flex:0 0 auto; }
.c-bmodal__about__text{
  margin:12px 0 0;
  font:400 var(--c-fs-caption)/18px var(--c-sans);
  overflow-wrap:break-word;
}
.c-bmodal__about.is-open .c-bmodal__about__cut{ display:none; }
/* Right-aligned under the text, as the team card's «Вижте повече» is. */
.c-bmodal__about__toggle{
  display:flex;
  margin:6px 0 0 auto;
  padding:4px 0;      /* a 26px target, not the 18px line */
}

/* --- reviews -------------------------------------------------------------- */
.c-bmodal__reviews{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
}
/* After «За брокера» the label is no longer the column's first line. */
.c-bmodal__about + .c-bmodal__reviews .c-bmodal__label--reviews{
  margin-top:20px;
  padding-right:0;
}

/* The scroll region. It reaches 8px left and 29px right into the panel's
   padding so the cards keep the frame's 292 and their shadows are not
   clipped, and the scrollbar lands in the gutter rather than in a card.
   `.has-more` is set by page-team.js while there is more below, and fades
   the last card out so the column says it scrolls before anyone tries. */
.c-bmodal__list{
  flex:1 1 auto;
  min-height:0;
  margin:14px -29px 0 -8px;
  padding:4px 21px 16px 8px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--c-gold) transparent;
}
.c-bmodal__list.has-more{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}
.c-bmodal__list:focus-visible{ outline-offset:-2px; }

/* 292 wide at the card radius (a 5px diagonal) and the system's card
   shadow; 16 between cards. */
.c-bmodal__review{
  margin:0;
  padding:24px 22px 22px 24px;
  background:var(--c-cream);
  border-radius:var(--c-r-card);
  box-shadow:var(--c-sh-card);
}
.c-bmodal__review + .c-bmodal__review{ margin-top:16px; }

.c-bmodal__review__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.c-bmodal__review__name{
  font:700 var(--c-fs-caption)/14px var(--c-sans);
  text-align:right;
  overflow-wrap:anywhere;
}

/* Five 18px stars at a 31 pitch, and the modal draws the unearned one
   filled Star Off (#d9d9d9) where the landing page's quote card outlines it
   in gold - the frame samples a solid grey star. */
.c-bmodal .c-rating{ gap:13px; }
.c-bmodal .c-rating__star{
  width:18px;
  height:18px;
  fill:var(--c-star-off);
  stroke:none;
}
.c-bmodal .c-rating__star--filled{ fill:currentColor; }

/* 12/14 on the frame: seven lines at a 14px pitch across the 246px measure.
   The copy is CMS HTML (Google-review text pasted into TinyMCE), so its own
   paragraphs and divs are flattened to the block's rhythm. */
.c-bmodal__review__text{
  margin:20px 0 0;
  font:400 var(--c-fs-caption)/14px var(--c-sans);
  overflow-wrap:break-word;
}
.c-bmodal__review__text > *{ margin:0; }
.c-bmodal__review__text > * + *{ margin-top:7px; }

/* ==========================================================================
   Below 640 - the mobile frame. The panel is the scroll container and the
   columns stack: the profile in a 254 column 38 in from the stroke (x50 on
   a panel whose stroke is at x10-12), the reviews wider at 19 in, full
   width, and all of them shown.
   ========================================================================== */
@media (max-width: 639px){
  .c-bmodal,
  .c-bmodal:has(.c-bmodal--solo){
    width:calc(100% - 20px);
    max-height:calc(100dvh - 20px);
  }
  .c-bmodal__panel{
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .c-bmodal__slot,
  .c-bmodal__body{ display:block; }
  .c-bmodal__body,
  .c-bmodal__body.c-bmodal--solo{ padding:38px 19px 24px; }

  .c-bmodal__profile{
    margin-inline:0;
    padding-inline:19px;
    overflow:visible;
  }
  .c-bmodal__close{ top:17px; right:11px; }

  .c-bmodal__side{ display:block; margin-top:24px; }
  .c-bmodal__label--side{ padding-right:0; }
  .c-bmodal__list{
    margin:16px 0 0;
    padding:0;
    overflow:visible;
  }
  .c-bmodal__list.has-more{
    -webkit-mask-image:none;
            mask-image:none;
  }
}