/*
Theme Name: Privilege One
Theme URI: https://privilegeone.com.br
Author: AL Design Travel & Privilege One Team
Author URI: https://privilegeone.com.br
Description: Tema customizado e focado em alta performance, UX de luxo e Web Core Vitals para a agência Privilege One.
Version: 1.0.0
Text Domain: privilege-one
*/

/* ==========================================================================
   1. VARIÁVEIS GLOBAIS (Design System baseado no PDF "Código das cores")
   ========================================================================== */
:root {
    /* Cores Principais */
    --c-cinza-profundo: #161616; /* Luxo e solidez - Primária */
    --c-dourado:        #cda165; /* Exclusividade e vivacidade - Secundária/Ações */
    --c-azul-profundo:  #445565; /* Confiança e amplitude - Destaques/Fundos alternativos */
    --c-off-white:      #f5f1ed; /* Acolhimento e minimalismo - Fundo Principal */
    
    /* Tipografia - Fallback inicial até carregar as webfonts */
    --font-primary: 'Commuters Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Espaçamentos e Layout */
    --wrapper-width: 1200px;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    
    /* Sombras e Bordas */
    --radius-default: 4px;
    --shadow-soft: 0 4px 20px rgba(22, 22, 22, 0.08);
}

/* ==========================================================================
   2. RESET BÁSICO E TIPOGRAFIA (Performance e Acessibilidade)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--c-off-white);
    color: var(--c-cinza-profundo);
    font-family: var(--font-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Utilitários Básicos */
