/* ===== Poker Page Styles ===== */

.poker-page {
  overflow-x: hidden;
}

/* Section 1: Hero */
.poker-hero {
  background-color: var(--color-background);
  position: relative;
}

.poker-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='58' fill='none' stroke='%234DB6AC' stroke-width='1' opacity='0.08'/%3E%3Cpath d='M60 2 L68 52 L118 60 L68 68 L60 118 L52 68 L2 60 L52 52 Z' fill='%234DB6AC' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
}

.poker-hero__container {
  position: relative;
  z-index: 1;
}

.poker-hero__kicker {
  color: var(--color-primary-light);
}

.poker-hero__title {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-6);
}

.poker-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.poker-hero__lead {
  max-width: 70ch;
  color: var(--color-text);
  margin-block-end: 0;
}

.poker-hero__quote {
  max-width: 50%;
  margin-inline-start: 0;
  margin-block-end: 0;
  border-inline-start: 4px solid var(--color-accent);
  padding-inline-start: var(--space-5);
  font-style: italic;
  color: var(--color-primary-dark);
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
}

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

.poker-hero__scope-list {
  max-width: 70ch;
  margin-block-end: 0;
}

/* Section 2: Poker Room Environment */
.poker-room {
  background-color: var(--color-night-coordinates-bg);
  color: var(--color-text-on-dark);
}

.poker-room__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-room__title {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.poker-room__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.poker-room__main {
  min-width: 0;
}

.poker-room__text {
  max-width: 65ch;
  color: var(--color-text-on-dark);
  margin-block-end: var(--space-4);
}

.poker-room__features {
  max-width: 65ch;
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.poker-room__features li {
  color: var(--color-text-on-dark);
}

.poker-room__info-box {
  background-color: rgba(232, 240, 254, 0.08);
  border: 1px solid var(--color-accent-strong);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  min-width: 0;
}

.poker-room__info-title {
  color: var(--color-accent-soft);
  margin-block-end: var(--space-3);
}

.poker-room__info-text {
  color: var(--color-text-on-dark);
  margin-block-end: 0;
}

.poker-room__figure {
  margin-block-end: 0;
}

.poker-room__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-accent-soft);
  filter: saturate(0.85) contrast(1.05) brightness(0.9);
}

.poker-room__caption {
  color: var(--color-accent-soft);
  margin-block-start: var(--space-2);
}

/* Section 3: Poker Games */
.poker-games {
  background-color: var(--color-background);
}

.poker-games__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-games__title {
  margin-block-end: 0;
}

.poker-games__variant {
  min-width: 0;
}

.poker-games__variant-title {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-3);
}

.poker-games__text {
  max-width: 70ch;
  margin-block-end: var(--space-4);
}

.poker-games__table-wrap {
  width: 100%;
  max-width: 70%;
  margin-inline: auto;
  margin-block-end: var(--space-4);
  overflow-x: auto;
}

.poker-games__table {
  width: 100%;
  min-width: 420px;
  margin-block-end: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.poker-games__table th {
  background-color: var(--color-surface-tint);
  color: var(--color-primary-dark);
}

.poker-games__table td {
  background-color: var(--color-surface);
}

.poker-games__table tbody tr:nth-child(even) td {
  background-color: var(--color-surface-tint-alt);
}

.poker-games__list {
  max-width: 70ch;
  margin-block-end: 0;
}

.poker-games__callout {
  background-color: var(--color-surface-tint-alt);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  max-width: 70ch;
  margin-block-start: var(--space-4);
}

.poker-games__callout-text {
  margin-block-end: 0;
  color: var(--color-primary-dark);
}

/* Section 4: Etiquette and House Rules */
.poker-etiquette {
  background-color: var(--color-surface-tint);
}

.poker-etiquette__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-etiquette__title {
  margin-block-end: 0;
}

.poker-etiquette__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.poker-etiquette__main {
  min-width: 0;
}

.poker-etiquette__subtitle {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-3);
}

.poker-etiquette__list {
  max-width: 70ch;
  margin-block-end: 0;
}

.poker-etiquette__info-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent-strong);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  min-width: 0;
}

.poker-etiquette__info-title {
  color: var(--color-accent-strong);
  margin-block-end: var(--space-3);
}

.poker-etiquette__rules-list {
  margin-block-end: 0;
}

.poker-etiquette__rules-list li {
  color: var(--color-text);
}

/* Section 5: Poker vs. Other Casino Games */
.poker-comparison {
  background-color: var(--color-background);
}

.poker-comparison__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-comparison__title {
  margin-block-end: 0;
}

.poker-comparison__intro {
  max-width: 70ch;
  margin-block-end: 0;
}

.poker-comparison__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.poker-comparison__card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  min-width: 0;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.poker-comparison__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 36, 64, 0.06);
}

.poker-comparison__card-title {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-3);
}

