/* Történet page styles */

#tortenet-main {
  width: 100%;
  overflow-x: hidden;
}

/* Bevezető */
.tortenet-intro {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  padding-block: var(--section-gap-mobile);
  padding-inline: var(--page-pad-mobile);
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.tortenet-intro__marker {
  font-size: var(--text-vertical-marker);
  font-weight: 600;
  line-height: var(--leading-vertical-marker);
  letter-spacing: var(--tracking-vertical-marker);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  color: var(--color-graphite-soft);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.tortenet-intro__content {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  min-width: 0;
}

.tortenet-intro__content .eyebrow {
  margin-block-end: var(--space-sm);
}

.tortenet-intro__content h1 {
  margin-block-end: var(--space-md);
}

.tortenet-intro__content .rule {
  margin-block: var(--space-lg);
}

.tortenet-intro__lead {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  max-width: 72ch;
  margin-inline: auto;
  margin-block-end: 0;
}

/* Első és második felvonás közös szerkezet */
.tortenet-act {
  padding-block: var(--section-gap-mobile);
  padding-inline: var(--page-pad-mobile);
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.tortenet-act--first {
  background-color: var(--color-ivory);
}

.tortenet-act--second {
  background-color: var(--color-midnight);
  color: var(--color-white);
}

.tortenet-act__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
}

.tortenet-act__text {
  min-width: 0;
}

.tortenet-act__text .eyebrow {
  margin-block-end: var(--space-sm);
}

.tortenet-act__text h2 {
  margin-block-end: var(--space-xl);
}

.tortenet-act__unit {
  margin-block-end: var(--space-xl);
}

.tortenet-act__unit:last-child {
  margin-block-end: 0;
}

.tortenet-act__unit h3 {
  margin-block-end: var(--space-sm);
}

.tortenet-act__unit p {
  max-width: 68ch;
  margin-block-end: 0;
}

.tortenet-act__figure {
  min-width: 0;
  margin-block-end: 0;
}

.tortenet-act__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.tortenet-act--second .tortenet-act__text .eyebrow {
  color: var(--color-dusty-rose);
}

.tortenet-act--second .tortenet-act__text h2,
.tortenet-act--second .tortenet-act__text h3 {
  color: var(--color-white);
}

.tortenet-act--second .tortenet-act__unit p {
  color: var(--color-white);
}

.tortenet-act--second .tortenet-act__unit a {
  color: var(--color-dusty-rose);
}

.tortenet-act--second .tortenet-act__unit a::after {
  background-color: var(--color-dusty-rose);
}

/* Szünet */
.tortenet-intermission {
  background-color: var(--color-chocolate);
  color: var(--color-white);
  padding-block: var(--section-gap-mobile);
  padding-inline: var(--page-pad-mobile);
}

.tortenet-intermission__content {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
}

.tortenet-intermission__content .eyebrow {
  color: var(--color-dusty-rose);
  margin-block-end: var(--space-sm);
}

.tortenet-intermission__content h2 {
  color: var(--color-white);
  margin-block-end: var(--space-lg);
}

.tortenet-intermission__content p {
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: 0;
  color: var(--color-white);
}

/* Átalakulás */
.tortenet-transformation {
  background-color: var(--color-midnight);
  color: var(--color-white);
  padding-block: var(--section-gap-mobile);
  padding-inline: var(--page-pad-mobile);
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.tortenet-transformation__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  align-items: start;
}

.tortenet-transformation__text {
  min-width: 0;
}

.tortenet-transformation__text .eyebrow {
  color: var(--color-dusty-rose);
  margin-block-end: var(--space-sm);
}

.tortenet-transformation__text h2 {
  color: var(--color-white);
  margin-block-end: var(--space-xl);
}

.tortenet-transformation__unit {
  margin-block-end: var(--space-xl);
}

.tortenet-transformation__unit:last-child {
  margin-block-end: 0;
}

.tortenet-transformation__unit h3 {
  color: var(--color-white);
  margin-block-end: var(--space-sm);
}

.tortenet-transformation__unit p {
  max-width: 68ch;
  margin-block-end: 0;
  color: var(--color-white);
}

.tortenet-transformation__figure {
  min-width: 0;
  margin-block-end: 0;
}

.tortenet-transformation__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Miért maradjon velünk */
.tortenet-why {
  background-color: var(--color-ivory);
  padding-block: var(--section-gap-mobile);
  padding-inline: var(--page-pad-mobile);
}

.tortenet-why__content {
  max-width: 800px;
  margin-inline: auto;
  text-align: left;
}

.tortenet-why__content .eyebrow {
  margin-block-end: var(--space-sm);
}

.tortenet-why__content h2 {
  margin-block-end: var(--space-lg);
}

.tortenet-why__content h3 {
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-sm);
}

.tortenet-why__content p {
  max-width: 68ch;
  margin-block-end: var(--space-md);
}

.tortenet-why__content p:last-child {
  margin-block-end: 0;
}

/* CTA */
.tortenet-cta {
  background-color: var(--color-theatre-red);
  color: var(--color-white);
  padding-block: var(--section-gap-mobile);
  padding-inline: var(--page-pad-mobile);
}

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

.tortenet-cta__content h2 {
  color: var(--color-white);
  margin-block-end: 0;
}

.tortenet-cta__content p {
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: 0;
  color: var(--color-white);
}

.tortenet-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
}

