/* ============================================================
   Dreams by Alena Akhmadullina — лендинг «Выбор инфлюенсеров»
   Адаптивная реализация фрейма Лэндинг_4 (Figma).

   Блок встраивается в страницу dreams.ru между шапкой и подвалом.
   Всё изолировано под .landing:
   - собственный сброс, чтобы глобальные стили сайта (типографика,
     img/a/heading-правила, html{font-size}) не ломали вёрстку;
   - размеры в px / em / vw, без rem (rem зависит от html{font-size}
     хоста, em — от .landing);
   - новый контекст наложения (isolation: isolate).
   ============================================================ */

.landing {
  --green: #216d5e;
  --ink: #2d303a;
  --old: #979797;
  --line: #e4e4e4;
  --thumb-bg: #fbfaf8;
  --max: 1400px;
  --pad: clamp(16px, 4vw, 48px);

  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Jost", "Circe", "Futura", "Century Gothic",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---- Локальный сброс: перекрываем возможные глобальные стили сайта ---- */
.landing *,
.landing *::before,
.landing *::after { box-sizing: border-box; }

.landing section,
.landing article,
.landing figure,
.landing figcaption,
.landing div,
.landing p,
.landing h1,
.landing h2,
.landing span,
.landing svg,
.landing a {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-style: inherit;
  color: inherit;
}

.landing h1,
.landing h2 {
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}
.landing p { line-height: 1.5; }

.landing a {
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.landing a:hover,
.landing a:focus,
.landing a:visited { text-decoration: none; color: inherit; }

.landing img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: middle;
}

@media (min-width: 1280px) {
  .landing { font-size: 17px; }
}

/* ============================================================
   Hero
   ============================================================ */
.landing .hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  margin-top: 200px;
}
.landing .hero > * { min-width: 0; }

.landing .hero__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.landing .hero__gallery img {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 100 / 112;
  object-fit: cover;
}

.landing .hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  padding: 2em clamp(20px, 4vw, 48px);
  background: var(--green);
  color: #fff;
  text-align: center;
}
.landing .hero__panel > * { max-width: 100%; overflow-wrap: break-word; }
.landing .hero__panel h1 {
  font-size: clamp(1.4em, 3vw, 2.6em);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.landing .hero__panel p {
  font-size: clamp(0.9em, 1.5vw, 1.4em);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ============================================================
   Вводный абзац
   ============================================================ */
.landing .intro {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad);
  text-align: center;
  font-size: clamp(1.05em, 1.7vw, 1.4em);
  line-height: 1.6;
}

/* ============================================================
   Секции образов
   ------------------------------------------------------------
   .look          — фото справа, «магазин образа» слева
   .look--flip    — зеркально (фото слева)
   Товары: сетка 2 колонки. В образах из 3 вещей ячейка перед
   третьим товаром — подсказка «Дополнить образ» со стрелкой,
   указывающей на этот товар (концепция макета).
   ============================================================ */
.landing .looks { padding-bottom: clamp(32px, 6vw, 80px); }

.landing .look {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 84px) var(--pad);
}
.landing .look > * { min-width: 0; }

.landing .look__photo { grid-column: 2; }
.landing .look__shop  { grid-column: 1; grid-row: 1; }
.landing .look--flip .look__photo { grid-column: 1; }
.landing .look--flip .look__shop  { grid-column: 2; }

/* разделитель между образами — короткая линия по центру */
.landing .look + .look::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1018px, 78%);
  height: 1px;
  background: var(--line);
}

/* --- Фото + подпись --- */
.landing .look__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.landing .look__title {
  margin: 1.4em 0 0.55em;
  font-size: clamp(1.3em, 2.2vw, 1.9em);
  line-height: 1.25;
}
.landing .look__text {
  max-width: 48ch;
  color: var(--ink);
}

/* --- Магазин образа --- */
.landing .look__shop {
  display: flex;
  flex-direction: column;
}

.landing .look__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 2.6vw, 40px) clamp(16px, 2vw, 34px);
}

.landing .product {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.landing .product__ph {
  aspect-ratio: 4 / 5;
  background: var(--thumb-bg);
  overflow: hidden;
}
.landing .product__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.landing .product__cap {
  margin-top: 0.8em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 0.95em;
  line-height: 1.35;
}
.landing .product__price .old {
  margin-left: 0.55em;
  color: var(--old);
  text-decoration: line-through;
}

/* Товар-ссылка на карточку в каталоге */
.landing a.product {
  color: inherit;
  text-decoration: none;
}
.landing a.product:hover .product__name {
  text-decoration: underline;
}

/* --- Подсказка «Дополнить образ» со стрелкой --- */
.landing .hint {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  padding-right: clamp(8px, 2vw, 28px);
}
.landing .hint__label {
  font-size: 0.8em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.landing .hint__arrow {
  width: clamp(58px, 55%, 92px);
  height: auto;
  color: var(--ink);
}

/* --- Кнопка --- */
.landing .look__buy {
  align-self: center;
  margin-top: clamp(30px, 4vw, 52px);
  min-width: 260px;
}

/* ============================================================
   Кнопка (базовые стили)
   ============================================================ */
.landing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.95em 1.75em;
  border: 1px solid var(--ink);
  border-radius: 8px;
  font-size: 0.82em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Сброс стилей браузера, когда .btn — это <button> */
.landing button.btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  margin-top: 20px;
}
.landing .btn:hover { background-color: var(--ink); color: #fff; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1000px) {
  .landing .hero { grid-template-columns: 1fr; }
  .landing .hero__panel { order: -1; padding: 3em 1.5em; }

  .landing .look,
  .landing .look--flip {
    grid-template-columns: 1fr;
    gap: 2em;
  }
  .landing .look__photo,
  .landing .look__shop,
  .landing .look--flip .look__photo,
  .landing .look--flip .look__shop {
    grid-column: 1;
  }
  .landing .look__photo { grid-row: 1; }
  .landing .look__shop  { grid-row: 2; }
}

@media (max-width: 560px) {

  .landing .hero {
    margin-top: 140px;
  }

  .landing .look__buy {
    align-self: stretch;
    min-width: 0;
  }
  .landing .hint { gap: 0.8em; }
  .landing .hint__label { letter-spacing: 0.12em; }
}