/* ============================================================
   VIDRO — головна: hero, категорійні плитки, футер
   ============================================================ */

/* ---------- Hero ---------- */

.v-hero { padding-block: var(--sp-6) var(--sp-8); }
.v-hero__line { display: block; }
.v-hero__tagline { max-width: 42ch; margin: var(--sp-4) 0 0; }

/* Кнопка до бестселерів — рішення для mobile: перший екран інакше не
   містить ані товару, ані ціни, а сеанс триває 44 секунди. */
.v-hero__cta { margin-top: var(--sp-6); width: 100%; }

.v-hero__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: var(--sp-8);
}
.v-hero__tile { aspect-ratio: var(--ratio-product); overflow: hidden; }
.v-hero__tile img { width: 100%; height: 100%; object-fit: cover; }
.v-hero__placeholder { display: block; width: 100%; height: 100%; background: var(--color-surface); }

@media (min-width: 1024px) {
  .v-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    padding-block: var(--sp-12) var(--sp-16);
  }
  .v-hero__tiles { margin-top: 0; }

  /* Зсув другої плити — фірмовий прийом нинішньої головної */
  .v-hero__tile:last-child { margin-top: var(--sp-16); }

  /* Аудит: «на desktop лише заголовок і два фото, жодної дії».
     Кнопку лишаємо, але по ширині напису — на всю колонку вона на
     великому екрані виглядала б як банер, а не як заклик. */
  .v-hero__cta { width: auto; align-self: flex-start; }
}

/* ============================================================
   WooCommerce-версія: доповнення до стилів головної.
   Файл підключається на всіх сторінках (inc/modules/content-pages.php):
   пошук-оверлей, відгуки й стрічки живуть не лише на головній.
   ============================================================ */

/* ---------- Hero: на desktop усе велике, без порожнього поля справа ---------- */

@media (min-width: 1024px) {
  .v-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-8); }
  .v-hero__tiles { gap: var(--grid-gap); }
}

/* ---------- «Що шукаєте» ---------- */

.v-home-tiles .v-railwrap { margin-top: var(--sp-6); display: block; }
.v-home-tiles .v-tiles--rail { margin-top: 0; }
@media (min-width: 1024px) { .v-tile__title { font-size: 26px; } }

/* ---------- Стрічка: «Дивитись усі» ---------- */

.v-rail__more { margin: var(--sp-4) 0 0; font-size: var(--fs-meta); }
vidro-rail { display: block; }

/* ---------- Відгуки ---------- */

/* Відео покупця — та сама клітинка 4:5, що й фото, щоб стрічка не стрибала. */
.v-review__video { width: 100%; aspect-ratio: var(--ratio-product); object-fit: cover; background: var(--color-ink); display: block; }

/* Сторінка «Відгуки»: сітка замість стрічки. */
.v-reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--grid-gap);
  margin-top: var(--sp-6);
}
@media (min-width: 768px)  { .v-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .v-reviews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v-reviews--page { margin-top: 0; }
.v-reviews--page .v-review__text { font-size: var(--fs-meta); }

/* ---------- Пошук-оверлей ---------- */

.v-search__label { margin: var(--sp-6) 0 var(--sp-2); }
.v-search__all { margin: var(--sp-6) 0 0; }
.v-search__empty + .v-chips { margin-bottom: var(--sp-6); }
.v-search__fallback-title { margin: 0 0 var(--sp-2); }

/* ---------- Текстові сторінки ---------- */

.v-page .v-display--cat,
.v-blog .v-display--cat,
.v-article .v-display--cat { overflow-wrap: anywhere; }
.v-faq .v-accordion { margin-top: var(--sp-6); }
.v-contact .v-display--section { margin-bottom: var(--sp-6); }
.v-page--reviews { padding-bottom: 0; }
.v-charity { margin-top: 0; }
.v-charity__grid { margin-top: var(--sp-6); }
.v-saved__grid { margin-top: var(--sp-6); }
.v-article__cover { max-width: 700px; width: 100%; height: auto; margin-bottom: var(--sp-6); }
.v-page__body .v-btn { text-decoration: none; }

/* Товари, про які йдеться в статті журналу: ряд із трьох фото 4:5 одразу після абзацу. */
.v-page__body .v-article__shop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--sp-6) 0;
}
.v-page__body .v-article__shop img { margin: 0; width: 100%; aspect-ratio: var(--ratio-product); object-fit: cover; }

/* ============================================================
   «ЯК ЦЕ НОСЯТЬ» — живі фото покупців, безперервна стрічка
   ============================================================ */
