/* ==========================================================================
   page-tabs.css — таб-меню раздела («TUB Buttons», Figma 2205:85843).
   Спец-меню страницы: пилюли-переключатели в карточке-обёртке.
   ≤767 — аккордеон (Figma 2205:85064 закрыт / 2205:85115 открыт):
   красная шапка с активным пунктом + список, контент страницы при
   раскрытии съезжает вниз (список в потоке, не оверлей).
   ========================================================================== */

/* Карточка-обёртка (Figma: bg Akaroa 20%, бордер c-line, радиус 24) */
.ptabs {
  margin: 24px 0 0; /* авторский отступ от крошек (в макете меню сразу под шапкой) */
  padding: 32px 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-24);
  background: rgba(214, 191, 163, 0.2); /* Akaroa 20% (2205:85843) */
}

/* Мобильная шапка-аккордеон — на десктопе скрыта */
.ptabs__toggle { display: none; }

.ptabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Пилюля (TUB Buttons: 12/20 Inter Tight, радиус 8, паддинг 8/16) */
.ptabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--c-btn-gray);
  border-radius: 8px;
  background: none;
  font: 400 12px/20px var(--font-text);
  color: var(--c-btn-gray);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ptabs__tab:hover { border-color: var(--c-accent); color: var(--c-accent); } /* авторский hover */
.ptabs__tab.is-active {
  border-color: var(--c-accent); /* в Figma актив без рамки; рамка в цвет фона — чтобы высоты пилюль совпадали */
  background: var(--c-accent);
  color: #fff;
}
.ptabs__tab.is-active:hover { color: #fff; }

/* Вариант «перетекает в hero» (Figma 2205:84995, стр. Бронирование гостиниц):
   скругление только сверху, pb 73, баннер наезжает на низ карточки на 50px
   (нижняя кромка прячется под hero, ширины совпадают — контейнер). */
.ptabs--flow {
  border-radius: var(--r-24) var(--r-24) 0 0;
  border-bottom: 0;
  padding-bottom: 73px;
  margin-bottom: -50px;
}
.ptabs--flow + .arr-hero { margin-top: 0; } /* наезд ровно 50 (у hero свой mt 28) */

/* ---------- @767 — мобилка: аккордеон ---------- */
@media (max-width: 767px) {
  .ptabs {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  /* Открытое состояние — панель Almond Card (Figma 2205:85115):
     50% белого поверх c-bg, скругление только сверху, снизу паддинг 60 */
  .ptabs.is-open {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), var(--c-bg);
    border-radius: 24px 24px 0 0;
    padding-bottom: 60px;
  }

  /* Красная шапка = активный пункт + шеврон (Figma 2205:85064) */
  .ptabs__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--c-accent);
    font: 400 12px/20px var(--font-text);
    color: #fff;
    text-align: left;
    cursor: pointer;
  }
  .ptabs__chev { flex: none; transition: transform 0.25s ease; }
  .ptabs.is-open .ptabs__chev { transform: rotate(180deg); }

  /* Список: столбец без рамок, зазор до шапки 2px (gap/2 в макете) */
  .ptabs__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 2px;
  }
  .ptabs.is-open .ptabs__list { display: flex; }

  .ptabs__tab {
    justify-content: flex-start;
    border: 0;
    padding: 8px 16px;
    color: var(--c-secondary);
    white-space: normal;
  }
  .ptabs__tab:hover { color: var(--c-accent); }
  /* Активный пункт вынесен в шапку — в списке не дублируется (как в 2205:85115) */
  .ptabs__tab.is-active { display: none; }

  /* «Перетекание» в hero на мобилке (Figma 2205:85109): закрытый тоггл —
     обычный зазор до баннера; открытая панель прячет низ (pb 60) под hero
     на 40px — видимый просвет от последнего пункта до баннера ~20px,
     без «пустой полосы» между списком и hero. */
  .ptabs--flow { margin-bottom: 0; padding-bottom: 0; }
  .ptabs--flow.is-open { padding-bottom: 60px; margin-bottom: -40px; }
  .ptabs--flow + .arr-hero { margin-top: 28px; }
  .ptabs--flow.is-open + .arr-hero { margin-top: 0; }
}