/* Page-owned styles for home page */

.aspect-ratio-4-5 {
  aspect-ratio: 4 / 5;
}

/* Hero */
.home-hero {
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-raised) 100%);
  position: relative;
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(61, 224, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(255, 79, 163, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.home-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.home-hero__content {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
  min-width: 0;
}

.home-hero__eyebrow {
  margin-block-end: 0;
}

.home-hero__title {
  margin-block-end: 0;
}

.home-hero__subtitle {
  margin-block-end: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
}

.home-hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 320px;
  width: 100%;
  margin-block-start: var(--space-5);
}

.home-hero__cta {
  width: 100%;
}

.home-hero__media {
  grid-column: span 7;
  min-width: 0;
  margin-block-end: 0;
}

.home-hero__image-wrap {
  box-shadow: var(--surface-overlay-shadow);
}

.home-hero__image-wrap img {
  transition: transform var(--transition-transform);
}

.home-hero__media:hover .home-hero__image-wrap img {
  transform: scale(1.02);
}

/* Section heading shared pattern */
.home-section-heading {
  margin-block-end: var(--space-6);
}

.home-section-heading .eyebrow {
  margin-block-end: var(--space-3);
}

/* Interaktív Városi Szimuláció */
.home-simulation__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-simulation__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--transition-color), transform var(--transition-transform);
}

.home-simulation__card:hover {
  border-color: var(--color-accent-cyan);
  transform: translateY(-3px);
}

.home-simulation__media {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-line);
}

.home-simulation__card h3,
.home-simulation__card p {
  padding-inline: var(--space-5);
}

.home-simulation__card h3 {
  margin-block-end: 0;
  margin-block-start: var(--space-2);
}

.home-simulation__card p {
  margin-block-end: var(--space-5);
  max-width: none;
  color: var(--color-text-secondary);
}

.home-simulation__media img {
  transition: transform var(--transition-transform);
}

.home-simulation__card:hover .home-simulation__media img {
  transform: scale(1.04);
}

/* Városi Élet és Helyszínek */
.home-city__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.home-city__text {
  grid-column: span 8;
  min-width: 0;
}

.home-city__text h2 {
  margin-block-end: var(--space-5);
}

.home-city__units {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home-city__unit h3 {
  margin-block-end: var(--space-2);
}

.home-city__unit p {
  margin-block-end: 0;
  max-width: 680px;
  color: var(--color-text-secondary);
}

.home-city__media {
  grid-column: span 4;
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height-desktop) + var(--space-5));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-city__figure {
  margin-block-end: 0;
}

.home-city__image-wrap {
  overflow: hidden;
}

.home-city__image-wrap img {
  transition: transform var(--transition-transform);
}

.home-city__image-wrap:hover img {
  transform: scale(1.03);
}

.home-city__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.home-city__gallery-item {
  overflow: hidden;
}

.home-city__gallery-item img {
  transition: transform var(--transition-transform);
}

.home-city__gallery-item:hover img {
  transform: scale(1.05);
}

/* Karakter Tervezés */
.home-character--soft {
  background-color: var(--color-ink-soft);
}

.home-character__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.home-character__inner {
  grid-column: span 6;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
}

.home-character__inner .eyebrow {
  margin-block-end: var(--space-3);
}

.home-character__inner h2 {
  margin-block-end: var(--space-5);
}

.home-character__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home-character__unit h3 {
  margin-block-end: var(--space-2);
}

.home-character__unit p {
  margin-block-end: 0;
  color: var(--color-text-secondary);
}

