/* Huuguu UI Blocks — Media Core v2 */
.huu-uib-media-core,
.huu-uib-media,
[class*="__media"] {
  box-sizing: border-box;
}
.huu-uib-media-core {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--huu-uib-media-aspect-ratio, 16/10);
  border-radius: var(--huu-uib-media-radius, 20px);
  background: var(--huu-uib-surface, #fff);
}
.huu-uib-media-core__picture,
.huu-uib-media__picture,
.huu-uib-core-media__picture {
  display: block;
  width: 100%;
  height: 100%;
}
.huu-uib-media-core__image,
.huu-uib-media__image,
.huu-uib-core-media__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: var(--huu-uib-media-object-fit, cover);
  object-position: var(--huu-uib-media-object-position, center center);
}
.huu-uib-media-core__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.huu-uib-media-core__video-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
  color: inherit;
}
.huu-uib-media-core__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111827;
  box-shadow: 0 20px 45px rgba(15,23,42,.22);
}
.huu-uib-media-core__play svg,
.huu-uib-media-core__play i { width: 22px; height: 22px; }
.huu-uib-media-core__embed,
.huu-uib-media-core__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.huu-uib-media-core__poster-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(17,24,39,.12), rgba(17,24,39,.32));
}
.huu-uib-media-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.huu-uib-media-modal.is-open { display: flex; }
.huu-uib-media-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 24, .76);
}
.huu-uib-media-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 94vw);
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 18px;
  box-shadow: 0 32px 90px rgba(0,0,0,.45);
}
.huu-uib-media-modal__dialog iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
.huu-uib-media-modal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
body.huu-uib-media-modal-open { overflow: hidden; }

/* v2.0-alpha.57: Media Core control hardening. */
.huu-uib-media-core__play,
.huu-uib-media-core__play * {
  color: inherit;
}
.huu-uib-media-core__play svg,
.huu-uib-media-core__play svg * {
  fill: currentColor;
  stroke: currentColor;
}
.huu-uib-media-core__video-button {
  appearance: none;
  -webkit-appearance: none;
}


/* v2.0-alpha.57.2: Media Core modal must escape widget/media boxes visually. */
.huu-uib-media-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}
.huu-uib-media-modal.is-open {
  display: flex;
  pointer-events: auto;
}
.huu-uib-media-modal__backdrop {
  position: absolute;
  inset: 0;
}
.huu-uib-media-modal__dialog {
  max-height: calc(100vh - 48px);
}
.huu-uib-media-core__play,
.huu-uib-media-core__play svg,
.huu-uib-media-core__play svg * {
  color: inherit;
  fill: currentColor;
  stroke: currentColor;
}

/* v2.0-alpha.58.4: overlay color from Media Core CSS variable, not inline style. */
.huu-uib-media-core__overlay {
  background: var(--huu-uib-media-overlay-color, rgba(17,24,39,.22));
}

