/* =============================================================
   PROVORS — home.css
   Стили специфичные для главной страницы (index.html)
   Зависит от: main.css, components.css
   Версия: 1.0
   ============================================================= */


/* ---------------------------------------------------------------
   Hero — минимальная высота для главной страницы
   (фолбек background-color определён в components.css)
--------------------------------------------------------------- */

.hero {
  min-height: clamp(420px, 68svh, 560px);
}


/* ---------------------------------------------------------------
   Вторичная кнопка в hero-блоке (белая, на тёмном фоне)
--------------------------------------------------------------- */

.btn-hero-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.btn-hero-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
}


/* ---------------------------------------------------------------
   Карточки направлений (блок «Три направления»)
--------------------------------------------------------------- */

.direction-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  text-decoration: none;
}

@media (min-width: 768px) {
  .direction-card {
    padding: var(--space-lg) var(--space-md);
  }
}

.direction-card__arrow {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
}


/* ---------------------------------------------------------------
   Блок «Почему PROVORS» — факты с иконками
--------------------------------------------------------------- */

.why-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.why-item__icon {
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.why-item__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
}

.why-item__text {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}


/* ---------------------------------------------------------------
   CTA под сеткой товаров
--------------------------------------------------------------- */

.catalog-cta {
  text-align: center;
  margin-top: var(--space-lg);
}


/* ---------------------------------------------------------------
   Блок «Как мы работаем» — шаги
--------------------------------------------------------------- */

.how-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.how-step__number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  color: rgba(122, 106, 94, 0.35);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.how-step__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
}

.how-step__text {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.how-accent {
  text-align: center;
  margin-top: var(--space-lg);
  margin-inline: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  max-width: fit-content;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-style: italic;
  color: var(--color-accent);
}

/* ---------------------------------------------------------------
   Блок «Три магазина» — click-to-reveal контактов (светлая тема)
   Механизм (.reveal-on / .contact / .contact__real / .contact__reveal,
   цели show_address/show_phone) общий — в main.js + components.css.
   Здесь только визуал контролов в светлой палитре (тёмный footer-стиль
   НЕ наследуем) и раскладка контактов внутри карточки.
--------------------------------------------------------------- */

/* Контейнеры контактов в карточке — на своих строках, единый ритм */
.store-card__contact { display: block; }
.store-card__contact[data-reveal="address"] { margin-bottom: var(--space-sm); }
.store-card__contact[data-reveal="phone"]   { margin-top: var(--space-xs); }

/* Контрол «Показать …»: иконка + текст, акцент на иконке */
.store-card .contact__reveal {
  align-items: center;
  gap: 7px;
  font: 600 14px/1.2 var(--font-body);
  color: var(--color-text);
  text-decoration: none;
}
.store-card .contact__reveal:hover { color: var(--color-cta-hover); opacity: 1; }
.store-card .contact__reveal svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--color-accent);
}

/* Раскрытый адрес-ссылка — кликабелен, без двойного нижнего отступа */
.store-card .store-card__address.contact__real { margin-bottom: 0; }

/* Раскрытые значения — догнать вес/плотность контролов (не тоньше «Показать…»).
   Точечно перекрываем под .store-card; components.css не трогаем. */
.store-card .contact[data-reveal="address"] .contact__real,
.store-card .contact[data-reveal="address"] .contact__real a {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: underline dotted;
}
.store-card .contact[data-reveal="address"] .contact__real a:hover {
  color: var(--color-accent);
}

.store-card .contact[data-reveal="phone"] .contact__real {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.store-card .contact[data-reveal="phone"] .contact__real:hover {
  color: var(--color-cta-hover);
}