/* ============================================================
   PROLANDSCAPE — головна сторінка
   Секції: hero, місія, довіра, проєкти, послуги, процес,
           блог, відгуки, FAQ, фінальний CTA.
   ============================================================ */

/* ═══════════════════════════════ HERO ═══════════════════════════════ */
#hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 150px 0 100px;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(38px, 5.6vw, 70px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin-bottom: 26px;
  color: var(--ink);
}

.hero-h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  font-size: 17px;
  color: var(--m);
  max-width: 600px;
  margin: 0 auto 38px;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 26px;
}

/* рядок довіри під кнопками */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--m);
  letter-spacing: 0.2px;
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-trust svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--green-l);
}

.hero-trust i {
  font-style: normal;
  color: rgba(23, 51, 37, 0.3);
}

/* ═══════════════════════════════ МІСІЯ ═══════════════════════════════ */
#mission {
  padding: 40px 0 56px;
}

.mission-card {
  padding: 48px 56px;
  border-radius: var(--r-lg);
  text-align: center;
}

.mission-label {
  margin-bottom: 20px;
}

.mission-text {
  font-family: var(--font-head);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.5px;
  color: var(--ink);
  max-width: 780px;
  margin: 0 auto;
}

.mission-text em {
  font-style: normal;
  color: var(--accent);
}

/* ═══════════════════════════════ ДОВІРА ═══════════════════════════════ */
#trust .trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.tc {
  padding: 30px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.7, 0.25, 1),
    background 0.25s;
}

.tc:hover {
  transform: translateY(-4px) scale(1.015);
  background: var(--glass-hover);
}

.tc-ic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tc-ic svg {
  width: 20px;
  height: 20px;
}

.tc h3 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin-bottom: 9px;
  line-height: 1.3;
}

.tc p {
  font-size: 13.5px;
  color: var(--m);
  line-height: 1.8;
}

/* ═══════════════════════════════ ПРОЄКТИ (тизер) ═══════════════════════════════ */
/* Стрічка, а не сітка: усі секції головної гортаються однаково на
   будь-якій ширині, і під кожною стоїть той самий ряд стрілок. */
.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: 14px;
  /* поле під картку, що росте на ховері (див. коментар нижче) */
  padding: 34px 30px;
  margin: -34px -30px -18px;
  scroll-padding-left: 30px;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery > * {
  flex: 0 0 calc((100% - 28px) / 3);
  scroll-snap-align: start;
}

/* Підпис поверх знімка читався погано — білий текст лягав то на небо,
   то на світлий газон, — і до того ж зʼявлявся лише на ховері. Тому
   фото і підпис розведені: знімок зверху, підпис на світлій підкладці
   під ним. Картки в стрічці тягнуться по найвищій, тож підпис займає
   весь залишок висоти. */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--glass-bd);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: rgba(23, 51, 37, 0.06);
}

.shot img {
  width: 100%;
  /* height:auto обовʼязковий: без нього висота береться з атрибута
     height у розмітці (900) і перебиває aspect-ratio — картка
     витягується на всю висоту знімка */
  height: auto;
  aspect-ratio: var(--card-ratio);
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.shot-cap {
  flex-grow: 1;
  padding: 14px 16px 16px;
  background: rgba(246, 243, 234, 0.92);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.shot-cap span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--m);
  margin-top: 4px;
}

/* ═══════════════════════════════ ПОСЛУГИ ═══════════════════════════════ */
/* Сітка й картки .sc — у base.css: потрібні і тут, і на сторінці-каталозі. */

/* ═══════════════════════════════ ПРОЦЕС ═══════════════════════════════ */
#process .proc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Раніше п'ять кроків були зрощені в одну панель і через overflow:
   hidden на сітці не могли мати ні власного свічення, ні підйому.
   Тепер це звичайні картки, з тим самим ховером, що й решта. */
.ps {
  padding: 32px 24px;
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--card-shadow, var(--shadow));
}

.ps-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 16px;
}

.ps-t {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  color: var(--ink);
  line-height: 1.3;
}

.ps-d {
  font-size: 13px;
  color: var(--m);
  line-height: 1.75;
}

/* ═══════════════════════════════ БЛОГ ═══════════════════════════════ */
.blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.blog-head .rule {
  margin-bottom: 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bc {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.7, 0.25, 1),
    background 0.25s;
}

.bc:hover {
  transform: translateY(-5px) scale(1.022);
  background: var(--glass-hover);
}

.bc-img {
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  background: rgba(23, 51, 37, 0.06);
}

.bc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.bc-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bc-date {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-l);
  margin-bottom: 10px;
}

.bc-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 10px;
}

.bc-excerpt {
  font-size: 13px;
  color: var(--m);
  line-height: 1.75;
  flex-grow: 1;
}

/* Це посилання всередині картки-посилання, тому кнопкою воно лише
   виглядає: вкладати <a> в <a> не можна. */
.bc-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 7px 15px 7px 16px;
  border: 1px solid rgba(23, 51, 37, 0.22);
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.bc:hover .bc-more {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

/* ═══════════════════════════════ ВІДГУКИ ═══════════════════════════════ */
.rev-track {
  gap: 16px;
}

.rev-track::-webkit-scrollbar {
  display: none;
}

.rev {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
}

.rev-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  color: #e0a32e;
}

