.kartyaszalon-page {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--color-cosmic-black);
}

.kartyaszalon-page .section {
  position: relative;
}

.kartyaszalon-page .section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(13, 16, 32, 0.72), rgba(13, 16, 32, 0.28));
}

.kartyaszalon-hero {
  padding: calc(var(--space-11) + var(--space-6)) 0 var(--space-10);
}

.kartyaszalon-hero__grid,
.kartyaszalon-materials__grid,
.kartyaszalon-kitchen__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: center;
}

.kartyaszalon-hero__copy,
.kartyaszalon-hero__visual,
.kartyaszalon-materials__copy,
.kartyaszalon-materials__visual,
.kartyaszalon-kitchen__copy,
.kartyaszalon-kitchen__panels {
  min-width: 0;
  width: 100%;
}

.kartyaszalon-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.kartyaszalon-hero__copy > * {
  margin: 0;
}

.kartyaszalon-hero__copy h1 {
  max-width: 11ch;
}

.kartyaszalon-hero__copy .lead {
  max-width: 44ch;
}

.kartyaszalon-hero__actions {
  width: 100%;
}

.kartyaszalon-hero__visual {
  position: relative;
  padding-bottom: var(--space-8);
}

.kartyaszalon-hero__image-frame,
.kartyaszalon-materials__image-frame,
.kartyaszalon-atmosphere__image-frame {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-deep-space);
}

.kartyaszalon-hero__image-frame {
  aspect-ratio: 16 / 10;
}

.kartyaszalon-hero__image-frame::after,
.kartyaszalon-materials__image-frame::after,
.kartyaszalon-atmosphere__image-frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 9, 18, 0.78), transparent 65%);
  content: "";
  pointer-events: none;
}

.kartyaszalon-hero__image-frame img,
.kartyaszalon-materials__image-frame img,
.kartyaszalon-atmosphere__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kartyaszalon-hero__fragments {
  position: absolute;
  right: calc(var(--space-4) * -1);
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  width: min(100%, 31rem);
}

