/* =============================================
   СТЕНА СЛАВЫ — карусель учеников с сертификатами
   Использует переменные из css/london-masterclass.css
   (--blue, --dark-blue, --yellow, --radius-*, --shadow-*, --space-*)
   ============================================= */

.fame-wall {
  position: relative;
  padding: var(--space-2xl, 4rem) 0;
  background: var(--bg-secondary, #f8fafc);
}

/* ---------- Праздничное открытие: блюр + переливающаяся лента с бантом ----
   Слой перекрывает всю секцию поверх контента (высокий z-index), пока его
   не "разрежут". Ширина/блюр/лента — целиком CSS, без картинок. */
.fame-wall__reveal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.7s ease 0.55s, visibility 0.7s ease 0.55s;
}

.fame-wall__reveal:focus-visible {
  outline: 3px solid var(--dark-blue, #0f3077);
  outline-offset: -3px;
}

.fame-wall__reveal-blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  background: rgba(248, 250, 252, 0.35);
  transition: backdrop-filter 0.8s ease, background 0.8s ease;
}

/* Переливающийся градиент, общий для ленты и банта */
.fame-wall__reveal-band,
.fame-wall__reveal-bow-loop {
  background: linear-gradient(
    120deg,
    #ff3d81,
    #ffb74d,
    #ffe45e,
    #35c9ff,
    #7b2ff7,
    #ff3d81
  );
  background-size: 400% 100%;
  animation: fameShimmer 6s linear infinite;
}

.fame-wall__reveal-band {
  position: absolute;
  inset-inline: -4%;
  top: 50%;
  block-size: clamp(64px, 9vw, 108px);
  box-shadow: 0 12px 30px rgba(15, 48, 119, 0.25);
  transition: transform 1s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.8s ease 0.15s;
}

.fame-wall__reveal-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  background-size: 220% 100%;
  animation: fameShine 3.2s ease-in-out infinite;
}

.fame-wall__reveal-band--left {
  transform: translateY(-50%) rotate(-2.5deg);
  clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%);
}

.fame-wall__reveal-band--right {
  transform: translateY(-50%) rotate(-2.5deg);
  clip-path: polygon(48% 0, 100% 0, 100% 100%, 52% 100%);
}

.fame-wall__reveal-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md, 1rem);
}

/* Курсор становится ножницами сразу при входе в блок — предвкушение
   разреза. Сам разрез происходит по клику (имитация щелчка ножницами),
   а не по наведению — иначе лента «срезалась» бы от любого движения
   мыши через блок, не долетев до самой ленты. */
@media (hover: hover) and (pointer: fine) {
  .fame-wall__reveal {
    cursor:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='none' stroke='%230f3077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='8' r='4' fill='white'/><circle cx='7' cy='24' r='4' fill='white'/><line x1='10' y1='10' x2='29' y2='29'/><line x1='10' y1='22' x2='29' y2='3'/></g></svg>")
        6 16,
      pointer;
  }
}

.fame-wall__reveal-bow {
  position: relative;
  inline-size: 96px;
  block-size: 64px;
  transition: transform 0.7s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.6s ease;
}

.fame-wall__reveal-bow-loop {
  position: absolute;
  top: 6px;
  inline-size: 48px;
  block-size: 48px;
  box-shadow: 0 8px 20px rgba(15, 48, 119, 0.3);
}

.fame-wall__reveal-bow-loop--left {
  left: 0;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-38deg);
}

.fame-wall__reveal-bow-loop--right {
  right: 0;
  border-radius: 50% 50% 6px 50%;
  transform: rotate(38deg);
}

.fame-wall__reveal-bow-knot {
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 24px;
  block-size: 24px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #fff, #ffe8b3);
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.fame-wall__reveal-bow-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 60px;
  block-size: 60px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.fame-wall__reveal-hint {
  margin: 0;
  padding: 0.5em 1.2em;
  max-inline-size: min(90vw, 420px);
  background: rgba(15, 48, 119, 0.85);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm, 0.95rem);
  text-align: center;
  border-radius: var(--radius-lg, 1.5rem);
  transition: opacity 0.5s ease;
}

@keyframes fameShimmer {
  to {
    background-position: -400% 0;
  }
}

@keyframes fameShine {
  0%, 100% {
    background-position: 220% 0;
  }
  50% {
    background-position: -20% 0;
  }
}

/* ---------- Состояние после "разрезания" ---------- */
.fame-wall__reveal.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fame-wall__reveal.is-open .fame-wall__reveal-blur {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  background: rgba(248, 250, 252, 0);
}

