/* Page-owned styles for Rejtvenyek page */
.page-rejtvenyek {
  --rejtvenyek-section-space: var(--space-3xl);
}

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

/* Hero section */
.hero-rejtvenyek {
  background: linear-gradient(135deg, rgba(247, 201, 182, 0.35), rgba(197, 184, 212, 0.25));
  overflow: hidden;
}

.hero-rejtvenyek__inner {
  display: grid;
  grid-template-columns: minmax(0, 70%) minmax(0, 60%);
  align-items: center;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl) var(--space-4xl);
}

.hero-rejtvenyek__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 560px;
  min-width: 0;
}

.hero-rejtvenyek__title {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  margin-block-end: var(--space-sm);
}

.hero-rejtvenyek__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-deep-plum);
  margin-block-end: 0;
}

.hero-rejtvenyek__supporting {
  color: var(--color-plum-soft);
  margin-block-end: var(--space-lg);
}

.hero-rejtvenyek__cta {
  margin-block-start: var(--space-sm);
}

.hero-rejtvenyek__media {
  position: relative;
  min-width: 0;
  width: 100%;
  margin-inline-end: calc(-1 * var(--container-padding-desktop));
}

.hero-rejtvenyek__image {
  width: 100%;
  height: auto;
  border-radius: 0;
  display: block;
  transform: scale(1.02);
  transition: transform 0.6s ease-out;
}

/* Mechanika section */
.mechanika-rejtvenyek {
  background-color: var(--color-surface-tint);
  position: relative;
}

.mechanika-rejtvenyek::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(197, 184, 212, 0.15) 25%, transparent 25%, transparent 75%, rgba(197, 184, 212, 0.15) 75%), linear-gradient(45deg, rgba(197, 184, 212, 0.15) 25%, transparent 25%, transparent 75%, rgba(197, 184, 212, 0.15) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  opacity: 0.4;
  pointer-events: none;
}

.mechanika-rejtvenyek__container {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
}

.mechanika-rejtvenyek__title {
  margin-block-end: var(--space-xl);
}

.mechanika-rejtvenyek__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.mechanika-rejtvenyek__block {
  max-width: 600px;
  min-width: 0;
}

.mechanika-rejtvenyek__subtitle {
  margin-block-end: var(--space-sm);
}

.mechanika-rejtvenyek__list {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
}

.mechanika-rejtvenyek__list li {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-hover);
}

.mechanika-rejtvenyek__list li:hover {
  background-color: rgba(217, 167, 160, 0.15);
}

.mechanika-rejtvenyek__quote {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  border-inline-start: none;
  padding-inline-start: 0;
  margin-block-end: 0;
}

.mechanika-rejtvenyek__quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-deep-plum);
  border-inline-start: 3px solid var(--color-pale-coral);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
  text-align: left;
}

/* Tipusok section */
.tipusok-rejtvenyek {
  background-color: var(--color-ivory);
}

.tipusok-rejtvenyek__title {
  text-align: center;
  margin-block-end: var(--space-2xl);
}

.tipusok-rejtvenyek__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.tipusok-rejtvenyek__card {
  background-color: var(--color-surface-tint);
  border: var(--border-thin) solid var(--border-color-rose);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  min-width: 0;
  transition: transform var(--transition-hover), box-shadow var(--transition-hover);
}

.tipusok-rejtvenyek__card--offset {
  transform: translateY(var(--space-md));
}

.tipusok-rejtvenyek__card:hover {
  transform: translateY(calc(var(--space-md) - 2px));
  box-shadow: 0 8px 20px rgba(62, 44, 65, 0.1);
}

.tipusok-rejtvenyek__card--offset:hover {
  transform: translateY(calc(var(--space-md) - 2px));
}

.tipusok-rejtvenyek__card-title {
  margin-block-end: var(--space-sm);
}

.tipusok-rejtvenyek__card p {
  max-width: 300px;
  margin-block-end: 0;
}

/* Nehezseg section */
.nehezseg-rejtvenyek {
  background: linear-gradient(180deg, rgba(197, 184, 212, 0.2), rgba(247, 201, 182, 0.15));
}

.nehezseg-rejtvenyek__container {
  max-width: 800px;
  margin-inline: auto;
}

.nehezseg-rejtvenyek__title {
  margin-block-end: var(--space-xl);
}

.nehezseg-rejtvenyek__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.nehezseg-rejtvenyek__block {
  max-width: 600px;
  min-width: 0;
}

.nehezseg-rejtvenyek__subtitle {
  margin-block-end: var(--space-sm);
}

.nehezseg-rejtvenyek__list {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
}

/* Erzekek section */
.erzekek-rejtvenyek {
  background-color: var(--color-ivory);
}

.erzekek-rejtvenyek__title {
  text-align: center;
  margin-block-end: var(--space-2xl);
}

.erzekek-rejtvenyek__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: start;
}

.erzekek-rejtvenyek__card {
  background-color: var(--color-surface-tint);
  border: var(--border-thin) solid var(--border-color-rose);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  min-width: 0;
  transition: transform var(--transition-hover);
}

