/* Page-owned styles for ambiente page */

/* Scoped to main to avoid affecting shared components */
#ambiente-main {
  --ambiente-section-gap: var(--space-7);
}

/* Hero section */
.ambiente-hero {
  padding-block: var(--space-7) var(--space-8);
  background: linear-gradient(180deg, rgba(11, 61, 46, 0.95) 0%, rgba(11, 61, 46, 0.85) 100%);
}

.ambiente-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
}

.ambiente-hero__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.ambiente-hero__text h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  margin-block-end: 0;
}

.ambiente-hero__lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 60%;
  margin-block-end: 0;
}

.ambiente-hero__list {
  margin-block-end: 0;
}

.ambiente-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.ambiente-hero__media {
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2);
  overflow: hidden;
}

.ambiente-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2);
}

/* Eyebrow shared within page */
.ambiente-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-kupferrot);
  margin-block-end: var(--space-2);
}

/* Design philosophy section */
.ambiente-design {
  padding-block: var(--space-8);
  background-color: rgba(11, 61, 46, 0.7);
}

.ambiente-design__inner {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ambiente-design__inner h2 {
  margin-block-end: 0;
}

.ambiente-design__lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-block-end: 0;
}

.ambiente-design__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  text-align: left;
}

.ambiente-design-card {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.ambiente-design-card__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-kupferrot);
  border-radius: 50%;
  position: relative;
}

.ambiente-design-card__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-kupferrot);
  border-radius: 50%;
}

.ambiente-design-card h3 {
  margin-block-end: 0;
}

.ambiente-design-card p {
  margin-block-end: 0;
  color: var(--color-text-muted);
}

/* Materials section */
.ambiente-materials {
  padding-block: var(--space-8);
}

.ambiente-materials__header {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.ambiente-materials__header h2 {
  margin-block-end: 0;
}

.ambiente-materials__intro {
  color: var(--color-text-muted);
  margin-block-end: 0;
}

.ambiente-materials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.ambiente-material-card {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  transition: border-color var(--transition-duration) var(--transition-ease),
    transform var(--transition-duration) var(--transition-ease),
    box-shadow var(--transition-duration) var(--transition-ease);
}

.ambiente-material-card:hover {
  border-color: var(--color-kupferrot);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.ambiente-material-card__swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-1);
  margin-block-end: var(--space-2);
}

.ambiente-material-card__swatch--oak {
  background: linear-gradient(135deg, #3e2b1f 0%, #1e130c 100%);
}

.ambiente-material-card__swatch--felt {
  background: linear-gradient(135deg, #0b3d2e 0%, #06251c 100%);
}

.ambiente-material-card__swatch--velvet {
  background: linear-gradient(135deg, #4a2c3a 0%, #2a1820 100%);
}

.ambiente-material-card__swatch--copper {
  background: linear-gradient(135deg, #b87333 0%, #7a4a1e 100%);
}

.ambiente-material-card__swatch--glass {
  background: linear-gradient(135deg, #4a5d6e 0%, #2c3a45 100%);
}

.ambiente-material-card__swatch--terrazzo {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

.ambiente-material-card h3 {
  margin-block-end: 0;
}

.ambiente-material-card p {
  margin-block-end: 0;
  color: var(--color-text-muted);
  max-width: 50%;
}

/* Restaurant section */
.ambiente-restaurant {
  padding-block: var(--space-8);
  background-color: rgba(11, 61, 46, 0.7);
}

.ambiente-restaurant__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.ambiente-restaurant__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.ambiente-restaurant__text h2 {
  margin-block-end: 0;
}

.ambiente-restaurant__text p {
  max-width: 50%;
  margin-block-end: 0;
}

.ambiente-restaurant__text .content-list {
  margin-block-end: 0;
}

.ambiente-restaurant__media {
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2);
  overflow: hidden;
}

.ambiente-restaurant__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2);
}

/* Bar section */
.ambiente-bar {
  padding-block: var(--space-8);
}

.ambiente-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.ambiente-bar__media {
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2);
  overflow: hidden;
}

.ambiente-bar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2);
}

.ambiente-bar__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-end;
  text-align: right;
}

.ambiente-bar__text h2 {
  margin-block-end: 0;
}

.ambiente-bar__text p {
  max-width: 50%;
  margin-block-end: 0;
}

.ambiente-bar__text .content-list {
  margin-block-end: 0;
  text-align: left;
}

/* Casino Lounge section */
.ambiente-lounge {
  padding-block: var(--space-8);
  background-color: rgba(11, 61, 46, 0.7);
}

