/* Orbit570 - Testimonial Wall
   Direction is a bundle of custom properties written by a responsive control,
   so Elementor supplies the breakpoint media queries and this file has none.
   Everything is namespaced .o5t-* and scoped under .o5t-wall so no theme or
   Elementor card skin can reach in. */

.o5t-wall {
  --o5t-primary: #1029e4;
  --o5t-ink: #0e0f13;
  --o5t-scrim-idle: rgba(14, 15, 19, .45);
  --o5t-empty: #16181f;
  --o5t-radius: 16px;
  --o5t-gap: 24px;
  --o5t-height: 480px;
  --o5t-collapsed: 80px;
  --o5t-v-collapsed: 220px;
  --o5t-v-open: 420px;
  --o5t-speed: 550ms;
  --o5t-inner-w: 520px;
  --o5t-label-ink: #fff;
  --o5t-quote-ink: rgba(255, 255, 255, .85);
  --o5t-name-ink: #fff;
  --o5t-role-ink: rgba(255, 255, 255, .6);
  --o5t-rule-w: 32px;
  --o5t-quote-gap: 18px;
  --o5t-btn: 34px;
  --o5t-btn-ink: #fff;
  --o5t-btn-bg: rgba(14, 15, 19, .55);
  --o5t-btn-line: rgba(255, 255, 255, .28);
  --o5t-btn-bg-h: rgba(14, 15, 19, .82);
  --o5t-btn-line-h: rgba(255, 255, 255, .45);
  --o5t-e: cubic-bezier(.22, .61, .36, 1);

  /* horizontal defaults; the Direction control replaces this block */
  --o5t-dir: row;
  --o5t-row-h: var(--o5t-height);
  --o5t-card-h: 100%;
  --o5t-card-basis: 0;
  --o5t-card-min: var(--o5t-collapsed);
  --o5t-rest-basis: var(--o5t-collapsed);
  --o5t-active-grow: 1;
  --o5t-active-basis: 0;
  --o5t-label-top: 50%;
  --o5t-label-left: 50%;
  --o5t-label-bottom: auto;
  --o5t-label-tf: translate(-50%, -50%) rotate(90deg);
  --o5t-label-opacity: .5;

  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.o5t-wall *,
.o5t-wall *::before,
.o5t-wall *::after { box-sizing: border-box; }

/* ------------------------------- the row ------------------------------ */
.o5t-row {
  display: flex;
  flex-direction: var(--o5t-dir);
  gap: var(--o5t-gap);
  height: var(--o5t-row-h);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------ the card ------------------------------ */
.o5t-card {
  position: relative;
  display: block;
  flex: var(--o5t-active-grow) 1 var(--o5t-card-basis);
  min-width: var(--o5t-card-min);
  height: var(--o5t-card-h);
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--o5t-radius) !important;
  overflow: hidden !important;
  cursor: pointer;
  isolation: isolate;
  background-color: var(--o5t-ink) !important;
  background-image: none !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    flex-grow var(--o5t-speed) var(--o5t-e),
    flex-basis var(--o5t-speed) var(--o5t-e);
}

/* kill inherited hover and active skins from themes and kits */
.o5t-card:hover,
.o5t-card:focus,
.o5t-card:active,
.o5t-card:focus-within {
  background-color: var(--o5t-ink) !important;
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  text-decoration: none !important;
}

.o5t-card::before,
.o5t-card::after,
.o5t-card:hover::before,
.o5t-card:hover::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.o5t-card:focus-visible { outline: 2px solid var(--o5t-primary) !important; outline-offset: 3px; }

/* one card open: it takes the room, the rest fall back to the rail */
.o5t-row.has-active .o5t-card { flex-grow: 0; flex-basis: var(--o5t-rest-basis); }
.o5t-row.has-active .o5t-card.is-active {
  flex-grow: var(--o5t-active-grow);
  flex-basis: var(--o5t-active-basis);
}

/* --------------------- media: poster, then player --------------------- */
.o5t-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--o5t-ink);
  background-size: cover;
  background-position: center;
  container-type: size;
}

/* no video set: a deliberate panel, never a stray theme background */
.o5t-media.is-empty {
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(16, 41, 228, .18) 0%, rgba(16, 41, 228, 0) 60%),
    linear-gradient(160deg, var(--o5t-empty) 0%, var(--o5t-ink) 100%);
}

.o5t-media video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: cover;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--o5t-ink);
  pointer-events: none;
}

