/* ============================================================
   sections.css — Page Section Styles
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */

.vp-hero {
  position:        relative;
  min-height:      92vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  color:           var(--linen);
  overflow:        hidden;
}
.vp-hero-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
  animation:  heroZoomOut 6s ease forwards;
}

@keyframes heroZoomOut {
  from { transform: scale(1.3); }
  to   { transform: scale(1); }
}

.vp-hero::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    170deg,
    rgba(26,23,20,0.38) 0%,
    rgba(26,23,20,0.65) 55%,
    rgba(92,46,30,0.82) 100%
  );
  z-index: 1;
}

.vp-hero-content {
  position:  relative;
  z-index:   3;
  max-width: 860px;
  padding:   5rem 2rem;
  animation: fadeUp 1.1s var(--ease-smooth) both;
}

.vp-hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  color:     var(--linen);
  font-weight: 400;
}
.vp-hero h1 em      { color: var(--sand-soft); font-style: italic; }
.vp-hero h1 .plum-em { color: var(--lavender); font-style: italic; }

.vp-hero-sub {
  font-family: var(--font-serif);
  font-style:  italic;
  font-size:   clamp(1rem, 2vw, 1.25rem);
  max-width:   580px;
  margin:      1.5rem auto 2.5rem;
  color:       rgba(245,240,234,0.82);
  line-height: 1.75;
}

.vp-hero-buttons {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  flex-wrap:       wrap;
}

.vp-hero-styles {
  display:         flex;
  gap:             1.5rem;
  justify-content: center;
  margin-top:      2.5rem;
  flex-wrap:       wrap;
}
.vp-hero-style-pill {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:       rgba(245,240,234,0.65);
}
.vp-hero-style-pill::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}
.vp-hero-style-pill.vintage::before { background: var(--sand); }
.vp-hero-style-pill.modern::before  { background: var(--lavender); }

.vp-scroll-hint {
  position:       absolute;
  bottom:         2.5rem;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        3;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.4rem;
  color:          rgba(245,240,234,0.4);
  font-size:      0.62rem;
  font-weight:    600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  animation:      fadeIn 2s 1.5s both;
}
.vp-scroll-hint-line {
  width:      1px;
  height:     36px;
  background: linear-gradient(to bottom, rgba(245,240,234,0.4), transparent);
  animation:  float 2s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ══════════════════════════════════════════════════════════ */

.vp-page-hero {
  position:        relative;
  min-height:      65vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  color:           var(--linen);
  overflow:        hidden;
}
.vp-page-hero-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          130%;
  object-fit:      cover;
  object-position: center center;
  z-index:         0;
}
.vp-page-hero::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(170deg, rgba(26,23,20,0.45), rgba(92,46,30,0.82));
  z-index:    1;
}
.vp-page-hero-content {
  position:  relative;
  z-index:   2;
  
  padding-bottom: 25%;
  animation: fadeUp 0.9s var(--ease-smooth) both;
}
.vp-page-hero-content h1 {
  font-size:   clamp(0.4rem, 4vw, 3.8rem);
  color:       var(--linen);
  font-weight: 200;
}
.vp-page-hero-content p {
  font-family: var(--font-serif);
  font-style:  italic;
  color:       rgba(245,240,234,0.78);
  font-size:   1.1rem;
  margin-top:  0.75rem;
}


/* ══════════════════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════════════════ */

.vp-grid {
  display:               grid;
  gap:                   1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* ══════════════════════════════════════════════════════════
   STYLE DIVIDER
   ══════════════════════════════════════════════════════════ */

.vp-style-divider {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             2rem;
  padding:         1.5rem 0;
  margin-bottom:   1rem;
}
.vp-style-divider-line {
  flex:   1;
  height: 1px;
}
.vp-style-divider-line.terra { background: linear-gradient(90deg, transparent, var(--sand)); }
.vp-style-divider-line.plum  { background: linear-gradient(90deg, var(--plum-light), transparent); }

.vp-style-divider-label {
  font-family:    var(--font-body);
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding:        0.35rem 1.1rem;
  border-radius:  20px;
}
.vp-style-divider-label.vintage {
  background: rgba(139,74,53,0.08);
  color:      var(--terra);
  border:     1px solid rgba(139,74,53,0.2);
}
.vp-style-divider-label.modern {
  background: rgba(61,43,94,0.08);
  color:      var(--plum);
  border:     1px solid rgba(61,43,94,0.2);
}


/* ══════════════════════════════════════════════════════════
   GALLERY GRID (portfolio pages)
   ══════════════════════════════════════════════════════════ */

.vp-gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   1.5rem;
}
.vp-gallery.large-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}


