/**
 * HQ Hero Block — Frontend + Editor Shared Styles v2.1
 *
 * Accessibility:
 *  • Hover effects trigger on :focus-within (keyboard)
 *  • Animations respect prefers-reduced-motion
 *  • CTA has visible focus ring
 *  • Transitions on specific properties only (no "all")
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Base hero wrapper
 * width/height se controlan via inline styles del bloque (align full = 100vw)
 * ─────────────────────────────────────────────────────────────────────── */
.hq-hero {
	box-sizing:      border-box;
	position:        relative;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	width:           100%;
	overflow:        hidden;
	transition:      transform 0.3s ease, box-shadow 0.3s ease;
}

.hq-hero *,
.hq-hero *::before,
.hq-hero *::after {
	box-sizing: inherit;
}

/* ── Inner container — limita el ancho del contenido sin limitar el fondo */
.hq-hero-inner {
	position:   relative;
	z-index:    1;
	width:      100%;
	max-width:  900px;
}

/* ── Overlay (imagen de fondo) */
.hq-hero-overlay {
	position:       absolute;
	inset:          0;
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Typography — tamaños se aplican via inline style desde JS
 * Solo definimos propiedades que no varían
 * ─────────────────────────────────────────────────────────────────────── */
.hq-hero-title {
	margin:      0 0 0.4em;
	word-break:  break-word;
}

.hq-hero-content {
	margin:      0 0 1.5em;
	max-width:   680px;
	line-height: 1.6;
}

/* Centrar el párrafo cuando el bloque está centrado */
.hq-hero[style*="center"] .hq-hero-content,
.hq-hero .hq-hero-inner[style*="center"] .hq-hero-content {
	margin-left:  auto;
	margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
 * CTA Button
 * ─────────────────────────────────────────────────────────────────────── */
.hq-hero-cta-wrap {
	display: flex;
}

/* Hereda alineación del padre */
.hq-hero[style*="text-align: center"] .hq-hero-cta-wrap,
.hq-hero[style*="text-align:center"]  .hq-hero-cta-wrap  { justify-content: center; }
.hq-hero[style*="text-align: right"]  .hq-hero-cta-wrap,
.hq-hero[style*="text-align:right"]   .hq-hero-cta-wrap  { justify-content: flex-end; }
.hq-hero[style*="text-align: left"]   .hq-hero-cta-wrap,
.hq-hero[style*="text-align:left"]    .hq-hero-cta-wrap  { justify-content: flex-start; }

.hq-hero-cta {
	display:         inline-block;
	text-decoration: none;
	cursor:          pointer;
	border:          2px solid transparent;
	transition:      opacity 0.2s ease, transform 0.2s ease;
	line-height:     1;
	white-space:     nowrap;
}

.hq-hero-cta:hover {
	opacity:         0.88;
	transform:       translateY(-2px);
	text-decoration: none;
}

.hq-hero-cta:focus,
.hq-hero-cta:focus-visible {
	outline:        3px solid currentColor;
	outline-offset: 3px;
	opacity:        0.88;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Hover effects (bloque completo)
 * ─────────────────────────────────────────────────────────────────────── */
.hq-hover-zoom:hover,
.hq-hover-zoom:focus-within  { transform: scale(1.02); }

.hq-hover-lift:hover,
.hq-hover-lift:focus-within  { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }

.hq-hover-shadow:hover,
.hq-hover-shadow:focus-within { box-shadow: 0 16px 40px rgba(0,0,0,0.22); }

/* ─────────────────────────────────────────────────────────────────────────
 * Entry animations — solo cuando el usuario NO prefiere reducción de movimiento
 * ─────────────────────────────────────────────────────────────────────── */
@keyframes hq-fade-in  { from { opacity: 0; }                                    to { opacity: 1; } }
@keyframes hq-slide-up { from { opacity: 0; transform: translateY(24px); }       to { opacity: 1; transform: translateY(0); } }
@keyframes hq-bounce   { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: no-preference) {
	.hq-anim-fade-in  { animation: hq-fade-in  0.8s ease-out both; }
	.hq-anim-slide-up { animation: hq-slide-up 0.8s ease-out both; }
	.hq-anim-bounce   { animation: hq-bounce   1.0s ease-out both; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Responsive
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.hq-hero-title   { font-size: clamp(28px, 7vw, 56px) !important; }
	.hq-hero-content { font-size: clamp(15px, 3.5vw, 20px) !important; }
	.hq-hero-cta     { white-space: normal; }
}

@media (max-width: 480px) {
	.hq-hero-cta-wrap { justify-content: center !important; }
	.hq-hero-cta      { display: block; text-align: center; width: 100%; max-width: 280px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Compatibilidad con temas que tienen contenedores estrechos
 * align="full" en Gutenberg añade la clase alignfull al wrapper del bloque
 * ─────────────────────────────────────────────────────────────────────── */
.wp-block-hq-ultra-dynamic-block.alignfull {
	width:        100vw;
	max-width:    100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}