/* ==========================================================================
   PILLARS (RESTAURANT & ROOFTOP BAR)
   ========================================================================== */
.pillar { padding-block: var(--space-3xl); }
.pillar--bar { background: var(--color-navy-deep); }

.pillar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.pillar__media--stack { position: relative; }

.pillar__figure { overflow: hidden; }
.pillar__figure--main img,
.pillar__figure--main video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.pillar__figure--inset {
  position: absolute;
  right: clamp(-3rem, -2vw, -1rem);
  bottom: clamp(-3.5rem, -3vw, -2rem);
  width: 38%;
  border: 6px solid var(--color-navy);
  box-shadow: var(--shadow-lg);
}
.pillar--bar .pillar__figure--inset { border-color: var(--color-navy-deep); }
.pillar__figure--inset img,
.pillar__figure--inset video {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.pillar__figure--square img,
.pillar__figure--square video { aspect-ratio: 1 / 1; }

.pillar--reverse .pillar__figure--inset { right: auto; left: clamp(-3rem, -2vw, -1rem); }

.pillar__content { max-width: 46ch; }
.pillar__more { margin-top: var(--space-md); }

.factlist {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-navy-line);
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.factlist li { display: flex; gap: var(--space-sm); }
.factlist span {
  flex: none;
  min-width: 5.5rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.factlist--grid {
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.factlist--grid li { align-items: baseline; }

.knowbefore {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-navy-line);
}
.knowbefore__title {
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Pillar Menus Directory */
.pillar__menus {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-navy-line);
}
.pillar__menus-title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.pillar__menus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
}
@media (min-width: 30em) {
  .pillar__menus-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
}
.pillar__menu-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-navy-line);
  border-radius: 2px;
  color: var(--color-heading);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.pillar__menu-card:hover {
  background: rgba(221, 165, 104, 0.08);
  border-color: rgba(221, 165, 104, 0.45);
  color: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.pillar__menu-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: inherit;
  transition: color var(--t-fast);
}
.pillar__menu-action {
  flex: none;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  transition: transform var(--t-fast), color var(--t-fast);
}
.pillar__menu-card:hover .pillar__menu-action {
  color: var(--color-gold-light);
  transform: translate(2px, -2px);
}

@media (min-width: 48em) {
  .factlist--grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-xl); }
}

@media (min-width: 62em) {
  .pillar__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-2xl); }
  .pillar--reverse .pillar__media { order: 2; }
  .pillar--reverse .pillar__content { order: 1; justify-self: end; }
}