/**
 * Place Oversea — biblioteca de componentes reutilizáveis.
 * Usar em HTML personalizado, shortcodes ou widgets Elementor (classe CSS).
 */

/* ============================================================
   Botões
   ============================================================ */
.po-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--po-space-sm);
	min-height: 44px;
	padding: 11px 26px;
	border: none;
	border-radius: var(--po-radius-pill);
	font-family: var(--po-font-family);
	font-size: 15px;
	font-weight: var(--po-font-weight-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--po-transition-base),
		box-shadow var(--po-transition-base),
		background-color var(--po-transition-base),
		border-color var(--po-transition-base),
		color var(--po-transition-base);
}

.po-btn--primary {
	background-color: var(--po-accent);
	color: var(--po-text);
	box-shadow: var(--po-shadow-accent);
}

.po-btn--primary:hover,
.po-btn--primary:focus-visible {
	background-color: var(--po-accent-dark);
	color: var(--po-text);
	transform: translateY(-2px);
	box-shadow: var(--po-shadow-accent-hover);
}

.po-btn--secondary {
	background-color: var(--po-primary);
	color: var(--po-white);
	box-shadow: var(--po-shadow-soft);
}

.po-btn--secondary:hover,
.po-btn--secondary:focus-visible {
	background-color: var(--po-primary-dark);
	color: var(--po-white);
	transform: translateY(-2px);
	box-shadow: var(--po-shadow-md);
}

.po-btn--outline {
	background-color: var(--po-white);
	color: var(--po-primary);
	border: 1px solid var(--po-border);
	box-shadow: none;
}

.po-btn--outline:hover,
.po-btn--outline:focus-visible {
	background-color: var(--po-primary-soft);
	border-color: var(--po-primary);
	transform: none;
}

.po-btn--ghost {
	background: transparent;
	color: var(--po-primary);
	box-shadow: none;
}

.po-btn--ghost:hover,
.po-btn--ghost:focus-visible {
	background: var(--po-primary-soft);
}

.po-btn--sm {
	min-height: 36px;
	padding: 8px 18px;
	font-size: 0.875rem;
}

.po-btn--lg {
	min-height: 52px;
	padding: 14px 32px;
	font-size: 1rem;
}

/* ============================================================
   Cards
   ============================================================ */
.po-card {
	background: var(--po-white);
	border: 1px solid var(--po-border);
	border-radius: var(--po-radius-lg);
	padding: var(--po-space-lg);
	box-shadow: none;
	transition: box-shadow var(--po-transition-fast), transform var(--po-transition-fast);
}

.po-card--elevated {
	box-shadow: var(--po-shadow-soft);
	border-color: transparent;
}

.po-card--surface {
	background: var(--po-surface);
	border-color: transparent;
}

.po-card:hover,
.po-card--elevated:hover {
	box-shadow: var(--po-shadow-soft);
	transform: translateY(-2px);
}

.po-card__title {
	margin: 0 0 var(--po-space-sm);
	font-size: var(--po-font-size-h3);
	font-weight: var(--po-font-weight-bold);
	color: var(--po-text);
	line-height: var(--po-line-height-heading);
}

.po-card__body {
	margin: 0;
	color: var(--po-muted);
	font-size: var(--po-font-size-body);
	line-height: var(--po-line-height-body);
}

/* ============================================================
   Property Cards (listagens)
   ============================================================ */
.po-property-card {
	display: flex;
	flex-direction: column;
	background: var(--po-white);
	border: 1px solid var(--po-border);
	border-radius: var(--po-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--po-transition-fast), transform var(--po-transition-fast);
}

.po-property-card:hover {
	box-shadow: var(--po-shadow-soft);
	transform: translateY(-2px);
}

.po-property-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.po-property-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.po-property-card__body {
	padding: var(--po-space-md) var(--po-space-lg) var(--po-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--po-space-sm);
}

.po-property-card__kicker {
	font-size: var(--po-font-size-kicker);
	font-weight: var(--po-font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--po-primary);
}

.po-property-card__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: var(--po-font-weight-bold);
	color: var(--po-text);
	line-height: var(--po-line-height-heading);
}

.po-property-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--po-space-sm);
	font-size: 0.875rem;
	color: var(--po-muted);
}

.po-property-card__price {
	font-weight: var(--po-font-weight-bold);
	color: var(--po-primary);
}

/* ============================================================
   Secções
   ============================================================ */
.po-section {
	padding: var(--po-section-y) var(--po-site-pad);
	max-width: var(--po-site-max);
	margin-inline: auto;
	box-sizing: border-box;
}

.po-section--tight {
	padding-block: var(--po-section-y-tight);
}

.po-section--surface {
	background: var(--po-surface);
	max-width: none;
}

.po-section--surface > .po-section__inner {
	max-width: var(--po-site-max);
	margin-inline: auto;
	padding-inline: var(--po-site-pad);
}

.po-section__kicker {
	display: block;
	margin: 0 0 var(--po-space-sm);
	font-size: var(--po-font-size-kicker);
	font-weight: var(--po-font-weight-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--po-primary);
}

.po-section__title {
	margin: 0 0 var(--po-space-md);
	font-size: var(--po-font-size-h2);
	font-weight: var(--po-font-weight-bold);
	color: var(--po-primary);
	line-height: var(--po-line-height-heading);
}

.po-section__lead {
	margin: 0 0 var(--po-space-lg);
	font-size: var(--po-font-size-body);
	color: var(--po-muted);
	line-height: var(--po-line-height-body);
	max-width: 65ch;
}

/* ============================================================
   Testemunhos
   ============================================================ */
