/*
 * [spazzio_space] — modern two-column single-space layout.
 * Depends on _tokens.css for the design tokens & scope reset.
 *
 * Layout
 * ------
 * Desktop ≥1024px:
 *   ┌────────────────────────┬───────────┐
 *   │ image + info-row       │ promo     │ (sticky)
 *   │ description            │           │
 *   │ features               │ side_extra│ (optional, from Settings)
 *   │ map                    │           │
 *   └────────────────────────┴───────────┘
 *
 * Mobile <1024px: stacks single column, promo appears AFTER image+info.
 */

/* `@property --spz-angle` is declared in _tokens.css (shared with other components). */

.spz-space {
	margin: 0 auto;
	max-width: 1240px;
}

/* ============================
 * Two-column scaffold
 * ============================ */

.spz-space--two-col {
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(340px, 1fr);
	gap: var(--spz-space-8);
	align-items: start;
}

.spz-space__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spz-space-12);
}

/* ============================
 * Notice / caution callouts (e.g. reduced ceiling height)
 * ============================ */

.spz-space__notice {
	display: flex;
	align-items: flex-start;
	gap: var(--spz-space-3);
	padding: var(--spz-space-4) var(--spz-space-5);
	border-radius: var(--spz-radius-lg);
	background: rgba(217, 119, 6, 0.08);
	border: 1px solid rgba(217, 119, 6, 0.30);
	border-left-width: 5px;
}

.spz-space__notice-icon {
	flex-shrink: 0;
	color: #d97706;
	line-height: 0;
	margin-top: 2px;
}

.spz-space__notice-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.spz-space__notice-body strong {
	font-size: var(--spz-text-md) !important;
	font-weight: 800 !important;
	color: #92500a !important;
}

.spz-space__notice-body span {
	font-size: var(--spz-text-sm) !important;
	line-height: 1.55 !important;
	color: #7c4708 !important;
}

.spz-space__side {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: var(--spz-space-5);
	min-width: 0;
}

@media (max-width: 1024px) {
	.spz-space--two-col {
		grid-template-columns: 1fr;
		gap: var(--spz-space-6);
	}
	.spz-space__main { gap: var(--spz-space-8); }
	.spz-space__side {
		position: static;
		/* On mobile, push the promo above the description so the CTA is visible */
		order: -1;
	}
}

/* ============================
 * Top block (image + info row)
 * ============================ */

.spz-space__top {
	display: flex;
	flex-direction: column;
	gap: var(--spz-space-5);
}

.spz-space__image {
	position: relative;
	border-radius: var(--spz-radius-xl);
	overflow: hidden;
	box-shadow: var(--spz-shadow-md);
	aspect-ratio: 4 / 3;
	background: var(--spz-color-surface-alt);
	max-height: 560px;
}

.spz-space__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	margin: 0 !important;
}

@media (max-width: 600px) {
	.spz-space__image { aspect-ratio: 4 / 3; max-height: none; }
}

/* ----- Info row ----- */

.spz-space__info-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--spz-space-3);
}

.spz-info {
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-lg);
	padding: var(--spz-space-4) var(--spz-space-5);
	box-shadow: var(--spz-shadow-xs);
	transition: transform var(--spz-duration) var(--spz-ease),
				box-shadow var(--spz-duration) var(--spz-ease),
				border-color var(--spz-duration) var(--spz-ease);
	display: flex;
	flex-direction: column;
	gap: var(--spz-space-2);
}

.spz-info:hover {
	transform: translateY(-2px);
	box-shadow: var(--spz-shadow-sm);
	border-color: transparent;
}

.spz-info__label {
	display: inline-block;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--spz-color-primary-dark) !important;
}

.spz-info__value {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-size: var(--spz-text-lg) !important;
	font-weight: 700 !important;
	color: var(--spz-color-secondary) !important;
	line-height: 1.2 !important;
}

.spz-info__value sup {
	font-size: 0.55em !important;
	vertical-align: super;
	font-weight: 600 !important;
}

/* ============================
 * Promo / pricing card (right column)
 * ============================ */

.spz-space__promo {
	position: relative;
	background: linear-gradient(155deg, var(--spz-color-secondary) 0%, var(--spz-color-secondary-soft) 100%);
	color: #fff;
	border-radius: var(--spz-radius-xl);
	padding: var(--spz-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--spz-space-4);
	box-shadow:
		var(--spz-shadow-lg),
		0 0 24px -4px rgba(150, 207, 36, 0.25);
	animation: spz-promo-glow 3.5s ease-in-out infinite;
}

