/**
 * NARIYA OUD home-page header and first-screen Hero only.
 * Keep all later home-page sections out of this file.
 */

.home .nariya-hero {
  position: relative;
  overflow: hidden;
  color: #f8f2e8;
  background:
    linear-gradient(90deg, rgba(9, 9, 7, .56) 0%, rgba(9, 9, 7, .34) 48%, rgba(9, 9, 7, .06) 100%),
    url('/wp-content/uploads/2026/07/nariya-oud-hero-forest.webp') center / cover no-repeat;
}

.home .nariya-hero::before {
  position: absolute;
  z-index: 1;
  top: 19%;
  right: 0;
  width: 22%;
  height: 34%;
  content: '';
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 45%, rgba(28, 24, 16, .48), rgba(28, 24, 16, 0) 70%);
}

.home .nariya-hero::after {
  position: absolute;
  z-index: 2;
  right: 16.5%;
  bottom: -1%;
  width: 23%;
  height: 63%;
  content: '';
  pointer-events: none;
  background: url('/wp-content/uploads/2026/07/nariya-hero-bottle-focus-v2.webp') center / cover no-repeat;
  transform: scale(.94);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 48%, transparent 72%);
}

.home .nariya-hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78vh;
  padding: 110px 0 100px;
  transform: translate(28px, -30px);
}

.home .nariya-hero h1 {
  max-width: 920px;
  color: #f8f2e8 !important;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.45;
  letter-spacing: .035em;
  transform: translateY(-26px);
}

.home .nariya-hero h1 span,
.home .nariya-hero .nariya-lead span {
  display: block;
  white-space: nowrap;
}

.home .nariya-hero h1 span + span {
  margin-top: 1em;
}

.home .nariya-hero .nariya-lead {
  max-width: 520px;
  font-size: clamp(16px, 1.8vw, 21px);
  line-height: 1.48;
}

.home .nariya-hero .nariya-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.home .nariya-hero .nariya-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding-right: 31px;
  padding-left: 31px;
  border: 1px solid #bc9255;
  color: #f6f0e5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.home .nariya-hero .nariya-btn-solid,
.home .nariya-hero .nariya-btn:hover {
  color: #111;
  background: #bc9255;
}

@media (max-width: 767px) {
  .home .nariya-hero {
    background-position: 62% center;
  }

  .home .nariya-hero::after {
    display: none;
  }

  .home .nariya-hero-inner {
    min-height: 70vh;
    padding: 80px 0 65px;
    transform: none;
  }

  .home .nariya-hero h1 {
    font-size: 26px;
    transform: none;
  }

  .home .nariya-hero h1 span,
  .home .nariya-hero .nariya-lead span {
    white-space: normal;
  }

  .home .nariya-hero .nariya-lead {
    max-width: 92%;
    font-size: 16px;
  }

  .home .nariya-hero .nariya-btn {
    min-height: 50px;
    padding-right: 22px;
    padding-left: 22px;
  }
}