/* index.css — rebuilt (no nicepage dependency) */

/* -------- HERO (section-1) -------- */
.u-section-1{
  position:relative;
  padding: 60px 0 74px;
  min-height: 520px;

 background-image:

  url("../images/photo-hero.5674058c8d08.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}

.u-section-1::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.42));
  pointer-events:none;
}
[data-theme="dark"] .u-section-1::before{
  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.60));
}

.u-section-1 > *{ position:relative; z-index:1; }

/* slogan */
.hiking-slogan-wrapper{
  display:flex;
  justify-content:center;
  padding: 0 0 16px;
}
.hiking-slogan{
  font-family: "Caveat", cursive;
  font-weight: 900;
  font-size: clamp(25px, 5.2vw, 50px);
  letter-spacing: .4px;
  line-height: 1.2;
  text-align: center;
  font-style: italic;

  /* gradient text (outdoor vibe) */
  background: linear-gradient(135deg, var(--orange), var(--white), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* readability on photo */
  text-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 10px 30px rgba(0,0,0,.25);

  padding: 6px 0; /* лек въздух */
}


/* sheet container */
.u-section-1 .u-sheet-1{
  width: min(600px, 92vw);
  margin: 0 auto;
}

/* cards grid wrapper */
.u-list-1{ margin-top: 22px; }
.u-repeater-1{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
  align-items: stretch;
}

/* ✅ UPDATED: smaller + more transparent cards */
.u-repeater-item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,12,18,.36);      /* по-прозрачно */
  backdrop-filter: blur(3px);
  box-shadow: 0 16px 45px rgba(0,0,0,.22);

  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.u-repeater-item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.30);
  background: rgba(10,12,18,.46);      /* леко по-плътно при hover */
  box-shadow: 0 20px 60px rgba(0,0,0,.26);
}

/* ✅ UPDATED: smaller inside spacing */
.u-container-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 18px 16px;                  /* по-малко */
  text-decoration:none;
}

/* ✅ UPDATED: smaller icon box */
.u-icon{
  width: 52px;
  height: 52px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

/* SVG size + color */
.u-icon svg{
  width: 28px;
  height: 28px;
  display:block;
  fill: var(--orange);
}
.u-list-item-2 .u-icon svg{ fill: var(--blue); }

/* headings inside cards */
.u-section-1 h4{
  font-family: var(--font-display);
  color: rgba(255,255,255,.96);
  font-weight: 900;
  font-size: 16px;                     /* по-малко */
  letter-spacing: .2px;
  margin: 0;
}
.u-text.u-text-1{
 color: color-mix(in srgb, var(--orange) 78%, white);
}

/* -------- SECTION-2 (circles / gallery) -------- */
.u-section-2{
  padding: 60px 0 66px;
  border-bottom: 1px solid var(--border);


  background:
    radial-gradient(800px 520px at 20% 15%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 70%),
    radial-gradient(700px 520px at 85% 35%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, var(--white)), var(--bg));
}

.u-section-2 .u-sheet-1{
  width: min(1120px, 92vw);
  margin: 0 auto;
  position: relative;
  min-height: 360px;
}

.u-text.u-text-2{
 color: color-mix(in srgb, var(--blue) 80%, white);
}

/* circle images */
.u-section-2 .u-image-1,
.u-section-2 .u-image-2,
.u-section-2 .u-image-3{
  position:absolute;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow);
}

/* Можеш да смениш тези снимки с реалните ти */
.u-section-2 .u-image-1{
  width: 210px; height: 210px;
  left: 80px; top: 18px;
  background-image: url("../images/photo-circle2.a9f2fd125eef.jpg");
}
.u-section-2 .u-image-2{
  width: 160px; height: 160px;
  left: 400px; top: 200px;
  background-image: url("../images/t5.83a0ddf447dd.jpg");
}
.u-section-2 .u-image-3{
  width: 250px; height: 250px;
  right: 80px; top: 60px;
  background-image: url("../images/photo-circle1.46b831931519.jpeg");
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
}

/* decorative rings */
.u-section-2 .u-shape-1,
.u-section-2 .u-shape-2{
  position:absolute;
  width: 120px; height: 120px;
  opacity: .85;
}
.u-section-2 .u-shape-1{ left: 420px; top: 28px; }
.u-section-2 .u-shape-2{ left: 120px; bottom: -25px; opacity: .55; }

