/* Ruletka & Blackjack – page-owned styles */

.rb-hero {
  background-color: var(--color-graphite);
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-4xl);
}

.rb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23008080' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M20 10h40v60H20z'/%3E%3Cpath d='M10 20h60v40H10z'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.rb-hero__container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.rb-hero__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.rb-hero__content h1 {
  color: var(--color-cream);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  margin-block-end: 0;
}

.rb-hero__content p {
  max-width: 65ch;
  color: var(--color-cream);
  margin-block-end: 0;
}

.rb-hero__content .rb-eyebrow {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-petrol);
  margin-block-end: 0;
}

.rb-hero__content .btn {
  margin-block-start: var(--space-md);
}

.rb-hero__media {
  min-width: 0;
  position: relative;
}

.rb-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  filter: brightness(0.85) saturate(0.9);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.rb-hero__media img:hover {
  transform: scale(1.02);
  filter: brightness(0.95) saturate(1);
}

.rb-intro {
  padding-block: var(--space-4xl);
}

.rb-intro__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.rb-intro__text {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rb-intro__text h2 {
  margin-block-end: 0;
}

.rb-intro__text p {
  margin-block-end: 0;
}

.rb-intro__list {
  text-align: left;
  margin-inline: auto;
  margin-block-end: 0;
}

.rb-intro__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.rb-intro-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

.rb-intro-card__icon {
  width: 48px;
  height: 48px;
  color: var(--color-petrol);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--space-sm);
}

.rb-intro-card__icon svg {
  width: 100%;
  height: 100%;
}

.rb-intro-card h3 {
  margin-block-end: 0;
}

.rb-intro-card p {
  margin-block-end: 0;
}

.rb-roulette {
  background-color: var(--color-graphite);
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-4xl);
}

.rb-roulette::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23008080' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='%23008080' stroke-opacity='0.08' stroke-width='1'/%3E%3Cpath d='M50 10v80M10 50h80' stroke='%23008080' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

.rb-roulette__container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.rb-roulette__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.rb-roulette__content h2 {
  color: var(--color-cream);
  margin-block-end: 0;
}

.rb-roulette__content p {
  max-width: 65ch;
  color: var(--color-cream);
  margin-block-end: 0;
}

.rb-roulette__list {
  color: var(--color-cream);
  margin-block-end: 0;
}

.rb-roulette__media {
  min-width: 0;
}

.rb-roulette__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px), 40px 100%);
  transition: transform 0.3s ease;
}

.rb-roulette__media img:hover {
  transform: scale(1.03);
}

.rb-blackjack {
  background-color: var(--color-petrol);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-4xl);
}

.rb-blackjack::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'%3E%3Crect x='10' y='15' width='60' height='70' rx='4'/%3E%3Cpath d='M20 30l10 10-10 10M60 30l-10 10 10 10'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.rb-blackjack__container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-3xl);
  align-items: center;
}

.rb-blackjack__media {
  min-width: 0;
}

.rb-blackjack__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  transition: transform 0.3s ease;
}

.rb-blackjack__media img:hover {
  transform: scale(1.03);
}

.rb-blackjack__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.rb-blackjack__content h2 {
  color: var(--color-white);
  margin-block-end: 0;
}

.rb-blackjack__content p {
  max-width: 65ch;
  color: var(--color-white);
  margin-block-end: 0;
}

.rb-blackjack__list {
  color: var(--color-white);
  margin-block-end: 0;
}

.rb-dining {
  padding-block: var(--space-4xl);
}

.rb-dining__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.rb-dining__text {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rb-dining__text h2 {
  margin-block-end: 0;
}

.rb-dining__text p {
  margin-block-end: 0;
}

.rb-dining__list {
  text-align: left;
  margin-inline: auto;
  margin-block-end: 0;
}

.rb-dining__media {
  width: 100%;
  max-width: 100%;
}

.rb-dining__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}

.rb-zone {
  background-color: var(--color-graphite);
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-4xl);
}

