/* Контейнер */
.gr-container { width: min(1200px, 92vw); margin: 0 auto; }

/* 1. HERO (cover + parallax через background-position) */
.gr-hero{
  position:relative;height:350px;overflow:hidden;
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  will-change:background-position;
}
.gr-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.30))}
.gr-hero__title{position:absolute;left:24px;bottom:24px;color:#fff;font-weight:800;font-size:42px;letter-spacing:.5px;margin:0}


/* 2. GALLERY + SPECS */
.gr-gallery{margin:60px 0}
.gr-swiper{border-radius:12px;overflow:hidden}
.gr-swiper .swiper-slide img{display:block;width:100%;height:520px;object-fit:cover}
.swiper-button-prev,.swiper-button-next{color:#fff}
.swiper-pagination-bullet{background:#fff;opacity:.6}
.swiper-pagination-bullet-active{opacity:1}

/* 2. SPECS (в одну строку) */
.gr-specs{
  display:flex; gap:0; margin:18px 0 0; padding:0; list-style:none;
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  border-radius:12px;
}
.gr-specs__item{
  background:#121212; color:#f3f3f3; padding:18px 16px; display:flex; flex-direction:column; gap:6px;
  white-space:nowrap; flex:1 0 auto; border-right:1px solid rgba(255,255,255,.12);
}
.gr-specs__item:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.gr-specs__item:last-child{border-right:none;border-top-right-radius:12px;border-bottom-right-radius:12px}
.gr-specs__label{opacity:.75;font-size:13px}
.gr-specs__value{font-weight:700}


/* 3. INFO BLOCK */
.gr-info{position:relative;background-size:cover;background-position:center;padding:64px 0}
.gr-info__overlay{position:absolute;inset:0;background:rgba(0,0,0,.60)} /* затемнили */
.gr-info__grid{position:relative;display:grid;grid-template-columns:1.1fr 1.4fr;gap:40px}
.gr-info__points{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.gr-info__points li{background:rgba(0,0,0,.55);color:#fff;padding:18px;border-radius:12px;font-weight:600}
.gr-info__text{color:#fff;text-align:right;justify-self:end;max-width:720px} /* «приклеено» к правому краю */
.gr-info__text h2{margin:0 0 12px;font-size:32px}
.gr-info__text p{opacity:.95;line-height:1.65}


/* 4. SERVICES */
.gr-services h3{margin:0 0 16px}
.gr-services{margin:60px 0}
.gr-services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gr-service{position:relative;display:block;border-radius:14px;overflow:hidden;background:#000;min-height:170px;background-size:cover;background-position:center}
/* чуть сильнее затемнение, чтобы текст был читабельнее */
.gr-service__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.75));
}
.gr-service__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;color:#fff}
.gr-service__title{font-weight:800;font-size:18px}
.gr-service__desc{opacity:.85}
.gr-service__price{font-weight:800}

/* ВСТАВЬТЕ свои фоны (одни и те же для всех авто) */
.gr-service--child-seat    { background-image:url('http://pulseadspro.xyz/wp-content/uploads/2025/09/SCR-20250910-ntzp.jpeg');    /* ← замените путь */ }
.gr-service--extra-driver  { background-image:url('http://pulseadspro.xyz/wp-content/uploads/2025/09/SCR-20250910-nugd.jpeg');   /* ← замените путь */ }
.gr-service--gps           { background-image:url('http://pulseadspro.xyz/wp-content/uploads/2025/09/SCR-20250910-nulc.jpeg');            /* ← замените путь */ }
.gr-service--fridge        { background-image:url('http://pulseadspro.xyz/wp-content/uploads/2025/09/SCR-20250910-nusa.jpeg');         /* ← замените путь */ }
.gr-service--modem         { background-image:url('http://pulseadspro.xyz/wp-content/uploads/2025/09/SCR-20250910-nvaj.jpeg');          /* ← замените путь */ }
.gr-service--wifi          { background-image:url('http://pulseadspro.xyz/wp-content/uploads/2025/09/SCR-20250910-nvfi.jpeg');           /* ← замените путь */ }

/* 5. TERMS */
.gr-terms{position:relative;background-size:cover;background-position:center;padding:56px 0}
.gr-terms__overlay{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.gr-terms h3{position:relative;color:#fff;margin:0 0 12px}
.gr-terms__list{position:relative;display:grid;gap:12px}
.gr-terms details{background:rgba(0,0,0,.55);color:#fff;border-radius:12px;overflow:hidden}
.gr-terms summary{padding:16px 18px;cursor:pointer;font-weight:700;outline:none}
/* обёртка контента внутри details — анимация высоты/прозрачности */
/* Плавное раскрытие: содержимое всегда display:block, прячем высотой */
.gr-terms details>div{
  display:block;                 /* важно: отменяем скрытие UA-стилями */
  padding:0 18px 0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .45s ease, opacity .35s ease, padding .3s ease;
}
.gr-terms details[open]>div{
  /* max-height задаём из JS реальной высотой; здесь только стили открытого состояния */
  padding:0 18px 16px;
  opacity:.95;
}



/* 6. REVIEWS */
.gr-reviews h3{margin:0 0 16px}
.gr-reviews{margin:60px 0}
.gr-reviews__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gr-review-card{display:flex;align-items:center;justify-content:center;min-height:160px;background:#131313;color:#fff;border-radius:12px;text-decoration:none}
.gr-review-card__title{font-size:22px;font-weight:800}
.gr-review-card__subtitle{opacity:.8;margin-top:6px}

/* 7. RELATED */
.gr-related h3{margin:0 0 16px}
.gr-related{margin:60px 0}
.gr-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gr-related__card{display:block;border-radius:12px;overflow:hidden;background:#0e0e0e;color:#fff;text-decoration:none}
.gr-related__img{height:170px;background-size:cover;background-position:center}
.gr-related__body{padding:14px}
.gr-related__title{font-weight:800;margin-bottom:6px}
.gr-related__price{opacity:.9}

/* 8. ABOUT */
.gr-about{position:relative;background-size:cover;background-position:center;padding:60px 0}
.gr-about__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.68))}
.gr-about__content{position:relative;color:#fff}
.gr-about h3{margin:0 0 18px;font-size:28px}
.gr-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gr-about__grid h4{margin:0 0 8px}

/* 9. CTA PANEL — большой CTA на single-странице */
.gr-cta-panel{ position:relative; border-radius:16px; overflow:hidden; margin:60px 0; }

.gr-cta-panel__bg{
  position:absolute; inset:0;
  background-image:var(--gr-cta-panel-bg);
  background-size:cover; background-position:center;
}

.gr-cta-panel__overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}

.gr-cta-panel__content{
  position:relative;
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  align-items:center;
  gap:24px;
  padding:32px;
}

.gr-cta-panel__left{color:#fff}
.gr-cta-panel__title{margin:0 0 10px;font-size:36px;font-weight:800;line-height:1.15}
.gr-cta-panel__desc{margin:0;color:rgba(255,255,255,.9);max-width:640px}

.gr-cta-panel__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.gr-cta-panel__price{color:#fff;font-size:24px;font-weight:800;white-space:nowrap}

/* Кнопка в большом CTA */
.gr-cta-panel .gr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:14px 24px;
  background:#000 !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  border-radius:12px; font-weight:800; font-size:16px; text-decoration:none !important;
  box-shadow:none !important;
}

@media (max-width: 960px){
  .gr-cta-panel__content{grid-template-columns:1fr; gap:16px}
  .gr-cta-panel__right{align-items:flex-start}
  .gr-cta-panel__title{font-size:28px}
}




/* Адаптив */
@media (max-width: 960px){
  .gr-specs{grid-template-columns:repeat(2,1fr)}
  .gr-info__grid{grid-template-columns:1fr}
  .gr-services__grid,.gr-related__grid,.gr-reviews__grid,.gr-about__grid{grid-template-columns:1fr}
  .gr-swiper .swiper-slide img{height:320px}
}

/* hover/active для summary */
.gr-terms summary{
  padding:16px 18px; cursor:pointer; font-weight:700; outline:none;
  transition:background .25s ease, color .25s ease;
}
.gr-terms summary:hover{ background:rgba(255,255,255,.06) }

/* ===== Общие транзишены для интерактивных элементов ===== */
.gr-service,
.gr-related__card,
.gr-btn,
.gr-specs__item,
.swiper-button-prev, .swiper-button-next,
.gr-terms summary { transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, opacity .25s ease; }

/* Карточки доп. услуг */
.gr-service:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.25) }
.gr-service:hover .gr-service__overlay{
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.70));
}

/* Карточки «Ещё автомобили» */
.gr-related__card{transform:translateY(0)}
.gr-related__card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.28) }

/* Кнопки */
.gr-btn:hover{ filter:brightness(1.05) }
.gr-cta-panel .gr-btn:hover{ background:#111 !important }

/* Спеки — лёгкий ховер */
.gr-specs__item:hover{ background:#181818 }

/* Стрелки слайдера */
.swiper-button-prev, .swiper-button-next{ opacity:.75 }
.swiper-button-prev:hover, .swiper-button-next:hover{ transform:scale(1.06); opacity:1 }