/* assets/htm.css */

:root{
  --kub-green: #00843d;
  --kub-yellow: #ffd600;
  --kub-black: #181817;
  --gap: 8px;
}

.hbl-tm {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  font-family: "Montserrat", "Arial", sans-serif;
}

.hbl-tm * { box-sizing: border-box; }

.hbl-tm__title{
  margin: 2px 0 8px 0;
  padding: 8px 14px;

  font-weight: 900;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--kub-black);

  background: var(--kub-yellow);
  border: 2px solid var(--kub-green);
  border-radius: 14px;

  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  position: relative;
  border: none;
}

/* маленький акцент по центру снизу (в стиле “маркер/бейдж”) */
.hbl-tm__title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: var(--kub-green);
}

/* в вертикальном режиме чуть компактнее, чтобы не съедал высоту */
.hbl-tm[data-layout="vertical"] .hbl-tm__title{
  margin-bottom: 3px;
  padding: 1px 12px;
  font-size: 15px;
}

/* wrapper */
.hbl-tm__wrap{
  display: grid;
  grid-template-columns: 12px 1fr 12px;
  gap: var(--gap);
  align-items: stretch;              /* FIX: чтобы стрелки растягивались по высоте */
}

.hbl-tm[data-layout="vertical"] .hbl-tm__wrap{
  grid-template-columns: 1fr;
  grid-template-rows: 36px 1fr 36px;
  gap: var(--gap);
  align-items: stretch;
}

.hbl-tm[data-layout="vertical"] .hbl-tm__viewport{
  overflow: clip; /* если браузер поддерживает, режет строже чем hidden */
}

/* viewport */
.hbl-tm__viewport{
  width: 100%;
  overflow: hidden;
  padding: 6px 0;
}

/* nav (common) */
.hbl-tm__nav{
  /* border: 2px solid var(--kub-green); */
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  color: var(--kub-green);
  transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;

  /* центрируем символ внутри */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* horizontal nav: full height of row */
.hbl-tm:not([data-layout="vertical"]) .hbl-tm__nav{
  width: 15px;
  height: 100%;                     /* FIX: растянуть по высоте viewport */
  font-size: 22px;
  line-height: 1;
}

.hbl-tm__nav:hover:not(:disabled){
  background: rgba(255, 214, 0, .18);
  border-color: var(--kub-yellow);
}

.hbl-tm__nav:disabled{
  opacity: .35;
  cursor: default;
}

/* vertical nav: full width, fixed height */
.hbl-tm[data-layout="vertical"] .hbl-tm__nav{
  width: 100%;
  height: 20px;
  justify-self: stretch;
  align-self: center;
  font-size: 18px;
  line-height: 1;
}

/* track */
.hbl-tm__track{
  display: flex;
  gap: var(--gap);
  transition: transform 180ms ease;
  will-change: transform;
}

.hbl-tm[data-layout="vertical"] .hbl-tm__track{
  flex-direction: column;
}

/* card */
.hbl-tm__card{
  flex: 0 0 calc((100% - 4 * var(--gap)) / 5);
  min-width: 180px;
  border: 2px solid var(--kub-green);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hbl-tm__card:hover{
  border-color: var(--kub-yellow);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

@media (max-width: 640px){
  .hbl-tm__card{
    flex-basis: calc((100% - 1 * var(--gap)) / 2);
    min-width: 0;
  }
}

/* vertical full width */
.hbl-tm[data-layout="vertical"] .hbl-tm__card{
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

/* status accents (left stripe) */
.hbl-tm__card[data-status="2"],
.hbl-tm__card[data-status="3"],
.hbl-tm__card[data-status="5"],
.hbl-tm__card[data-status="6"],
.hbl-tm__card[data-status="7"],
.hbl-tm__card[data-status="8"],
.hbl-tm__card[data-status="14"]{
  border-left: 6px solid var(--kub-yellow);
}

.hbl-tm__card[data-status="4"],
.hbl-tm__card[data-status="9"]{
  border-left: 6px solid var(--kub-green);
}

.hbl-tm__card[data-status="10"],
.hbl-tm__card[data-status="11"],
.hbl-tm__card[data-status="12"],
.hbl-tm__card[data-status="13"]{
  border-left: 6px solid rgba(24,24,23,.55);
  opacity: .9;
}

/* header: меньше высота/воздуха */
.hbl-tm__card-head{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 10px;                /* FIX: меньше паддинги */
  background: var(--kub-yellow);
  color: var(--kub-black);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;                  /* FIX: меньше шрифт */
  letter-spacing: .015em;           /* FIX: меньше разрядка */
  line-height: 1.15;                /* FIX: компактнее */
  font-family: 'MyriadProBold';
}

.hbl-tm__date{ white-space: nowrap; }
.hbl-tm__time{ white-space: nowrap; opacity: .95; }

/* teams */
.hbl-tm__teams{
  padding: 2px 10px 2px 10px;
}

.hbl-tm__row{
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;                   /* чуть компактнее */
}

.hbl-tm__team{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 14px;
  color: var(--kub-black);
  font-family: 'MyriadProBlack';
}

.hbl-tm__score{
  text-align: right;
  font-weight: 900;
  font-size: 14px;
  color: var(--kub-green);
}

.hbl-tm--error,
.hbl-tm--empty{
  padding: 10px;
  border: 1px dashed rgba(0,0,0,.25);
  border-radius: 10px;
}

/* --- FIX horizontal arrows: match viewport height, not exceed block --- */

/* 1) В horizontal возвращаем центрирование, чтобы ряд не растягивался */
.hbl-tm:not([data-layout="vertical"]) .hbl-tm__wrap{
  align-items: center;
}

/* 2) Тянем кнопки ровно под viewport (внутри padding’ов viewport тоже учитывается) */
.hbl-tm:not([data-layout="vertical"]) .hbl-tm__nav{
  height: calc(100% - 12px); /* 12px = 2 * padding-top/bottom у .hbl-tm__viewport (6px + 6px) */
  align-self: center;
}

/* 3) На всякий: чтобы кнопка точно не раздувала строку по высоте */
.hbl-tm:not([data-layout="vertical"]) .hbl-tm__nav{
  box-sizing: border-box;
  line-height: 1;
}

.hbl-tm__venue{
  padding: 5px 10px;
  background: var(--kub-green);
  font-family: 'MyriadProRegular';
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .015em;
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 1) В vertical карточка должна быть строго по ширине контейнера */
.hbl-tm[data-layout="vertical"] .hbl-tm__card{
  width: 100%;
  max-width: 100%;
  min-width: 0;              /* важно: убираем min-width из horizontal */
  box-sizing: border-box;    /* чтобы border-left не "вылезал" за 100% */
}

/* 2) Внутренности тоже не должны раздувать ширину */
.hbl-tm[data-layout="vertical"] .hbl-tm__teams,
.hbl-tm[data-layout="vertical"] .hbl-tm__card-head,
.hbl-tm[data-layout="vertical"] .hbl-tm__venue{
  min-width: 0;
}

/* 3) Самая частая причина: длинные названия команд.
   grid-элементу нужно разрешить сжиматься */
.hbl-tm__row > *{
  min-width: 0;
}

/* 4) Venue/команды: гарантированное обрезание, чтобы не толкали карточку */
.hbl-tm__team,
.hbl-tm__venue{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 5) Если где-то всё равно появляется 1-2px горизонтальный скролл — режем внутри viewport */
.hbl-tm[data-layout="vertical"] .hbl-tm__viewport{
  overflow-x: hidden;
}