/* Style Studio, Task 18: SEO-блоки /visual/ под героем/заглушкой (templates/studio/seo.php), во всех режимах.
   Подключается <link> прямо перед блоками (in-body): ждёт только то, что ниже, — герой, кнопка и заглушка не блокируются.
   Не зависит от .lj-studio (в заглушке его нет) — свои токены на .lj-seo. Только px (у сайта корневой font-size 1px).
   Ниже сгиба: content-visibility:auto + contain-intrinsic-size (браузер не рисует блоки до прокрутки, место зарезервировано). */

.lj-seo {
  --seo-coal: #020201;
  --seo-graphite: #262320;
  --seo-paper: #f5f3ef;
  --seo-dim: rgba(245, 243, 239, 0.78);
  --seo-muted: #a7a7a7;
  --seo-red: #b22222;
  --seo-line: rgba(245, 243, 239, 0.14);
  box-sizing: border-box;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  color: var(--seo-paper);
  font-size: 16px;
  line-height: 1.55;
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
.lj-seo *,
.lj-seo *::before,
.lj-seo *::after { box-sizing: inherit; }
.lj-seo--how { contain-intrinsic-size: auto 560px; }
.lj-seo--looks { contain-intrinsic-size: auto 1500px; }
.lj-seo--services { contain-intrinsic-size: auto 240px; }
.lj-seo--faq { contain-intrinsic-size: auto 900px; padding-bottom: 72px; }

.lj-seo__title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--seo-paper);
  text-wrap: balance;
  overflow-wrap: anywhere;
  scroll-margin-top: 96px; /* id-якоря под шапкой сайта */
}
.lj-seo__intro {
  max-width: 640px;
  margin: 0 0 24px;
  font-size: 16px;
  color: var(--seo-dim);
  text-wrap: pretty;
}

/* Як це працює: настоящая последовательность — номера шагов крупно, красным */
.lj-seo-steps {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lj-step;
}
.lj-seo-steps__item {
  position: relative;
  margin: 0;
  padding: 0 0 20px 56px;
  border-bottom: 1px solid var(--seo-line);
  counter-increment: lj-step;
}
.lj-seo-steps__item::before {
  content: counter(lj-step);
  position: absolute;
  top: -6px;
  left: 0;
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  color: var(--seo-red);
  font-variant-numeric: tabular-nums;
}
.lj-seo-steps__name {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--seo-paper);
}
.lj-seo-steps__text {
  margin: 0;
  font-size: 15px;
  color: var(--seo-dim);
}

/* Популярні образи: квадратные превью лукбука, подпись слева */
.lj-seo-looks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lj-seo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
}
.lj-seo-card__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--seo-paper);
  text-decoration: none;
}
.lj-seo-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--seo-graphite);
}
.lj-seo-card__name {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.lj-seo-card__link:hover .lj-seo-card__name { text-decoration: underline; text-underline-offset: 3px; }
.lj-seo-card__try {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--seo-red);
  border-radius: 999px;
  color: var(--seo-paper);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--t-fast, 140ms) ease;
}
.lj-seo-card__try:hover { background-color: var(--seo-red); }

.lj-seo__more { margin: 24px 0 0; }
.lj-seo__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.lj-seo__pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(245, 243, 239, 0.4);
  border-radius: 999px;
  color: var(--seo-paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--t-fast, 140ms) ease, background-color var(--t-fast, 140ms) ease;
}
.lj-seo__pill:hover { border-color: var(--seo-paper); background-color: rgba(245, 243, 239, 0.08); }

.lj-seo-card__link:focus-visible,
.lj-seo-card__try:focus-visible,
.lj-seo__pill:focus-visible,
.lj-seo-faq__sum:focus-visible {
  outline: 2px solid var(--seo-paper);
  outline-offset: 3px;
}
.lj-seo-card__link:focus-visible { border-radius: 4px; }

/* Нажатия: без задержки двойного тапа, подсветка тапа — своя (фокус виден по :focus-visible) */
.lj-seo-card__link,
.lj-seo-card__try,
.lj-seo__pill,
.lj-seo-faq__sum {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(245, 243, 239, 0.12);
}

/* FAQ: нативные <details>, разделители графитом, знак +/− без вращения */
.lj-seo-faq {
  max-width: 760px;
  border-top: 1px solid var(--seo-line);
}
.lj-seo-faq__item { border-bottom: 1px solid var(--seo-line); }
.lj-seo-faq__sum {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.lj-seo-faq__sum::-webkit-details-marker { display: none; }
.lj-seo-faq__sum:hover .lj-seo-faq__q { text-decoration: underline; text-underline-offset: 3px; }
.lj-seo-faq__sum::after {
  content: "+";
  flex: none;
  width: 24px;
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  color: var(--seo-red);
}
.lj-seo-faq__item[open] > .lj-seo-faq__sum::after { content: "\2212"; }
.lj-seo-faq__q {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--seo-paper);
  overflow-wrap: anywhere;
}
.lj-seo-faq__a {
  max-width: 680px;
  margin: 0;
  padding: 0 40px 20px 0;
  font-size: 15px;
  color: var(--seo-dim);
  text-wrap: pretty;
}

@media (min-width: 600px) {
  .lj-seo-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
}
@media (min-width: 900px) {
  .lj-seo { padding-top: 72px; }
  .lj-seo--faq { padding-bottom: 96px; }
  .lj-seo__title { font-size: 40px; margin-bottom: 16px; }
  .lj-seo__intro { font-size: 18px; margin-bottom: 32px; }
  .lj-seo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .lj-seo-steps__item { padding: 64px 0 0; border-bottom: 0; border-top: 1px solid var(--seo-line); }
  .lj-seo-steps__item::before { top: 16px; font-size: 40px; }
  .lj-seo-steps__text { font-size: 16px; }
  .lj-seo-looks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
  .lj-seo-card__name { font-size: 18px; }
  .lj-seo-faq__q { font-size: 19px; }
  .lj-seo-faq__a { font-size: 16px; }
}