/* =====================================================================
   9. JOIN — «The new loyalty infrastructure layer…»
   Карточка с тремя вкладками (Consumers / Businesses / Collaborate) и видео-куб.
   Десктоп: карточка-«папка», ярлыки вкладок нарисованы на картинке панели.
   Планшет/телефон: карточка с рамкой и кнопками-вкладками.
   Координаты внутри карточки — от её левого верхнего угла.
   ===================================================================== */

.join { height: 634px; --dy: 0px; }
.join__title { position: absolute; left: 60.6px; top: 87px; width: 912px; font: 500 50px/50px var(--head); }

.join__card {
  position: absolute; left: 60.1px; top: 223px; width: 1320px; height: 399px;
  border-radius: 20px; overflow: hidden; background: var(--line);
}

/* ярлыки вкладок */
.join__tabs button {
  position: absolute; top: 28.3px; width: 174px; height: 28px; z-index: 1;
  font: 500 18px/28px var(--head); text-align: center; color: #fff;
  transition: color 1s, background-color 1s;
}
.join__tabs button.is-active { color: #000; }
.join__tabs [data-tab="consumers"]   { left: 138.6px; }
.join__tabs [data-tab="businesses"]  { left: 573.1px; }
.join__tabs [data-tab="collaborate"] { left: 966.4px; }

/* панели */
.join__panels { position: absolute; inset: 0; grid-template: 100% / 100%; }
.join__panel  { position: relative; background: center / cover no-repeat; }
.join__panel[data-panel="consumers"]   { background-image: url(../../img/join-tab-consumers.png); }
.join__panel[data-panel="businesses"]  { background-image: url(../../img/join-tab-businesses.png); }
.join__panel[data-panel="collaborate"] { background-image: url(../../img/join-tab-collaborate.png); }
.join__panel > * { position: absolute; left: 50px; }
.join__panel h3   { top: calc(129px - var(--dy)); width: 456px; font: 500 24px/24px var(--head); }
.join__panel p    { top: calc(220px - var(--dy)); width: 486px; }
.join__panel .btn { top: calc(296px - var(--dy)); }
.join__panel[data-panel="consumers"] .btn    { width: 195px; }
.join__panel[data-panel="businesses"] p      { width: 488px; }
.join__panel[data-panel="businesses"] .btn   { top: calc(301px - var(--dy)); }
.join__panel[data-panel="collaborate"] p     { top: calc(175px - var(--dy)); width: 485px; }
.join__panel[data-panel="collaborate"] .btn  { top: calc(281px - var(--dy)); }

.join__video { position: absolute; left: 689.1px; top: 321px; width: 616px; height: 281.4px; object-fit: cover; z-index: 1; }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .join { --dy: 25px; }
  .join__card { left: 60px; width: 1130px; height: 342px; }
  .join__tabs button { width: 148.9px; }
  .join__tabs [data-tab="consumers"]   { left: 118.6px; }
  .join__tabs [data-tab="businesses"]  { left: 490.6px; }
  .join__tabs [data-tab="collaborate"] { left: 827.3px; }
  .join__video { left: 649.5px; top: 311px; width: 521px; height: 239px; }
}

/* tablet 740–1249: карточка с рамкой, вкладки — кнопки */
@media (max-width: 1249px) {
  .join { height: 871px; --dy: 0px; }
  .join__title { left: 30px; top: 48px; width: 680px; font-size: 40px; line-height: 40px; }

  .join__card { left: 30.5px; top: 223px; width: 679px; height: 619px; overflow: visible; background: none; border: 1px solid var(--line); }
  .join__tabs button { top: 28px; width: 169.3px; height: 38px; border: 1px solid #000; border-radius: 20px; font-size: 16px; line-height: 36px; color: #000; }
  .join__tabs button.is-active { background: var(--navy); color: #fff; }
  .join__tabs [data-tab="consumers"]   { left: 47.4px; }
  .join__tabs [data-tab="businesses"]  { left: 253.7px; }
  .join__tabs [data-tab="collaborate"] { left: 460.1px; }

  .join__panel[data-panel] { background-image: none; }
  .join__panel h3   { left: 49.5px; top: 109px; width: 568px; }
  .join__panel p    { top: 205px; width: 546px; }
  .join__panel .btn { top: 261px; }
  .join__panel[data-panel] .btn { width: 203px; }
  .join__panel[data-panel="businesses"] h3    { width: 576.5px; }
  .join__panel[data-panel="businesses"] p     { top: 180px; width: 546px; }
  .join__panel[data-panel="businesses"] .btn  { top: 261px; }
  .join__panel[data-panel="collaborate"] h3   { width: 456px; }
  .join__panel[data-panel="collaborate"] p    { top: 155px; width: 546px; }
  .join__panel[data-panel="collaborate"] .btn { top: 251px; }

  .join__video { left: 81.5px; top: 556px; width: 576px; height: 263.6px; }
}

/* mobile <740 */
@media (max-width: 739px) {
  .join { height: 687px; }
  .join__title { left: -0.5px; top: 26px; width: 285px; font-size: 25px; line-height: 25px; }

  .join__card { left: 0.5px; top: 150px; width: 319px; height: 518px; }
  .join__tabs button { top: 20px; width: 140px; height: 28px; border: 0; font-size: 14px; line-height: 28px; color: var(--line); }
  .join__tabs [data-tab="consumers"]   { left: 15.9px; }
  .join__tabs [data-tab="businesses"]  { left: 161.1px; }
  .join__tabs [data-tab="collaborate"] { left: 87.5px; top: 63px; }

  .join__panel > * { left: 19px; }
  .join__panel h3   { top: 126px; width: 286px; font-size: 18px; line-height: 21.6px; }
  .join__panel p    { top: 226px; width: 286px; font-size: 14px; line-height: 16.8px; }
  .join__panel .btn { top: 317px; height: 29px; }
  .join__panel[data-panel] .btn { width: 144px; }
  .join__panel[data-panel="consumers"] .btn   { width: 163px; }
  .join__panel[data-panel="businesses"] h3    { width: 280px; }
  .join__panel[data-panel="businesses"] p     { top: 226px; width: 286px; }
  .join__panel[data-panel="businesses"] .btn  { top: 312px; }
  .join__panel[data-panel="collaborate"] h3   { top: 129px; width: 285.5px; }
  .join__panel[data-panel="collaborate"] p    { top: 189px; width: 276px; }
  .join__panel[data-panel="collaborate"] .btn { top: 308px; }

  .join__video { left: 7.5px; top: 519px; width: 304px; height: 142.2px; }
}