.ambiente-lounge__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.ambiente-lounge__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.ambiente-lounge__text h2 {
  margin-block-end: 0;
}

.ambiente-lounge__text p {
  max-width: 50%;
  margin-block-end: 0;
}

.ambiente-lounge__text .content-list {
  margin-block-end: 0;
}

.ambiente-lounge__media {
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2);
  overflow: hidden;
}

.ambiente-lounge__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2);
}

/* Light section */
.ambiente-light {
  padding-block: var(--space-8);
  background: linear-gradient(180deg, rgba(74, 44, 58, 0.25) 0%, rgba(11, 61, 46, 0.9) 100%);
}

.ambiente-light__inner {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ambiente-light__inner h2 {
  margin-block-end: 0;
}

.ambiente-light__lead {
  color: var(--color-text-muted);
  margin-block-end: 0;
}

.ambiente-light__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.ambiente-light__list li {
  padding-inline-start: var(--space-4);
  position: relative;
  text-align: left;
}

.ambiente-light__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-kupferrot);
}

/* Quote section */
.ambiente-quote {
  padding-block: var(--space-8);
  background-color: rgba(11, 61, 46, 0.7);
}

.ambiente-quote__inner {
  max-width: 60%;
  margin-inline: auto;
  text-align: center;
}

.ambiente-quote__block {
  border-inline-start: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  color: var(--color-text-body);
  font-style: normal;
}

.ambiente-quote__block p {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: var(--heading-letter-spacing);
  color: var(--color-heading);
  margin-block-end: var(--space-3);
}

.ambiente-quote__block footer {
  font-size: var(--text-small-size);
  color: var(--color-kupferrot);
  font-weight: 500;
}

/* Reserve section */
.ambiente-reserve {
  padding-block: var(--space-8);
}

.ambiente-reserve__inner {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.ambiente-reserve__inner h2 {
  margin-block-end: 0;
}

.ambiente-reserve__lead {
  color: var(--color-text-muted);
  margin-block-end: 0;
}

.ambiente-reserve__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: 0;
}

.ambiente-reserve__contact p {
  margin-block-end: 0;
}

.ambiente-reserve__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Aspect ratio helper for 4:3 (not in base) */
.aspect-ratio--4-3 {
  aspect-ratio: 4 / 3;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
  .ambiente-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .ambiente-hero__lead {
    max-width: 100%;
  }

  .ambiente-hero__media {
    order: 2;
  }

  .ambiente-hero__text {
    order: 1;
  }

  .ambiente-design__inner,
  .ambiente-materials__header,
  .ambiente-light__inner,
  .ambiente-quote__inner,
  .ambiente-reserve__inner {
    max-width: 100%;
  }

  .ambiente-design__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ambiente-materials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ambiente-restaurant__grid,
  .ambiente-bar__grid,
  .ambiente-lounge__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .ambiente-restaurant__text,
  .ambiente-bar__text,
  .ambiente-lounge__text {
    align-items: flex-start;
    text-align: left;
  }

  .ambiente-restaurant__text p,
  .ambiente-bar__text p,
  .ambiente-lounge__text p {
    max-width: 100%;
  }

  .ambiente-bar__text {
    align-items: flex-start;
    text-align: left;
  }

  .ambiente-bar__text .content-list {
    text-align: left;
  }

  .ambiente-restaurant__media,
  .ambiente-bar__media,
  .ambiente-lounge__media {
    order: -1;
  }
}

@media (max-width: 767px) {
  .ambiente-hero {
    padding-block: var(--space-6) var(--space-7);
  }

  .ambiente-hero__text h1 {
    font-size: var(--text-h1-size);
  }

  .ambiente-hero__lead {
    font-size: 1.125rem;
  }

  .ambiente-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .ambiente-hero__actions .btn {
    width: 100%;
  }

  .ambiente-design__grid,
  .ambiente-materials__grid {
    grid-template-columns: 1fr;
  }

  .ambiente-material-card p {
    max-width: 100%;
  }

  .ambiente-restaurant__grid,
  .ambiente-bar__grid,
  .ambiente-lounge__grid {
    gap: var(--space-4);
  }

  .ambiente-restaurant__media,
  .ambiente-bar__media,
  .ambiente-lounge__media {
    aspect-ratio: 16 / 9;
  }

  .ambiente-light__inner,
  .ambiente-quote__inner,
  .ambiente-reserve__inner {
    max-width: 100%;
  }

  .ambiente-reserve__actions {
    flex-direction: column;
    width: 100%;
  }

  .ambiente-reserve__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambiente-material-card,
  .ambiente-hero__actions .btn,
  .ambiente-reserve__actions .btn {
    transition: none;
  }
}