.home-character__media {
  grid-column: span 6;
  min-width: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-character__image-wrap {
  overflow: hidden;
  box-shadow: var(--surface-overlay-shadow);
}

.home-character__image-wrap img {
  transition: transform var(--transition-transform);
}

.home-character__media:hover .home-character__image-wrap img {
  transform: scale(1.03);
}

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

.home-character__avatar {
  overflow: hidden;
}

.home-character__avatar img {
  transition: transform var(--transition-transform);
}

.home-character__avatar:hover img {
  transform: scale(1.06);
}

/* Házépítés és Dekoráció */
.home-house__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.home-house__media {
  grid-column: span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-house__figure {
  margin-block-end: 0;
}

.home-house__image-wrap {
  overflow: hidden;
}

.home-house__image-wrap img {
  transition: transform var(--transition-transform);
}

.home-house__image-wrap:hover img {
  transform: scale(1.03);
}

.home-house__text {
  grid-column: span 8;
  min-width: 0;
  text-align: right;
}

.home-house__text .eyebrow {
  margin-block-end: var(--space-3);
}

.home-house__text h2 {
  margin-block-end: var(--space-5);
}

.home-house__units {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-end;
}

.home-house__unit {
  max-width: 680px;
  text-align: right;
}

.home-house__unit h3 {
  margin-block-end: var(--space-2);
}

.home-house__unit p {
  margin-block-end: 0;
  color: var(--color-text-secondary);
}

/* Titkok és Rejtett Tárgyak */
.home-secrets__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.home-secrets__callout {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--transition-transform);
}

.home-secrets__callout:hover {
  transform: translateY(-2px);
}

.home-secrets__media {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0 calc(var(--space-4) * -1 + 3px);
  width: calc(100% + var(--space-4) * 2 - 3px);
  border-radius: 0 var(--radius-sm) 0 0;
  overflow: hidden;
}

.home-secrets__media img {
  transition: transform var(--transition-transform);
}

.home-secrets__callout:hover .home-secrets__media img {
  transform: scale(1.04);
}

.home-secrets__callout h3 {
  margin-block-end: 0;
}

.home-secrets__callout p {
  margin-block-end: 0;
  max-width: none;
  color: var(--color-text-secondary);
}

/* Kreatív Szerepjáték */
.home-roleplay--soft {
  background-color: var(--color-ink-soft);
}

.home-roleplay__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: center;
}

.home-roleplay__media {
  grid-column: span 6;
  min-width: 0;
  margin-block-end: 0;
}

.home-roleplay__image-wrap {
  overflow: hidden;
  box-shadow: var(--surface-overlay-shadow);
}

.home-roleplay__image-wrap img {
  transition: transform var(--transition-transform);
}

.home-roleplay__media:hover .home-roleplay__image-wrap img {
  transform: scale(1.03);
}

.home-roleplay__inner {
  grid-column: span 6;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
}

.home-roleplay__inner .eyebrow {
  margin-block-end: var(--space-3);
}

.home-roleplay__inner h2 {
  margin-block-end: var(--space-5);
}

.home-roleplay__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home-roleplay__unit h3 {
  margin-block-end: var(--space-2);
}

.home-roleplay__unit p {
  margin-block-end: 0;
  color: var(--color-text-secondary);
}

/* Tippek és Trükkök */
.home-tips__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.home-tips__inner {
  grid-column: span 7;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
}

.home-tips__inner .eyebrow {
  margin-block-end: var(--space-3);
}

.home-tips__inner h2 {
  margin-block-end: var(--space-5);
}

.home-tips__list {
  margin-block-end: 0;
}

.home-tips__list li {
  margin-block-end: var(--space-4);
}

.home-tips__list li:last-child {
  margin-block-end: 0;
}

.home-tips__list h3 {
  margin-block-end: var(--space-2);
}

.home-tips__list p {
  margin-block-end: 0;
  color: var(--color-text-secondary);
}

.home-tips__media {
  grid-column: span 5;
  min-width: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: calc(var(--header-height-desktop) + var(--space-5));
}

.home-tips__image-wrap {
  overflow: hidden;
}

.home-tips__image-wrap img {
  transition: transform var(--transition-transform);
}

.home-tips__image-wrap:hover img {
  transform: scale(1.03);
}

