/* Lakara: home hero styles (page 17, "Photographic Fold"), ported from design/hero.html. */

.elementor-kit-8.elementor-kit-8 .hero {
  display: grid;
  grid-template-areas: "stack";
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  height: min(calc(100dvh - var(--lakara-header-h) - var(--lakara-space-md)), 940px);
  min-height: 560px;
  overflow: hidden;

  background: var(--lakara-surface-alt);
}

.elementor-kit-8.elementor-kit-8 .hero__img,
.elementor-kit-8.elementor-kit-8 .hero__wash,
.elementor-kit-8.elementor-kit-8 .hero__content {
  grid-area: stack;
  min-width: 0;
  min-height: 0;
}

.elementor-kit-8.elementor-kit-8 .hero__img {
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  object-position: 68% 38%;
}

.elementor-kit-8.elementor-kit-8 .hero__wash {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--lakara-surface) 82%, transparent) 0%,
    color-mix(in srgb, var(--lakara-surface) 52%, transparent) 24%,
    transparent 50%
  );
}

.elementor-kit-8.elementor-kit-8 .hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--lakara-space-md) var(--lakara-space-lg);
}

.elementor-kit-8.elementor-kit-8 .hero__text {
  display: block;
  max-width: 32rem;
  margin-left: var(--lakara-space-lg);
  padding: 0;
  color: var(--lakara-ink);
}

.elementor-kit-8.elementor-kit-8 .hero__heading {
  font-family: var(--lakara-font-head);

  font-weight: 700;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.75rem;
  max-width: 18ch;
  text-wrap: balance;

  overflow-wrap: anywhere;
  min-width: 0;
  color: var(--lakara-ink);
}

.elementor-kit-8.elementor-kit-8 .hero__sub {
  font-family: var(--lakara-font-body);
  font-weight: 400;
  font-size: var(--lakara-size-subhead);
  line-height: 1.5;
  color: var(--lakara-ink-soft);
  margin: 0 0 var(--lakara-space-md);
  max-width: 34ch;
  text-wrap: pretty;
}

.elementor-kit-8.elementor-kit-8 .hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: auto;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 0 4px;
  font-family: var(--lakara-font-body);
  font-weight: 400;
  font-size: var(--lakara-size-label);

  line-height: 1.65;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lakara-gold-ink);
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 0 currentColor;
  transition: box-shadow var(--lakara-dur) var(--lakara-ease),
              color var(--lakara-dur) var(--lakara-ease);
}

.elementor-kit-8.elementor-kit-8 .hero__cta::after {
  content: '';
  flex: none;
  width: 16px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' viewBox='0 0 16 9' fill='none'%3E%3Cpath d='M0 4.5h14M10.5 1 14 4.5 10.5 8' stroke='%23000' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' viewBox='0 0 16 9' fill='none'%3E%3Cpath d='M0 4.5h14M10.5 1 14 4.5 10.5 8' stroke='%23000' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
}

.elementor-kit-8.elementor-kit-8 .hero__cta:hover,
.elementor-kit-8.elementor-kit-8 .hero__cta:focus-visible {
  box-shadow: inset 0 -2px 0 0 currentColor;
}

.elementor-kit-8.elementor-kit-8 .hero__cta:active {
  color: var(--lakara-gold-deep);
  box-shadow: inset 0 -2px 0 0 currentColor;
}

@media (max-width: 1023px) {
  .elementor-kit-8.elementor-kit-8 .hero {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: var(--lakara-surface);
  }

  .elementor-kit-8.elementor-kit-8 .hero__img {
    display: block;
    width: 100%;
    height: 64dvh;
    min-height: 400px;

    object-position: 86% 26%;
  }

  .elementor-kit-8.elementor-kit-8 .hero__wash {
    display: none;
  }

  .elementor-kit-8.elementor-kit-8 .hero__content {
    display: block;
    padding: var(--lakara-space-md) var(--lakara-space-md) var(--lakara-space-lg);
  }

  .elementor-kit-8.elementor-kit-8 .hero__text {
    max-width: 46ch;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .elementor-kit-8.elementor-kit-8 .hero__img {
    height: 58dvh;
    min-height: 340px;

    object-position: 76% 28%;
  }

  .elementor-kit-8.elementor-kit-8 .hero__content {
    padding: var(--lakara-space-md) var(--lakara-space-sm) var(--lakara-space-lg);
  }

  .elementor-kit-8.elementor-kit-8 .hero__text {
    max-width: none;
  }

  .elementor-kit-8.elementor-kit-8 .hero__heading {
    font-size: clamp(2.125rem, 9.2vw, 2.5rem);
  }

  .elementor-kit-8.elementor-kit-8 .hero__sub {
    margin-top: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-kit-8.elementor-kit-8 .hero__cta {
    transition-duration: 0.01ms;
  }
}