.rev-stars svg {
  width: 15px;
  height: 15px;
}

.rev-text {
  font-size: 14px;
  color: var(--w);
  line-height: 1.8;
  flex-grow: 1;
}

.rev-author {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 51, 37, 0.12);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.rev-author span {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--m);
  margin-top: 3px;
}

/* ═══════════════════════════════ FAQ ═══════════════════════════════ */
/* Самі стилі акордеона — у base.css: він потрібен і на сторінках послуг. */
#faq .faq-list {
  margin-bottom: 32px;
}

/* Послуги й блог на головній — теж стрічки. Каталог послуг і сторінка
   блогу лишаються сітками, тому правила прив'язані до секцій. */
/* Стрічка — контейнер з overflow-x: auto, а щойно одна вісь не visible,
   друга теж перестає нею бути. Тому картка, що виросла на ховері,
   обрізалась зверху й знизу разом зі свіченням. Поле всередині стрічки
   дає їй місце, від'ємний margin повертає зовнішні відступи на місце. */
#services .svc-grid,
#blog .blog-grid,
.rev-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: 16px;
  padding: 34px 30px;
  margin: -34px -30px -18px;
  scroll-padding-left: 30px;
}

#services .svc-grid::-webkit-scrollbar,
#blog .blog-grid::-webkit-scrollbar {
  display: none;
}

#services .svc-grid > *,
#blog .blog-grid > * {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
}

/* ═══════════════════════════════ АДАПТИВ ═══════════════════════════════ */
@media (max-width: 1024px) {
  #process .proc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* у видимій частині стрічки — дві картки */
  .gallery > * {
    flex-basis: calc((100% - 14px) / 2);
  }

  #services .svc-grid > *,
  #blog .blog-grid > *,
  .rev-track > * {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 960px) {
  #trust .trust-grid {
    grid-template-columns: 1fr;
  }

  .mission-card {
    padding: 38px 30px;
  }

}

@media (max-width: 768px) {
  /* «Наші роботи» → горизонтальна карусель зі свайпом.
     Стрічка виходить за поля .wrap: наступна картка має впиратися
     в край екрана, інакше праворуч лишається порожня смуга. */
  .gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 18px 0 20px var(--gutter);
    margin: -18px calc(var(--gutter) * -1) -10px;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }

  .gallery .shot {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .gallery .shot-cap {
    padding: 13px 15px 15px;
  }
}

@media (max-width: 700px) {
  .blog-grid,
  #process .proc-grid {
    grid-template-columns: 1fr;
  }

  .rev {
    flex: 0 0 82%;
  }

  .scc {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  #hero {
    padding: 120px 0 70px;
    min-height: auto;
  }

  .hero-h1 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .ps {
    padding: 26px 22px;
  }

  .svc-more {
    padding: 24px 22px;
  }
}

/* «під ключ» — стійкий вираз, не розриваємо його переносом */
.hero-h1 em {
  white-space: nowrap;
}


/* ═════════════════ Каруселі на мобільному ═════════════════
   На вузькому екрані сітки послуг і блогу перетворюються на
   горизонтальні стрічки зі свайпом — так одразу видно, що карток
   більше, ніж уміщається на екран. Каталог послуг і сторінка блогу
   лишаються сітками, тому правила прив'язані до секцій головної. */
@media (max-width: 768px) {
  #services .svc-grid,
  #blog .blog-grid,
  .rev-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 12px;
    padding: 18px 0 20px var(--gutter);
    margin: -18px calc(var(--gutter) * -1) -10px;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
  }

  #services .svc-grid::-webkit-scrollbar,
  #blog .blog-grid::-webkit-scrollbar,
  .rev-track::-webkit-scrollbar {
    display: none;
  }

  #services .svc-grid > *,
  #blog .blog-grid > *,
  .rev-track > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  /* Стандартна тінь скла (0 18px 50px / 14%) навколо карток у стрічці
     читається як темна рамка на світлому фоні сторінки — тут вона
     має бути ледь помітною. */
  #services .svc-grid > .g,
  #blog .blog-grid > .g {
    --card-shadow: 0 4px 14px rgba(16, 30, 22, 0.06);
  }

  .gallery .shot {
    box-shadow: 0 4px 14px rgba(16, 30, 22, 0.06);
  }
}

/* ═════════════════ Ряд стрілок ═════════════════
   Однаковий у всіх секціях головної: у правому куті під стрічкою,
   поруч із кнопкою секції, якщо вона є. */
.car-nav-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 4px 0 26px;
}

/* Кнопка ліворуч, стрілки — у правому куті, одним рядком. */
.works-foot,
.blog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.works-foot .btn,
.blog-foot .btn {
  order: 1;
}

.works-foot .car-nav-row,
.blog-foot .car-nav-row {
  order: 2;
}

/* Кнопці дозволяємо стискатися: на 375px вона разом зі стрілками
   не вміщається в рядок і без цього переносилась під них. */
.works-foot .btn,
.blog-foot .btn {
  flex: 0 1 auto;
  min-width: 0;
}

.works-foot .car-nav-row,
.blog-foot .car-nav-row {
  flex: 0 0 auto;
}