/* Végső CTA */
.home-final-cta {
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(61, 224, 255, 0.1) 0%, transparent 60%),
    var(--color-ink-soft);
}

.home-final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: 500px;
  margin-inline: auto;
}

.home-final-cta__inner h2 {
  margin-block-end: 0;
}

.home-final-cta__text {
  margin-block-end: 0;
  color: var(--color-text-secondary);
}

.home-final-cta__button {
  margin-block-start: var(--space-2);
}

/* Jogi nyilatkozat */
.home-disclaimer {
  padding-block: var(--space-5);
}

.home-disclaimer__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.home-disclaimer__text {
  margin-block-end: 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  letter-spacing: var(--text-caption-letter-spacing);
  font-weight: var(--text-caption-weight);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Tablet breakpoint */
@media (max-width: 1023px) {
  .home-hero__inner {
    grid-template-columns: 1fr;
  }

  .home-hero__content,
  .home-hero__media {
    grid-column: auto;
  }

  .home-hero__content {
    align-items: center;
    text-align: center;
  }

  .home-hero__cta-group {
    margin-inline: auto;
  }

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

  .home-simulation__card:last-child {
    grid-column: span 2;
  }

  .home-city__inner,
  .home-house__inner,
  .home-character__layout,
  .home-roleplay__layout,
  .home-tips__layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-city__text,
  .home-house__text,
  .home-character__inner,
  .home-character__media,
  .home-roleplay__media,
  .home-roleplay__inner,
  .home-tips__inner,
  .home-tips__media {
    grid-column: span 6;
  }

  .home-city__media,
  .home-house__media,
  .home-tips__media {
    grid-column: span 6;
    position: static;
  }

  .home-house__text,
  .home-house__unit {
    text-align: left;
  }

  .home-house__units {
    align-items: flex-start;
  }

  .home-house__unit {
    max-width: none;
  }

  .home-secrets__grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile breakpoint */
@media (max-width: 639px) {
  .home-hero__cta-group {
    max-width: 100%;
  }

  .home-simulation__grid {
    grid-template-columns: 1fr;
  }

  .home-simulation__card:last-child {
    grid-column: auto;
  }

  .home-city__inner,
  .home-house__inner,
  .home-character__layout,
  .home-roleplay__layout,
  .home-tips__layout {
    grid-template-columns: 1fr;
  }

  .home-city__text,
  .home-city__media,
  .home-house__media,
  .home-house__text,
  .home-character__inner,
  .home-character__media,
  .home-roleplay__media,
  .home-roleplay__inner,
  .home-tips__inner,
  .home-tips__media {
    grid-column: auto;
  }

  .home-city__unit p,
  .home-house__unit p {
    max-width: none;
  }

  .home-house__text,
  .home-house__unit {
    text-align: left;
  }

  .home-house__units {
    align-items: flex-start;
  }

  .home-city__gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-simulation__card,
  .home-secrets__callout,
  .home-city__image-wrap img,
  .home-city__gallery-item img,
  .home-house__image-wrap img,
  .home-hero__image-wrap img,
  .home-character__image-wrap img,
  .home-character__avatar img,
  .home-roleplay__image-wrap img,
  .home-tips__image-wrap img,
  .home-simulation__media img,
  .home-secrets__media img {
    transition: none;
  }

  .home-secrets__callout:hover,
  .home-simulation__card:hover {
    transform: none;
  }

  .home-city__image-wrap:hover img,
  .home-city__gallery-item:hover img,
  .home-house__image-wrap:hover img,
  .home-hero__media:hover .home-hero__image-wrap img,
  .home-character__media:hover .home-character__image-wrap img,
  .home-character__avatar:hover img,
  .home-roleplay__media:hover .home-roleplay__image-wrap img,
  .home-tips__image-wrap:hover img,
  .home-simulation__card:hover .home-simulation__media img,
  .home-secrets__callout:hover .home-secrets__media img {
    transform: none;
  }
}