/* Page-owned styles for /terkep/ */

#terkep-main {
  --terkep-hero-overlay: rgba(64, 53, 43, 0.55);
  --terkep-hero-text: #FFFFFF;
  --terkep-card-bg: #E5D9B8;
  --terkep-card-border: rgba(64, 53, 43, 0.15);
  --terkep-card-hover-shadow: 0 8px 24px rgba(64, 53, 43, 0.15);
  --terkep-focus-ring: 2px solid #7FA8B8;
}

/* Hero */
.terkep-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: var(--space-7) var(--space-4);
  overflow: hidden;
  background-color: var(--color-ink);
}

.terkep-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.terkep-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.7);
}

.terkep-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  color: var(--terkep-hero-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.terkep-hero__title {
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--color-parchment);
  line-height: 1.2;
  color: var(--terkep-hero-text);
  margin: 0;
}

.terkep-hero__lead {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0;
  color: var(--terkep-hero-text);
}

.terkep-hero__details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--terkep-hero-text);
}

.terkep-hero__cta {
  align-self: center;
  min-width: 240px;
  box-shadow: var(--shadow-raised);
}

.terkep-hero__cta:hover {
  transform: translateY(-2px) scale(1.02);
}

.terkep-hero__cta:focus-visible {
  outline: var(--terkep-focus-ring);
  outline-offset: 2px;
}

/* Shared section spacing */
.terkep-section {
  padding-block: var(--space-7);
}

/* Intro split */
.terkep-intro__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.terkep-intro__copy {
  min-width: 0;
}

.terkep-intro__copy p {
  max-width: 700px;
  margin-inline-start: 0;
}

.terkep-intro__media {
  min-width: 0;
  margin: 0;
}

.terkep-intro__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid var(--color-parchment-deep);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  transform: rotate(-1deg);
}

.terkep-intro__media figcaption {
  text-align: center;
  margin-top: var(--space-2);
}

/* Fog of war */
.terkep-fog__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 800px;
  margin-inline: auto;
}

.terkep-fog__copy {
  min-width: 0;
}

.terkep-fog__copy p,
.terkep-fog__copy ul {
  max-width: 700px;
  margin-inline-start: 0;
}

.terkep-fog__media {
  min-width: 0;
  margin: 0;
}

.terkep-fog__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid var(--color-parchment-deep);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  transform: rotate(1deg);
}

.terkep-fog__media figcaption {
  text-align: center;
  margin-top: var(--space-2);
}

/* Terrain cards */
.terkep-terrain__title {
  text-align: center;
  margin-bottom: var(--space-4);
}

.terkep-terrain__intro {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

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

.terkep-terrain-card {
  background-color: var(--terkep-card-bg);
  border: 1px solid var(--terkep-card-border);
  border-radius: var(--radius-medium);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.terkep-terrain-card:hover {
  box-shadow: var(--terkep-card-hover-shadow);
  transform: translateY(-4px);
}

.terkep-terrain-card h3 {
  margin: 0;
  color: var(--color-forest);
}

.terkep-terrain-card p {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* Tribes split */
.terkep-tribes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.terkep-tribes__copy {
  min-width: 0;
}

.terkep-tribes__copy p {
  max-width: 700px;
  margin-inline-start: 0;
}

.terkep-tribes__media {
  min-width: 0;
  margin: 0;
}

.terkep-tribes__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid var(--color-parchment-deep);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  transform: rotate(-1deg);
}

.terkep-tribes__media figcaption {
  text-align: center;
  margin-top: var(--space-2);
}

/* Strategy tips */
.terkep-strategy__container {
  max-width: 800px;
  margin-inline: auto;
}

.terkep-strategy__container p {
  max-width: 700px;
  margin-inline-start: 0;
}

.terkep-strategy__list {
  list-style: decimal;
  padding-inline-start: var(--space-5);
  margin-block-start: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.terkep-strategy__list li {
  margin: 0;
}

/* Exploration joy split */
.terkep-joy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.terkep-joy__media {
  min-width: 0;
  margin: 0;
}

.terkep-joy__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid var(--color-parchment-deep);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
  transform: rotate(1deg);
}

.terkep-joy__media figcaption {
  text-align: center;
  margin-top: var(--space-2);
}

.terkep-joy__copy {
  min-width: 0;
}

.terkep-joy__copy p {
  max-width: 700px;
  margin-inline-start: 0;
}

/* CTA */
.terkep-cta {
  padding-block: var(--space-8);
  background-color: var(--surface-card);
}

.terkep-cta__container {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.terkep-cta__container h2 {
  margin: 0;
}

.terkep-cta__container p {
  margin: 0;
}

.terkep-cta__button {
  min-width: 260px;
  box-shadow: var(--shadow-raised);
}

.terkep-cta__button:hover {
  transform: translateY(-2px) scale(1.02);
}

.terkep-cta__button:focus-visible {
  outline: var(--terkep-focus-ring);
  outline-offset: 2px;
}

/* Tablet */
@media (max-width: 900px) {
  .terkep-intro__grid,
  .terkep-tribes__grid,
  .terkep-joy__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .terkep-intro__copy p,
  .terkep-tribes__copy p,
  .terkep-joy__copy p {
    max-width: 100%;
  }

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

  .terkep-hero {
    min-height: 440px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .terkep-hero {
    min-height: 0;
    padding: var(--space-6) var(--space-3);
  }

  .terkep-hero__content {
    gap: var(--space-3);
  }

  .terkep-hero__cta,
  .terkep-cta__button {
    width: 100%;
    min-width: 0;
  }

  .terkep-terrain__grid {
    grid-template-columns: 1fr;
  }

  .terkep-section {
    padding-block: var(--space-6);
  }

  .terkep-cta {
    padding-block: var(--space-7);
  }
}

@media (max-width: 390px) {
  .terkep-hero__title {
    font-size: 1.75rem;
  }

  .terkep-hero__lead {
    font-size: 0.95rem;
  }
}