.erzekek-rejtvenyek__card--offset {
  transform: translateY(var(--space-md));
}

.erzekek-rejtvenyek__card:hover {
  transform: translateY(calc(var(--space-md) - 2px));
}

.erzekek-rejtvenyek__card--offset:hover {
  transform: translateY(calc(var(--space-md) - 2px));
}

.erzekek-rejtvenyek__card-title {
  margin-block-end: var(--space-sm);
}

.erzekek-rejtvenyek__card p {
  max-width: 350px;
  margin-block-end: 0;
}

/* Orokseg section */
.orokseg-rejtvenyek {
  background-color: var(--color-surface-tint);
  position: relative;
}

.orokseg-rejtvenyek::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(197, 184, 212, 0.12) 25%, transparent 25%, transparent 75%, rgba(197, 184, 212, 0.12) 75%), linear-gradient(45deg, rgba(197, 184, 212, 0.12) 25%, transparent 25%, transparent 75%, rgba(197, 184, 212, 0.12) 75%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  opacity: 0.35;
  pointer-events: none;
}

.orokseg-rejtvenyek__container {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
}

.orokseg-rejtvenyek__title {
  margin-block-end: var(--space-xl);
}

.orokseg-rejtvenyek__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.orokseg-rejtvenyek__block {
  max-width: 600px;
  min-width: 0;
}

.orokseg-rejtvenyek__subtitle {
  margin-block-end: var(--space-sm);
}

.orokseg-rejtvenyek__list {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
}

/* Galeria section */
.galeria-rejtvenyek {
  background-color: var(--color-ivory);
}

.galeria-rejtvenyek__title {
  margin-block-end: var(--space-md);
}

.galeria-rejtvenyek__intro {
  max-width: 600px;
  margin-block-end: var(--space-xl);
}

.galeria-rejtvenyek__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.galeria-rejtvenyek__item {
  margin-block-end: 0;
  min-width: 0;
  transition: transform var(--transition-hover);
}

.galeria-rejtvenyek__item:hover {
  transform: scale(1.02);
}

.galeria-rejtvenyek__item--large {
  grid-column: span 3;
}

.galeria-rejtvenyek__item--small {
  grid-column: span 2;
  margin-block-start: var(--space-xl);
}

.galeria-rejtvenyek__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.galeria-rejtvenyek__item figcaption {
  margin-block-start: var(--space-sm);
}

/* Osszegzes section */
.osszegzes-rejtvenyek {
  background-color: var(--color-deep-plum);
  color: var(--color-ivory);
  text-align: center;
}

.osszegzes-rejtvenyek__container {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.osszegzes-rejtvenyek__title {
  color: var(--color-ivory);
  margin-block-end: 0;
}

.osszegzes-rejtvenyek__text {
  color: var(--color-ivory);
  max-width: 600px;
  margin-block-end: 0;
}

.osszegzes-rejtvenyek__cta {
  background-color: var(--color-dusty-rose);
  color: var(--color-ivory);
}

.osszegzes-rejtvenyek__cta:hover {
  background-color: var(--color-pale-coral);
  color: var(--color-deep-plum);
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-rejtvenyek__inner {
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    gap: var(--space-xl);
  }

  .hero-rejtvenyek__media {
    margin-inline-end: calc(-1 * var(--container-padding-mobile));
  }

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

  .tipusok-rejtvenyek__card--offset {
    transform: none;
  }

  .tipusok-rejtvenyek__card--offset:hover {
    transform: translateY(-2px);
  }

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

  .erzekek-rejtvenyek__card--offset {
    transform: none;
  }

  .erzekek-rejtvenyek__card--offset:hover {
    transform: translateY(-2px);
  }

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

  .galeria-rejtvenyek__item--large,
  .galeria-rejtvenyek__item--small {
    grid-column: span 1;
    margin-block-start: 0;
  }
}

/* Mobile breakpoint */
@media (max-width: 767px) {
  .page-rejtvenyek section {
    padding-block: var(--space-2xl);
  }

  .hero-rejtvenyek__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .hero-rejtvenyek__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .hero-rejtvenyek__title {
    font-size: 2.5rem;
  }

  .hero-rejtvenyek__media {
    margin-inline-end: 0;
  }

  .tipusok-rejtvenyek__grid,
  .erzekek-rejtvenyek__grid,
  .galeria-rejtvenyek__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tipusok-rejtvenyek__card--offset,
  .erzekek-rejtvenyek__card--offset {
    transform: none;
  }

  .tipusok-rejtvenyek__card--offset:hover,
  .erzekek-rejtvenyek__card--offset:hover {
    transform: translateY(-2px);
  }

  .galeria-rejtvenyek__item--large,
  .galeria-rejtvenyek__item--small {
    grid-column: span 1;
    margin-block-start: 0;
  }

  .osszegzes-rejtvenyek__cta {
    width: 100%;
  }
}