/* ==========================================================================
   Page layout - Екип, rendered by brokers.tpl.

   Composition only. Every value is from the Careers frame (1006:2693), which
   is 1925 wide against a 1920 canvas - image 151, image 147 and the footer
   band each bleed 5px to the left - but is NOT one of the three shifted
   frames: its footer sits at 163/1057 and its divider at 954, with the
   majority. Node x therefore maps to render x + 5 and to page x unchanged.

   The frame carried 1288 for the leadership row and the team; it is the
   nav's 1278 now, the one width every section on the site shares. There is
   no hero: the page opens on the leadership band, by the client's design.

   The page is BY OFFICE (files/inc/team.inc.php,
   team_by_office()): the leadership band is one card per office and the team
   one column per office, the two on the same two-column grid from 1024 up so
   each office's manager sits over that office's people. Below 1024 both
   stack, and the office chips (js1/page-team.js) pick a column. No slider:
   the team is a grid at every width.
   ========================================================================== */

/* The nav's container, as the same min() .c-container is. */
.p-team{
  --p-team-w: min(var(--c-container), 100% - 2 * var(--c-page-gutter));
  /* The CV card's own inset from the right edge of a FULL-BLEED band: the
     container's inset, floored at the page gutter for the same reason the
     offer page's is. */
  --p-team-inset: max(var(--c-page-gutter), (100% - var(--c-container)) / 2);
  background:var(--c-field);
}

.p-team__crumbs{
  width:var(--p-team-w);
  margin:20px auto 0;   /* y121, 20px under the 101px header band */
}

/* --- «Ръководство»: 1920x444 of photograph, tint already in the art ----- */

.p-team__lead{
  position:relative;
  margin-top:30px;
  /* Its height is its content's - the 40/50 padding below - so a second row
     of office cards, or a long name, never clips. */
  overflow:hidden;
  /* The band's own sampled colour, as a base under the photograph rather than
     a wash over it. It is what the heading and the cards sit on if the art
     404s, which is the one state a dark band must not lose. */
  background:#25221e;
}

.p-team__lead__bg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* NO TINT LAYER HERE, and that is the point. img/bg/team-band.jpg is the
   COMPOSITED export of Figma's `image 151` - the design's blur and its dark
   wash are already in the pixels. Three 60x60 patches taken at the same
   offsets from the export and from the Careers frame's own render agree
   exactly (56,51,46 / 33,29,25 / 27,26,23), so anything laid over it is a
   second darkening the design does not draw. This is siteassets/README.md's
   "do not re-apply a CSS blur to them", one band later.

   Until the export landed the CV band's photograph stood in and a
   rgba(28,28,28,.85) ::after supplied the wash. Both are gone. */
.p-team__lead__inner{
  position:relative;
  z-index:1;
  width:var(--p-team-w);
  margin:0 auto;
  height:100%;
  background:none;
}

/* The leadership row and the team's columns share one grid from 1024 up -
   two columns 40 apart, so a manager's card stands over that office's
   column. A third office wraps to a second row of the same grid. */
.p-team__lead__row,
.p-team__groups{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:40px;
}
/* One office with a team: its column is the container, and its cards run
   six or seven across rather than three in half the page. */
.p-team__groups--one{ grid-template-columns:minmax(0, 1fr); }

.p-team__lead{ padding:40px 0 50px; }
.p-team__lead__row{ margin-top:30px; }

/* The office card: its label as the card title, then the manager - the lead
   person card with its own cream, shadow and padding handed to this card,
   so the two read as one object. */
.p-team__leadcard{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:24px 30px 27px;
}
.p-team__leadcard .c-person--lead{
  height:auto;
  padding:0;
  background:none;
  border-radius:0;
  box-shadow:none;
}

/* --- «Запознайте се с екипа»: the warm wash ------------------------------ */

.p-team__team{
  padding:40px 0 60px;
  background:var(--c-wash);
}

.p-team__team__inner{
  width:var(--p-team-w);
  margin:0 auto;
}

.p-team__groups{ margin-top:30px; }

/* 198-wide cards at an 18 gap, as the carousel was - three to a column at
   1920 (619 / 3) - but as many as fit: the card takes the cell's width and
   the photograph keeps the frame's 160:171. */
.p-team__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap:18px;
  margin:20px 0 0;      /* under the office title's rule, as in a card */
  padding:0;
  list-style:none;
}
.p-team__grid > li{ display:flex; }
.p-team__grid .c-person--team{
  flex:1 1 auto;
  width:auto;
  height:auto;
  min-height:326px;
}
.p-team__grid .c-person--team .c-person__photo{
  width:100%;
  height:auto;
  aspect-ratio:160 / 171;
}

