/* ==========================================================================
   Cards that inform - 20px radius, cream fill, 40px of internal air.
   Services, Обучения, Contacts, Listing's description and amenities,
   office cards. The most reused container in the system.
   ========================================================================== */

.c-card{
  padding:var(--c-pad);
  background:var(--c-cream);
  border-radius:var(--c-r-card);
  box-shadow:var(--c-sh-card);
}

/* Card copy is running copy: the Prose role's 24, like `.c-prose`, which
   every live instance of this class also carries. */
.c-card__body{
  margin:18px 0 0;
  max-width:var(--c-measure);
  font:400 var(--c-fs-body)/var(--c-lh-prose) var(--c-sans);
  color:var(--c-ink);
}

/* --- grids the frames actually use -------------------------------------- */

/* CONTENT-DRIVEN, not breakpoint-driven, and deliberately so: a card grid is
   the one thing in this system that already knows where it should break,
   because the card has a minimum width at which its own contents stop working.
   auto-fit says that once; three media queries would say it three times and
   drift apart. tokens.css's three breakpoints are for structure - the nav, the
   hero split, the container - and no grid needs a fourth number.

   --2 is the 630-wide text-card pair the Services, Обучения and Contacts
   frames draw; its floor is 420, which is the widest a single one of those
   cards is ever asked to be.
   --3 is the 420-wide property and article card, three up at a 427 pitch; its
   floor is 260, which is what the frosted info bar needs to hold a two-line
   16/19 title inside its 20px insets and 22px padding (260 - 40 - 44 = 176).

   min(100%, N) rather than a bare N is what stops a single card overflowing a
   container narrower than the floor - at 361 the track resolves to 361, not
   to 420. */
.c-grid{
  display:grid;
  gap:var(--c-pad) var(--c-pad);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.c-grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.c-grid--3{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:var(--c-gutter);
}

/* --- person card: two densities, one component -------------------------- */
/* Both are measured off the Careers frame (1006:2693): the leadership card is
   396x287 and the team card 198x326, and both are Paper Cream, not white -
   sampled #fbfaf7 on a clean patch of each.

   lead - photo left, contacts right, contact button. Three per row.
   team - photo on top, name, role, "Виж повече". Six in a carousel.        */

.c-person{
  /* The team card's "Виж повече" carries a .c-sr span, which is absolutely
     positioned. Without a containing block here it resolves against the
     carousel's positioned RAIL rather than the scroll container, escapes the
     track's clip and stretches the document to 3112px wide - invisible on
     screen and fatal to a full-page screenshot. */
  position:relative;
  background:var(--c-cream);
  border-radius:var(--c-r-card);
  box-shadow:var(--c-sh-card);
}

/* 396x287, 27px top and bottom and 30px left and right: the photo sits at
   +30/+27 and the button's bottom is 27 clear of the card's. The 174 photo
   leaves 141 for the body across a 21px gap, and the frame's 150-wide text
   boxes overflow that by 9 - hand-dragged boxes, per the Box-Height rule. */
.c-person--lead{
  display:flex;
  gap:21px;
  height:287px;
  padding:27px 30px;
}
.c-person--lead .c-person__photo{
  flex:0 0 auto;
  width:174px; height:233px;
  object-fit:cover;
  border-radius:var(--c-r-control);
}
.c-person--lead .c-person__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}

/* 198x326, 19px sides and a 20px top: the photo is 160x171 inset 19/20, and
   the "Виж повече" link's box ends 20 above the card's bottom. */
.c-person--team{
  display:flex;
  flex-direction:column;
  width:198px; height:326px;
  padding:20px 19px;
}
.c-person--team .c-person__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.c-person--team .c-person__photo{
  width:160px; height:171px;
  object-fit:cover;
  border-radius:var(--c-r-control);
}
.c-person--team .c-person__name{ margin-top:11px; }

.c-person__photo{ display:block; }

/* The photograph's frame, so the language chip can sit on it. On the lead
   card it is the flex item the photo used to be. */
.c-person__media{ position:relative; }
.c-person--lead .c-person__media{ flex:0 0 auto; }

/* The languages the broker speaks, as flags on the photo's bottom-left
   corner, 6 in from both edges. A Paper Cream chip rather than bare flags:
   a flag straight on a photograph fights whatever is behind it, and several
   of these (Poland, Russia, Bulgaria) are half white. The chip is a label on
   the photo, so it takes a small contact shadow, not the card's ambient one.
   Each flag is 18x13.5 (the set's own 4:3) with a 1px ink hairline at 14%,
   which is what keeps a white band from dissolving into the cream. Wraps if
   a broker ever records more than the photo is wide - seven fit on the team
   card's 160. */