.poker-comparison__card-text {
  max-width: 50ch;
  margin-block-end: 0;
}

.poker-comparison__outro {
  max-width: 70ch;
  margin-block-end: 0;
}

/* Section 6: Finding Poker on Your Cruise */
.poker-finding {
  background-color: var(--color-surface-tint);
}

.poker-finding__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-finding__title {
  margin-block-end: 0;
}

.poker-finding__content {
  min-width: 0;
}

.poker-finding__text {
  max-width: 70ch;
  margin-block-end: var(--space-4);
}

.poker-finding__steps {
  max-width: 70ch;
  margin-block-end: 0;
  padding-inline-start: var(--space-5);
  list-style: decimal;
}

.poker-finding__steps li {
  margin-block-end: var(--space-2);
}

.poker-finding__callout {
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  transition: border-color 0.2s ease;
}

.poker-finding__callout:hover {
  border-color: var(--color-primary);
}

.poker-finding__callout-title {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-3);
}

.poker-finding__callout-text {
  margin-block-end: var(--space-4);
}

.poker-finding__link {
  display: inline-flex;
}

/* Section 7: Practical Tips */
.poker-tips {
  background-color: var(--color-background);
}

.poker-tips__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-tips__title {
  margin-block-end: 0;
}

.poker-tips__card {
  background-color: var(--color-surface-tint-alt);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.poker-tips__column {
  min-width: 0;
}

.poker-tips__column-title {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-3);
}

.poker-tips__list {
  max-width: 60ch;
  margin-block-end: 0;
}

/* Section 8: Responsible Play and Policies */
.poker-responsible {
  background-color: var(--color-surface-tint);
}

.poker-responsible__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-responsible__title {
  margin-block-end: 0;
}

.poker-responsible__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.poker-responsible__main {
  min-width: 0;
}

.poker-responsible__subtitle {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-3);
}

.poker-responsible__text {
  max-width: 70ch;
  margin-block-end: var(--space-4);
}

.poker-responsible__list {
  max-width: 70ch;
  margin-block-end: 0;
}

.poker-responsible__info-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  min-width: 0;
}

.poker-responsible__info-title {
  color: var(--color-primary-dark);
  margin-block-end: var(--space-3);
}

.poker-responsible__policies-list {
  margin-block-end: 0;
}

/* Section 9: Explore More Onboard Casino Games */
.poker-explore {
  background-color: var(--color-background);
}

.poker-explore__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.poker-explore__title {
  margin-block-end: 0;
}

.poker-explore__intro {
  max-width: 70ch;
  margin-block-end: 0;
}

.poker-explore__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.poker-explore__card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-medium);
  padding: var(--card-padding);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.poker-explore__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 36, 64, 0.06);
}

.poker-explore__card-title {
  color: var(--color-primary-dark);
  margin-block-end: 0;
}

.poker-explore__card-text {
  max-width: 40ch;
  margin-block-end: 0;
}

.poker-explore__card-link {
  align-self: flex-start;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-soft);
  text-underline-offset: 3px;
  font-weight: var(--font-weight-semibold);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.poker-explore__card-link:hover {
  color: var(--color-primary-dark);
  text-decoration-color: var(--color-accent);
}

.poker-explore__card-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

/* ===== Responsive Breakpoints ===== */

/* Tablet: 640px and up */
@media (min-width: 640px) {
  .poker-tips__card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .poker-comparison__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .poker-explore__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
  .poker-room__grid {
    grid-template-columns: 3fr 2fr;
  }

  .poker-etiquette__grid {
    grid-template-columns: 3fr 2fr;
  }

  .poker-responsible__grid {
    grid-template-columns: 3fr 2fr;
  }

  .poker-hero__quote {
    max-width: 50%;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .poker-hero__title {
    font-size: var(--font-size-h1);
  }

  .poker-room__grid {
    grid-template-columns: 3fr 2fr;
  }

  .poker-etiquette__grid {
    grid-template-columns: 3fr 2fr;
  }

  .poker-responsible__grid {
    grid-template-columns: 3fr 2fr;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 639px) {
  .poker-hero__quote {
    max-width: 100%;
    border-inline-start: none;
    border-top: 4px solid var(--color-accent);
    border-bottom: 4px solid var(--color-accent);
    padding-inline-start: 0;
    padding-block: var(--space-4);
  }

  .poker-games__table-wrap {
    max-width: 100%;
  }

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

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

@media (max-width: 389px) {
  .poker-hero__lead,
  .poker-hero__scope-list,
  .poker-room__text,
  .poker-room__features,
  .poker-games__text,
  .poker-games__list,
  .poker-etiquette__list,
  .poker-comparison__intro,
  .poker-comparison__outro,
  .poker-finding__text,
  .poker-finding__steps,
  .poker-responsible__text,
  .poker-responsible__list,
  .poker-explore__intro {
    max-width: 100%;
  }
}