.wrapper {
    max-width: var(--wrapper-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.text-center { text-align: center; }
.flex-row { display: flex; flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* ==========================================================================
   3. BOTÕES (Estilo Luxo)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: var(--radius-default);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-gold {
    background-color: var(--c-dourado);
    color: var(--c-off-white);
}

.btn-gold:hover, .btn-gold:focus {
    background-color: var(--c-cinza-profundo);
    color: var(--c-dourado);
}

.btn-outline-gold {
    background-color: transparent;
    border-color: var(--c-dourado);
    color: var(--c-dourado);
}

.btn-outline-gold:hover, .btn-outline-gold:focus {
    background-color: var(--c-dourado);
    color: var(--c-off-white);
}

/* ==========================================================================
   4. ESTRUTURA BÁSICA (Header, Footer, Hero provisório)
   ========================================================================== */
.site-header {
    background-color: var(--c-cinza-profundo);
    color: var(--c-off-white);
    padding: var(--spacing-sm) 0;
}

.site-header a {
    color: var(--c-off-white);
    text-decoration: none;
}

.site-footer {
    background-color: var(--c-cinza-profundo);
    color: var(--c-off-white);
    padding: var(--spacing-lg) 0 1rem;
    margin-top: var(--spacing-lg);
}

.site-footer a {
    color: var(--c-dourado);
}

/* Adicionaremos mais CSS conforme construímos os blocos (Vitrine, Carrossel, etc) */


.site-footer a {
color: var(--c-dourado);
}

/* ==========================================================================
5. LAYOUT: HEADER & NAV
========================================================================== */
.header-container {
padding: 0 var(--spacing-md);
max-width: var(--wrapper-width);
margin: 0 auto;
}
.site-branding .site-title a {
color: var(--c-dourado);
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.main-navigation ul {
list-style: none;
display: flex;
gap: var(--spacing-md);
}
.main-navigation a {
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1px;
transition: color 0.3s ease;
font-weight: 500;
}
.main-navigation a:hover {
color: var(--c-dourado);
}

/* ==========================================================================
6. LAYOUT: HERO SECTION (Globo/Home)
========================================================================== /
.hero-section {
position: relative;
height: 80vh;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: var(--c-cinza-profundo); / Cor de fallback /
}
.hero-bg-placeholder, .hero-bg-video {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0.6; / Escurece um pouco para o texto aparecer bem */
}
.hero-content {
position: relative;
z-index: 2;
color: var(--c-off-white);
text-align: center;
width: 100%;
}
.hero-title {
font-size: 4rem;
line-height: 1.1;
margin-bottom: var(--spacing-sm);
}
.hero-subtitle {
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
color: #e0e0e0;
}

/* ==========================================================================
7. COMPONENTES: CARDS (Roteiros e Destinos)
========================================================================== /
.card-roteiro, .card-destino {
border-radius: var(--radius-default);
overflow: hidden;
background: var(--c-off-white);
box-shadow: var(--shadow-soft);
transition: transform 0.4s ease, box-shadow 0.4s ease;
width: 100%; / O Grid pai controlará a largura real /
}
.card-roteiro:hover, .card-destino:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(22, 22, 22, 0.15);
}
.card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
}
.card-img-wrapper {
position: relative;
height: 250px;
overflow: hidden;
background-color: var(--c-azul-profundo);
}
.card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.card-roteiro:hover .card-img-wrapper img,
.card-destino:hover .card-img-wrapper img {
transform: scale(1.05); / Efeito sutil de zoom no hover */
}
.card-content {
padding: var(--spacing-sm) var(--spacing-md);
}
.card-title {
font-size: 1.2rem;
color: var(--c-cinza-profundo);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-excerpt {
font-size: 0.9rem;
color: #666;
margin-bottom: 1rem;
}
.card-price {
display: flex;
flex-direction: column;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e5e5;
}
.card-price .prefix, .card-price .suffix {
font-size: 0.75rem;
color: #888;
text-transform: uppercase;
}
.card-price .value {
font-size: 1.4rem;
color: var(--c-dourado);
font-weight: bold;
}

/* Variante do Card de Destino (Texto por cima da imagem) */
.card-destino .card-img-wrapper {
height: 350px;
}
.card-destino .card-overlay {
position: absolute;
bottom: 0; left: 0; width: 100%;
padding: var(--spacing-md);
background: linear-gradient(to top, rgba(22,22,22,0.9), transparent);
color: var(--c-off-white);
}
.card-destino .card-title {
color: var(--c-off-white);
margin: 0;
}

.card-destino .card-title {
color: var(--c-off-white);
margin: 0;
}

/* ==========================================================================
8. BLOCOS ACF: DESTAQUE EXTRAORDINARY
========================================================================== /
.bloco-destaque {
position: relative;
padding: var(--spacing-lg) 0;
min-height: 600px;
display: flex;
align-items: center;
background-color: var(--c-cinza-profundo);
background-size: cover;
background-position: center;
background-attachment: fixed; / Efeito Parallax sutil /
color: var(--c-off-white);
margin: var(--spacing-lg) 0;
}
.bloco-destaque::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to right, rgba(22,22,22,0.9) 0%, rgba(22,22,22,0.2) 100%);
z-index: 1;
}
.bloco-destaque .wrapper {
position: relative;
z-index: 2;
max-width: 800px; / Limita a largura do texto para leitura confortável */
margin-left: auto;
margin-right: auto;
}
.destaque-tag {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--c-dourado);
margin-bottom: var(--spacing-sm);
display: block;
}
.destaque-titulo {
font-size: 3rem;
line-height: 1.2;
margin-bottom: var(--spacing-sm);
}
.destaque-texto {
font-size: 1.1rem;
margin-bottom: var(--spacing-md);
opacity: 0.9;
}

/* ==========================================================================
9. BLOCOS ACF: MOSAICO DE FAVORITOS
========================================================================== /
.bloco-mosaico {
padding: var(--spacing-lg) 0;
}
.mosaico-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-sm);
grid-auto-rows: 250px;
}
/ Magia do CSS Grid para criar o visual irregular (mosaico) no Desktop */
@media (min-width: 992px) {
.mosaico-grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
.mosaico-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaico-item:nth-child(4) { grid-row: span 2; }
.mosaico-item:nth-child(7) { grid-column: span 2; }
}
.mosaico-item {
position: relative;
border-radius: var(--radius-default);
overflow: hidden;
background-color: var(--c-azul-profundo);
display: flex;
align-items: flex-end;
}
.mosaico-img {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.mosaico-item:hover .mosaico-img {
transform: scale(1.08);
}
.mosaico-overlay {
position: relative;
width: 100%;
padding: var(--spacing-md);
background: linear-gradient(to top, rgba(22,22,22,0.9), transparent);
color: var(--c-off-white);
z-index: 2;
}
.mosaico-overlay h3 {
margin: 0;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 1px;
}

.mosaico-overlay h3 {
margin: 0;
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 1px;
}

/* STREAMING_CHUNK:Styling the offers grid and card components... /
/ ==========================================================================
10. VITRINE DE OFERTAS (AJAX CARDS)
========================================================================== /
.ofertas-results {
display: grid;
/ Grid fluido e responsivo: colunas de no mínimo 300px, expandindo até preencher */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-md);
width: 100%;
}

