/* ===================================================================
   VENUE HIRE PAGE — uses global tokens/buttons + luxe layer
   =================================================================== */

.vh-eyebrow { font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px; }

/* ---- HERO ---- */
.vh-hero { position: relative; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; background: var(--near-black); }
.vh-hero .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vh-hero .bg-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(123,30,43,0.34) 0%, rgba(13,26,38,0.7) 55%, rgba(13,26,38,0.93) 100%); }
.vh-hero-inner { position: relative; z-index: 2; width: 100%; padding: 96px 0 84px; }
.vh-hero h1 { font-family: var(--font-serif); font-size: clamp(2.6rem, 5vw, 4.8rem); font-weight: 700; line-height: 1.06; color: var(--cream); max-width: 760px; }
.vh-hero h1 span { color: var(--gold); }
.vh-hero p { font-size: 1.08rem; line-height: 1.8; color: rgba(243,239,230,0.88); max-width: 580px; margin-top: 20px; }
.vh-hero-ctas { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.vh-hero-gold-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--gold); z-index: 3; }

/* ---- shared centred head ---- */
.vh-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.vh-head h2 { font-family: var(--font-serif); font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 700; color: var(--cream); line-height: 1.1; }
.vh-head h2 span { color: var(--gold); }
.vh-head .gold-rule { margin: 18px auto 22px; }
.vh-head p { font-size: 1.02rem; line-height: 1.75; color: rgba(243,239,230,0.82); }

/* ---- EVENTS (navy, icon cards) ---- */
.vh-events { background: var(--navy); padding: 96px 0; }
.vh-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vh-card { background: var(--near-black); border: 1px solid rgba(201,169,110,0.22); border-radius: 20px; padding: 32px 28px; }
.vh-card-icon { font-size: 1.9rem; display: block; margin-bottom: 14px; }
.vh-card h3 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700; color: var(--cream); margin-bottom: 8px; }
.vh-card p { font-size: 0.92rem; line-height: 1.6; color: rgba(243,239,230,0.78); }

/* ---- SPACES (near-black, image cards) ---- */
.vh-spaces { background: var(--near-black); padding: 96px 0; }
.vh-space-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vh-space { position: relative; overflow: hidden; border-radius: 18px; min-height: 420px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.vh-space img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.vh-space:hover img { transform: scale(1.05); }
.vh-space-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,26,38,0.94) 0%, rgba(13,26,38,0.2) 60%); }
.vh-space-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; z-index: 2; }
.vh-space-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; background: var(--gold); color: var(--navy); padding: 5px 12px; border-radius: 100px; margin-bottom: 12px; }
.vh-space h3 { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; color: var(--cream); margin-bottom: 8px; }
.vh-space p { font-size: 0.92rem; line-height: 1.55; color: rgba(243,239,230,0.85); }

/* ---- HOW IT WORKS (cream, numbered steps) ---- */
.vh-how { background: var(--cream); color: var(--navy); padding: 96px 0; }
.vh-how-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.vh-how h2 { font-family: var(--font-serif); font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 700; color: var(--navy); line-height: 1.1; }
.vh-how h2 span { color: var(--gold); }
.vh-how-lead { font-size: 1.02rem; line-height: 1.8; color: #45505a; margin: 16px 0 8px; }
.vh-steps { list-style: none; counter-reset: step; margin-top: 14px; }
.vh-steps li { position: relative; padding: 16px 0 16px 60px; border-bottom: 1px solid rgba(17,34,51,0.1); font-size: 1rem; line-height: 1.5; color: var(--navy); }
.vh-steps li:last-child { border-bottom: none; }
.vh-steps li strong { display: block; font-family: var(--font-serif); font-size: 1.15rem; }
.vh-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 14px; width: 40px; height: 40px; background: var(--burgundy); color: var(--cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; }
.vh-how-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 2px solid var(--gold); border-radius: 8px; }
.vh-how-media { display: grid; gap: 16px; }

/* ---- FULL CATERING BAND (deep teal) ---- */
.vh-catering { background: var(--deep-teal); padding: 64px 0; border-top: 4px solid var(--gold); }
.vh-catering-inner { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px; align-items: center; }
.vh-catering-copy h2 { font-family: var(--font-serif); font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 700; color: var(--cream); line-height: 1.1; }
.vh-catering-copy .gold-rule { margin: 16px 0 18px; }
.vh-catering-copy p { font-size: 1.05rem; line-height: 1.75; color: rgba(243,239,230,0.9); max-width: 620px; }
.vh-catering-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vh-catering-note { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,239,230,0.6); font-weight: 600; }

/* ---- CTA BAND (burgundy) ---- */
.vh-cta { background: var(--burgundy); padding: 80px 0; text-align: center; }
.vh-cta h2 { font-family: var(--font-serif); font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 700; color: var(--cream); margin-bottom: 16px; }
.vh-cta p { font-size: 1.05rem; line-height: 1.75; color: rgba(243,239,230,0.9); max-width: 580px; margin: 0 auto 32px; }
.vh-cta-btns { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .vh-cards { grid-template-columns: repeat(2, 1fr); }
  .vh-space-grid { grid-template-columns: 1fr; }
  .vh-how-grid { grid-template-columns: 1fr; gap: 36px; }
  .vh-catering-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .vh-cards { grid-template-columns: 1fr; }
}