/* ══════════════════════════════════════════════════════════
   PROCESS STEPS
   ══════════════════════════════════════════════════════════ */

.vp-process {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   0;
  position:              relative;
}
.vp-process::before {
  content:    '';
  position:   absolute;
  top:        2.4rem;
  left:       10%;
  right:      10%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--sand), transparent);
}
.vp-process-step {
  text-align:  center;
  padding:     2rem 1.5rem;
  position:    relative;
}
.vp-process-num {
  width:           50px;
  height:          50px;
  background:      var(--linen);
  border:          1px solid var(--sand);
  border-radius:   50%;
  margin:          0 auto 1.2rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       1.2rem;
  font-weight:     400;
  color:           var(--sand);
  position:        relative;
  z-index:         1;
  transition:      all var(--t-mid) ease;
}
.vp-process-step:hover .vp-process-num {
  background: var(--terra);
  border-color: var(--terra);
  color:      var(--linen);
}
.vp-process-step h4 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.vp-process-step p  { font-size: 0.86rem; color: var(--ink-mid); }


/* ══════════════════════════════════════════════════════════
   CTA BANNER
   ══════════════════════════════════════════════════════════ */

.vp-cta-banner {
  padding:    5rem 2rem;
  text-align: center;
  position:   relative;
  overflow:   hidden;
}
.vp-cta-banner::before {
  content:    '';
  position:   absolute;
  top:        -60%;
  left:       -20%;
  width:      140%;
  height:     220%;
  background: radial-gradient(ellipse at 50% 50%, rgba(201,169,110,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.vp-cta-banner h2 { margin-bottom: 1rem; }
.vp-cta-banner p  { color: var(--ink-mid); max-width: 560px; margin: 0 auto 2rem; }

.vp-cta-banner-buttons {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  flex-wrap:       wrap;
}


/* ══════════════════════════════════════════════════════════
   CANVAS / DARK FEATURE SECTION
   ══════════════════════════════════════════════════════════ */

.vp-canvas-section {
  position:   relative;
  background: #1e1c1a;
  color:      var(--linen);
  padding:    7rem 0;
  overflow:   hidden;
}
.vp-canvas-section::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 30px);
  pointer-events: none;
}

.vp-orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(80px);
  pointer-events: none;
  animation:     float 8s ease-in-out infinite;
}
.vp-orb-1 { width: 400px; height: 400px; background: rgba(139,74,53,0.22); top: -100px; right: -80px; }
.vp-orb-2 { width: 300px; height: 300px; background: rgba(201,169,110,0.12); bottom: -80px; left: 8%; animation-delay: 3s; }
.vp-orb-3 { width: 240px; height: 240px; background: rgba(61,43,94,0.18); top: 35%; left: 42%; animation-delay: 5s; }


/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════ */

.vp-quotes {
  display:               grid;
  gap:                   2rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}


/* ══════════════════════════════════════════════════════════
   PORTFOLIO PAGE BREADCRUMB
   ══════════════════════════════════════════════════════════ */

.vp-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color:       var(--ink-soft);
  margin-bottom: 2.5rem;
}
.vp-breadcrumb a {
  color:       var(--ink-soft);
  transition:  color var(--t-fast) ease;
}
.vp-breadcrumb a:hover { color: var(--terra); }
.vp-breadcrumb span    { color: var(--sand); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE SECTIONS
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .vp-hero         { min-height: auto; padding: 5rem 0; }
  .vp-hero-content { padding: 2rem 1.2rem; }
  .vp-hero-buttons { flex-direction: column; align-items: center; }
  .vp-hero-buttons .vp-cta,
  .vp-hero-buttons .vp-btn-ghost { width: 100%; max-width: 320px; text-align: center; }

  .vp-process::before { display: none; }
  .vp-process { gap: 1rem; }

  .vp-page-hero { min-height: 55vh; }
  .vp-page-hero-img { object-position: center center; }
}

@media (max-width: 480px) {
  .vp-hero h1 { font-size: 2.2rem; }
}