/* YouTube renders its own chrome inside the iframe and no parameter removes it
   for good, so the player is oversized until that furniture falls outside the
   card and gets clipped. The plain 100% pair is the fallback for browsers
   without container units. */
.o5t-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  width: calc(max(100cqw, 100cqh * 16 / 9) * 1.34);
  height: calc(max(100cqh, 100cqw * 9 / 16) * 1.34);
  max-width: none !important;
  border: 0 !important;
  display: block;
  pointer-events: none;
}

/* ---------------------- veil and rotated name ------------------------- */
/* The veil dims a closed card. Both its background and a hover variant are
   written by Background group controls, so only the fallback lives here. */
.o5t-scrim {
  position: absolute;
  inset: 0;
  background-color: var(--o5t-scrim-idle);
  pointer-events: none;
  transition:
    opacity .45s var(--o5t-e),
    background-color .35s var(--o5t-e),
    background-image .35s var(--o5t-e);
}

.o5t-card.is-active .o5t-scrim { opacity: 0; }

.o5t-label {
  position: absolute;
  top: var(--o5t-label-top);
  left: var(--o5t-label-left);
  bottom: var(--o5t-label-bottom);
  transform: var(--o5t-label-tf);
  transform-origin: center;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--o5t-label-ink) !important;
  font-size: 16px;
  line-height: 1.2 !important;
  letter-spacing: .5px;
  opacity: var(--o5t-label-opacity);
  pointer-events: none;
  transition: opacity .3s var(--o5t-e);
}

.o5t-card.is-active .o5t-label { opacity: 0; }

/* --------------------------- action buttons --------------------------- */
.o5t-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.o5t-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--o5t-btn) !important;
  height: var(--o5t-btn) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--o5t-btn-line) !important;
  border-radius: 999px !important;
  background-color: var(--o5t-btn-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--o5t-btn-ink) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
  /* closed: invisible and unclickable, so the whole card still toggles */
  opacity: 0;
  pointer-events: none;
  transform: scale(.85);
  transition:
    opacity .3s var(--o5t-e),
    transform .3s var(--o5t-e),
    background-color .3s var(--o5t-e);
}

.o5t-card.is-active .o5t-btn {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition:
    opacity .35s var(--o5t-e) .22s,
    transform .35s var(--o5t-e) .22s,
    background-color .3s var(--o5t-e);
}

.o5t-card.is-active .o5t-btn:hover {
  background-color: var(--o5t-btn-bg-h) !important;
  border-color: var(--o5t-btn-line-h) !important;
}

.o5t-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

/* Button glyphs are inline SVG on currentColor, so --o5t-btn-ink colours
   them and they never fall back to the OS emoji font. The mute button
   carries both speaker glyphs and shows the one that matches aria-pressed. */
.o5t-btn .o5t-ico {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  pointer-events: none;
}
.o5t-mute .o5t-ico--off { display: none; }
.o5t-mute[aria-pressed="true"] .o5t-ico--on  { display: none; }
.o5t-mute[aria-pressed="true"] .o5t-ico--off { display: block; }

/* ---------------------- the expanded text overlay --------------------- */
.o5t-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px;
  /* resting fallback only; the Open card overlay control owns this */
  background-image: linear-gradient(to bottom, rgba(14,15,19,0) 0%, rgba(14,15,19,.92) 92%);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transition: opacity .35s var(--o5t-e);
}

.o5t-card.is-active .o5t-overlay {
  opacity: 1;
  transition: opacity .4s var(--o5t-e) .18s;
}

.o5t-inner { width: var(--o5t-inner-w); max-width: 100%; }

.o5t-rule {
  width: var(--o5t-rule-w);
  height: 2px;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background-color: var(--o5t-primary) !important;
  border: 0 !important;
}

.o5t-quote {
  margin: 0 0 var(--o5t-quote-gap) !important;
  padding: 0 !important;
  color: var(--o5t-quote-ink) !important;
  font-size: 15px;
  line-height: 1.6;
}

.o5t-name {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--o5t-name-ink) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.o5t-role {
  margin: 2px 0 0 !important;
  padding: 0 !important;
  color: var(--o5t-role-ink) !important;
  font-size: 12px;
  line-height: 1.4;
}

/* --------------------------- reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .o5t-card,
  .o5t-overlay,
  .o5t-label,
  .o5t-scrim,
  .o5t-btn { transition-duration: .01ms !important; }
}