/* 01 — Home. Page-specific layout; colours, type and spacing come from tokens.css.
   Image positions are derived from the source composition (source/home.css) and
   converted to the trimmed images (work/kepek-elokeszitese.py):
     crystal      410 px canvas -> 300 px trimmed, offset 32 / 136 px
     certificate  440 px canvas -> 328 px trimmed, offset 57 / 61 px */

.page-home {
  --hero-header-h: var(--header-h-home);
  --hero-crystal-w: clamp(240px, 27.4vw, 300px);
  --hero-crystal-right: clamp(64px, 11.5vw, 126px);
  /* At 1095 px (the mockup width) the crystal sits at 181 px; on narrower
     tablets it slides down beside the certificate so it never covers the copy. */
  --hero-crystal-top: clamp(181px, calc(181px + (1095px - 100vw) * 0.8), 440px);
  --hero-certificate-w: 328px;
}

.hero {
  position: relative;
  min-height: calc(100svh - var(--hero-header-h));
  overflow: hidden;
  background: var(--color-bg-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__map {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.56);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-map-fade), transparent 40%);
}

.hero__inner {
  position: relative;
  max-width: var(--header-max);
  min-height: calc(100svh - var(--hero-header-h));
  margin: 0 auto;
  padding: var(--space-21) var(--space-12) var(--space-16);
}

.hero__copy {
  position: relative;
  z-index: 2;
  width: 64%;
}

.hero__eyebrow {
  margin-bottom: var(--space-6);
  color: var(--color-accent);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}

.hero__eyebrow::after {
  content: "";
  display: block;
  width: 96px;
  height: 1px;
  margin-top: var(--space-4);
  background: var(--color-accent);
}

.hero__title {
  margin-bottom: var(--space-9);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-tight);
}

.hero__intro {
  margin-bottom: var(--space-9);
  color: var(--color-text-muted);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-15);
}

.hero__price {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-14);
}

.hero__certificate {
  position: relative;
  z-index: 1;
  width: var(--hero-certificate-w);
  margin: var(--space-15) 0 0 var(--space-11);
}

.hero__certificate .sample-badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: var(--space-4);
}

.hero__crystal {
  position: absolute;
  z-index: 1;
  top: var(--hero-crystal-top);
  right: var(--hero-crystal-right);
  width: var(--hero-crystal-w);
  pointer-events: none;
}

.hero__crystal-img {
  display: block;
  width: 100%;
  height: auto;
}

/* The wordmark under the crystal (2026-10-18): set in type, the small crystal of the old artwork removed */
.hero__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150%;
  margin: var(--space-4) 0 0 -25%;
  text-align: center;
  text-transform: uppercase;
}

.hero__wordmark-name {
  color: var(--color-text);
  background: linear-gradient(90deg, var(--color-text) 35%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--fs-28);
  letter-spacing: var(--ls-kicker);
  line-height: 1.1;
  text-shadow: 0 0 18px var(--color-brand-glow);
}

.hero__wordmark-line {
  color: var(--color-text-muted);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-kicker);
  line-height: 1.7;
}

.hero__wordmark-line--ruled {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}

.hero__wordmark-line--ruled::before,
.hero__wordmark-line--ruled::after {
  width: var(--space-8);
  border-top: 1px solid var(--color-text-muted);
  content: "";
}

.hero__page-mark {
  position: absolute;
  bottom: var(--space-6);
  left: calc(50% - 19px);
  width: 38px;
  height: 7px;
  border: 1px solid var(--color-page-mark);
  border-radius: var(--radius-md);
}

/* Wide screens (source/home.css @min-width 1500px) */
@media (min-width: 1500px) {
  .page-home {
    --hero-crystal-w: 329px;
    --hero-crystal-right: 134px;
    --hero-crystal-top: 199px;
    --hero-certificate-w: 351px;
  }

  .hero__inner {
    padding-top: var(--space-25);
  }

  .hero__certificate {
    margin-top: var(--space-16);
    margin-left: var(--space-12);
  }
}

/* Tablet: same composition as the 1095 px mockup, fluid */
@media (max-width: 1199px) {
  .hero__copy {
    width: max(64%, 480px);
  }
}

@media (max-width: 899px) and (min-width: 768px) {
  .hero__break {
    display: none;
  }
}

/* Mobile: a single column — copy, emblem, certificate */
@media (max-width: 767px) {
  .page-home {
    --hero-header-h: var(--header-h-home-mobile);
  }

  .hero,
  .hero__inner {
    min-height: 0;
  }

  .hero__media {
    bottom: auto;
    height: 670px;
  }

  .hero__media::after {
    background: linear-gradient(0deg, var(--color-bg-deep), transparent 45%);
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    padding: var(--space-12) var(--space-6) var(--space-16);
  }

  .hero__copy {
    width: 100%;
  }

  .hero__eyebrow {
    margin-bottom: var(--space-5);
    letter-spacing: var(--ls-kicker);
  }

  .hero__title {
    margin-bottom: var(--space-6);
    font-size: clamp(1.8125rem, 7.7vw, 2.875rem);
    letter-spacing: -0.07rem;
  }

  .hero__intro {
    max-width: 360px;
    margin-bottom: var(--space-6);
  }

  .hero__break {
    display: none;
  }

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

  .hero__actions .btn {
    flex: 1 1 auto;
    padding: 0 var(--space-4);
  }

  .hero__crystal {
    position: static;
    order: 2;
    width: 210px;
    margin: var(--space-12) auto 0;
  }

  .hero__certificate {
    order: 3;
    width: min(100%, 300px);
    margin: var(--space-10) auto 0;
  }

  .hero__page-mark {
    bottom: var(--space-3);
  }
}