.po-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--po-space-md);
	padding: var(--po-space-lg);
	background: var(--po-surface);
	border: 1px solid var(--po-border);
	border-radius: var(--po-radius-lg);
}

.po-testimonial__quote {
	margin: 0;
	font-size: var(--po-font-size-body);
	line-height: var(--po-line-height-body);
	color: var(--po-text);
	font-style: italic;
}

.po-testimonial__quote::before {
	content: "\201C";
	color: var(--po-primary);
	font-weight: var(--po-font-weight-bold);
	margin-right: 2px;
}

.po-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--po-space-md);
}

.po-testimonial__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--po-border);
}

.po-testimonial__name {
	margin: 0;
	font-weight: var(--po-font-weight-semibold);
	color: var(--po-text);
	font-size: 0.95rem;
}

.po-testimonial__role {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: var(--po-muted);
}

.po-testimonial__stars {
	display: flex;
	gap: 2px;
	color: var(--po-accent);
}

/* ============================================================
   Formulários de contacto
   ============================================================ */
.po-form {
	display: flex;
	flex-direction: column;
	gap: var(--po-space-md);
	font-family: var(--po-font-family);
}

.po-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--po-space-xs);
}

.po-form__label {
	font-size: 0.875rem;
	font-weight: var(--po-font-weight-semibold);
	color: var(--po-text);
}

.po-form__input,
.po-form__textarea,
.po-form__select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--po-muted-border);
	border-radius: var(--po-radius-md);
	background: var(--po-white);
	color: var(--po-text);
	font-family: var(--po-font-family);
	font-size: var(--po-font-size-body);
	line-height: 1.5;
	transition: border-color var(--po-transition-fast), box-shadow var(--po-transition-fast);
	box-sizing: border-box;
}

.po-form__input:focus,
.po-form__textarea:focus,
.po-form__select:focus {
	outline: none;
	border-color: var(--po-primary);
	box-shadow: 0 0 0 3px var(--po-primary-soft);
}

.po-form__textarea {
	min-height: 140px;
	resize: vertical;
}

/* ============================================================
   CTAs
   ============================================================ */
.po-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--po-space-lg);
	padding: var(--po-space-xl);
	background: var(--po-primary);
	border-radius: var(--po-radius-xl);
	color: var(--po-white);
}

.po-cta__title {
	margin: 0;
	font-size: var(--po-font-size-h2);
	font-weight: var(--po-font-weight-bold);
	color: var(--po-white);
	line-height: var(--po-line-height-heading);
}

.po-cta__text {
	margin: var(--po-space-sm) 0 0;
	font-size: var(--po-font-size-body);
	color: rgba(255, 255, 255, 0.88);
	line-height: var(--po-line-height-body);
	max-width: 50ch;
}

.po-cta--banner {
	text-align: center;
	flex-direction: column;
	justify-content: center;
}

.po-cta--banner .po-cta__text {
	max-width: 60ch;
}

/* ============================================================
   Navegação (utilitários)
   ============================================================ */
.po-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--po-space-md);
	font-family: var(--po-font-family);
}

.po-nav__link {
	color: var(--po-text);
	font-weight: var(--po-font-weight-semibold);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--po-transition-fast);
}

.po-nav__link:hover,
.po-nav__link:focus-visible,
.po-nav__link.is-active {
	color: var(--po-primary);
}

/* ============================================================
   Modais
   ============================================================ */
.po-modal {
	position: fixed;
	inset: 0;
	z-index: 100020;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--po-site-pad);
	background: rgba(33, 37, 41, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--po-transition-base), visibility var(--po-transition-base);
}

.po-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.po-modal__dialog {
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--po-white);
	border-radius: var(--po-radius-xl);
	box-shadow: var(--po-shadow-md);
	padding: var(--po-space-xl);
	transform: translateY(var(--po-reveal-offset));
	transition: transform var(--po-transition-slow);
}

.po-modal.is-open .po-modal__dialog {
	transform: none;
}

.po-modal__title {
	margin: 0 0 var(--po-space-md);
	font-size: var(--po-font-size-h3);
	font-weight: var(--po-font-weight-bold);
	color: var(--po-text);
}

/* ============================================================
   Ícones Lucide
   ============================================================ */
.po-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: currentColor;
}

.po-icon svg,
.po-icon [data-lucide] {
	width: var(--po-icon-size-md);
	height: var(--po-icon-size-md);
	stroke-width: var(--po-icon-stroke);
}

.po-icon--sm svg,
.po-icon--sm [data-lucide] {
	width: var(--po-icon-size-sm);
	height: var(--po-icon-size-sm);
}

.po-icon--lg svg,
.po-icon--lg [data-lucide] {
	width: var(--po-icon-size-lg);
	height: var(--po-icon-size-lg);
}

.po-icon--primary {
	color: var(--po-primary);
}

.po-icon--accent {
	color: var(--po-accent);
}

/* ============================================================
   Animações — scroll reveal
   ============================================================ */
.po-reveal {
	opacity: 0;
	transform: translateY(var(--po-reveal-offset));
	transition: opacity var(--po-reveal-duration) ease, transform var(--po-reveal-duration) ease;
}

.po-reveal.is-visible,
body.po-site-revealed .po-reveal {
	opacity: 1;
	transform: none;
}

.po-reveal--delay-1 { transition-delay: 0.1s; }
.po-reveal--delay-2 { transition-delay: 0.2s; }
.po-reveal--delay-3 { transition-delay: 0.3s; }

/* Fade-in simples */
.po-fade-in {
	opacity: 0;
	animation: po-fade-in var(--po-reveal-duration) ease forwards;
}

@keyframes po-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}