/* Stratégia oldal stílusai – csak a main-en belüli, oldal-tulajdonú elemekre */

.strategia-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

@media (min-width: 640px) {
  .strategia-container {
    padding-inline: var(--container-pad-tablet);
  }
}

@media (min-width: 1024px) {
  .strategia-container {
    padding-inline: var(--container-pad-desktop);
  }
}

/* Hero szekció */
.strategia-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(11, 16, 38, 0.82) 0%, rgba(11, 16, 38, 0.94) 100%);
  padding-block: var(--space-2xl) var(--space-3xl);
  overflow: hidden;
}

.strategia-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

.strategia-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  min-width: 0;
}

.strategia-hero__content h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  color: var(--color-warm-parchment);
  margin-block-end: 0;
  max-width: 18ch;
}

.strategia-hero__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-leading);
  color: var(--color-warm-parchment);
  max-width: 55ch;
  margin-block-end: 0;
}

.strategia-hero__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: 55ch;
}

.strategia-hero__list li {
  position: relative;
  padding-inline-start: var(--space-md);
  color: var(--color-lavender-mist);
}

.strategia-hero__list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--color-golden-glow);
}

.strategia-hero__cta {
  margin-block-start: var(--space-xs);
}

.strategia-hero__media {
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color-gold);
  box-shadow: var(--shadow-lifted);
}

.strategia-hero__image {
  width: 100%;
  height: 40vh;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .strategia-hero__inner {
    padding-inline: var(--container-pad-tablet);
  }

  .strategia-hero__image {
    height: 48vh;
  }
}

@media (min-width: 1024px) {
  .strategia-hero {
    padding-block: var(--space-3xl) var(--space-4xl);
  }

  .strategia-hero__inner {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    gap: var(--space-2xl);
    padding-inline: var(--container-pad-desktop);
  }

  .strategia-hero__image {
    height: 56vh;
  }
}

/* Szekció általános */
.strategia-section {
  padding-block: var(--space-2xl);
  position: relative;
}

.strategia-section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(26, 31, 61, 0.35) 0%, rgba(11, 16, 38, 0) 100%);
}

.strategia-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
  max-width: 65ch;
  margin-inline: auto;
  text-align: center;
}

.strategia-section__header h2 {
  margin-block-end: 0;
}

.strategia-section__intro {
  color: var(--color-lavender-mist);
  margin-block-end: 0;
}

/* Kártyák */
.strategia-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.strategia-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-color-gold);
  box-shadow: var(--shadow-lifted);
}

.strategia-card__icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-golden-glow);
  margin-block-end: var(--space-2xs);
}

.strategia-card h3 {
  margin-block-end: 0;
  color: var(--color-warm-parchment);
}

.strategia-card p {
  margin-block-end: 0;
  color: var(--color-warm-parchment);
  max-width: 45ch;
}

/* Osztályok rács */
.strategia-osztalyok__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.strategia-osztaly-card {
  min-width: 0;
}

@media (min-width: 640px) {
  .strategia-osztalyok__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .strategia-osztalyok__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Frakciók */
.strategia-frakciok__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.strategia-frakciok__text {
  min-width: 0;
}

.strategia-frakciok__text h3,
.strategia-frakciok__examples h3 {
  margin-block-end: var(--space-sm);
}

.strategia-frakciok__text p,
.strategia-frakciok__examples p {
  max-width: 65ch;
  margin-block-end: 0;
}

.strategia-frakciok__diagram {
  position: relative;
  min-height: 220px;
  background: rgba(26, 31, 61, 0.6);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-width: 0;
}

.strategia-frakciok__node {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-indigo-veil);
  border: 1px solid var(--border-color-lavender);
  font-weight: 600;
  color: var(--color-warm-parchment);
  text-align: center;
  min-width: 100px;
}

.strategia-frakciok__node--nature {
  border-color: rgba(78, 205, 196, 0.7);
}

.strategia-frakciok__node--tech {
  border-color: rgba(242, 201, 76, 0.7);
}

.strategia-frakciok__node--magic {
  border-color: rgba(184, 169, 232, 0.7);
}

.strategia-frakciok__link {
  position: absolute;
  height: 2px;
  background: var(--color-golden-glow);
  opacity: 0.5;
  transform-origin: left center;
}

.strategia-frakciok__link--1 {
  width: 40%;
  top: 35%;
  left: 20%;
  transform: rotate(25deg);
}

.strategia-frakciok__link--2 {
  width: 40%;
  top: 55%;
  left: 40%;
  transform: rotate(-20deg);
}

.strategia-frakciok__examples {
  min-width: 0;
}

.strategia-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-sm);
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: 65ch;
}

.strategia-list li {
  position: relative;
  padding-inline-start: var(--space-md);
  color: var(--color-warm-parchment);
}

.strategia-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-golden-glow);
}