.rb-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23B22222' stroke-opacity='0.1' stroke-width='1'%3E%3Crect x='15' y='15' width='50' height='50'/%3E%3Ccircle cx='40' cy='40' r='15'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.rb-zone__container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.rb-zone__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.rb-zone__content h2 {
  color: var(--color-cream);
  margin-block-end: 0;
}

.rb-zone__content p {
  max-width: 65ch;
  color: var(--color-cream);
  margin-block-end: 0;
}

.rb-zone__number {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(6rem, 12vw, 12rem);
  line-height: 1;
  color: var(--color-petrol);
  opacity: 0.25;
  transition: opacity 0.3s ease, transform 0.3s ease;
  user-select: none;
}

.rb-zone__number:hover {
  opacity: 0.5;
  transform: scale(1.05);
}

.rb-etiquette {
  padding-block: var(--space-4xl);
}

.rb-etiquette__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.rb-etiquette__text {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rb-etiquette__text h2 {
  margin-block-end: 0;
}

.rb-etiquette__text p {
  margin-block-end: 0;
}

.rb-etiquette__list {
  text-align: left;
  margin-inline: auto;
  margin-block-end: 0;
}

.rb-etiquette__icons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.rb-etiquette-icon {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
  background-color: var(--color-white);
  border: var(--border-graphite);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}

.rb-etiquette-icon__graphic {
  width: 48px;
  height: 48px;
  color: var(--color-petrol);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--space-sm);
}

.rb-etiquette-icon__graphic svg {
  width: 100%;
  height: 100%;
}

.rb-etiquette-icon h3 {
  margin-block-end: 0;
}

.rb-etiquette-icon p {
  margin-block-end: 0;
}

.rb-reservation {
  background-color: var(--color-petrol);
  color: var(--color-white);
  padding-block: var(--space-4xl);
}

.rb-reservation__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
}

.rb-reservation__text {
  max-width: 65ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.rb-reservation__text h2 {
  color: var(--color-white);
  margin-block-end: 0;
}

.rb-reservation__text p {
  color: var(--color-white);
  margin-block-end: 0;
}

.rb-reservation__text a {
  color: var(--color-cream);
  text-decoration: underline;
}

.rb-reservation__text a:hover {
  color: var(--color-brick-red);
}

.rb-reservation__text .btn {
  margin-block-start: var(--space-md);
}

@media (max-width: 1024px) {
  .rb-hero__container,
  .rb-roulette__container,
  .rb-blackjack__container,
  .rb-zone__container {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .rb-hero__media,
  .rb-roulette__media,
  .rb-blackjack__media {
    order: -1;
  }

  .rb-intro__cards,
  .rb-etiquette__icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rb-zone__number {
    font-size: clamp(4rem, 10vw, 8rem);
  }
}

@media (max-width: 768px) {
  .rb-hero,
  .rb-intro,
  .rb-roulette,
  .rb-blackjack,
  .rb-dining,
  .rb-zone,
  .rb-etiquette,
  .rb-reservation {
    padding-block: var(--space-3xl);
  }

  .rb-hero__container,
  .rb-roulette__container,
  .rb-blackjack__container,
  .rb-zone__container {
    gap: var(--space-xl);
  }

  .rb-hero__content h1 {
    font-size: 2.5rem;
    line-height: 3rem;
  }

  .rb-hero__content p,
  .rb-roulette__content p,
  .rb-blackjack__content p,
  .rb-zone__content p,
  .rb-dining__text,
  .rb-etiquette__text,
  .rb-reservation__text {
    max-width: 100%;
  }

  .rb-intro__cards,
  .rb-etiquette__icons {
    grid-template-columns: 1fr;
  }

  .rb-zone__number {
    font-size: 3rem;
    opacity: 0.2;
  }

  .rb-hero__media img,
  .rb-roulette__media img,
  .rb-blackjack__media img,
  .rb-dining__media img {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  }
}