/* Malta 360 — 06 speakers. Figma 228:4232: pt 0 (agenda's pb carries it), pb 160, gap 80. */

/* The triangle pokes up into the agenda band: clip sideways only. */
.m360-speakers {
  padding-block: 0 160px;
  overflow: visible;
  overflow-x: clip;
}

/* Vector: 348.012×326.58 @−15°, bbox 420.679×405.525 at (1104, −115). */
.m360-speakers__triangle {
  right: calc(-48.34 * var(--u));
  top: calc(-75.53 * var(--u));
  width: calc(348.012 * var(--u));
  height: calc(326.58 * var(--u));
}

.m360-speakers__empty {
  margin-top: 80px;
  padding: 32px;
  border: 1px solid var(--m360-line);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--m360-text-2);
}

.m360-speakers__carousel { margin-top: 80px; }
.m360-speakers [data-carousel-track] { gap: 32px; }

/* 4-up at 296 + 32 gaps = 1280. */
.m360-speakers__slide { width: calc((100% - 96px) / 4); padding-bottom: 15px; }

@media (max-width: 1024px) { .m360-speakers__slide { width: calc((100% - 32px) / 2); } }
@media (max-width: 640px)  { .m360-speakers__slide { width: 100%; } }

.m360-speakers__frame {
  position: relative;
  overflow: hidden;
  background: var(--m360-surface);
}

/* Accent bar slides in along the bottom edge on hover (w 0 → 100%). */
.m360-speakers__frame::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 6px;
  background: var(--bar);
  transition: width .4s var(--m360-ease);
}
.m360-speakers__slide:hover .m360-speakers__frame::after { width: 100%; }

.m360-speakers__portrait {
  display: block;
  width: 100%;
  aspect-ratio: 296 / 390;
  object-fit: cover;
  filter: grayscale(1);
}

.m360-speakers__name { margin-top: 32px; color: var(--m360-text); }

.m360-speakers__meta {
  margin-top: 8px;
  font-family: var(--m360-font-hero);
  font-size: 12px;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--m360-text);
}

/* Carousel controls: 1px boxes (grey when disabled, white when live), "01/03". */
.m360-speakers .m360-carousel__nav { gap: 24px; margin-top: 32px; }
.m360-speakers .m360-carousel__nav button {
  width: auto;
  height: auto;
  padding: 12px;
  border: 1px solid var(--m360-white);
  color: var(--m360-white);
}
.m360-speakers .m360-carousel__nav button:disabled { border-color: #4B5563; color: #4B5563; }
.m360-carousel__icon { display: block; width: 12.25px; height: 14px; }
.m360-carousel__prev .m360-carousel__icon { transform: rotate(180deg); }
.m360-speakers [data-carousel-page] {
  font-family: var(--m360-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: #F9FAFB;
}

@media (max-width: 1024px) {
  .m360-speakers { padding-bottom: 96px; }
  .m360-speakers__carousel { margin-top: 48px; }
}
.m360-speakers [data-carousel-page] span { color: #4B5563; }

/* Figma mobile 228:4474: py 48; one 327×408.75 portrait per view; name 16 below. */
@media (max-width: 640px) {
  .m360-speakers { padding-block: 48px; }
  .m360-speakers__portrait { aspect-ratio: 4 / 5; }
  .m360-speakers__name { margin-top: 16px; }
  .m360-speakers__triangle { display: none; }
}