/* =========================
   landshaft.css — страница услуги «Ландшафт»
   (база, фон, контентные секции, модалки, адаптив)
   ========================= */

/* ---------- Root variables ---------- */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.28 0.03 160);
  --muted: oklch(0.45 0.02 160);
  --surface: oklch(0.99 0.01 160 / .75);
  --ring: oklch(0.77 0.15 160 / .55);

  --rad: 1.2rem;

  --shadow-1: 0 0.625rem 1.875rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 0.875rem 2.5rem  oklch(0.20 0.02 160 / .14);

  --Font-main: 'Montserrat', sans-serif;
  --Font-size-base: 1rem;
  --Font-size-small: 0.875rem;
  --Font-size-large: 1.25rem;

  /* Layout host-centering */
  --page-max: 120rem;
  --page-pad: clamp(1rem, 3vw, 2rem);
}

/* ---------- Base / Background ---------- */
html, body{
  margin: 0;
  padding-top: 1rem;
  font-family: var(--Font-main);
  background-color: #f6faf7; /* fallback */
  background:
    radial-gradient(75rem 37.5rem at 5% 0%, oklch(0.95 0.03 160 / .55), transparent 60%),
    radial-gradient(50rem 25rem at 100% 10%, oklch(0.93 0.05 165 / .35), transparent 70%),
    linear-gradient(to bottom, #fff, #f8fbf9 60%, #f6faf7);
  position: relative;
}
body::after{
  content:"";
  position: fixed; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, #0001, #0001 0.0625rem, transparent 0.0625rem, transparent 0.125rem),
    repeating-linear-gradient(0deg,  #0001, #0001 0.0625rem, transparent 0.0625rem, transparent 0.125rem);
  mix-blend-mode: soft-light; opacity:.25;
}

/* Глобальные помощники */
[hidden]{ display:none !important; }
:where(a,button,[tabindex]):focus-visible{
  outline:.22rem solid var(--ring);
  outline-offset:.22rem;
  border-radius:.5rem;
}

/* ---------- Типографика ---------- */
.h2{ font-size: clamp(1.65rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.15; letter-spacing:.01em; }
.h3{ font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.2; }
.h4{ font-size: 1.125rem; }
:where(p, li){ color: var(--muted); }

/* ---------- Хлебные крошки ---------- */
.breadcrumbs{
  margin: 1.2rem auto 1.8rem;
  display:flex; align-items:center; gap:.6rem .4rem; flex-wrap:wrap;
  font-size: .95rem;
}
.breadcrumbs .crumb,
.breadcrumbs .current{
  padding: .35rem .7rem;
  border-radius: 999px;
  background: oklch(0.98 0.01 160 / .75);
  color: var(--muted);
  box-shadow: 0 0.125rem 0.625rem oklch(0.20 0.02 160 / .06);
  text-decoration: none;
}
.breadcrumbs .crumb:hover{ background: oklch(0.98 0.02 160 / .95); }
.breadcrumbs .current{ color: var(--ink); font-weight: 700; }

/* ---------- HERO (2 columns) ---------- */
.service-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: min(3vw, 2rem);
  align-items: stretch;
  margin: 1.2rem 0 2.2rem;
  --hero-h: clamp(22.5rem, 48vh, 35rem);
}
.service-hero__media,
.service-hero__content{ min-height: var(--hero-h); }

/* media */
.service-hero__media{
  position: relative;
  overflow: hidden;
  border-radius: var(--rad);
  box-shadow: var(--shadow-2);
  transform: translateZ(0);
}
.service-hero__media > :is(img, video){
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.2,.65,.2,1);
}
.service-hero__media:hover > :is(img, video){ transform: scale(1.02); }

/* content */
.service-hero__content{
  background: var(--surface);
  border-radius: calc(var(--rad) * 1.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; justify-content: center;
}
@supports not (backdrop-filter: blur(8px)){
  .service-hero__content{ background: oklch(0.99 0.01 160); }
}
.service-hero__content h1{ margin:0 0 .8rem; color: var(--ink); }
.service-hero__content p{ line-height:1.75; }

/* CTA */
.service-hero .cta{ display:flex; gap:.9rem 1rem; flex-wrap:wrap; margin-top:1.1rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.15rem; border-radius:.95rem; font-weight:700; text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn--primary{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  color: oklch(0.22 0.02 160);
  box-shadow: 0 0.5rem 1.125rem oklch(0.60 0.12 160 / .35);
}
.btn--primary:hover{ transform: translateY(-0.0625rem); box-shadow: 0 0.625rem 1.375rem oklch(0.60 0.12 160 / .45); }
.btn--ghost{
  color: var(--ink);
  background: oklch(0.98 0.02 160 / .6);
  outline: 0.125rem solid oklch(0.85 0.12 160 / .35);
}
.btn--ghost:hover{ background: oklch(0.98 0.02 160); }

/* ---------- «Что входит» ---------- */
.service-body{ margin: 2.4rem 0; }
.service-body .h3{ margin: 1.2rem 0 .8rem; color: var(--ink); }
.service-list{
  list-style:none; padding:0; margin:1rem 0 2.4rem;
  display:grid; gap: .9rem 1rem;
  grid-template-columns: repeat(3, minmax(14rem,1fr));
}
.service-list li{
  position:relative; padding:.9rem 1rem .9rem 2.6rem;
  border-radius: calc(var(--rad) * .9);
  background: oklch(0.99 0.01 160 / .65);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
.service-list li::before{
  content:"";
  position:absolute; left:.9rem; top:50%;
  width:1.1rem; height:1.1rem; border-radius:.4rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0.375rem 0.875rem oklch(0.60 0.12 160 / .35);
  transform: translateY(-50%);
  -webkit-mask:
    conic-gradient(from 135deg at 70% 50%, #0000 0 25%, #000 0 100%) top left/60% 60% no-repeat,
    linear-gradient(#000 0 0) center/40% 16% no-repeat;
  mask:
    conic-gradient(from 135deg at 70% 50%, #0000 0 25%, #000 0 100%) top left/60% 60% no-repeat,
    linear-gradient(#000 0 0) center/40% 16% no-repeat;
}

/* Результат */
.service-body p{ color: var(--muted); }

/* ---------- Resources / FAQ ---------- */
.resources{
  margin: 3rem 0 2.2rem; padding: 1.2rem 1.2rem 1rem;
  background: oklch(0.99 0.01 160 / .6);
  border-radius: var(--rad); box-shadow: var(--shadow-1);
}
.resources .h3{ margin:0 0 .8rem; color: var(--ink); }
.resources-note{ margin:.2rem 0 1rem; }
.resources-list{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(16rem,1fr));
  gap:.7rem 1rem;
}
.resources-list a{ text-decoration: underline; }

.faq{ margin: 2rem 0 3.2rem; }
.faq-item{
  background:#fff; border-radius: var(--rad);
  padding: 1rem 1.2rem; box-shadow: var(--shadow-1);
  margin-bottom: .9rem;
}
.faq-item summary{ cursor:pointer; font-weight:700; color: var(--ink); }
.faq-a{ margin-top:.6rem; color: var(--muted); line-height:1.7; }

/* ---------- Reveal helpers ---------- */
.reveal{ opacity:0; transform: translateY(0.625rem); }
.is-visible{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }

/* ---------- Наш подход / Этапы ---------- */
.key-section{ margin: 1.6rem 0 2rem; }
.key-card{
  background: var(--surface);
  border-radius: calc(var(--rad) * 1.1);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.key-title{ margin: 0 0 .9rem; color: var(--ink); }

.key-grid{
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(14rem,1fr));
}
.key-item{
  padding: 1rem 1.1rem; border-radius: calc(var(--rad) * .9);
  background: oklch(0.99 0.01 160 / .6);
  box-shadow: var(--shadow-1);
}
.key-item h3{ margin: 0 0 .35rem; color: var(--ink); }
.key-item p{ margin: 0; line-height: 1.65; }

.steps-line{
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem 1rem;
  counter-reset: step;
}
.key-step{
  position: relative; background: #fff; border-radius: calc(var(--rad) * .9);
  padding: 1rem 1.1rem 1rem 3rem; box-shadow: var(--shadow-1);
}
.key-step::before{
  counter-increment: step; content: counter(step);
  position: absolute; left: .9rem; top: 1rem;
  width: 1.5rem; height: 1.5rem; border-radius: .5rem;
  display: grid; place-items: center;
  color: oklch(0.22 0.02 160); font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0.5rem 1.125rem oklch(0.60 0.12 160 / .35);
}
.key-step strong{ color: var(--ink); display: block; margin-bottom: .2rem; }
.key-step span{ color: var(--muted); }
.key-card, .key-item, .key-step{ will-change: transform, opacity; }

/* ---------- Values ---------- */
.land-img{ font-weight: 700; }
.value-section{ margin: 1.8rem 0 2.2rem; }
.value-card{
  background: var(--surface); border-radius: calc(var(--rad) * 1.1);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-1); backdrop-filter: blur(8px);
}
.value-grid{ display:grid; grid-template-columns: repeat(3, minmax(14rem,1fr)); gap: 1rem; }
.value-item{
  background: oklch(0.99 0.01 160 / .65); border-radius: calc(var(--rad) * .9);
  padding: 1rem 1.1rem; box-shadow: var(--shadow-1);
}
.value-item h3{ margin:0 0 .3rem; color: var(--ink); }

/* ---------- Deliverables ---------- */
.deliverables{ margin: 2.2rem 0; }
.deliverables-grid{
  list-style:none; padding:0; margin: .8rem 0 0;
  display:grid; grid-template-columns: repeat(4, minmax(13rem,1fr)); gap: .8rem 1rem;
}
.deliverable{ background:#fff; border-radius: .9rem; padding:.8rem 1rem; box-shadow: var(--shadow-1); }
.deliverable strong{ color: var(--ink); }

/* ---------- Gallery (+ lightbox) ---------- */
.gallery{ margin: 2.2rem 0; }
.gallery-grid{ display:grid; grid-template-columns: repeat(3, minmax(14rem,1fr)); gap: .8rem 1rem; }
.gallery figure{ margin:0; }
.gallery img{
  width:100%; 
  aspect-ratio: 7 / 4; 
  object-fit: cover;
  border-radius: .9rem; display:block;
  /*box-shadow: var(--shadow-1);*/
}
.gallery figcaption{ margin-top:.35rem; font-size:.95rem; color: var(--muted); }

.gallery-modal{
  position: fixed; inset:0; display:none; place-items:center;
  background: oklch(0.18 0.02 160 / .65);
  backdrop-filter: blur(6px);
  z-index: 9999;
}
.gallery-modal[aria-hidden="false"]{ display:grid; }
.gallery-modal img{ max-width:min(92vw, 75rem); max-height:82vh; border-radius: .8rem; box-shadow: var(--shadow-2); }
.gallery-caption{ color:#fff; text-align:center; margin-top:.6rem; }
.gallery-close{
  position:absolute; top:1rem; right:1rem;
  width:2.6rem; height:2.6rem; border-radius:.7rem; border:none;
  background:#fff; box-shadow: var(--shadow-1); font-size:1.4rem; cursor:pointer;
}

/* ---------- Packages ---------- */
.packages{ margin: 2.4rem 0; }
.packages-grid{ display:grid; grid-template-columns: repeat(3, minmax(14rem,1fr)); gap: 1rem; }
.pkg{ background:#fff; border-radius: 1rem; padding: 1rem 1.1rem; box-shadow: var(--shadow-1); position:relative; }
.pkg--hit{ outline: 0.125rem solid color-mix(in oklab, var(--brand) 45%, transparent); background: oklch(0.99 0.01 160); }
.pkg-title{ margin:0 0 .4rem; color: var(--ink); }
.pkg-list{ margin:0 0 .8rem 1rem; }
.pkg-price{ font-weight:800; color: var(--ink); }
.packages-note{ margin-top:.6rem; color: var(--muted); }

/* ---------- Case ---------- */
.case{ margin: 2.2rem 0; }
.case-card{ background: var(--surface); border-radius: 1rem; padding: 1.2rem 1.3rem; box-shadow: var(--shadow-1); }
.case-metrics{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; padding:0; margin:.4rem 0 .6rem; list-style:none; }
.case-metrics li{ background:#fff; border-radius:.7rem; padding:.5rem .7rem; box-shadow: var(--shadow-1); }
.case-metrics strong{ color: var(--ink); }

/* ---------- Brief ---------- */
.brief{ margin: 2rem 0 2.6rem; }
.brief-list{
  counter-reset: q; padding-left:0; list-style:none;
  display:grid; grid-template-columns: repeat(2, minmax(16rem,1fr)); gap:.6rem 1rem;
}
.brief-list li{
  position:relative; padding:.7rem 1rem .7rem 2.6rem;
  background:#fff; border-radius:.8rem; box-shadow: var(--shadow-1);
}
.brief-list li::before{
  counter-increment:q; content: counter(q);
  position:absolute; left:.8rem; top:.7rem;
  width:1.3rem; height:1.3rem; border-radius:.45rem; display:grid; place-items:center;
  color: oklch(0.22 0.02 160); font-weight:800;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* ===== service-hero: равная высота колонок ===== */
.service-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;            /* растягиваем обе колонки на высоту строки */
}

/* Медиа и контент — одинаковые «карточки» */
.service-hero__media,
.service-hero__content{
  border-radius: var(--rad, 1.2rem);
}

/* Левая колонка с видео: растягиваем по высоте строки */
.service-hero__media{
  overflow: hidden;
  min-height: clamp(18rem, 40vw, 28rem);  /* приятная стартовая высота */
}

/* Видео заполняет всю колонку и не искажает пропорции */
.service-hero__media > video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* обрезка по краям без «письма» */
}

/* Контент по центру, высота авто — колонка сама подстроится */
.service-hero__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.2rem, 3vw, 2rem);
}

/* Ряд кнопок — без переполнения и скачков высоты */
.service-hero .cta{
  margin-top: 1.2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===== Мобильная адаптация: колонки в столбик ===== */
@media (max-width: 64rem){
  .service-hero{ grid-template-columns: 1fr; }
  .service-hero__media{ min-height: 16rem; }
}


/* ---------- Reveal hooks ---------- */
.value-card,.value-item,.deliverable,.gallery figure,.pkg,.case-card,.brief-list li{
  will-change: opacity, transform;
}

/* ---------- Responsive ---------- */
@media (max-width: 72rem){
  .service-list{ grid-template-columns: repeat(2, minmax(14rem,1fr)); }
  .key-grid{ grid-template-columns: repeat(2, minmax(14rem,1fr)); }
  .steps-line{ grid-template-columns: repeat(2, 1fr); }
  .value-grid{ grid-template-columns: repeat(2, minmax(14rem,1fr)); }
  .deliverables-grid{ grid-template-columns: repeat(3, minmax(13rem,1fr)); }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(14rem,1fr)); }
  .packages-grid{ grid-template-columns: repeat(2, minmax(14rem,1fr)); }
}
@media (max-width: 56rem){
  .service-hero{ grid-template-columns: 1fr; --hero-h: auto; gap: 1.4rem; }
  .service-hero__media > :is(img, video){ position: static; height: auto; }
  .service-hero__content{ min-height: unset; padding: 1rem 1.05rem; }
  .service-list,
  .key-grid, .steps-line,
  .value-grid, .deliverables-grid, .gallery-grid, .packages-grid, .brief-list{
    grid-template-columns: 1fr;
  }
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --ink: oklch(0.93 0.02 160);
    --muted: oklch(0.80 0.02 160);
    --surface: oklch(0.20 0.02 160 / .5);
  }
  body{
    background:
      radial-gradient(56.25rem 31.25rem at 5% 0%, oklch(0.22 0.02 160 / .65), transparent 60%),
      radial-gradient(56.25rem 31.25rem at 100% 10%, oklch(0.26 0.03 165 / .55), transparent 70%),
      linear-gradient(#0e1512,#0b120f);
  }
  .faq-item{ background: oklch(0.20 0.02 160 / .9); }
  .resources{ background: oklch(0.20 0.02 160 / .7); }
  .breadcrumbs .crumb,
  .breadcrumbs .current{ background: oklch(0.20 0.02 160 / .6); color: var(--muted); }
  .key-item{ background: oklch(0.20 0.02 160 / .75); }
  .key-step{ background: oklch(0.20 0.02 160 / .9); }
  .deliverable,.pkg,.brief-list li{ background: oklch(0.20 0.02 160 / .9); }
  .gallery-close{ background: oklch(0.98 0.02 160); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ---------- Host-centered layout (центрирование хостов) ---------- */
#services-header > *,
#main,
#services-footer > *{
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--page-max);
  margin-inline: auto !important;
  padding-inline: var(--page-pad);
}

/* Блоки внутри #main без доп. обёртки */
#main .container{
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

#main {
    margin-top: 5rem;
}

/* Базовые состояния модалок (используются на странице) */
.modal[hidden]{display:none!important;}
.modal.is-open,.modal.active{display:grid;place-items:center;}
html.is-modal-open{overflow-y:hidden;}


/* 1) Базовая волна для всех .ripple */
.ripple { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.ripple-effect{
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: .28;
  background: currentColor;          /* мягкая волна по цвету текста */
  pointer-events: none;
  animation: ripple-enter .6s ease-out forwards;
}
@keyframes ripple-enter { to { transform: scale(2.6); opacity: 0; } }

/* 2) Не даём .btn.ripple из других секций портить кнопку звонка в хедере */
.main-header .contact-block .btn.ripple { background: unset; padding: unset; }

/* 3) Кнопка звонка — фиксируем поведение в сетке хедера */
.main-header .contact-block .btn-call{
  justify-self: start;           /* не растягивать на 1fr */
  white-space: nowrap;
}

/* 4) Повышаем специфичность, чтобы точно победить .btn.ripple */
.main-header .contact-block .btn-call.ripple{
  padding: .9rem 1.6rem;
  background: #2f6b49;
  color: #fff;
  border-radius: 1.2rem;
}

.nav { 
  position: relative; 
  z-index: var(--z-nav); 
  display: flex;
  justify-content: center;
}

/* ===== SERVICE HERO: фиксация наложения и отступов ===== */
.service-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;                          
  column-gap: clamp(1.6rem, 4vw, 3.2rem);     
  row-gap: 1.6rem;
}

/* Медиа-контейнер: держим пропорции, без обрезки и без налезания */
.service-hero__media{
  aspect-ratio: 16 / 9;                        
  min-height: 22rem;                           
  background: #000;                            
  overflow: hidden;
  display: grid;
  place-items: center;
  min-width: 0;                                
  contain: layout paint;
}

/* Само видео: показываем весь кадр, не обрезаем */
.landshaft-video{
  width: 100%;
  height: 100%;
  object-fit: contain;                          
  object-position: center;
  display: block;
}