@charset "UTF-8";

.puzzle-strategy-page {
  --ps-grid-gap: var(--space-xl);
  --ps-section-gap: var(--space-3xl);
}

.puzzle-strategy-page .strategy-section {
  padding-block: var(--space-2xl);
}

.puzzle-strategy-page .section-heading h2 {
  border-inline-start: 2px solid var(--color-electric-blue);
  padding-inline-start: var(--space-md);
  margin-block-end: var(--space-lg);
}

.puzzle-strategy-page .conveyor-divider {
  margin-block: var(--space-xl);
}

/* Strategy Introduction */
.strategy-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--ps-grid-gap);
  align-items: start;
  margin-block-end: var(--space-lg);
}

.strategy-intro-copy {
  min-width: 0;
}

.strategy-intro-lead {
  max-width: 68ch;
}

.strategy-intro-copy p:not(.lead) {
  max-width: 68ch;
}

.strategy-intro-accent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.pixel-burst-accent {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 48px);
  gap: 4px;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: var(--border-panel);
  border-radius: var(--radius-panel);
}

.pixel-tile {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 2px;
}

.tile-blue {
  background-color: var(--color-electric-blue);
}

.tile-coral {
  background-color: var(--color-coral);
}

.tile-lime {
  background-color: var(--color-lime);
}

.tile-violet {
  background-color: var(--color-violet);
}

.tile-yellow {
  background-color: var(--color-yellow);
}

.strategy-intro-note {
  max-width: 68ch;
}

/* Analyse the Board First */
.analyse-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--ps-grid-gap);
  align-items: start;
}

.analyse-copy {
  min-width: 0;
}

.analyse-copy h3,
.analyse-copy p,
.analyse-copy ul {
  max-width: 68ch;
}

.analyse-copy .strategy-caution {
  margin-block-start: var(--space-lg);
}

.strategy-figure {
  min-width: 0;
  margin-block-end: 0;
}

.strategy-figure .img-panel {
  width: 100%;
  max-width: 100%;
}

.strategy-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Colour Relationships and Patterns */
.colour-patterns-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--ps-grid-gap);
  align-items: start;
}

.colour-patterns-figure {
  order: 1;
}

.colour-patterns-copy {
  order: 2;
  min-width: 0;
}

.colour-patterns-copy h3,
.colour-patterns-copy p,
.colour-patterns-copy ul {
  max-width: 68ch;
}

.colour-patterns-copy .panel {
  margin-block: var(--space-md);
}

/* Avoid Impulsive Moves */
.impulsive-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: var(--ps-grid-gap);
  align-items: start;
}

.impulsive-copy {
  min-width: 0;
}

.impulsive-copy h3,
.impulsive-copy p,
.impulsive-copy ul {
  max-width: 68ch;
}

.impulsive-note {
  min-width: 0;
}

/* Preserve Future Options */
.preserve-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--ps-grid-gap);
  align-items: start;
}

.preserve-copy {
  min-width: 0;
}

.preserve-copy h3,
.preserve-copy p,
.preserve-copy ul {
  max-width: 68ch;
}

.preserve-copy .panel {
  margin-block: var(--space-md);
}

.flow-diagram {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-panel);
  border-radius: var(--radius-panel);
}

.flow-node {
  width: 100%;
  max-width: 180px;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  border: 1px solid var(--color-conveyor-line);
  border-radius: var(--radius-panel);
  background-color: var(--color-canvas);
}

.flow-node-start {
  background-color: var(--color-electric-blue);
  color: #FFFFFF;
  border-color: var(--color-electric-blue);
}

.flow-node-end {
  background-color: var(--color-lime);
  color: var(--color-graphite);
  border-color: var(--color-lime);
}

.flow-node-option {
  background-color: var(--color-surface);
}

.flow-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
}

.flow-arrow {
  color: var(--color-graphite-soft);
  font-size: var(--text-body-large-size);
  line-height: 1;
}

/* Plan Several Actions Ahead */
.plan-ahead-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: var(--ps-grid-gap);
  align-items: start;
}

.plan-ahead-copy {
  min-width: 0;
}

.plan-ahead-copy h3,
.plan-ahead-copy p,
.plan-ahead-copy ol,
.plan-ahead-copy ul {
  max-width: 68ch;
}

.plan-ahead-note {
  min-width: 0;
}

.content-list-ordered {
  list-style: decimal;
  padding-inline-start: 1.5rem;
}

.content-list-ordered > li {
  padding-inline-start: 0;
}

.content-list-ordered > li::before {
  content: none;
}

/* Learn from Failed Attempts */
.learn-failures-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: var(--ps-grid-gap);
  align-items: start;
}

.learn-failures-copy {
  min-width: 0;
}

.learn-failures-copy h3,
.learn-failures-copy p,
.learn-failures-copy ul {
  max-width: 68ch;
}

.learn-failures-note {
  min-width: 0;
}

/* Prioritise Simplifying Moves */
.simplify-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--ps-grid-gap);
  align-items: start;
}

.simplify-copy {
  min-width: 0;
}

.simplify-copy h3,
.simplify-copy p,
.simplify-copy ul {
  max-width: 68ch;
}

/* Final Strategy Checklist */
.checklist-panel {
  max-width: 10fr;
  margin-inline: auto;
  width: 100%;
}

.checklist-panel p,
.checklist-panel ul {
  max-width: 68ch;
}

.checklist-list {
  margin-block-start: var(--space-md);
}

.checklist-disclaimer {
  margin-block-start: var(--space-md);
  color: var(--color-graphite-soft);
  font-size: var(--text-body-small-size);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .strategy-intro-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--space-lg);
  }

  .pixel-burst-accent {
    grid-template-columns: repeat(3, 36px);
    grid-template-rows: repeat(3, 36px);
  }

  .pixel-tile {
    width: 36px;
    height: 36px;
  }

  .analyse-grid,
  .colour-patterns-grid,
  .preserve-grid,
  .simplify-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .impulsive-grid,
  .plan-ahead-grid,
  .learn-failures-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .impulsive-note,
  .plan-ahead-note,
  .learn-failures-note {
    max-width: 68ch;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .puzzle-strategy-page {
    --ps-grid-gap: var(--space-lg);
  }

  .puzzle-strategy-page .strategy-section {
    padding-block: var(--space-3xl);
  }

  .puzzle-strategy-page .section-heading h2 {
    font-size: var(--text-h2-size);
    margin-block-end: var(--space-md);
  }

  .strategy-intro-grid,
  .analyse-grid,
  .colour-patterns-grid,
  .impulsive-grid,
  .preserve-grid,
  .plan-ahead-grid,
  .learn-failures-grid,
  .simplify-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ps-grid-gap);
  }

  .strategy-intro-accent {
    display: none;
  }

  .strategy-intro-copy,
  .analyse-copy,
  .colour-patterns-copy,
  .impulsive-copy,
  .preserve-copy,
  .plan-ahead-copy,
  .learn-failures-copy,
  .simplify-copy {
    max-width: 100%;
  }

  .colour-patterns-figure {
    order: 0;
  }

  .colour-patterns-copy {
    order: 1;
  }

  .flow-diagram {
    padding: var(--space-md);
  }

  .flow-node {
    max-width: 100%;
  }

  .checklist-panel {
    max-width: 100%;
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-strategy-page *,
  .puzzle-strategy-page *::before,
  .puzzle-strategy-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}