.kartyaszalon-hero__fragment {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.kartyaszalon-hero__fragment > * {
  margin: 0;
}

.kartyaszalon-hero__fragment p {
  color: var(--color-platinum);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.kartyaszalon-presence__head,
.kartyaszalon-rhythm__head,
.kartyaszalon-principles__head,
.kartyaszalon-meet__head {
  width: 100%;
}

.kartyaszalon-presence__head {
  max-width: 50ch;
  margin-bottom: var(--space-7);
}

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

.kartyaszalon-presence__card,
.kartyaszalon-principles__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kartyaszalon-presence__card > *,
.kartyaszalon-principles__card > * {
  margin: 0;
}

.kartyaszalon-presence__card p {
  max-width: 30ch;
}

.kartyaszalon-number {
  color: var(--color-cyan);
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.kartyaszalon-materials__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

.kartyaszalon-materials__copy {
  max-width: 48ch;
}

.kartyaszalon-materials__visual {
  position: relative;
  padding-bottom: var(--space-8);
}

.kartyaszalon-materials__image-frame {
  aspect-ratio: 4 / 3;
}

.kartyaszalon-materials__panels {
  position: absolute;
  right: var(--space-4);
  bottom: 0;
  left: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-3);
}

.kartyaszalon-materials__panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.kartyaszalon-materials__panel > * {
  margin: 0;
}

.kartyaszalon-materials__panel p {
  max-width: 28ch;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.kartyaszalon-rhythm {
  background: var(--color-deep-space);
}

.kartyaszalon-rhythm__head {
  max-width: 46ch;
  margin-bottom: var(--space-7);
}

.kartyaszalon-rhythm__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.kartyaszalon-rhythm__grid::before {
  position: absolute;
  top: var(--space-3);
  bottom: var(--space-3);
  left: 50%;
  width: 1px;
  background: linear-gradient(var(--color-indigo), rgba(73, 214, 232, 0.08), var(--color-violet));
  content: "";
  opacity: 0.5;
}

.kartyaszalon-rhythm__item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
}

.kartyaszalon-rhythm__item:nth-child(2) {
  margin-top: var(--space-6);
}

.kartyaszalon-rhythm__item > * {
  margin: 0;
}

.kartyaszalon-rhythm__item p {
  max-width: 34ch;
}

.kartyaszalon-rhythm__item--key {
  border-image: linear-gradient(90deg, var(--color-violet), var(--color-neon-pink)) 1;
}

.kartyaszalon-atmosphere__image-frame {
  aspect-ratio: 16 / 10;
}

.kartyaszalon-atmosphere__overlay {
  position: absolute;
  z-index: 1;
  bottom: var(--space-6);
  left: var(--space-6);
  width: min(32%, 28ch);
  color: var(--color-platinum);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: var(--leading-h4);
}

.kartyaszalon-atmosphere__copy {
  width: calc((100% - (var(--space-5) * 11)) / 12 * 7 + (var(--space-5) * 6));
  max-width: 52ch;
  margin-top: var(--space-7);
}

.kartyaszalon-atmosphere__narrow {
  max-width: 44ch;
}

.kartyaszalon-principles__head {
  max-width: 48ch;
  margin-bottom: var(--space-7);
}

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

.kartyaszalon-principles__card {
  gap: var(--space-3);
}

.kartyaszalon-principles__card p {
  max-width: 26ch;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.kartyaszalon-principles__location {
  max-width: 55ch;
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.kartyaszalon-kitchen__copy {
  max-width: 54ch;
}

.kartyaszalon-kitchen__copy .button {
  margin-top: var(--space-2);
}

.kartyaszalon-kitchen__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.kartyaszalon-kitchen__panels > article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.kartyaszalon-kitchen__panels > article > * {
  margin: 0;
}

.kartyaszalon-kitchen__panels p {
  max-width: 30ch;
}

.kartyaszalon-meet__head {
  max-width: 50ch;
  margin-bottom: var(--space-7);
}

.kartyaszalon-meet__head .meta {
  margin-bottom: 0;
}

.kartyaszalon-meet__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: stretch;
}

.kartyaszalon-meet__booking,
.kartyaszalon-meet__explore {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kartyaszalon-meet__booking > *,
.kartyaszalon-meet__explore > * {
  margin: 0;
}

.kartyaszalon-meet__booking p,
.kartyaszalon-meet__explore p {
  max-width: 32ch;
}

.kartyaszalon-summary__inner {
  display: flex;
  width: min(100%, 58rem);
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.kartyaszalon-summary__inner > * {
  margin: 0;
}

.kartyaszalon-summary__inner h2 {
  max-width: 30ch;
}

.kartyaszalon-summary__inner .lead {
  max-width: 48ch;
}

.kartyaszalon-final__panel {
  display: flex;
  width: min(100%, 52rem);
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-inline: auto;
  border-color: transparent;
  background:
    linear-gradient(var(--color-smoke-glass-strong), var(--color-smoke-glass-strong)) padding-box,
    linear-gradient(120deg, var(--color-violet), var(--color-neon-pink)) border-box;
  text-align: center;
}

.kartyaszalon-final__panel > * {
  margin: 0;
}

.kartyaszalon-final__panel p {
  max-width: 42ch;
}

.kartyaszalon-final__panel .button {
  min-width: 11.25rem;
  min-height: 3rem;
}

@media (max-width: 1100px) {
  .kartyaszalon-principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .kartyaszalon-hero__grid,
  .kartyaszalon-materials__grid,
  .kartyaszalon-kitchen__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kartyaszalon-hero__copy,
  .kartyaszalon-materials__copy,
  .kartyaszalon-kitchen__copy {
    max-width: 54ch;
  }

  .kartyaszalon-hero__visual {
    padding-bottom: 0;
  }

  .kartyaszalon-hero__fragments,
  .kartyaszalon-materials__panels {
    position: static;
    width: 100%;
    margin-top: var(--space-4);
  }

  .kartyaszalon-materials__visual {
    padding-bottom: 0;
  }

  .kartyaszalon-atmosphere__copy {
    width: 100%;
    max-width: 62ch;
  }

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

@media (max-width: 980px) {
  .kartyaszalon-presence__grid,
  .kartyaszalon-rhythm__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kartyaszalon-presence__card:last-child,
  .kartyaszalon-rhythm__item:last-child {
    grid-column: 1 / -1;
  }

  .kartyaszalon-rhythm__grid::before {
    left: var(--space-5);
  }

  .kartyaszalon-rhythm__item:nth-child(2) {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .kartyaszalon-hero {
    padding-top: calc(var(--space-10) + var(--space-5));
  }

  .kartyaszalon-hero__grid,
  .kartyaszalon-materials__grid,
  .kartyaszalon-kitchen__grid {
    gap: var(--space-6);
  }

  .kartyaszalon-hero__copy h1 {
    max-width: none;
    font-size: clamp(2.5rem, 12vw, 3rem);
  }

  .kartyaszalon-hero__copy .lead {
    max-width: none;
    font-size: 1.0625rem;
  }

  .kartyaszalon-hero__fragments,
  .kartyaszalon-materials__panels,
  .kartyaszalon-presence__grid,
  .kartyaszalon-rhythm__grid,
  .kartyaszalon-principles__grid,
  .kartyaszalon-meet__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kartyaszalon-hero__image-frame,
  .kartyaszalon-atmosphere__image-frame {
    aspect-ratio: 4 / 3;
  }

  .kartyaszalon-materials__image-frame {
    aspect-ratio: 4 / 3;
  }

  .kartyaszalon-materials__panel p,
  .kartyaszalon-presence__card p,
  .kartyaszalon-rhythm__item p,
  .kartyaszalon-principles__card p,
  .kartyaszalon-kitchen__panels p,
  .kartyaszalon-meet__booking p,
  .kartyaszalon-meet__explore p {
    max-width: none;
  }

  .kartyaszalon-presence__card:last-child,
  .kartyaszalon-rhythm__item:last-child {
    grid-column: auto;
  }

  .kartyaszalon-rhythm__grid {
    gap: var(--space-4);
    padding-left: var(--space-5);
  }

  .kartyaszalon-rhythm__grid::before {
    left: var(--space-2);
  }

  .kartyaszalon-atmosphere__overlay {
    bottom: var(--space-5);
    left: var(--space-5);
    width: min(80%, 28ch);
  }

  .kartyaszalon-atmosphere__copy,
  .kartyaszalon-atmosphere__narrow {
    max-width: none;
  }

  .kartyaszalon-summary__inner {
    padding: var(--space-7) var(--space-5);
  }

  .kartyaszalon-final__panel {
    padding: var(--space-5);
  }

  .kartyaszalon-final__panel .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kartyaszalon-page .float-fragment {
    animation: none;
  }
}