@media (min-width: 1024px) {
  .strategia-frakciok__layout {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    align-items: start;
  }

  .strategia-frakciok__diagram {
    min-height: 260px;
  }
}

/* Formációk */
.strategia-formaciok__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.strategia-formacio-card {
  min-width: 0;
}

@media (min-width: 640px) {
  .strategia-formaciok__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .strategia-formaciok__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Pozicionálás */
.strategia-pozicionalas__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.strategia-pozicionalas__text {
  min-width: 0;
}

.strategia-pozicionalas__text h3,
.strategia-pozicionalas__tips h3 {
  margin-block-end: var(--space-sm);
}

.strategia-pozicionalas__text p,
.strategia-pozicionalas__tips p {
  max-width: 65ch;
  margin-block-end: 0;
}

.strategia-pozicionalas__diagram {
  background: rgba(26, 31, 61, 0.6);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.strategia-pozicionalas__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}

.strategia-pozicionalas__row--front {
  border-block-end: 1px dashed var(--border-color-lavender);
  padding-block-end: var(--space-xs);
}

.strategia-pozicionalas__slot {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-indigo-veil);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption-size);
  color: var(--color-warm-parchment);
  min-width: 70px;
  text-align: center;
}

@media (min-width: 1024px) {
  .strategia-pozicionalas__layout {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    align-items: start;
  }
}

/* Automatikus harc */
.strategia-auto__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.strategia-auto__block {
  min-width: 0;
  background: rgba(26, 31, 61, 0.45);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.strategia-auto__block h3 {
  margin-block-end: var(--space-sm);
}

.strategia-auto__block p {
  max-width: 65ch;
  margin-block-end: 0;
}

.strategia-auto__block .strategia-list {
  margin-block-start: var(--space-sm);
}

@media (min-width: 1024px) {
  .strategia-auto__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* AFK jutalmak */
.strategia-afk__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.strategia-afk__block {
  min-width: 0;
  background: rgba(26, 31, 61, 0.45);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.strategia-afk__block h3 {
  margin-block-end: var(--space-sm);
}

.strategia-afk__block p {
  max-width: 65ch;
  margin-block-end: 0;
}

.strategia-afk__block .strategia-list {
  margin-block-start: var(--space-sm);
}

@media (min-width: 1024px) {
  .strategia-afk__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Megosztott szintek */
.strategia-megosztott__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.strategia-megosztott__block {
  min-width: 0;
  background: rgba(26, 31, 61, 0.45);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.strategia-megosztott__block h3 {
  margin-block-end: var(--space-sm);
}

.strategia-megosztott__block p {
  max-width: 65ch;
  margin-block-end: 0;
}

.strategia-megosztott__diagram {
  margin-block-start: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: rgba(11, 16, 38, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  min-width: 0;
}

.strategia-megosztott__hub {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-golden-glow);
  color: var(--color-deep-indigo-text);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-align: center;
  min-width: 100px;
}

.strategia-megosztott__branch {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-indigo-veil);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-sm);
  color: var(--color-warm-parchment);
  text-align: center;
  min-width: 80px;
}

@media (min-width: 1024px) {
  .strategia-megosztott__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Felfedezés */
.strategia-felfedezes__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.strategia-felfedezes__text {
  min-width: 0;
}

.strategia-felfedezes__text h3,
.strategia-felfedezes__integration h3 {
  margin-block-end: var(--space-sm);
}

.strategia-felfedezes__text p,
.strategia-felfedezes__integration p {
  max-width: 65ch;
  margin-block-end: 0;
}

.strategia-felfedezes__media {
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color-gold);
  box-shadow: var(--shadow-soft);
}

.strategia-felfedezes__image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-base);
}

.strategia-felfedezes__media:hover .strategia-felfedezes__image {
  transform: scale(1.03);
}

.strategia-felfedezes__integration {
  min-width: 0;
}

@media (min-width: 1024px) {
  .strategia-felfedezes__layout {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    align-items: start;
  }
}

/* Összefoglalás */
.strategia-osszefoglalas__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.strategia-osszefoglalas__block {
  min-width: 0;
  background: rgba(26, 31, 61, 0.45);
  border: 1px solid var(--border-color-lavender);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.strategia-osszefoglalas__block h3 {
  margin-block-end: var(--space-sm);
}

.strategia-osszefoglalas__block p {
  max-width: 65ch;
  margin-block-end: 0;
}

.strategia-osszefoglalas__block .strategia-list {
  margin-block-start: var(--space-sm);
}

.strategia-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.strategia-cta {
  min-width: 0;
}

@media (min-width: 1024px) {
  .strategia-osszefoglalas__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Beúszó animáció */
.strategia-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.strategia-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .strategia-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .strategia-hero__image,
  .strategia-felfedezes__image {
    transition: none;
  }

  .strategia-card:hover {
    transform: none;
  }

  .strategia-felfedezes__media:hover .strategia-felfedezes__image {
    transform: none;
  }
}