/* v2.0-alpha.69: Media Core ownership audit. */
.huu-uib-media-core {
	background: var(--huu-uib-media-background, var(--huu-uib-color-surface, var(--huu-uib-surface, #ffffff)));
}
.huu-uib-media-core__play {
	width: var(--huu-uib-media-play-size, 74px);
	height: var(--huu-uib-media-play-size, 74px);
	background: var(--huu-uib-media-play-bg, rgba(255,255,255,.92));
	color: var(--huu-uib-media-play-color, var(--huu-uib-color-heading, #111827));
	box-shadow: var(--huu-uib-media-play-shadow, 0 20px 45px rgba(15,23,42,.22));
}
.huu-uib-media-core__poster-placeholder {
	background: var(--huu-uib-media-placeholder-bg, linear-gradient(135deg, rgba(17,24,39,.12), rgba(17,24,39,.32)));
}
.huu-uib-media-modal__backdrop {
	background: var(--huu-uib-media-modal-backdrop, rgba(8, 13, 24, .76));
}
.huu-uib-media-modal__dialog {
	background: var(--huu-uib-media-modal-bg, #000000);
	border-radius: var(--huu-uib-media-modal-radius, 18px);
	box-shadow: var(--huu-uib-media-modal-shadow, 0 32px 90px rgba(0,0,0,.45));
}
.huu-uib-media-modal__close {
	background: var(--huu-uib-media-modal-close-bg, #ffffff);
	color: var(--huu-uib-media-modal-close-color, var(--huu-uib-color-heading, #111827));
}

/* v2.0-alpha.70.4: Media Core hover effects.
 * The effect belongs to Media Core and only animates the inner media/overlay,
 * preserving radius, layout dimensions and PageSpeed-friendly compositing.
 */
.huu-uib-media-core {
	--huu-uib-media-hover-duration: 320ms;
	--huu-uib-media-hover-ease: cubic-bezier(.2,.8,.2,1);
	--huu-uib-media-hover-scale: 1.035;
	--huu-uib-media-hover-brightness: 1.035;
	--huu-uib-media-overlay-hover-opacity: 1;
}
.huu-uib-media-core__image,
.huu-uib-media-core__overlay,
.huu-uib-media-core__poster-placeholder,
.huu-uib-media-core__embed iframe {
	transition-duration: var(--huu-uib-media-hover-duration);
	transition-timing-function: var(--huu-uib-media-hover-ease);
}
.huu-uib-media-core__image,
.huu-uib-media-core__poster-placeholder,
.huu-uib-media-core__embed iframe {
	transition-property: transform, filter;
	transform-origin: center center;
	will-change: auto;
}
.huu-uib-media-core__overlay {
	opacity: var(--huu-uib-media-overlay-opacity, 1);
	transition-property: opacity, background;
}
.huu-uib-media-core--hover-soft {
	--huu-uib-media-hover-scale: 1.025;
	--huu-uib-media-hover-brightness: 1.025;
	--huu-uib-media-overlay-hover-opacity: .72;
}
.huu-uib-media-core--hover-medium {
	--huu-uib-media-hover-scale: 1.045;
	--huu-uib-media-hover-brightness: 1.045;
	--huu-uib-media-overlay-hover-opacity: .86;
}
.huu-uib-media-core--hover-strong {
	--huu-uib-media-hover-scale: 1.07;
	--huu-uib-media-hover-brightness: 1.07;
	--huu-uib-media-overlay-hover-opacity: 1;
}
.huu-uib-media-core--hover-zoom:hover .huu-uib-media-core__image,
.huu-uib-media-core--hover-zoom:hover .huu-uib-media-core__poster-placeholder,
.huu-uib-media-core--hover-zoom-overlay:hover .huu-uib-media-core__image,
.huu-uib-media-core--hover-zoom-overlay:hover .huu-uib-media-core__poster-placeholder,
.huu-uib-media-core--hover-zoom:hover .huu-uib-media-core__embed iframe,
.huu-uib-media-core--hover-zoom-overlay:hover .huu-uib-media-core__embed iframe {
	transform: scale(var(--huu-uib-media-hover-scale));
	will-change: transform;
}
.huu-uib-media-core--hover-brightness:hover .huu-uib-media-core__image,
.huu-uib-media-core--hover-brightness:hover .huu-uib-media-core__poster-placeholder,
.huu-uib-media-core--hover-brightness:hover .huu-uib-media-core__embed iframe {
	filter: brightness(var(--huu-uib-media-hover-brightness));
	will-change: filter;
}
.huu-uib-media-core--hover-overlay .huu-uib-media-core__overlay,
.huu-uib-media-core--hover-zoom-overlay .huu-uib-media-core__overlay {
	opacity: 0;
}
.huu-uib-media-core--hover-overlay:hover .huu-uib-media-core__overlay,
.huu-uib-media-core--hover-zoom-overlay:hover .huu-uib-media-core__overlay {
	opacity: var(--huu-uib-media-overlay-hover-opacity);
}
@media (max-width: 767px) {
	.huu-uib-media-core--hover-mobile-off:hover .huu-uib-media-core__image,
	.huu-uib-media-core--hover-mobile-off:hover .huu-uib-media-core__poster-placeholder,
	.huu-uib-media-core--hover-mobile-off:hover .huu-uib-media-core__embed iframe {
		transform: none;
		filter: none;
		will-change: auto;
	}
	.huu-uib-media-core--hover-mobile-off.huu-uib-media-core--hover-overlay .huu-uib-media-core__overlay,
	.huu-uib-media-core--hover-mobile-off.huu-uib-media-core--hover-zoom-overlay .huu-uib-media-core__overlay {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.huu-uib-media-core__image,
	.huu-uib-media-core__overlay,
	.huu-uib-media-core__poster-placeholder,
	.huu-uib-media-core__embed iframe {
		transition-duration: 1ms;
	}
	.huu-uib-media-core:hover .huu-uib-media-core__image,
	.huu-uib-media-core:hover .huu-uib-media-core__poster-placeholder,
	.huu-uib-media-core:hover .huu-uib-media-core__embed iframe {
		transform: none;
		filter: none;
	}
}


/* v2.0-alpha.71.1 — Ensure Media Core v2 fills explicit slot heights. */
.huu-uib-media-core__video-button,
.huu-uib-media-core__picture,
.huu-uib-media-core__image,
.huu-uib-media-core__poster-placeholder,
.huu-uib-media-core__embed,
.huu-uib-media-core__embed iframe {
  min-height: 0;
}


/* v2.0-alpha.71.5 — Media Core v2 radius ownership fix.
 * Radius belongs to Media Core controls and must affect both the media slot
 * and all inner image/video/poster layers in editor and frontend.
 */
.huu-uib-media-core,
.huu-uib-layout__media > .huu-uib-media-core {
  border-radius: var(--huu-uib-media-radius, 20px);
}
.huu-uib-layout__media {
  border-radius: var(--huu-uib-media-radius, inherit);
}
.huu-uib-media-core__picture,
.huu-uib-media-core__image,
.huu-uib-media-core__video-button,
.huu-uib-media-core__poster-placeholder,
.huu-uib-media-core__embed,
.huu-uib-media-core__embed iframe {
  border-radius: inherit;
}