/* ==========================================================
   GlampRussia — Стили страницы «О проекте» (about-page.css)
   Адаптировано под тему Reboot (wpshop.ru)
   Версия: 3.0

   КОНТЕКСТ REBOOT:
   Контент выводится внутри .site-content.fixed > .site-content-inner
   .fixed = max-width: 1190px, margin: 0 auto, padding: 0 45px
   .site-content = background: #fff, padding-top: 30px

   Для «полноширинных» секций (hero, цифры, CTA) используем
   приём margin-left: calc(-50vw + 50%) чтобы вырваться
   из контейнера .fixed, сохраняя поток документа.
   ========================================================== */

/* ---------- Общие ---------- */
.about-page {
  font-family: inherit;
  color: #222;
  line-height: 1.65;
  width: 100%;
  /* Компенсируем padding-top: 30px у .site-content */
  margin-top: -30px;
}
.about-page a {
  color: #2d7a4f;
  text-decoration: underline;
  transition: color .2s;
}
.about-page a:hover {
  color: #236340;
}

/* Внутренний контейнер (ограничивает текст в рамках) */
.about-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-section-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 1rem;
  color: #1a1a1a;
}

/* ---------- ПОЛНОШИРИННЫЕ СЕКЦИИ ---------- */
/* Вырываемся из .site-content.fixed (max-width 1190px) */
.about-fullwidth,
.about-hero,
.about-owners {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---------- HERO ---------- */
.about-hero {
  background: linear-gradient(135deg, #2d7a4f 0%, #2d7a4f 50%, #43a047 100%);
  color: #fff;
  padding: clamp(3rem, 8vw, 6rem) 1.25rem;
  text-align: center;
}
.about-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}
.about-hero__title {
  font-size: clamp(1.6rem, 4.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 1.25rem;
  color: #fff;
}
.about-hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  opacity: .92;
  margin: 0 0 2rem;
  line-height: 1.6;
}
.about-hero__cta {
  display: inline-block;
  background: #fff;
  color: #2d7a4f !important;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .85rem 2.4rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.about-hero__cta:hover {
  background: #e8f5e9;
  color: #2d7a4f !important;
  transform: translateY(-2px);
}

/* ---------- ЦИФРЫ ---------- */
.about-numbers {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  background: #f6faf6;
}
.about-numbers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.about-numbers__card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.25rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(46,125,50,.08);
  transition: transform .2s, box-shadow .2s;
}
.about-numbers__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(46,125,50,.14);
}
.about-numbers__value {
  display: block;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  color: #2d7a4f;
  line-height: 1.2;
}
.about-numbers__label {
  display: block;
  margin-top: .5rem;
  font-size: .95rem;
  color: #555;
}

/* ---------- КАК ЭТО РАБОТАЕТ ---------- */
.about-how {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  background: #fff;
}
.about-how__intro {
  text-align: center;
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}
.about-how__steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 680px;
  margin: 0 auto;
}
.about-how__step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.about-how__num {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d7a4f;
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  border-radius: 50%;
}
.about-how__text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .35rem;
  color: #1a1a1a;
}
.about-how__text p {
  margin: 0;
  font-size: .95rem;
  color: #555;
  line-height: 1.6;
}

/* ---------- ОТКУДА ДАННЫЕ ---------- */
.about-sources {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  background: #f6faf6;
}
.about-sources__intro {
  text-align: center;
  color: #555;
  margin-bottom: 2rem;
}
.about-sources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.about-sources__card {
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(46,125,50,.06);
  transition: transform .2s;
}
.about-sources__card:hover {
  transform: translateY(-3px);
}
.about-sources__card-icon {
  font-size: 2rem;
  margin-bottom: .75rem;
}
.about-sources__card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: #1a1a1a;
}
.about-sources__card p {
  font-size: .9rem;
  color: #555;
  margin: 0;
  line-height: 1.55;
}
.about-sources__disclaimer {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.about-sources__disclaimer p {
  margin: 0;
  font-size: .9rem;
  color: #555;
  line-height: 1.55;
}

/* ---------- ЧТО НАС ОТЛИЧАЕТ ---------- */
.about-mission {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  background: #fff;
}
.about-mission__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.about-mission__item {
  text-align: center;
  padding: 1.5rem 1rem;
}
.about-mission__icon {
  margin-bottom: 1rem;
}
.about-mission__item h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: #1a1a1a;
}
.about-mission__item p {
  font-size: .95rem;
  color: #555;
  margin: 0;
}