.v-ugc__head { margin-bottom: var(--sp-6); }
.v-ugc__cta { margin: var(--sp-3) 0 0; color: var(--color-muted); font-size: var(--fs-meta); }
.v-ugc__viewport { overflow: hidden; contain: paint; }
.v-ugc__track {
  display: flex;
  width: max-content;
  animation: v-ugc-run var(--ugc-duration, 90s) linear infinite;
}
.v-ugc__run { display: flex; gap: var(--grid-gap); padding: 0 var(--grid-gap) 0 0; margin: 0; list-style: none; }
.v-ugc__item { width: 60vw; max-width: 340px; flex: none; }
.v-ugc__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-surface); }
/* Пауза: курсор на комп'ютері, палець на телефоні — щоб роздивитись принт. */
.v-ugc__viewport:hover .v-ugc__track,
.v-ugc__viewport:active .v-ugc__track { animation-play-state: paused; }
@media (min-width: 1024px) {
  .v-ugc__item { width: 22vw; max-width: 380px; }
}
@keyframes v-ugc-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .v-ugc__track { animation: none; width: auto; }
  .v-ugc__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .v-ugc__run + .v-ugc__run { display: none; }
  .v-ugc__item { scroll-snap-align: start; }
}


/* ---------- Hero: одне велике фото (правка власника №1, 22.09) ---------- */

.v-hero__media { margin-top: var(--sp-8); overflow: hidden; }
.v-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v-hero__media a { display: block; height: 100%; }
@media (min-width: 1024px) {
  .v-hero__media { margin-top: 0; aspect-ratio: 4 / 3; }
  /* Фото ширше за текстову колонку: перший екран тримає саме воно. */
  .v-hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* Стрічка, якою можна крутити рукою.
   Клас is-live ставить vidro-marquee.js: без JS лишається CSS-анімація вище,
   тож блок ніколи не стоїть нерухомо. */
.v-ugc__viewport.is-live {
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.v-ugc__viewport.is-live::-webkit-scrollbar { display: none; }
.v-ugc__viewport.is-live .v-ugc__track { animation: none; width: max-content; }
.v-ugc__viewport.is-dragging { cursor: grabbing; }
/* Щоб перетягування не перетворювалось на перетягування картинки. */
.v-ugc__viewport.is-live .v-ugc__img { user-select: none; -webkit-user-drag: none; }

/* Стрічка про виробництво йде окремим блоком одразу за секцією, тому вона
   вже на всю ширину екрана — як «ЯК ЦЕ НОСЯТЬ». Тут лише відступ зверху. */
.v-production-strip { margin-top: var(--sp-8); }

/* ============================================================
   Hero на всю ширину, текст поверх фото (правка власника 01.10)
   Старі правила .v-hero (сітка «текст | фото») лишаються для
   сумісності, але .v-hero--cover їх перебиває вагою селектора.
   ============================================================ */

.v-hero--cover {
  position: relative;
  display: block;
  padding-block: 0;
  margin-bottom: var(--sp-8);
  isolation: isolate;
}

.v-hero--cover .v-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-surface);
}
.v-hero--cover .v-hero__bg img,
.v-hero--cover .v-hero__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Шторка під текстом. Це не тінь (тіней у макеті немає ніде), а градієнт
   із того боку, де лежить напис: на світлому кадрі білий заголовок інакше
   зникає, і кнопку не видно зовсім. */
.v-hero--cover .v-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 40%, rgba(0, 0, 0, 0) 74%);
}

.v-hero--cover .v-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 78vh;
  min-height: 78svh;
  padding-block: var(--sp-12);
  color: #FFFFFF;
}

.v-hero--cover .v-display { color: #FFFFFF; }
.v-hero--cover .v-ghost   { color: rgba(255, 255, 255, .55); }

.v-hero--cover .v-hero__cta {
  width: auto;
  margin-top: var(--sp-6);
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-ink);
}
.v-hero--cover .v-hero__cta:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); }

@media (min-width: 768px) {
  /* На широкому кадрі текст ліворуч, тож і шторка тягнеться від лівого краю. */
  .v-hero--cover .v-hero__bg::after {
    background: linear-gradient(to right, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .32) 44%, rgba(0, 0, 0, 0) 74%);
  }
  .v-hero--cover .v-hero__inner {
    justify-content: center;
    min-height: 480px;
    /* 16:9 — рівно та пропорція, у якій знято фотосесію (6000x3376),
       тож кадр лягає без жодного обрізання. Стеля 92vh потрібна лише
       для широких моніторів: інакше при 2560 px шапка була б 1440 px
       заввишки і витіснила б із першого екрана геть усе інше. */
    aspect-ratio: 16 / 9;
    max-height: 92vh;
  }
}