/* ═══════════════════════════════════════════════════════════════════
   DINING (Skyline child) — dining.css
   Page-specific styles for /dining.html
   Required: main.css (loaded first)

   Sections:
     1. Intro strip (walnut quote bar)
     2. Venue section (alternating image + content; .reverse swaps order)
     3. Venue dark variant (.venue-section.dark)
     4. Menu teaser (walnut bar with category tiles)
     5. CTA band (espresso → walnut gradient)
     6. Responsive
═══════════════════════════════════════════════════════════════════ */


/* ═══ 1. INTRO STRIP ═══ */
.sec-intro {
  background: var(--m-surface-alt);
  padding: 40px 60px;
  text-align: center;
}
.intro-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 300; font-style: italic;
  color: var(--m-gold-ink);
  line-height: 1.5;
  max-width: 800px; margin: 0 auto;
}


/* ═══ 2. VENUE SECTION ═══ */
.venue-section {
  padding: 88px 60px;
}
.venue-section:nth-of-type(odd)  { background: var(--m-parchment); }
.venue-section:nth-of-type(even) { background: #fff; }

.venue-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: center;
  max-width: 1200px; margin: 0 auto;
}
.venue-inner.reverse { direction: rtl; }
.venue-inner.reverse > * { direction: ltr; }

/* Image column */
.venue-img-wrap { position: relative; }
.venue-img-main {
  width: 100%; height: 480px; object-fit: cover; display: block;
}
.venue-img-badge {
  position: absolute; top: 24px; right: 24px;
  background: linear-gradient(135deg, var(--m-walnut), var(--m-caramel));
  padding: 10px 18px;
  text-align: center;
}
.venue-badge-icon {
  display: block; margin-bottom: 4px;
  font-size: 18px; color: var(--m-honey);
}
.venue-badge-txt {
  font-size: 7.5px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.venue-img-gallery {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px; margin-top: 3px;
}
.venue-img-gallery img {
  width: 100%; height: 140px; object-fit: cover; display: block;
}

/* Content column */
.venue-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
  font-size: 8px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--m-gold-ink);
}
.venue-tag::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--m-bronze);
}
.venue-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 3.5vw, 50px); font-weight: 300;
  color: var(--m-charcoal);
  line-height: 1.05; margin-bottom: 6px;
}
.venue-title em {
  font-style: italic; font-weight: 600;
  background: linear-gradient(90deg, #9B5E2A, #DDB96A 40%, #C9964A 60%, #9B5E2A);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
}
.venue-subtitle {
  margin-bottom: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-style: italic;
  color: var(--m-stone);
}
.venue-divider {
  width: 48px; height: 1px;
  background: linear-gradient(to right, var(--m-caramel), transparent);
  margin-bottom: 22px;
}
.venue-desc {
  font-size: 13px; color: var(--m-stone);
  line-height: 1.9;
  margin-bottom: 22px;
}

.venue-highlights {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-bottom: 28px;
  border-top: 1px solid rgba(123,74,30,.1);
  border-left: 1px solid rgba(123,74,30,.1);
}
.venue-highlight {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  border-right: 1px solid rgba(123,74,30,.1);
  border-bottom: 1px solid rgba(123,74,30,.1);
}
.venue-highlight i {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--m-bronze); font-size: 14px;
}
.vh-text strong {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  color: var(--m-charcoal);
  margin-bottom: 2px;
}
.vh-text span {
  font-size: 11px; color: var(--m-stone);
  line-height: 1.5;
}

.venue-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-bottom: 28px;
}
.venue-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--m-stone);
}
.venue-meta-item i { color: var(--m-caramel); font-size: 13px; }
.venue-meta-item strong {
  color: var(--m-charcoal);
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
}

.venue-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}


/* ═══ 3. DARK VENUE VARIANT (Sky 1.0 rooftop bar) ═══ */
.venue-section.dark { background: var(--m-surface-deep); }
.venue-section.dark .venue-title    { color: var(--m-on-strong); }
.venue-section.dark .venue-title.lt em { /* keep gold shimmer */ }
.venue-section.dark .venue-desc     { color: var(--m-on-body); }
.venue-section.dark .venue-subtitle { color: var(--m-gold-ink); }
.venue-section.dark .venue-highlights{ border-color: rgba(201,150,74,.15); }
.venue-section.dark .venue-highlight { border-color: rgba(201,150,74,.1); }
.venue-section.dark .vh-text strong  { color: var(--m-on-strong); }
.venue-section.dark .vh-text span    { color: var(--m-on-body); }
.venue-section.dark .venue-meta-item { color: var(--m-on-body); }
.venue-section.dark .venue-meta-item strong { color: var(--m-on-strong); }
.venue-section.dark .btn-ghost {
  color: var(--m-gold-ink);
  border-color: rgba(221,185,106,.35);
}
.venue-section.dark .btn-ghost:hover {
  background: var(--m-walnut);
  border-color: var(--m-walnut);
  color: #fff;
}


/* ═══ 4. MENU TEASER ═══ */
.sec-menu-teaser {
  background: var(--m-surface-alt);
  padding: 72px 60px;
}
.menu-teaser-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.menu-teaser-content .sec-eyebrow { color: var(--m-gold-ink); }
.menu-teaser-content .sec-title   { color: var(--m-on-strong); }
.menu-teaser-content .sec-line    { background: linear-gradient(90deg, var(--m-honey), transparent); }
.menu-teaser-desc {
  margin-bottom: 28px;
  font-size: 13px; line-height: 1.9;
  color: var(--m-on-body);
}

.menu-categories {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.menu-cat {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(201,150,74,.15);
  transition: background .25s, border-color .25s;
}
.menu-cat:hover {
  background: rgba(201,150,74,.12);
  border-color: rgba(201,150,74,.35);
}
.menu-cat i { font-size: 18px; color: var(--m-gold-ink); }
.menu-cat-name {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--m-on-strong);
}
.menu-cat-sub {
  margin-top: 1px;
  font-size: 10px; color: var(--m-on-body);
}


/* ═══ 5. CTA BAND ═══ */
.sec-cta {
  background: linear-gradient(135deg, var(--m-espresso) 0%, var(--m-walnut) 100%);
  padding: 72px 60px;
  text-align: center;
}
.cta-title {
  margin-bottom: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 46px); font-weight: 300;
  color: #fff; line-height: 1.1;
}
.cta-title em { font-style: italic; font-weight: 600; color: var(--m-honey); }
.cta-sub {
  margin-bottom: 32px;
  font-size: 12px; letter-spacing: .5px;
  color: rgba(237,228,213,.6);
}
.cta-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
}


/* ═══ 6. RESPONSIVE ═══ */
@media (max-width: 960px) {
  .venue-inner,
  .menu-teaser-inner    { grid-template-columns: 1fr; gap: 40px; }
  .venue-inner.reverse  { direction: ltr; }
  .venue-img-main       { height: 340px; }
  .venue-section        { padding: 64px 28px; }
  .sec-intro,
  .sec-menu-teaser,
  .sec-cta              { padding: 52px 28px; }
}
@media (max-width: 600px) {
  .venue-highlights     { grid-template-columns: 1fr; }
  .menu-categories      { grid-template-columns: 1fr; }
  .cta-actions          { flex-direction: column; align-items: center; }
  .venue-img-gallery img { height: 100px; }
}