/**
 * Click-to-activate iframe embed
 * Uses globals.css tokens only.
 *
 * @package HelloElementorChild
 */

.hec-iframe {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	font-family: var(--font-body);
	color: var(--color-ink);
}

.hec-iframe__heading {
	margin: 0 0 1.25rem;
	font-family: var(--font-heading);
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-ink);
}

.hec-iframe__frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* border-radius: var(--radius-lg); */
	border: 1px solid var(--color-border) !important;
	background: var(--color-frost);
	box-sizing: border-box;
}

.hec-iframe__embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
	background: var(--color-surface);
}

.hec-iframe__frame.is-active .hec-iframe__embed {
	pointer-events: auto;
}

.hec-iframe__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-color: #5075af;
	padding: 1.25rem;
	box-sizing: border-box;
	background: rgba(7, 59, 76, 0.08);
	cursor: pointer;
	transition: background-color var(--transition-base), opacity var(--transition-base);
}

.hec-iframe__overlay:hover {
	background: rgba(7, 59, 76, 0.14);
}

.hec-iframe__frame.is-active .hec-iframe__overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hec-iframe__hint {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.75rem 1.15rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: 0 8px 24px rgba(7, 59, 76, 0.12);
	font-size: 0.9rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-ink);
	line-height: 1.3;
	text-align: center;
	max-width: min(100%, 320px);
}

.hec-iframe__hint-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--color-sea);
}

.hec-iframe__hint-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hec-iframe__overlay:focus-visible {
	outline: 2px solid var(--color-sea);
	outline-offset: -2px;
}

@media (max-width: 640px) {
	/* .hec-iframe {
		padding-inline: 1.25rem;
	} */

	.hec-iframe__hint {
		font-size: 0.8125rem;
		padding: 0.65rem 1rem;
	}
}