/* "Структура группы" in block 05: the group and its companies as a tree (the hub's company graph, told for visitors).
   Wide screens: the group node on top, a bus line, and the companies side by side, each hanging on the bus by a short tick.
   Narrow screens: a trunk on the left and one row per company. Lines are decoration only: the structure is a real list and each
   company is named in text (the colour edge is not the only cue). A click on a card opens its details in a <dialog> (group-structure.js). */
.group-structure{--gap:14px;--stem:26px;--tick:22px;--tree:#a9b5ac;margin:0 0 64px}
.group-structure .team-subheading{margin-bottom:26px}

.group-root{position:relative;display:flex;align-items:center;gap:18px;width:max-content;max-width:100%;margin:0 auto;padding:12px 24px 12px 14px;background:#1c2421;color:#f3f4ef;border-radius:3px}
.group-root::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:var(--stem);margin-left:-1px;background:var(--tree)}
.group-root-mark{display:grid;place-items:center;flex:none;width:84px;padding-right:18px;border-right:1px solid #ffffff2b}
.group-root-mark img{display:block;width:62px;height:auto}
.group-root strong{display:block;font-size:1.2rem;font-weight:600;letter-spacing:-.03em;line-height:1.3}
.group-root p{margin:2px 0 0;font-size:.8125rem;line-height:1.6;color:#aebbb1}
.group-root a{color:#f4a18a;text-decoration:underline;text-decoration-color:#f4a18a66;text-underline-offset:4px;white-space:nowrap}
.group-root a:hover{text-decoration-color:currentColor}

.group-list{list-style:none;margin:calc(var(--stem) + var(--tick)) 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
/* the bus runs from the middle of the first card to the middle of the last one; every card hangs on it by a tick */
.group-list::before{content:'';position:absolute;top:calc(-1 * var(--tick));left:calc((100% - 4 * var(--gap)) / 10);right:calc((100% - 4 * var(--gap)) / 10);height:2px;background:var(--tree)}
.group-company{position:relative;min-width:0}
.group-company::before{content:'';position:absolute;left:50%;top:calc(-1 * var(--tick));width:2px;height:var(--tick);margin-left:-1px;background:var(--tree)}

.company-open{display:grid;grid-template-areas:"logo" "name" "role" "more";grid-template-rows:auto auto 1fr auto;justify-items:start;width:100%;height:100%;padding:18px 18px 14px;background:#fff;border:1px solid #d7ddd6;border-top:4px solid var(--brand);border-radius:3px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.company-open:hover{transform:translateY(-3px);box-shadow:0 14px 30px #17251b1f}
.company-logo{grid-area:logo;display:flex;align-items:center;justify-self:stretch;height:72px;margin-bottom:14px}
.company-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:left center}
.company-name{grid-area:name;font-size:1.05rem;font-weight:600;letter-spacing:-.03em;line-height:1.3}
.company-role{grid-area:role;align-self:start;margin:5px 0 14px;font-size:.75rem;font-weight:700;letter-spacing:.09em;line-height:1.5;text-transform:uppercase;color:#56635a}
.company-more{grid-area:more;justify-self:stretch;display:flex;align-items:center;justify-content:space-between;padding-top:11px;border-top:1px solid #e3e8e2;font-size:.8125rem;font-weight:700}
.company-more span[aria-hidden]{font-size:1.15rem;line-height:1;font-weight:400;color:var(--accent);transition:transform .2s}
.company-open:hover .company-more span[aria-hidden]{transform:translate(2px,-2px)}
.group-structure .company-open:focus-visible,.group-structure a:focus-visible,.company-dialog button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the details of one company */
.company-dialog{width:min(640px,calc(100% - 28px));padding:0;border:0;border-top:6px solid var(--brand);border-radius:4px;background:#f6f7f4;color:var(--ink);box-shadow:0 30px 120px #000a;overflow-y:auto;overscroll-behavior:contain}
.company-dialog-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 24px 0 28px}
.company-dialog-logo{display:flex;height:64px;max-width:min(240px,70%)}
.company-dialog-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.company-dialog-close{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-4px -6px 0 0;border:0;border-radius:50%;background:transparent;color:#3f4a43;font:inherit;font-size:1.8rem;line-height:1;cursor:pointer}
.company-dialog-close:hover{background:#17251b14;color:var(--ink)}
.company-dialog-body{padding:16px 28px 28px}
.company-dialog h4{margin:0;font-size:clamp(1.5rem,3.4vw,1.9rem);font-weight:600;letter-spacing:-.04em;line-height:1.2}
.company-dialog .company-role{display:flex;align-items:center;gap:8px;margin:10px 0 16px}
.company-dialog .company-role::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.company-description{margin:0;font-size:1rem;line-height:1.75;color:#3a453e}
.company-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px;margin:22px 0 24px;padding-top:20px;border-top:1px solid #d7ddd6}
.company-facts>div{min-width:0}
.company-label{margin:0 0 7px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5f6c63}
.company-facts ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.company-facts a{font-size:.9375rem;line-height:1.5;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:#17251b40;text-underline-offset:4px}
.company-facts ul a::after{content:' \2197';text-decoration:none;display:inline-block;color:var(--accent)}
.company-facts a:hover{text-decoration-color:currentColor}
.company-head{margin:0;font-size:.9375rem;font-weight:600;line-height:1.45}
.company-head>span{display:block;margin-top:2px;font-size:.8125rem;font-weight:400;color:#5f6c63}
.company-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 20px;border:0;border-radius:3px;background:var(--ink);color:#fff;font:inherit;font-size:.875rem;font-weight:700;cursor:pointer;transition:background .2s}
.company-cta span[aria-hidden]{font-size:1.3rem;line-height:1;font-weight:400;transition:transform .2s}
.company-cta:hover{background:#2c3531}
.company-cta:hover span[aria-hidden]{transform:translate(2px,-2px)}

/* narrower than a row of five cards: a trunk on the left and one row per company */
@media(max-width:1000px){
  .group-structure{--gap:10px;--branch:clamp(24px,4vw,40px)}
  .group-root{margin:0}
  .group-root::after{left:46px;height:var(--gap)}
  .group-list{grid-template-columns:1fr;margin:var(--gap) 0 0 46px}
  .group-list::before{display:none}
  .group-company{--branch-y:34px;margin-left:var(--branch)}
  .group-company::before{left:calc(-1 * var(--branch));top:calc(-1 * var(--gap) - 1px);width:2px;height:calc(100% + var(--gap) + 2px);margin-left:0}
  .group-company:last-child::before{height:calc(var(--branch-y) + var(--gap) + 3px)}
  .group-company::after{content:'';position:absolute;left:calc(-1 * var(--branch));top:var(--branch-y);width:var(--branch);height:2px;background:var(--tree)}
  .company-open{grid-template-areas:"logo name more" "logo role more";grid-template-columns:minmax(96px,150px) minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:center;column-gap:24px;padding:14px 18px 14px 16px;border-top:1px solid #d7ddd6;border-left:4px solid var(--brand)}
  .company-open:hover{transform:translateX(3px)}
  .company-logo{height:56px;margin:0}
  .company-name{align-self:end}
  .company-role{align-self:start;margin:4px 0 0}
  .company-more{border-top:0;padding:0;gap:10px;justify-self:end}
}
@media(max-width:600px){
  .group-structure .team-subheading{margin-bottom:20px}
  .group-root{width:auto;gap:14px;padding:12px 16px 12px 12px}
  .group-root-mark{width:70px;padding-right:14px}
  .group-root-mark img{width:54px}
  .group-root strong{font-size:1.1rem}
  .group-root::after{left:38px}
  .group-list{margin-left:38px;--branch:16px}
  .group-company{--branch-y:30px}
  .company-open{grid-template-areas:"logo more" "name name" "role role";grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;row-gap:0;padding:14px 16px 14px 14px}
  .company-logo{height:48px;margin-bottom:10px}
  .company-name{align-self:start}
  .company-more{align-self:start;font-size:0}
  .company-more span[aria-hidden]{font-size:1.4rem}
  .company-dialog-bar{padding:18px 16px 0 20px}
  .company-dialog-body{padding:14px 20px 22px}
  .company-facts{grid-template-columns:1fr;gap:14px;margin:18px 0 20px;padding-top:16px}
  .company-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){.company-open,.company-open:hover{transition:none;transform:none}}
@media(forced-colors:active){
  .company-open{border:1px solid CanvasText;border-top-width:4px}
  .group-list::before,.group-company::before,.group-company::after,.group-root::after{background:CanvasText}
  .group-root,.company-dialog{border:1px solid CanvasText}
}