.cfth-wrap,
.cfth-wrap .cfth-inner,
.cfth-wrap .cfth-iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}
.cfth-wrap .cfth-iframe { max-width: none; }

/* CF Trailer Header - make the Vimeo iframe behave like background cover */
.cfth-wrap .cfth-inner {
  position: relative;
  overflow: hidden;
}

/* Scale the iframe so it covers the container (cropping as needed) */
.cfth-wrap .cfth-iframe {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  width: 177.78% !important;   /* 16:9 cover against 9:16 container cases */
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
}

/* If you use very wide ratios (e.g. 21:9) you may prefer height cover instead */
@media (min-aspect-ratio: 16/9) {
  .cfth-wrap .cfth-iframe {
    width: 100% !important;
    height: 177.78% !important;
  }
}


/* CF Trailer Header — force true cover (edge-to-edge fill) */
.cfth-wrap { width:100% !important; max-width:none !important; }
.cfth-wrap .cfth-inner { position:relative !important; overflow:hidden !important; width:100% !important; }

/* The key: make iframe larger than container and center it */
.cfth-wrap .cfth-iframe{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;

  /* COVER behaviour */
  width:100vw !important;
  height:56.25vw !important;  /* 16:9 based on viewport width */

  min-width:177.78vh !important;  /* 16:9 based on viewport height */
  min-height:100% !important;

  border:0 !important;
  display:block !important;
}

.cfth-wrap {
  width: 100%;
  border-radius: var(--cfth-radius, 0px);
  overflow: hidden;
}

.cfth-inner {
  position: relative;
  width: 100%;
  border-radius: var(--cfth-radius, 0px);
  overflow: hidden;
}

/* If height is set (>0vh), use it; otherwise fall back to aspect ratio padding */
.cfth-wrap[style*="--cfth-height:0vh"] .cfth-inner {
  padding-top: var(--cfth-pad, 56.25%);
}
.cfth-wrap:not([style*="--cfth-height:0vh"]) .cfth-inner {
  height: var(--cfth-height, 60vh);
  min-height: 240px;
}

.cfth-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mute toggle button */
.cfth-mute-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(0,0,0,0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cfth-mute-toggle:focus {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

/* Icon toggling */
.cfth-icon {
  width: 18px;
  height: 18px;
  display: none;
  background: rgba(255,255,255,0.95);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.cfth-icon-muted {
  display: inline-block;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 4.5a1 1 0 0 0-1.64-.77L7.82 6.6A2 2 0 0 1 6.56 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2.56a2 2 0 0 1 1.26.4l3.54 2.87A1 1 0 0 0 13 19.5v-15ZM19.3 8.3a1 1 0 0 1 0 1.4L17.41 11.6l1.9 1.9a1 1 0 1 1-1.42 1.4l-1.9-1.9-1.9 1.9a1 1 0 1 1-1.4-1.4l1.9-1.9-1.9-1.9a1 1 0 0 1 1.4-1.4l1.9 1.9 1.9-1.9a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E");
}

.cfth-icon-unmuted {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M13 4.5a1 1 0 0 0-1.64-.77L7.82 6.6A2 2 0 0 1 6.56 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2.56a2 2 0 0 1 1.26.4l3.54 2.87A1 1 0 0 0 13 19.5v-15Zm3.5 1.74a1 1 0 1 1 1.06-1.7A9 9 0 0 1 22 12a9 9 0 0 1-4.44 7.46 1 1 0 0 1-1.06-1.7A7 7 0 0 0 20 12a7 7 0 0 0-3.5-5.76ZM16 9.2a1 1 0 1 1 1.1-1.67A5 5 0 0 1 19 12a5 5 0 0 1-1.9 3.97A1 1 0 0 1 16 14.3 3 3 0 0 0 17 12a3 3 0 0 0-1-2.8Z'/%3E%3C/svg%3E");
}

.cfth-mute-toggle[data-state="muted"] .cfth-icon-muted { display: inline-block; }
.cfth-mute-toggle[data-state="muted"] .cfth-icon-unmuted { display: none; }
.cfth-mute-toggle[data-state="unmuted"] .cfth-icon-muted { display: none; }
.cfth-mute-toggle[data-state="unmuted"] .cfth-icon-unmuted { display: inline-block; }