.oferta-card {
background-color: #fff;
border-radius: var(--radius-default);
overflow: hidden;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.oferta-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(22, 22, 22, 0.12);
}

.oferta-img {
height: 220px;
background-position: center;
background-size: cover;
background-color: var(--c-cinza-profundo); /* fallback */
}

/* STREAMING_CHUNK:Styling card content and typography... /
.oferta-conteudo {
padding: var(--spacing-md);
display: flex;
flex-direction: column;
flex-grow: 1; / Ocupa o espaço restante para empurrar o botão para baixo */
}

.oferta-title {
font-size: 1.3rem;
color: var(--c-cinza-profundo);
margin-bottom: 0.5rem;
line-height: 1.3;
}

.oferta-data {
color: var(--c-dourado);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}

.oferta-resumo {
font-size: 0.95rem;
color: #555;
margin-bottom: 1.5rem;
flex-grow: 1; /* Permite que o texto expanda, alinhando botões no final */
}

.btn-block {
width: 100%;
text-align: center;
}

/* Ocultar o loader de esqueleto (pode ser customizado com animação CSS depois) */
.loader-skeleton {
text-align: center;
padding: var(--spacing-md);
color: var(--c-dourado);
font-weight: bold;
}

/* STREAMING_CHUNK:Styling the header and mobile navigation... */
.site-header {
background: var(--c-cinza-profundo);
padding: 1.5rem 0;
position: relative;
z-index: 1000;
}

.main-navigation ul {
display: flex;
list-style: none;
gap: 2rem;
}

.main-navigation a {
color: var(--c-off-white);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 2px;
}

.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
}

.hamburger-icon {
display: block;
width: 25px;
height: 2px;
background: var(--c-off-white);
position: relative;
}

.hamburger-icon::before, .hamburger-icon::after {
content: '';
position: absolute;
width: 25px;
height: 2px;
background: var(--c-off-white);
left: 0;
}

.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { bottom: -8px; }

@media (max-width: 768px) {
.menu-toggle { display: block; }
.main-navigation {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--c-cinza-profundo);
padding: 2rem;
}
.main-navigation.is-active { display: block; }
.main-navigation ul { flex-direction: column; align-items: center; }
}

/* STREAMING_CHUNK:Styling Grid de Estilos... */
.bloco-estilos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-md);
padding: var(--spacing-lg) 0;
}

.estilo-card {
position: relative;
overflow: hidden;
height: 400px;
}

.estilo-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.estilo-card:hover img { transform: scale(1.05); }

/* STREAMING_CHUNK:Styling Editorial Carousel... */
.bloco-editorial {
padding: var(--spacing-lg) 0;
background: var(--c-off-white);
}

.editorial-slider {
display: flex;
overflow-x: auto;
gap: var(--spacing-md);
padding-bottom: 1rem;
}