/* ===== Poker Room page-owned styles ===== */

.poker-room-page {
  background-color: var(--color-creme);
}

/* ===== Intro Poker Room ===== */
.poker-intro {
  padding-block: var(--space-3xl) var(--space-2xl);
  position: relative;
}

.poker-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-3xl);
  bottom: var(--space-2xl);
  width: 1px;
  background-color: var(--color-bleu-nuit);
}

.poker-intro__container {
  display: flex;
  justify-content: center;
}

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

.poker-intro__copy .section-label {
  align-self: center;
}

.poker-intro__copy h1 {
  margin-block-end: 0;
}

.poker-intro__copy p {
  margin-block-end: 0;
}

.poker-intro__lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
}

/* ===== L'espace ===== */
.poker-space {
  padding-block: var(--space-3xl);
}

.poker-space__container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.poker-space__copy {
  grid-column: 1 / span 5;
  max-width: 60ch;
  min-width: 0;
}

.poker-space__copy .section-label {
  color: var(--color-prune);
}

.poker-space__copy h2 {
  margin-block-end: var(--space-md);
}

.poker-space__copy p {
  margin-block-end: var(--space-md);
}

.poker-space__copy p:last-child {
  margin-block-end: 0;
}

.poker-space__media {
  grid-column: 6 / span 7;
  margin-inline-end: calc(var(--space-xl) * -0.5);
  aspect-ratio: 3 / 4;
  min-width: 0;
}

.poker-space__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Les tables ===== */
.poker-tables {
  padding-block: var(--space-3xl);
}

.poker-tables__container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: start;
}

.poker-tables__media {
  grid-column: 1 / span 3;
  aspect-ratio: 3 / 4;
  min-width: 0;
}

.poker-tables__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.poker-tables__copy {
  grid-column: 4 / span 9;
  max-width: 55ch;
  min-width: 0;
}

.poker-tables__copy .section-label {
  color: var(--color-prune);
}

.poker-tables__copy h2 {
  margin-block-end: var(--space-md);
}

.poker-tables__copy p {
  margin-block-end: var(--space-md);
}

.poker-tables__copy p:last-child {
  margin-block-end: 0;
}

.poker-tables__list {
  margin-block-start: var(--space-md);
  margin-block-end: 0;
}

.poker-tables__list .content-list__item {
  margin-block-end: var(--space-xs);
}

.poker-tables__list .content-list__item:last-child {
  margin-block-end: 0;
}

/* ===== Cartes et jetons ===== */
.poker-cards {
  padding-block: var(--space-3xl);
}

.poker-cards__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: center;
}

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

.poker-cards__copy .section-label {
  align-self: center;
  color: var(--color-prune);
}

.poker-cards__copy h2 {
  margin-block-end: 0;
}

.poker-cards__copy p {
  margin-block-end: 0;
}

.poker-cards__media {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.poker-cards__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Les sièges ===== */
.poker-seats {
  padding-block: var(--space-3xl);
  position: relative;
}

.poker-seats::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-3xl);
  bottom: var(--space-3xl);
  width: 1px;
  background-color: var(--color-prune);
}

.poker-seats__container {
  display: flex;
  justify-content: flex-start;
}

.poker-seats__copy {
  max-width: 60ch;
  min-width: 0;
}

.poker-seats__copy .section-label {
  color: var(--color-prune);
}

.poker-seats__copy h2 {
  margin-block-end: var(--space-md);
}

.poker-seats__copy p {
  margin-block-end: 0;
}

/* ===== L'expérience ===== */
.poker-experience {
  padding-block: var(--space-3xl);
}

.poker-experience__container {
  display: flex;
  justify-content: center;
}

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

.poker-experience__copy .section-label {
  align-self: center;
  color: var(--color-prune);
}

.poker-experience__copy h2 {
  margin-block-end: 0;
  color: var(--color-creme);
}

.poker-experience__copy p {
  margin-block-end: 0;
  color: var(--color-creme);
}

.poker-experience__list {
  list-style: disc;
  padding-inline-start: 1.25rem;
  margin-block-end: 0;
  text-align: left;
  color: var(--color-creme);
}

.poker-experience__list .content-list__item {
  margin-block-end: var(--space-xs);
  color: var(--color-creme);
}

.poker-experience__list .content-list__item:last-child {
  margin-block-end: 0;
}

.poker-experience__quote {
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
  color: var(--color-creme);
}

.poker-experience__quote p {
  color: var(--color-creme);
}

/* ===== Réserver une table ===== */
.poker-reserve {
  background-color: var(--color-bleu-nuit);
  padding-block: var(--space-3xl);
}

.poker-reserve__container {
  display: flex;
  justify-content: center;
}

.poker-reserve__copy {
  max-width: 60ch;
  text-align: center;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.poker-reserve__copy .section-label {
  align-self: center;
  color: var(--color-rouge-argile);
}

.poker-reserve__copy h2 {
  margin-block-end: 0;
  color: var(--color-creme);
}

.poker-reserve__copy p {
  margin-block-end: 0;
  color: var(--color-creme);
}

.poker-reserve__contact {
  color: var(--color-creme);
}

.poker-reserve__contact a {
  color: var(--color-creme);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.poker-reserve__contact a:hover {
  text-decoration-thickness: 2px;
}

.poker-reserve__btn {
  margin-block-start: var(--space-sm);
  min-width: 0;
}

/* ===== Note 18+ ===== */
.poker-note {
  padding-block: var(--space-xl);
}

.poker-note__container {
  display: flex;
  justify-content: center;
}

.poker-note__copy {
  max-width: 68ch;
  text-align: center;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.poker-note__copy .section-label {
  align-self: center;
  color: var(--color-prune);
}

.poker-note__text {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  letter-spacing: var(--text-micro-letter-spacing);
  text-transform: uppercase;
  color: var(--color-charbon-clair);
  margin-block-end: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  .poker-space__container,
  .poker-tables__container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .poker-space__copy {
    grid-column: 1 / span 6;
  }

  .poker-space__media {
    grid-column: 7 / span 6;
    margin-inline-end: 0;
  }

  .poker-tables__media {
    grid-column: 1 / span 4;
  }

  .poker-tables__copy {
    grid-column: 5 / span 8;
  }
}

@media (max-width: 767px) {
  .poker-intro,
  .poker-space,
  .poker-tables,
  .poker-cards,
  .poker-seats,
  .poker-experience,
  .poker-reserve,
  .poker-note {
    padding-block: var(--space-2xl);
  }

  .poker-intro::before,
  .poker-seats::before {
    display: none;
  }

  .poker-intro__copy,
  .poker-cards__copy,
  .poker-experience__copy,
  .poker-reserve__copy,
  .poker-note__copy {
    max-width: 100%;
    text-align: center;
  }

  .poker-space__container,
  .poker-tables__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .poker-space__media {
    order: -1;
    width: 100%;
    aspect-ratio: 3 / 4;
  }

  .poker-space__copy,
  .poker-tables__copy {
    max-width: 100%;
  }

  .poker-tables__media {
    width: 100%;
    aspect-ratio: 3 / 4;
  }

  .poker-cards__media {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .poker-seats__copy {
    max-width: 100%;
  }

  .poker-reserve__btn {
    width: 100%;
    justify-content: center;
  }
}