/* ---------- CTA ВЛАДЕЛЬЦАМ ---------- */
.about-owners {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  background: linear-gradient(135deg, #236340, #2d7a4f);
  color: #fff;
  text-align: center;
}
.about-owners__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  margin: 0 0 1rem;
  color: #fff;
}
.about-owners__text {
  font-size: 1.05rem;
  opacity: .92;
  margin: 0 0 2rem;
  line-height: 1.6;
}
.about-owners__benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.about-owners__benefit {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.12);
  padding: .65rem 1.25rem;
  border-radius: 8px;
  font-size: .95rem;
}
.about-owners__benefit span {
  font-size: 1.3rem;
}
.about-owners__benefit p {
  margin: 0;
}
.about-owners__cta {
  display: inline-block;
  background: #fff;
  color: #2d7a4f !important;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .85rem 2.4rem;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.about-owners__cta:hover {
  background: #e8f5e9;
  transform: translateY(-2px);
}

/* ---------- О КОМАНДЕ ---------- */
.about-team {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  background: #fff;
}
.about-team__text {
  font-size: 1.05rem;
  color: #555;
  margin: 0 0 1rem;
  line-height: 1.65;
  text-align: center;
}

/* ---------- РЫНОК ---------- */
.about-market {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  background: #f6faf6;
}
.about-market .about-container {
  text-align: center;
}
.about-market .about-container > p {
  font-size: 1.02rem;
  color: #555;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.about-market .about-container > p strong {
  color: #2d7a4f;
}
.about-market__highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}
.about-market__highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-market__highlight-value {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  color: #2d7a4f;
  line-height: 1.2;
}
.about-market__highlight-label {
  font-size: .9rem;
  color: #555;
  margin-top: .25rem;
}

/* ---------- AFFILIATE DISCLOSURE ---------- */
.about-disclosure {
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
  background: #fff;
}
.about-disclosure .about-container {
  text-align: center;
}
.about-disclosure .about-container > p {
  font-size: .95rem;
  color: #666;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.about-disclosure__highlight {
  background: #e8f5e9;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.25rem auto;
  font-size: .95rem;
  color: #333;
  line-height: 1.6;
  max-width: 640px;
}
.about-disclosure__highlight strong {
  color: #2d7a4f;
}

/* ---------- ПЕРЕОПРЕДЕЛЕНИЕ СТИЛЕЙ REBOOT ---------- */
/* Убираем белый фон .site-content, чтобы фоны секций были видны */
body.page-template-page-about .site-content {
  background: transparent;
  padding-top: 0;
}
/* site-content-inner в Reboot — flex, нужно block для нашей страницы */
body.page-template-page-about .site-content-inner {
  display: block;
}
/* Убираем боковой padding .site-content.fixed для полноширинных секций */
body.page-template-page-about .site-content.fixed {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}


/* ---------- SVG-иконки вместо эмодзи ---------- */
.about-sources__card-icon svg,
.about-owners__benefit svg {
  flex-shrink: 0;
}
.about-sources__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.about-sources__disclaimer-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- АДАПТИВ ---------- */
@media (max-width: 600px) {
  .about-how__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-owners__benefits {
    flex-direction: column;
    align-items: center;
  }
  .about-market__highlights {
    flex-direction: column;
    align-items: center;
  }
  .about-sources__grid {
    grid-template-columns: 1fr;
  }
  .about-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .about-numbers__grid {
    grid-template-columns: 1fr;
  }
}