/* ----- Rotating-border (mask-only, no z-index trickery) -----
 *
 * The pseudo-element sits ON TOP of the card. The conic gradient fills the
 * whole element, then a two-layer mask + `mask-composite: exclude` keeps
 * the gradient visible ONLY in the 2px padding strip (the "border"). The
 * `content-box` mask is excluded from the full mask, leaving the border ring.
 * This is the standard CSS-only animated-border technique and works without
 * any stacking context games.
 */
.spz-space__promo::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(
		from var(--spz-angle),
		transparent 0deg,
		transparent 250deg,
		rgba(150, 207, 36, 0.45) 280deg,
		var(--spz-color-primary) 305deg,
		#d6ff70 320deg,
		var(--spz-color-primary) 335deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	        mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	animation: spz-rotate-angle 5s linear infinite;
}

@keyframes spz-rotate-angle {
	to { --spz-angle: 360deg; }
}

@keyframes spz-promo-glow {
	0%, 100% { box-shadow: var(--spz-shadow-lg), 0 0 20px -6px rgba(150, 207, 36, 0.20); }
	50%      { box-shadow: var(--spz-shadow-lg), 0 0 32px -2px rgba(150, 207, 36, 0.40); }
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
	.spz-space__promo,
	.spz-space__promo::before { animation: none; }
}

/* Static fallback for browsers without @property (no rotation, just a
 * subtle two-stop gradient that still feels alive). */
@supports not (background: conic-gradient(from var(--spz-angle), transparent 0deg)) {
	.spz-space__promo::before {
		background: linear-gradient(135deg, var(--spz-color-primary), transparent 55%, var(--spz-color-primary));
		animation: none;
		opacity: 0.65;
	}
}

/* ----- Promo content ----- */

.spz-space__promo .spz-space__promo-title {
	margin: 0 !important;
	font-size: var(--spz-text-2xl) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	color: #ffffff !important;
	letter-spacing: -0.02em !important;
}

.spz-space__promo .spz-space__promo-title sup {
	font-size: 0.55em !important;
	vertical-align: super;
	font-weight: 700 !important;
}

/* Status + low-ceiling badge sit side by side under the title. */
.spz-space__promo-status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spz-space-2);
}

.spz-space__promo-status {
	display: inline-flex;
	align-items: center;
	gap: var(--spz-space-2);
	align-self: flex-start;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--spz-radius-pill);
	font-size: var(--spz-text-sm) !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.95) !important;
}

/* Compact "Pé-direito reduzido" pill, amber, next to the status chip. */
.spz-space__promo-ceiling {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	background: rgba(240, 160, 32, 0.18);
	border: 1px solid rgba(240, 160, 32, 0.55);
	border-radius: var(--spz-radius-pill);
	color: #ffd98a !important;
	font-size: var(--spz-text-xs) !important;
	font-weight: 700 !important;
	white-space: nowrap;
	cursor: help;
}

.spz-space__promo-ceiling svg { flex-shrink: 0; }

.spz-space__promo-status .status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--spz-color-loading);
	flex-shrink: 0;
}

.spz-space__promo-status.loading .status-dot { animation: spz-pulse 1.2s infinite; }
.spz-space__promo-status.spazzio-available .status-dot   { background: var(--spz-color-available); animation: none; }
.spz-space__promo-status.spazzio-unavailable .status-dot { background: var(--spz-color-unavailable); animation: none; }

@keyframes spz-pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.4); opacity: 0.55; }
}

.spz-space__promo-pricing {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--spz-space-3) 0 var(--spz-space-2) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.spz-space__promo-price-old {
	font-size: var(--spz-text-md) !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.45) !important;
	text-decoration: line-through;
	letter-spacing: 0.5px !important;
}

.spz-space__promo-price-new {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spz-space-2);
	font-size: var(--spz-text-3xl) !important;
	font-weight: 800 !important;
	color: var(--spz-color-primary) !important;
	letter-spacing: -0.03em !important;
	line-height: 1.1 !important;
}

.spz-space__promo-price-new .unit {
	font-size: var(--spz-text-sm) !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.75) !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}

.spz-space__promo-meta {
	display: flex;
	flex-direction: column;
	gap: var(--spz-space-2);
}

.spz-space__promo-badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--spz-color-primary);
	color: var(--spz-color-secondary) !important;
	padding: 4px 10px;
	border-radius: var(--spz-radius-pill);
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

.spz-space__promo-meta span:not(.spz-space__promo-badge) {
	font-size: var(--spz-text-sm) !important;
	color: rgba(255, 255, 255, 0.85) !important;
	line-height: 1.4 !important;
}