.u-section-2 .u-shape-1 svg path{ fill: color-mix(in srgb, var(--orange) 55%, transparent); }
.u-section-2 .u-shape-2 svg path{ fill: color-mix(in srgb, var(--burg) 35%, transparent); }

/* -------- Responsive -------- */
@media (max-width: 980px){
  .u-section-1{ padding: 120px 0 62px; }
  .u-repeater-1{ grid-template-columns: 1fr; }

  .u-section-2 .u-sheet-1{ min-height: 520px; }
  .u-section-2 .u-image-1{ left: 80px; top: 0; }
  .u-section-2 .u-image-2{ left: 170px; top: 220px; }
  .u-section-2 .u-image-3{ right: 80px; top: 160px; }

  .u-section-2 .u-shape-1{ left: 320px; top: 30px; }
  .u-section-2 .u-shape-2{ left: 40px; bottom: 10px; }
}

@media (max-width: 720px){


  .u-icon{ width: 48px; height: 48px; border-radius: 14px; }
  .u-icon svg{ width: 26px; height: 26px; }
  .u-section-1 h4{ font-size: 15px; }

  .u-section-2 .u-sheet-1{ min-height: 560px; }
  .u-section-2 .u-image-1{ width: 190px; height: 190px; }
  .u-section-2 .u-image-2{ width: 145px; height: 145px; left: 360px; top: 230px; }
  .u-section-2 .u-image-3{ width: 190px; height: 190px; top: 390px; }
}

@media (max-width: 560px){


  .u-icon{ width: 48px; height: 48px; border-radius: 14px; }
  .u-icon svg{ width: 26px; height: 26px; }
  .u-section-1 h4{ font-size: 15px; }

  .u-section-2 .u-sheet-1{ min-height: 560px; }
  .u-section-2 .u-image-1{ width: 190px; height: 190px; }
  .u-section-2 .u-image-2{ width: 145px; height: 145px; left: 260px; top: 230px; }
  .u-section-2 .u-image-3{ width: 190px; height: 190px; top: 390px; }
}

@media (max-width: 460px){

  /* ---------- SECTION 1 (Hero) ---------- */
  .u-section-1{
    padding: 100px 0 44px;
    min-height: 460px;
  }

  .u-section-1 .u-sheet-1{
    width: min(360px, 92vw);
  }

  .hiking-slogan-wrapper{
    padding: 0 0 12px;
  }

  .hiking-slogan{
    font-size: clamp(22px, 9vw, 34px);
    line-height: 1.15;
    padding: 4px 0;
  }

  .u-list-1{ margin-top: 14px; }

  /* 1 column + smaller gap */
  .u-repeater-1{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .u-repeater-item{
    border-radius: 16px;
    backdrop-filter: blur(2.5px);
  }

  .u-container-layout{
    padding: 14px 12px;
    gap: 8px;
  }

  .u-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .u-icon svg{
    width: 24px;
    height: 24px;
  }

  .u-section-1 h4{
    font-size: 15px;
  }


  /* ---------- SECTION 2 (Circles) ---------- */
  .u-section-2{
    padding: 34px 0 40px;
  }

  .u-section-2 .u-sheet-1{
    width: min(360px, 92vw);
    min-height: 560px; /* достатъчно място за 3 кръга без overlap */
  }

  /* Make circles smaller + centered flow */
  .u-section-2 .u-image-1{
    width: 170px;
    height: 170px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
  }

  .u-section-2 .u-image-2{
    width: 130px;
    height: 130px;
    left: 18px;
    top: 230px;
    transform: none;
  }

  .u-section-2 .u-image-3{
    width: 190px;
    height: 190px;
    left: 50%;
    top: 355px;
    right: auto;
    transform: translateX(-50%);
  }

  /* Decorative rings – smaller + positioned not to clash */
  .u-section-2 .u-shape-1,
  .u-section-2 .u-shape-2{
    width: 86px;
    height: 86px;
  }

  .u-section-2 .u-shape-1{
    left: auto;
    right: 18px;
    top: 86px;
    opacity: .78;
  }

  .u-section-2 .u-shape-2{
    left: 12px;
    bottom: 16px;
    opacity: .45;
  }

  .u-section-1 h4{ font-size: 15px; }
}