/*
Theme Name: Bougainvillea Retreat - Centoporte Edition (v2)
Description: Pixel-perfect re-creation of the Tenuta Centoporte experience.
Author: Antigravity
Version: 4.5.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Montserrat:wght@300;400;600&display=swap');

:root {
  --stone: #F9F8F6;
  --white: #FFFFFF;
  --gold: #BFA260;
  --text-dark: #2C2C2C;
  --text-light: #666666;
  --border: #E5E2D9;
  --transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── Reset & Core ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background-color: var(--stone);
  color: var(--text-dark);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, em { font-family: 'Cormorant Garamond', serif; font-weight: 300; }

/* ── Cinematic Hero Full ── */
.cnt-hero-full {
  height: 100vh; width: 100%; position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: #000; overflow: hidden;
}
.hero-bg-zoom {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.1);
}
.hero-overlay-soft {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
}
.hero-center-content { position: relative; z-index: 10; max-width: 1200px; color: #FFF; }
.hero-center-content h1 { font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 0.95; }
.hero-center-content h1 em { font-style: italic; }

/* ── The Editorial Overlap (TENUTA LOOK) ── */
.overlap-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; align-items: center;
  position: relative;
}
.overlap-image {
  position: relative; z-index: 1;
  padding-bottom: 120%; /* Portrait Frame */
  background: #E5E2D9;
}
.overlap-text {
  background: var(--white);
  padding: 8vw 6vw;
  margin-left: -10vw; /* The Overlap Magic */
  position: relative; z-index: 2;
  box-shadow: 40px 40px 100px rgba(0,0,0,0.03);
}
.overlap-text h2 { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 2rem; }

/* ── Editorial Grid ── */
.editorial-header { text-align: center; margin-bottom: 8rem; }
.editorial-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8vw;
}
.ed-card h3 { font-size: 2rem; margin: 2rem 0 1rem; }
.ed-img-frame { padding-bottom: 130%; background: #E5E2D9; position: relative; overflow: hidden; }

/* ── Centered Story ── */
.centered-story { text-align: center; max-width: 800px; margin: 0 auto; }
.centered-story p { font-size: 1.2rem; margin-top: 2rem; color: var(--text-light); }

/* ── Buttons ── */
.btn-cnt, .btn-cnt-light {
  display: inline-block; padding: 1.2rem 3.5rem;
  border: 1px solid var(--gold); color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.7rem; font-weight: 600;
  transition: var(--transition);
}
.btn-cnt-light { border-color: #FFF; color: #FFF; }
.btn-cnt:hover { background: var(--gold); color: var(--white); transform: translateY(-5px); }
.btn-cnt-light:hover { background: #FFF; color: #000; transform: translateY(-5px); }

/* ── Containers ── */
.cnt-container { max-width: 1600px; margin: 0 auto; padding: 0 5vw; }
.cnt-section { padding: 12vw 0; }

@media (max-width: 1024px) {
  .overlap-grid, .editorial-grid { grid-template-columns: 1fr; }
  .overlap-text { margin-left: 0; margin-top: -5rem; padding: 3rem 1.5rem; }
}