.spz-space__promo-window {
	margin: 0 !important;
	font-size: var(--spz-text-xs) !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.55) !important;
}

.spz-space__promo-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--spz-space-2);
	width: 100%;
	margin-top: var(--spz-space-2);
	padding: 14px 22px;
	background: var(--spz-color-primary) !important;
	color: var(--spz-color-secondary) !important;
	border: 0;
	border-radius: var(--spz-radius-pill);
	font-size: var(--spz-text-sm) !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all var(--spz-duration) var(--spz-ease);
	box-shadow: 0 6px 20px rgba(150, 207, 36, 0.25);
}

.spz-space__promo-cta:hover {
	background: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(150, 207, 36, 0.4);
}

/* "Pedir Orçamento" variant (shown when the space is unavailable). */
.spz-space__promo-cta--quote {
	background: #fff !important;
	color: var(--spz-color-secondary) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.spz-space__promo-cta--quote:hover {
	background: var(--spz-color-primary) !important;
	color: var(--spz-color-secondary) !important;
}

.spz-space__promo-cta[hidden] { display: none !important; }

/* ----- Side extra (custom shortcode from Settings) ----- */
.spz-space__side-extra { min-width: 0; }
.spz-space__side-extra > * { max-width: 100%; }

/* ============================
 * Description block
 * ============================ */

.spz-space__description {
	max-width: 760px;
}

.spz-space__description p {
	margin: 0 0 var(--spz-space-4) 0 !important;
	font-size: var(--spz-text-md) !important;
	line-height: 1.75 !important;
	color: var(--spz-color-text-soft) !important;
	font-weight: 400 !important;
}

.spz-space__description p:last-child { margin-bottom: 0 !important; }

/* ============================
 * Sections (features, map)
 * ============================ */

.spz-space__section {
	margin: 0;
}

.spz-space__section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spz-space-4);
	margin-bottom: var(--spz-space-6);
	flex-wrap: wrap;
}

.spz-space__section-title-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--spz-space-2);
}

.spz-space .spz-space__section-title {
	margin: 0 !important;
	font-size: var(--spz-text-2xl) !important;
	font-weight: 800 !important;
	color: var(--spz-color-secondary) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.15 !important;
	text-transform: none !important;
}

@media (max-width: 600px) {
	.spz-space .spz-space__section-title { font-size: var(--spz-text-xl) !important; }
}

/* ============================
 * Features grid
 * ============================ */

.spz-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--spz-space-3);
}

.spz-features-grid li {
	display: inline-flex;
	align-items: center;
	gap: var(--spz-space-3);
	padding: 14px 18px;
	background: var(--spz-color-surface);
	border: 1px solid var(--spz-color-border);
	border-radius: var(--spz-radius-md);
	box-shadow: var(--spz-shadow-xs);
	font-size: var(--spz-text-base) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--spz-color-text) !important;
	transition: all var(--spz-duration) var(--spz-ease);
}

.spz-features-grid li:hover {
	transform: translateY(-2px);
	border-color: var(--spz-color-primary);
	box-shadow: var(--spz-shadow-sm);
}

.spz-features-grid li::before {
	content: '';
	display: inline-flex;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--spz-color-primary);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.6L4 14.1 9 19l11-11-1.4-1.4z"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

/* ============================
 * Map section
 * ============================ */

.spz-space__map {
	overflow: hidden;
	border-radius: var(--spz-radius-lg);
	box-shadow: var(--spz-shadow-sm);
	border: 1px solid var(--spz-color-border);
}

.spz-space__map iframe {
	width: 100%;
	height: 380px;
	border: 0;
	display: block;
}

@media (max-width: 768px) {
	.spz-space__map iframe { height: 300px; }
}

.spz-space__map-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--spz-space-2);
	padding: 8px 16px;
	background: var(--spz-color-secondary);
	color: #fff !important;
	border-radius: var(--spz-radius-pill);
	font-size: var(--spz-text-sm) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all var(--spz-duration) var(--spz-ease);
}

.spz-space__map-cta:hover {
	background: var(--spz-color-primary);
	color: var(--spz-color-secondary) !important;
	transform: translateY(-1px);
}

/* ============================
 * Mobile (≤ 600px)
 * ============================ */

@media (max-width: 600px) {
	.spz-space__promo { padding: var(--spz-space-5); gap: var(--spz-space-3); }
	.spz-space__promo .spz-space__promo-title { font-size: var(--spz-text-xl) !important; }
	.spz-space__promo-price-new { font-size: 30px !important; }
	.spz-features-grid { grid-template-columns: 1fr; }
}