.c-person__langs{
  position:absolute;
  left:6px;
  bottom:6px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-width:calc(100% - 12px);
  margin:0;
  padding:4px 5px;
  list-style:none;
  background:var(--c-cream);
  border-radius:var(--c-r-control);   /* a chip on a photograph, like the
                                         article date chip - was an off-scale 6 */
  box-shadow:0 1px 3px rgba(28,28,28,.18);
}
.c-person__langs li{ display:block; line-height:0; }
.c-person__langs img{
  display:block;
  width:18px;
  height:13.5px;
  object-fit:cover;
  border-radius:var(--c-r-detail);
  box-shadow:0 0 0 1px rgba(28,28,28,.14);
}

.c-person__name{
  margin:0;
  /* 16px, not the 18 the h36 box implies: the name wraps "Константин" /
     "Константинов", which ink at 87 and 105 against 88.5 and 106.7 at 16px. */
  font:700 var(--c-fs-body)/19px var(--c-sans);
  color:var(--c-ink);
}

.c-person__role{
  margin:5px 0 0;
  /* 12px on a loose 18px line - the two-line role box is 37 tall */
  font:400 var(--c-fs-caption)/18px var(--c-sans);
  color:var(--c-muted);
}
.c-person--lead .c-person__role{ margin-top:19px; }

/* The lead card's contact rows: the LABEL is 16px and the value it introduces
   is 12px - a size smaller, on both rows of all three cards. Solved by
   advance width ("Тел. номер:" inks 85 against 86.3 at 16px, its number 97
   against 96.7 at 12px), not by the boxes, which are all a flat 150x43. */
.c-person__meta{
  margin:14px 0 0;
  font:700 var(--c-fs-caption)/14px var(--c-sans);
  color:var(--c-ink);
}
.c-person__role + .c-person__meta{ margin-top:8px; }
.c-person__meta__label{
  display:block;
  margin-bottom:4px;
  font:400 var(--c-fs-body)/19px var(--c-sans);
  color:var(--c-muted);
}
.c-person__meta a{ word-break:break-word; }

.c-person__cta{ margin-top:auto; align-self:flex-start; }
/* 139x49 on every contact button in this frame - the office cards' two and
   the leadership row's three all measure the same box. The label is
   «Свържете се» (PRODUCT.md's Вие), 95 wide: with the light button's own
   29px padding it is 153, over the leadership body's 141, and wraps from
   1360 up. 22px each side brings it back to the frame's 139. */
.c-person__cta .c-btn{ height:49px; }
.c-person--lead .c-person__cta .c-btn{ padding-inline:22px; }

/* Right-aligned, 20px clear of the card's bottom edge. */
/* The frame puts it 20 above the card's bottom on all six cards, whatever
   the name and role above it do, so it is pushed down rather than spaced. */
.c-person--team .c-person__more{
  display:flex;
  justify-content:flex-end;
  margin-top:auto;
  padding-top:11px;
}

/* --- stat: value, label, and an icon when there is one ------------------- */
/* Four of them in a 2x2 grid on the Екип hero panel. The cell is 152 wide -
   a 40px icon, a 10px gap and a 102px text column - which is what puts the
   second column at +162. */

