/**
 * Success stories block.
 *
 * The original is a hand-written HTML widget in a Tilda T123 record
 * ("BEBEST — КЕЙСИ СТУДЕНТІВ", e.g. bebestschool.com/spanish-course,
 * rec2870693603); its stylesheet is carried over as it was, its classes
 * unchanged, so the cards look the same: a green pill label, a 58 px title,
 * cards with a photo on top, the facts, a result pill, the text, the teacher
 * and a green button, in a row that scrolls card by card, with round arrows
 * at the sides and dots under it.
 */

.bbs-stories {
    --bbc-green: #28b963;
    --bbc-green-dark: #168f4a;
    --bbc-black: #1d1f24;
    --bbc-yellow: #ffd633;
    --bbc-coral: #ff7b66;
    --bbc-white: #ffffff;
    --bbc-background: #f6f8f6;
    --bbc-muted: #6b7077;
    --bbc-border: rgba(29, 31, 36, 0.10);
    --bbc-shadow: 0 18px 48px rgba(29, 31, 36, 0.12);
  }
  .bbc-section,
  .bbc-section * {
    box-sizing: border-box;
  }
  .bbc-section {
    width: 100%;
    padding: 90px 20px;
    overflow: hidden;
    color: var(--bbc-black);
    background:
      radial-gradient(
        circle at 4% 0%,
        rgba(40, 185, 99, 0.14),
        transparent 25%
      ),
      radial-gradient(
        circle at 97% 4%,
        rgba(255, 214, 51, 0.16),
        transparent 24%
      ),
      var(--bbc-background);
    font-family: Arial, Helvetica, sans-serif;
  }
  .bbc-container {
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
  }
  /* Заголовок */
  .bbc-header {
    max-width: 790px;
    margin: 0 auto 46px;
    text-align: center;
  }
  .bbc-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-bottom: 16px;
    padding: 9px 16px;
    border-radius: 999px;
    color: var(--bbc-white);
    background: var(--bbc-green);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .bbc-title {
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }
  .bbc-subtitle {
    max-width: 680px;
    margin: 18px auto 0;
    color: var(--bbc-muted);
    font-size: 18px;
    line-height: 1.6;
  }
  /* Слайдер */
  .bbc-slider {
    position: relative;
    width: 100%;
  }
  .bbc-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bbc-viewport::-webkit-scrollbar {
    display: none;
  }
  .bbc-track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 8px 5px 30px;
  }
  /* Карточка */
  .bbc-card {
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - 48px) / 3);
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bbc-border);
    border-radius: 26px;
    background: var(--bbc-white);
    box-shadow: var(--bbc-shadow);
    scroll-snap-align: start;
  }
  .bbc-card::before {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
    content: "";
    background: linear-gradient(
      90deg,
      var(--bbc-green) 0 25%,
      var(--bbc-black) 25% 50%,
      var(--bbc-yellow) 50% 75%,
      var(--bbc-coral) 75% 100%
    );
  }
  /* Фото сверху */
  .bbc-photo-wrap {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px;
    background:
      linear-gradient(
        135deg,
        rgba(40, 185, 99, 0.10),
        rgba(255, 214, 51, 0.13)
      ),
      #f0f3f1;
  }
  .bbc-photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 17px;
    object-fit: contain;
    object-position: center;
    background: #f0f3f1;
    transition: transform 0.35s ease;
  }
  .bbc-card:hover .bbc-photo {
    transform: scale(1.018);
  }
  .bbc-photo-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 230px;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 2px dashed rgba(40, 185, 99, 0.30);
    border-radius: 17px;
    color: var(--bbc-muted);
    background: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  /* Текст карточки */
  .bbc-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 28px 28px 27px;
  }
  .bbc-name {
    margin: 0 0 7px;
    color: var(--bbc-black);
    font-size: 27px;
    line-height: 1.12;
    letter-spacing: -0.035em;
  }
  .bbc-profession {
    margin: 0 0 22px;
    color: var(--bbc-green-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
  }
  .bbc-facts {
    display: grid;
    gap: 11px;
    margin: 0 0 20px;
  }
  .bbc-fact {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--bbc-border);
  }
  .bbc-fact dt {
    margin: 0;
    color: var(--bbc-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
  }
  .bbc-fact dd {
    min-width: 0;
    margin: 0;
    color: var(--bbc-black);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .bbc-result {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 21px;
    padding: 11px 14px;
    border-radius: 14px;
    color: var(--bbc-black);
    background: rgba(255, 214, 51, 0.36);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
  }
  .bbc-result::before {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--bbc-green);
    content: "";
  }
  .bbc-text {
    margin: 0 0 24px;
    color: #41464c;
    font-size: 15px;
    line-height: 1.67;
    white-space: pre-line;
  }
  .bbc-bottom {
    margin-top: auto;
  }
  .bbc-teacher {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    color: var(--bbc-muted);
    font-size: 14px;
    line-height: 1.45;
  }
  .bbc-teacher strong {
    color: var(--bbc-black);
  }
  .bbc-teacher-icon {
    display: inline-flex;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bbc-green-dark);
    background: rgba(40, 185, 99, 0.13);
    font-size: 18px;
    font-weight: 900;
  }
  .bbc-button {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    border-radius: 15px;
    color: var(--bbc-white) !important;
    background: var(--bbc-green);
    box-shadow: 0 10px 23px rgba(40, 185, 99, 0.23);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    transition:
      background 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }
  .bbc-button:hover {
    color: var(--bbc-white) !important;
    background: var(--bbc-green-dark);
    box-shadow: 0 13px 28px rgba(22, 143, 74, 0.28);
    transform: translateY(-2px);
  }
  /* Стрелки */
  .bbc-arrow {
    position: absolute;
    z-index: 15;
    top: 50%;
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--bbc-black);
    background: var(--bbc-white);
    box-shadow: 0 10px 28px rgba(29, 31, 36, 0.20);
    font-family: Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
      color 0.2s ease,
      background 0.2s ease,
      opacity 0.2s ease,
      transform 0.2s ease;
  }
  .bbc-arrow:hover {
    color: var(--bbc-white);
    background: var(--bbc-green);
    transform: translateY(-50%) scale(1.06);
  }
  .bbc-arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }
  .bbc-arrow--prev {
    left: -26px;
  }
  .bbc-arrow--next {
    right: -26px;
  }
  /* Точки */
  .bbc-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 6px;
  }
  .bbc-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(29, 31, 36, 0.20);
    cursor: pointer;
    transition:
      width 0.2s ease,
      background 0.2s ease;
  }
  .bbc-dot.is-active {
    width: 28px;
    background: var(--bbc-green);
  }
  /* Планшет */
  @media (max-width: 1100px) {
    .bbc-card {
      flex-basis: calc((100% - 24px) / 2);
    }
    .bbc-arrow--prev {
      left: 4px;
    }
    .bbc-arrow--next {
      right: 4px;
    }
  }
  /* Телефон */
  @media (max-width: 700px) {
    .bbc-section {
      padding: 62px 14px;
    }
    .bbc-header {
      margin-bottom: 30px;
    }
    .bbc-subtitle {
      font-size: 16px;
    }
    .bbc-track {
      gap: 15px;
      padding-bottom: 22px;
    }
    .bbc-card {
      flex-basis: 91%;
      border-radius: 22px;
    }
    .bbc-photo-wrap {
      aspect-ratio: 4 / 3;
      padding: 11px;
    }
    .bbc-content {
      padding: 25px 21px 23px;
    }
    .bbc-name {
      font-size: 25px;
    }
    .bbc-fact {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .bbc-arrow {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bbc-viewport {
      scroll-behavior: auto;
    }
    .bbc-photo,
    .bbc-button,
    .bbc-arrow,
    .bbc-dot {
      transition: none;
    }
  }