.tortenet-cta__actions .btn {
  flex: 0 0 auto;
  min-width: 220px;
}

.tortenet-cta__contact {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-white);
  margin-block-end: 0;
}

.tortenet-cta__contact a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tortenet-cta__contact a:hover {
  color: var(--color-dusty-rose);
}

/* Reszponzív */
@media (min-width: 640px) {
  .tortenet-intro,
  .tortenet-act,
  .tortenet-transformation {
    padding-inline: var(--page-pad-tablet);
  }

  .tortenet-intermission,
  .tortenet-why,
  .tortenet-cta {
    padding-inline: var(--page-pad-tablet);
  }

  .tortenet-intro,
  .tortenet-act,
  .tortenet-transformation,
  .tortenet-intermission,
  .tortenet-why,
  .tortenet-cta {
    padding-block: var(--section-gap-tablet);
  }
}

@media (min-width: 1024px) {
  .tortenet-intro,
  .tortenet-act,
  .tortenet-transformation {
    padding-inline: var(--page-pad-desktop);
  }

  .tortenet-intermission,
  .tortenet-why,
  .tortenet-cta {
    padding-inline: var(--page-pad-desktop);
  }

  .tortenet-intro,
  .tortenet-act,
  .tortenet-transformation,
  .tortenet-intermission,
  .tortenet-why,
  .tortenet-cta {
    padding-block: var(--section-gap-desktop);
  }
}

@media (min-width: 1440px) {
  .tortenet-intro,
  .tortenet-act,
  .tortenet-transformation {
    padding-inline: var(--page-pad-wide);
  }

  .tortenet-intermission,
  .tortenet-why,
  .tortenet-cta {
    padding-inline: var(--page-pad-wide);
  }
}

@media (max-width: 1023px) {
  .tortenet-intro {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .tortenet-intro__marker {
    writing-mode: horizontal-tb;
    text-align: left;
    justify-content: flex-start;
    align-self: auto;
  }

  .tortenet-act__inner,
  .tortenet-transformation__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .tortenet-act__figure,
  .tortenet-transformation__figure {
    order: 2;
  }

  .tortenet-act__text,
  .tortenet-transformation__text {
    order: 1;
  }
}

@media (max-width: 639px) {
  .tortenet-intro,
  .tortenet-act,
  .tortenet-transformation,
  .tortenet-intermission,
  .tortenet-why,
  .tortenet-cta {
    padding-inline: var(--page-pad-mobile);
  }

  .tortenet-intro__content {
    max-width: 100%;
  }

  .tortenet-intro__lead {
    max-width: 100%;
  }

  .tortenet-act__unit p,
  .tortenet-transformation__unit p,
  .tortenet-why__content p {
    max-width: 100%;
  }

  .tortenet-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tortenet-cta__actions .btn {
    width: 100%;
    min-width: 0;
  }
}