.c-stat{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.c-stat__icon{ flex:0 0 auto; width:40px; height:40px; }
.c-stat__text{ display:block; width:102px; }
.c-stat__value{
  display:block;
  font:700 var(--c-fs-body)/19px var(--c-sans);
}
.c-stat__label{
  display:block;
  font:400 var(--c-fs-caption)/15px var(--c-sans);
  color:var(--c-muted);
}

/* On the dark hero panel the stats invert - both lines, since Muted has
   nothing to sit against there. */
.c-hero__panel .c-stat__value,
.c-hero__panel .c-stat__label{ color:var(--c-white); }

/* The promise stat - Услуги's five guarantees (page-pages.css). The same
   value-over-label, at the size of what it says: the value is a figure or a
   short headline and takes the card title's serif, the label is a sentence
   an owner reads and takes body copy in ink - Muted is never body copy.
   Below 1120 the strip is a list of rows and the stat lays the two side by
   side; at 393 it stacks again. */
.c-stat--promise{ display:block; }
.c-stat--promise .c-stat__text{ width:auto; }
.c-stat--promise .c-stat__value{
  font:400 var(--c-fs-title)/1.25 var(--c-serif);
  /* Playfair's default figures are old-style, and a "1" the height of an
     "о" reads as a lower-case figure in a line that is only figures */
  font-variant-numeric:lining-nums;
  color:var(--c-ink);
}
.c-stat--promise .c-stat__label{
  margin-top:8px;
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
  color:var(--c-ink);
}
@media (max-width: 1119px){
  .c-stat--promise .c-stat__text{
    display:grid;
    grid-template-columns:minmax(0, 240px) minmax(0, 1fr);
    column-gap:24px;
    align-items:baseline;
  }
  .c-stat--promise .c-stat__label{ margin-top:0; }
}
@media (max-width: 639px){
  .c-stat--promise .c-stat__text{ display:block; }
  .c-stat--promise .c-stat__label{ margin-top:4px; }
}

/* --- the prose card ------------------------------------------------------ */
/* A cream card whose width IS the copy measure, for the surfaces that render
   a page of CMS copy and have no frame: За нас and the policy pages, the
   «Кариера» fallback, and the article page.

   The width is not a new number. The system already states the relationship -
   "a form card's padding is what makes a 462px card hold a 372px field row
   (462 - 2x45)" - and this is that relationship applied to the 521px copy
   measure: 521 + 2x40 = 601. Setting the card to the grid's 1230 instead
   leaves a 521 column marooned in it, which is what these three surfaces did
   until the article page put a wide photograph above one and made it obvious.

   The card is the measure; .c-prose inside it needs no cap of its own. */
.c-card--prose{
  width:min(calc(var(--c-measure) + 2 * var(--c-pad)), 100%);
  margin-left:auto;
  margin-right:auto;
  padding:var(--c-pad);
}

/* ==========================================================================
   393 - the cards, measured on the four mobile renders.
   ========================================================================== */

@media (max-width: 639px){

  /* 24, not 40. Five cards across two frames agree: the Listing frame's
     «Характеристики», «Описание» and «Удобства и екстри» and the Екип frame's
     two office cards are all 377 wide with their content opening at x29, and
     the card's own left edge is x5. */
  .c-card{ padding:24px; }
  .c-card__body{ max-width:none; }

  /* 20 between stacked cards, against the desktop's 40: Характеристики ends
     909 and Описание opens 929, Описание ends 1133 and Удобства opens 1149,
     and the two office cards sit 793 -> 809. Three of 16-20. */
  .c-grid{ gap:20px; }
  .c-grid--3{ gap:20px; }

  .c-card--prose{ padding:24px; }

  /* --- person cards ---------------------------------------------------- */

  /* The lead card stays horizontal at 393 and does NOT stack - the Екип
     frame draws it 331x195 with the photograph still on the left, which is
     the one place a mobile frame keeps a desktop side-by-side. Photo 123x165
     inset 15, a 10px gap, the body to its right, and the button at the
     bottom of the body rather than of the card. */
  .c-person--lead{
    height:auto;
    min-height:195px;
    gap:10px;
    padding:15px;
  }
  .c-person--lead .c-person__photo{ width:123px; height:165px; }
  .c-person--lead .c-person__role{ margin-top:6px; }

  /* 168x278 against the desktop's 198x326: photo 136x145 inset 16, the name
     at +8 and «Виж повече →» still right-aligned and still pushed to the
     bottom rather than spaced there. The width is fixed because this card
     only ever appears inside a scroll rail, where a fixed track width is
     what makes the snap points regular. */
  .c-person--team{
    width:168px;
    height:278px;
    padding:16px;
  }
  .c-person--team .c-person__photo{ width:136px; height:145px; }
  .c-person--team .c-person__name{ margin-top:8px; }

  /* The horizontal rail, `.c-rail`, is a slider: css/system/slider.css. */
}

/* c-rating: five 14px stars, gold up to the value and gold-outline past it -
   `currentColor` so both states share the one path in c-rating.tpl. Two
   consumers - the landing page's quote cards and the Екип broker modal
   (broker-modal.css, which sizes and recolours it to its own frame) - so it
   is site-wide rather than in either page's sheet. */
.c-rating{
  display:inline-flex;
  flex-shrink:0;
  gap:2px;
  color:var(--c-gold);
}
.c-rating__star{ fill:none; stroke:currentColor; stroke-width:2.23; }
.c-rating__star--filled{ fill:currentColor; }