@charset "UTF-8";

.poker-cinema-page {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

.poker-cinema-page section {
  margin-block-end: var(--space-4xl);
}

.poker-cinema-page .container {
  max-width: var(--container-max);
}

/* Hero */
.poker-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background-color: var(--color-ink);
  overflow: hidden;
  margin-block-end: var(--space-5xl);
}

.poker-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.poker-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.poker-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(30, 28, 26, 0.7);
}

.poker-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.poker-hero__text {
  max-width: 7 / 12 * 100%;
  width: 58.333%;
  color: var(--color-on-dark);
}

.poker-hero__label {
  color: var(--color-ember);
  margin-block-end: var(--space-md);
}

.poker-hero__title {
  color: var(--color-on-dark);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  letter-spacing: var(--text-display-tracking);
  font-weight: var(--text-display-weight);
  margin-block-end: var(--space-lg);
}

.poker-hero__standfirst {
  color: var(--color-on-dark-muted);
  max-width: 48ch;
  margin-block-end: 0;
}

/* Why Poker Works */
.poker-why {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-why__header {
  grid-column: 1 / span 8;
}

.poker-why__label,
.poker-archetypes__label,
.poker-craft__label,
.poker-metaphor__label,
.poker-essential__label,
.poker-future__label,
.poker-conclusion__label {
  color: var(--color-ember);
  margin-block-end: var(--space-sm);
}

.poker-why__content {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.poker-why__unit {
  max-width: 68ch;
}

.poker-why__unit h3 {
  margin-block-end: var(--space-sm);
}

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

/* Iconic Poker Scenes */
.poker-scenes {
  background-color: var(--color-ink);
  color: var(--color-on-dark);
  padding-block: var(--space-5xl) var(--space-5xl);
  margin-block-end: var(--space-5xl);
}

.poker-scenes__header {
  margin-block-end: var(--space-3xl);
}

.poker-scenes__label {
  color: var(--color-ember);
  margin-block-end: var(--space-sm);
}

.poker-scenes__intro {
  max-width: 48ch;
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
}

.poker-scene {
  margin-block-end: var(--space-4xl);
}

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

.poker-scene__media {
  width: 100%;
  margin-block-end: var(--space-xl);
}

.poker-scene__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

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

.poker-scene__num {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ember);
}

.poker-scene__text {
  max-width: 68ch;
}

.poker-scene__text h3 {
  color: var(--color-on-dark);
  margin-block-end: var(--space-md);
}

.poker-scene__text p {
  color: var(--color-on-dark-muted);
  margin-block-end: var(--space-md);
}

.poker-scene__caption {
  border-block-start: var(--border-paper-line);
  padding-block-start: var(--space-xs);
  margin-block-start: var(--space-sm);
  color: var(--color-on-dark-muted);
}

/* Poker Character Archetypes */
.poker-archetypes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-archetypes__header {
  grid-column: 1 / span 12;
}

.poker-archetypes__intro {
  max-width: 48ch;
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
}

.poker-archetypes__grid {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-archetype {
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper);
  border: 1px solid var(--color-charcoal-line);
  border-radius: var(--radius-default);
  overflow: hidden;
  transition: background-color var(--transition-color);
}

.poker-archetype:hover {
  background-color: var(--color-paper-deep);
}

.poker-archetype__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.poker-archetype__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.poker-archetype__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.poker-archetype__body h3 {
  margin-block-end: 0;
}

.poker-archetype__body p {
  margin-block-end: 0;
  max-width: 48ch;
}

/* Craft of Filming Poker */
.poker-craft {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-craft__header {
  grid-column: 1 / span 8;
}

.poker-craft__content {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.poker-craft__unit {
  max-width: 68ch;
}

.poker-craft__unit h3 {
  margin-block-end: var(--space-sm);
}

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

.poker-pullquote {
  margin-block: var(--space-xl) 0;
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--color-burgundy);
}

.poker-pullquote p {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-tracking);
  font-weight: var(--text-h3-weight);
  color: var(--color-ink);
  margin-block-end: 0;
  max-width: 48ch;
}

.poker-pullquote--ember {
  border-block-start-color: var(--color-ember);
}

.poker-callout {
  background-color: var(--color-burgundy-soft);
  border: 1px solid var(--color-charcoal-line);
  padding: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.poker-callout__label {
  color: var(--color-burgundy);
  margin-block-end: var(--space-xs);
}

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

/* Poker as Metaphor */
.poker-metaphor {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-metaphor__header {
  grid-column: 1 / span 8;
}

.poker-metaphor__content {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.poker-metaphor__unit {
  max-width: 68ch;
}

.poker-metaphor__unit h3 {
  margin-block-end: var(--space-sm);
}

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

/* Essential Poker Films */
.poker-essential {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-essential__header {
  grid-column: 1 / span 8;
}

.poker-essential__intro {
  max-width: 48ch;
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
}

.poker-essential__list {
  grid-column: 1 / span 8;
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.poker-essential__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 7fr);
  gap: var(--space-lg);
  align-items: start;
  border-block-start: 1px solid var(--color-charcoal-line);
  padding-block-start: var(--space-lg);
}

.poker-essential__rank {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ember);
}

.poker-essential__text h3 {
  margin-block-end: var(--space-xs);
}

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

/* Future of Poker */
.poker-future {
  background-color: var(--color-paper-deep);
  padding-block: var(--space-4xl);
  margin-block-end: var(--space-5xl);
}

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

.poker-future__header {
  grid-column: 1 / span 12;
}

.poker-future__content {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-future__unit {
  max-width: 68ch;
}

.poker-future__unit h3 {
  margin-block-end: var(--space-sm);
}

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

/* Conclusion */
.poker-conclusion {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl);
}

.poker-conclusion__content {
  grid-column: 1 / span 8;
  max-width: 68ch;
}

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

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

.poker-pullquote--final {
  border-block-start-color: var(--color-ember);
  margin-block-start: var(--space-xl);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .poker-hero {
    min-height: 62vh;
  }

  .poker-hero__text {
    width: 75%;
  }

  .poker-why__header,
  .poker-why__content,
  .poker-craft__header,
  .poker-craft__content,
  .poker-metaphor__header,
  .poker-metaphor__content,
  .poker-essential__header,
  .poker-essential__list,
  .poker-conclusion__content {
    grid-column: 1 / span 10;
  }

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

  .poker-archetype:last-child {
    grid-column: 1 / span 2;
    max-width: 50%;
    justify-self: center;
  }

  .poker-scene__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 6fr);
  }

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

/* Mobile */
@media (max-width: 767px) {
  .poker-cinema-page section {
    margin-block-end: var(--space-3xl);
  }

  .poker-hero {
    min-height: 0;
    padding-block: var(--space-4xl) var(--space-3xl);
    align-items: flex-end;
  }

  .poker-hero__media {
    position: absolute;
    inset: 0;
  }

  .poker-hero__image {
    aspect-ratio: 4 / 5;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .poker-hero__scrim {
    background: rgba(30, 28, 26, 0.78);
  }

  .poker-hero__content {
    padding-inline: var(--container-gutter-mobile);
  }

  .poker-hero__text {
    width: 100%;
  }

  .poker-hero__title {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    letter-spacing: var(--text-h2-tracking);
    font-weight: var(--text-h2-weight);
  }

  .poker-hero__standfirst {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    max-width: 100%;
  }

  .poker-why,
  .poker-archetypes,
  .poker-craft,
  .poker-metaphor,
  .poker-essential,
  .poker-conclusion,
  .poker-future .container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .poker-why__header,
  .poker-why__content,
  .poker-archetypes__header,
  .poker-archetypes__grid,
  .poker-craft__header,
  .poker-craft__content,
  .poker-metaphor__header,
  .poker-metaphor__content,
  .poker-essential__header,
  .poker-essential__list,
  .poker-future__header,
  .poker-future__content,
  .poker-conclusion__content {
    grid-column: 1;
  }

  .poker-archetypes__grid {
    grid-template-columns: 1fr;
  }

  .poker-archetype:last-child {
    grid-column: auto;
    max-width: 100%;
    justify-self: auto;
  }

  .poker-scene__body {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .poker-scene__num {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .poker-scene__image {
    aspect-ratio: 3 / 2;
  }

  .poker-essential__item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .poker-essential__rank {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .poker-future {
    padding-block: var(--space-3xl);
  }

  .poker-future__content {
    grid-template-columns: 1fr;
  }

  .poker-pullquote p {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .poker-archetype {
    transition: none;
  }
}