.fame-wall__reveal.is-open .fame-wall__reveal-band--left {
  transform: translate(-60%, 140%) rotate(-40deg);
  opacity: 0;
}

.fame-wall__reveal.is-open .fame-wall__reveal-band--right {
  transform: translate(60%, 140%) rotate(40deg);
  opacity: 0;
}

.fame-wall__reveal.is-open .fame-wall__reveal-bow {
  transform: translateY(120px) rotate(75deg) scale(0.7);
  opacity: 0;
}

.fame-wall__reveal.is-open .fame-wall__reveal-hint {
  opacity: 0;
}

.fame-wall__reveal.is-open .fame-wall__reveal-bow-spark {
  animation: fameRibbonSpark 0.45s ease-out;
}

@keyframes fameRibbonSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

@media (max-width: 600px) {
  .fame-wall__reveal-hint {
    font-size: var(--text-xs, 0.8rem);
  }
}

/* ---------- Заголовок ---------- */
.fame-wall__header {
  text-align: center;
  margin-bottom: var(--space-xl, 2rem);
}

.fame-wall__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: var(--dark-blue, #0f3077);
  margin: 0 0 0.5em;
}

.fame-wall__star {
  font-size: 2em;
  line-height: 1;
}

.fame-wall__subtitle {
  font-size: var(--text-base, 1.1rem);
  color: var(--text-secondary, #555);
  margin: 0;
}

/* ---------- Переключатель филиалов ---------- */
.fame-wall__city-toggle {
  display: inline-flex;
  margin: 0 auto var(--space-xl, 2rem);
  padding: 4px;
  background: #fff;
  border: 2px solid var(--border-light, #d4eaff);
  border-radius: var(--radius-lg, 1.5rem);
  box-shadow: var(--shadow-sm);
}

.fame-wall__city-toggle {
  display: flex;
  width: fit-content;
}

.fame-wall__city-btn {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.7em 1.8em;
  font-family: inherit;
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  color: var(--blue, #1189bf);
  border-radius: var(--radius-md, 1rem);
  transition: background var(--transition-base, 0.25s ease),
    color var(--transition-base, 0.25s ease);
  white-space: nowrap;
}

.fame-wall__city-btn:hover {
  background: var(--border-light, #d4eaff);
}

.fame-wall__city-btn.is-active {
  background: var(--blue, #1189bf);
  color: #fff;
}

.fame-wall__city-btn.is-active:hover {
  background: var(--blue, #1189bf);
}

/* ---------- Карусель ---------- */
.fame-wall__viewport {
  overflow: hidden;
  border-radius: var(--radius-md, 1rem);
}

.fame-wall__track {
  display: flex;
  gap: clamp(16px, 1rem + 1vw, 24px);
  transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

.fame-wall__track[hidden] {
  display: none;
}

/* ---------- Карточка ученика ---------- */
.fame-card {
  flex: 0 0 calc((100% - 2 * clamp(16px, 1rem + 1vw, 24px)) / 3);
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 2px solid var(--border-light, #d4eaff);
  border-radius: var(--radius-lg, 1.5rem);
  padding: clamp(16px, 1rem + 1vw, 24px);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base, 0.25s ease),
    box-shadow var(--transition-base, 0.25s ease),
    border-color var(--transition-base, 0.25s ease);
}

.fame-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border, #44a9e7);
}

.fame-card__photo {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md, 1rem);
  overflow: hidden;
  background: var(--border-light, #d4eaff);
  margin-block-end: var(--space-md, 1rem);
}

.fame-card__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.fame-card__play {
  position: absolute;
  top: 12px;
  right: 12px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast, 0.15s ease);
}

.fame-card__play:hover {
  transform: scale(1.1);
}

.fame-card__play svg {
  inline-size: 18px;
  block-size: 18px;
  fill: var(--blue, #1189bf);
  margin-left: 2px;
}

.fame-card__name {
  font-size: var(--text-md, 1.2rem);
  font-weight: 800;
  color: var(--dark-blue, #0f3077);
  margin: 0 0 0.4em;
}

.fame-card__desc {
  font-size: var(--text-sm, 0.9rem);
  color: var(--text, #1e1e1e);
  line-height: 1.4;
  margin: 0 0 var(--space-md, 1rem);
}

.fame-card__level {
  color: var(--blue, #1189bf);
  font-weight: 700;
}

.fame-card__badge {
  display: inline-block;
  max-inline-size: 100%;
  overflow-wrap: break-word;
  background: var(--yellow, #fdbd24);
  color: var(--dark-blue, #0f3077);
  font-weight: 800;
  font-size: var(--text-xs, 0.8rem);
  padding: 0.5em 1.1em;
  border-radius: var(--radius-lg, 1.5rem);
  margin-top: auto;
  box-sizing: border-box;
}

/* Карточка без фото — имя/описание вертикально по центру над лейблом,
   лейбл прижат к низу карточки (как и на карточках с фото) */
.fame-card--no-photo .fame-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- Нижняя панель: сертификат / пагинация / все ученики ---------- */
.fame-wall__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 1rem);
  margin-top: var(--space-xl, 2rem);
  flex-wrap: wrap;
}

.fame-wall__cert-btn,
.fame-wall__all-btn {
  appearance: none;
  cursor: pointer;
  background: #fff;
  border: 2px solid var(--blue, #1189bf);
  color: var(--blue, #1189bf);
  border-radius: var(--radius-lg, 1.5rem);
  padding: 0.8em 1.6em;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--text-sm, 0.95rem);
  white-space: nowrap;
  transition: background var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease);
}

.fame-wall__cert-btn:hover,
.fame-wall__all-btn:hover {
  background: var(--blue, #1189bf);
  color: #fff;
}

.fame-wall__all-btn {
  font-size: var(--text-base, 1.05rem);
  font-weight: 800;
}

.fame-wall__pagination {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.fame-wall__pagination[hidden] {
  display: none;
}

.fame-wall__page-arrow {
  appearance: none;
  cursor: pointer;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-light, #d4eaff);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast, 0.15s ease),
    opacity var(--transition-fast, 0.15s ease);
}

.fame-wall__page-arrow:hover {
  border-color: var(--blue, #1189bf);
}

.fame-wall__page-arrow[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.fame-wall__page-arrow svg {
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: var(--blue, #1189bf);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fame-wall__page-numbers {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.fame-wall__page-btn {
  appearance: none;
  cursor: pointer;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-light, #d4eaff);
  background: #fff;
  color: var(--blue, #1189bf);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--text-sm, 0.95rem);
  transition: background var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease),
    border-color var(--transition-fast, 0.15s ease);
}

.fame-wall__page-btn:hover {
  border-color: var(--blue, #1189bf);
}

.fame-wall__page-btn.is-active {
  background: var(--dark-blue, #0f3077);
  border-color: var(--dark-blue, #0f3077);
  color: #fff;
}

/* Когда страниц много (например, филиал с 21 учеником), вместо ряда
   кружков показываем компактный счётчик "3 / 7" */
.fame-wall__page-label {
  min-inline-size: 3.5em;
  text-align: center;
  font-weight: 700;
  font-size: var(--text-sm, 0.95rem);
  color: var(--dark-blue, #0f3077);
}

/* ---------- Модалка видеообращения ---------- */
.fame-video-modal {
  max-width: 640px;
}

.fame-video-modal__player {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md, 1rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fame-video-modal__player video,
.fame-video-modal__player iframe {
  inline-size: 100%;
  block-size: 100%;
  border: none;
  display: block;
}

.fame-video-modal__placeholder {
  color: #fff;
  font-size: var(--text-sm, 0.95rem);
  text-align: center;
  padding: 0 1.5em;
}

/* ---------- Модалка сертификата ---------- */
.fame-cert-modal__image {
  border-radius: var(--radius-md, 1rem);
  overflow: hidden;
  border: 2px solid var(--border-light, #d4eaff);
}

.fame-cert-modal__image img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

/* ---------- Модалка "Смотреть всех" ---------- */
.fame-wall-all__scroll {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: var(--space-md, 1rem);
}

.fame-wall__all-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md, 1rem);
}

.fame-wall__all-grid .fame-card {
  flex: none;
  min-inline-size: 0;
}

/* Модалке со списком нужно больше места, чем стандартным (в ней карточки
   с фото/именем/описанием/лейблом, а не просто картинки, как у остальных
   модалок-галерей на сайте) */
#fameWallAllModal.modal-overlay .modal-content.modal-lg {
  max-width: 1080px;
}

/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
  .fame-card {
    flex: 0 0 calc((100% - clamp(16px, 1rem + 1vw, 24px)) / 2);
  }

  .fame-wall__all-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .fame-card {
    flex: 0 0 100%;
  }

  .fame-wall__all-grid {
    grid-template-columns: 1fr;
  }

  .fame-wall__footer {
    justify-content: center;
    text-align: center;
  }

  .fame-wall__cert-btn,
  .fame-wall__all-btn {
    flex: 1 1 100%;
  }

  .fame-wall__pagination {
    order: 3;
  }
}