/* Page-owned styles for karakterek-es-kombok */

.hero-section {
  padding-block: var(--space-4xl);
  background-color: var(--color-canvas);
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 100%;
}

.hero-copy h1 {
  color: var(--color-accent-cyan);
  margin-block-end: 0;
  font-size: var(--text-h1-size);
}

.hero-deck {
  max-width: 720px;
  color: var(--color-text-secondary);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  margin-block-end: 0;
}

.hero-cta {
  align-self: flex-start;
}

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

.intro-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-2xl);
  align-items: start;
}

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

.intro-copy h2 {
  margin-block-end: var(--space-md);
}

.intro-copy p {
  max-width: 68ch;
}

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

.archetype-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.archetype-card {
  padding: var(--space-lg);
}

.archetype-card h3 {
  margin-block-end: var(--space-sm);
}

.archetype-card p {
  max-width: 45ch;
  margin-block-end: 0;
}

.unlock-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.unlock-container h2 {
  margin-block-end: 0;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table-wrapper table {
  min-width: 600px;
  margin-block-end: 0;
}

.table-wrapper th,
.table-wrapper td {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

.table-wrapper tr:hover td {
  background-color: var(--color-surface-raised);
}

.unlock-tips {
  max-width: 720px;
}

.unlock-tips h3 {
  margin-block-end: var(--space-sm);
}

.special-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-2xl);
  align-items: center;
}

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

.special-copy h2 {
  margin-block-end: var(--space-md);
}

.special-copy p {
  max-width: 68ch;
}

.input-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(3, 40px);
  gap: 4px;
}

.dpad span {
  display: block;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.dpad-up {
  grid-column: 2;
  grid-row: 1;
}

.dpad-left {
  grid-column: 1;
  grid-row: 2;
}

.dpad-center {
  grid-column: 2;
  grid-row: 2;
  background-color: var(--color-surface-raised) !important;
}

.dpad-right {
  grid-column: 3;
  grid-row: 2;
}

.dpad-down {
  grid-column: 2;
  grid-row: 3;
}

.action-buttons {
  display: flex;
  gap: var(--space-sm);
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
}

.frame-trap-container {
  display: flex;
  justify-content: center;
}

.frame-trap-callout {
  max-width: 720px;
  width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent-magenta);
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
}

.frame-trap-callout h2 {
  margin-block-end: var(--space-md);
}

.frame-trap-callout p {
  max-width: 60ch;
  margin-block-end: var(--space-md);
}

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

.combo-examples-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.combo-examples-container h2 {
  margin-block-end: 0;
}

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

.combo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.combo-card h3 {
  color: var(--color-accent-cyan);
  margin-block-end: 0;
}

.combo-card p {
  max-width: 40ch;
  margin-block-end: 0;
}

.combo-notation {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
}

.beginner-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-2xl);
  align-items: start;
}

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

.beginner-copy h2 {
  margin-block-end: var(--space-md);
}

.beginner-list {
  max-width: 60ch;
}

.beginner-copy p {
  max-width: 60ch;
}

.decorative-pattern {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  min-width: 0;
}

.pattern-block {
  display: block;
  height: 80px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.pattern-block-1 {
  background-color: var(--color-surface-raised);
}

.pattern-block-4 {
  background-color: var(--color-surface-raised);
}

.combo-building-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
}

.building-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.building-card h2 {
  margin-block-end: 0;
}

.building-card h3 {
  margin-block-end: var(--space-sm);
}

.building-card p,
.building-card li {
  max-width: 50ch;
}

.building-list {
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
}

.summary-section {
  padding-block: var(--space-4xl);
  background-color: var(--color-canvas);
}

.summary-container {
  display: flex;
  justify-content: center;
}

.summary-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.summary-content h2 {
  margin-block-end: 0;
}

.summary-list {
  text-align: left;
  margin-block-end: 0;
}

.summary-cta-text {
  margin-block-end: 0;
}

.summary-cta {
  align-self: center;
}

@media (min-width: 640px) and (max-width: 899px) {
  .intro-grid,
  .special-grid,
  .beginner-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

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

  .combo-building-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .input-diagram,
  .decorative-pattern {
    display: none;
  }
}

@media (max-width: 639px) {
  .hero-section {
    padding-block: var(--space-3xl);
  }

  .hero-copy h1 {
    font-size: 2rem;
  }

  .hero-cta {
    width: 100%;
  }

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

  .intro-grid,
  .special-grid,
  .beginner-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .archetype-stack {
    gap: var(--space-md);
  }

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

  .combo-building-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .input-diagram,
  .decorative-pattern {
    display: none;
  }

  .frame-trap-callout {
    padding: var(--space-lg);
  }

  .summary-section {
    padding-block: var(--space-3xl);
  }

  .summary-cta {
    width: 100%;
  }
}