/* --- the office chips ------------------------------------------------------ */
/* Only where the columns stack (below 1024) and only once the script runs
   (`hidden` in the markup). Unselected is the band showing through inside a
   1px ink stroke; selected is ink-filled - the Careers frame's own chips,
   ink rather than green because the ground is warm (DESIGN.md, Buttons). */

.p-team__chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.p-team__chips[hidden]{ display:none; }
@media (min-width: 1024px){
  .p-team__chips{ display:none; }
}

.p-team__chip{
  height:49px;
  padding:0 30px;
  border:1px solid var(--c-ink);
  border-radius:var(--c-r-control);
  background:transparent;
  font:400 var(--c-fs-body)/1 var(--c-sans);
  color:var(--c-ink);
  cursor:pointer;
  transition:background var(--c-ease), color var(--c-ease);
}
.p-team__chip:hover{ background:rgba(28,28,28,.08); }
.p-team__chip.is-on{
  background:var(--c-ink);
  color:var(--c-white);
  font-weight:700;
}

/* --- the closing CV band ------------------------------------------------ */
/* Band 1920x570 at y2078, and the 607px card at x997, 40 down from its top -
   the Обучения frame draws the same band at the same offsets. */

/* The band is `.c-cta-band--wide` in media.css - the same 570px band with the
   same 607px CV card that Обучения draws, and it is one object now. This page
   puts no gap above it, which is the only thing it says about it. */

/* ==========================================================================
   Below 1360 - the CV band stops being a fixed 570 with a card pinned in it.

   The card is 607 wide and the band 570 tall, and both are 1920 numbers: at
   a narrower page the card's own form grows taller than the band that clips
   it. So the band takes its height from its content and the card flows inside
   it, still right-aligned to the container the way the frame draws it.
   ========================================================================== */

/* ==========================================================================
   Below 1024 - the columns stack, and the chips pick one.

   Two office columns of 160+ cards need about 480 each to hold three; below
   1024 they would hold two, at a width where one column of four or five
   reads better. So the team stacks into one column per office and the chips
   appear (js1/page-team.js); the leadership cards go two-up on the mobile
   card's 123x165 portrait, which is what keeps the body's measure, and one-up
   once two of those stop fitting.
   ========================================================================== */

@media (max-width: 1023px){
  .p-team__lead__row{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap:20px;
  }
  .p-team__leadcard .c-person--lead{ gap:16px; }
  .p-team__leadcard .c-person--lead .c-person__photo{ width:123px; height:165px; }
  .p-team__leadcard .c-person--lead .c-person__role{ margin-top:6px; }

  .p-team__groups{ grid-template-columns:minmax(0, 1fr); }
  /* A chip's filter, only at the widths that draw chips: widen the window
     with one office picked and every column is back. */
  .p-team__group.is-off{ display:none; }
}

/* ==========================================================================
   393 - the mobile Екип frame, siteassets/frames-mobile/Team.png.
   ========================================================================== */

@media (max-width: 639px){

  /* --- «Ръководство»: the office cards stack ----------------------------- */
  /* The frame drew a carousel of three 331x195 cards; with one card per
     office there are two, and two stacked are both on screen. 24 of padding
     is `cards.css`'s own mobile figure. */
  .p-team__lead{ padding:16px 0 30px; }
  .p-team__lead__inner{ width:100%; padding-inline:var(--c-page-gutter); }
  .p-team__lead__row{ margin-top:23px; }
  .p-team__leadcard{ gap:16px; padding:20px 24px 24px; }
  .p-team__leadcard .c-person--lead{ min-height:0; gap:10px; }

  /* --- «Запознайте се с екипа» ----------------------------------------- */
  .p-team__team{ padding:16px 0 32px; }
  .p-team__team__inner{
    width:100%;
    padding-inline:var(--c-page-gutter);
  }

  /* 36 tall with 12 of padding each side and 4 between - the mobile frame's
     own chips. An office label is longer than a department was, so the row
     wraps rather than runs off the gutter. */
  .p-team__chips{
    gap:4px;
    margin-top:15px;
  }
  .p-team__chip{
    height:36px;
    padding:0 12px;
    font-size:var(--c-fs-label);
  }

  .p-team__groups{ margin-top:20px; row-gap:30px; }

  /* Two to a row, as the frame's 168-wide cards at a 12 gap are two to a
     screen - but a grid now, not a rail. The card takes its cell (174 at
     393) and `cards.css`'s fixed 168x278 is lifted for it. */
  .p-team__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:16px;
  }
  .p-team__grid .c-person--team{ width:auto; height:auto; min-height:278px; }
  .p-team__grid .c-person--team .c-person__photo{ width:100%; height:auto; }

  /* --- the closing CV band --------------------------------------------- */
  /* Band 393x639 with the card 324 wide at x35, which is centred to the half
     pixel. `forms.css` collapses the wide CV card onto the narrow one at this
     width; all this has to do is stop right-aligning it. */
}