/* =========================================================
   Сторінки під пошукові запити: та сама формована поверхня, що й головна.
   Кадри лежать у лотку, вимоги майданчика — на білій довідковій картці,
   довгий текст іде вузькою колонкою, щоб його було зручно читати.
   ========================================================= */

/* ---------- Перший екран ---------- */
.seo-hero { padding-block: clamp(18px, 3vw, 40px) clamp(36px, 5vw, 72px); }
.seo-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.seo-hero .h1 { max-width: 12em; font-size: clamp(2.2rem, 1.3rem + 3vw, 3.9rem); text-wrap: balance; }
.seo-hero .lead { margin-top: clamp(14px, 2vw, 20px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: clamp(14px, 2vw, 22px); font-size: 0.92rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.crumbs > * + *::before { content: "/"; margin-right: 10px; color: var(--steel-2); }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); } }
.pair__cap { margin-top: 8px; font-size: 0.84rem; line-height: 1.2; text-align: center; color: var(--ink-3); }
.pair__shot--good .pair__cap { font-weight: 650; color: var(--ink); }
.seo-pairs .pair__name { margin: 12px 8px 0; font-weight: 600; }
.seo-hero__pair { padding: 12px 12px 16px; }
.seo-hero__pair .pair__shot img { border-radius: 20px; }
.seo-hero__pair .pair__cap { font-size: 0.92rem; }
@media (max-width: 900px) {
  .seo-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Розділи ---------- */
.seo-section { padding-block: clamp(40px, 5.5vw, 80px); }
.seo-head { max-width: 46em; }
.seo-head .lead { margin-top: 12px; }

/* Комплект із шести кадрів: лоток, як на головній */
.seo-set { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: clamp(22px, 3vw, 32px) 0 0; padding: 14px; list-style: none; border-radius: 36px; background: var(--concave); box-shadow: var(--press); }
.seo-set li { min-width: 0; padding: 8px 8px 14px; border: 1px solid var(--edge); border-radius: 24px; background: var(--convex); box-shadow: var(--raise-xs); }
.seo-set img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 17px; background: #fff; }
.seo-set b { display: block; margin: 12px 6px 0; font-weight: 650; line-height: 1.2; }
.seo-set span { display: block; margin: 4px 6px 0; color: var(--ink-2); font-size: 0.88rem; line-height: 1.4; }
@media (max-width: 1100px) { .seo-set { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .seo-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 28px; }
  .seo-set li { padding: 6px 6px 12px; border-radius: 20px; }
  .seo-set img { border-radius: 14px; }
  .seo-set span { font-size: 0.84rem; }
}

/* Галерея: окремі кадри з підписом */
.seo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; list-style: none; }
.seo-gallery figure { margin: 0; padding: 10px 10px 14px; border-radius: 26px; background: var(--concave); box-shadow: var(--press-s); }
.seo-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 18px; background: #fff; }
.seo-gallery figcaption { margin: 10px 6px 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.4; }
.seo-gallery figcaption b { display: block; color: var(--ink); font-weight: 650; }
@media (max-width: 600px) {
  .seo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .seo-gallery figure { padding: 6px 6px 12px; border-radius: 20px; }
  .seo-gallery img { border-radius: 14px; }
  .seo-gallery figcaption { margin-inline: 4px; font-size: 0.84rem; }
}

/* До і після */
.seo-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; list-style: none; }

/* Вимоги майданчика: біла довідкова картка */
.seo-rules { margin-top: clamp(22px, 3vw, 32px); overflow: hidden; border: 1px solid #d3dbe8; border-radius: 26px; background: #fff; }
.seo-rules table { width: 100%; border-collapse: collapse; }
.seo-rules th, .seo-rules td { padding: 15px 22px; text-align: left; vertical-align: top; line-height: 1.5; }
.seo-rules thead th { padding-block: 14px; background: #f3f6fb; color: var(--ink-3); font-size: 0.88rem; font-weight: 600; }
.seo-rules tbody th { width: 22%; font-weight: 650; }
.seo-rules tbody td { color: var(--ink-2); }
.seo-rules tbody td:last-child { width: 34%; }
.seo-rules tbody tr { border-top: 1px solid #e6ebf3; }
.seo-rules td b { color: var(--ink); font-weight: 650; }
.seo-rules__src { padding: 14px 22px; border-top: 1px solid #e6ebf3; background: #f6f8fc; color: var(--ink-3); font-size: 0.9rem; line-height: 1.5; }
.seo-rules__src a { color: var(--ink-2); }
@media (max-width: 760px) {
  .seo-rules thead { display: none; }
  .seo-rules tbody tr { display: grid; padding: 14px 16px; }
  .seo-rules tbody th, .seo-rules tbody td, .seo-rules tbody td:last-child { width: auto; padding: 0; }
  .seo-rules tbody td { margin-top: 4px; }
  .seo-rules tbody td:last-child { margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--tag); }
  .seo-rules tbody td:last-child::before { content: "AI Продукт: "; color: var(--ink); font-weight: 650; }
  .seo-rules__src { padding: 14px 16px; }
}

/* Текст: вузька колонка, поруч кадр */
.seo-split { display: grid; grid-template-columns: minmax(0, 44em) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.seo-split__aside { position: sticky; top: 96px; margin: 0; padding: 10px 10px 14px; border-radius: 30px; background: var(--concave); box-shadow: var(--press); }
.seo-split__aside img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 21px; background: #fff; }
.seo-split__aside figcaption { margin: 10px 6px 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.4; }
@media (max-width: 900px) {
  .seo-split { grid-template-columns: minmax(0, 1fr); }
  .seo-split__aside { position: static; max-width: 420px; }
}
.prose { max-width: 44em; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 1.4em; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.prose h3 { margin-top: 1.5em; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.prose p, .prose ul, .prose ol { margin-top: 0.85em; color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; }
.prose h2 + p, .prose h3 + p { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--tag-deep); }
.prose b, .prose strong { color: var(--ink); font-weight: 650; }
.prose a { color: var(--ink); text-decoration-color: var(--tag); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Приклад опису: лист картки товару */
.seo-copy { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; margin-top: clamp(22px, 3vw, 32px); padding: clamp(12px, 2vw, 22px); border: 1px solid var(--edge); border-radius: 40px; background: var(--convex); box-shadow: var(--raise); }
.seo-copy__pic { padding: 10px; border-radius: 28px; background: var(--concave); box-shadow: var(--press); }
.seo-copy__pic img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 19px; background: #fff; }
.seo-copy__tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.seo-copy__tools .rocker { width: 100%; }
.seo-copy__tools .chip { padding: 0 12px; }
.seo-copy__doc { min-width: 0; padding: clamp(18px, 2.6vw, 30px); border-radius: 28px; background: #fff; }
.seo-copy__doc[hidden] { display: none; }
.seo-copy__label { color: var(--ink-3); font-size: 0.86rem; font-weight: 600; }
.seo-copy__title { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.2; }
.seo-copy__short { margin-top: 10px; color: var(--ink-2); line-height: 1.55; }
.seo-copy__text { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e6ebf3; }
.seo-copy__text p { color: var(--ink-2); line-height: 1.65; }
.seo-copy__text p + p { margin-top: 0.8em; }
.seo-copy__specs { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 22px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #e6ebf3; font-size: 0.95rem; }
.seo-copy__specs dt { color: var(--ink-3); }
.seo-copy__specs dd { margin: 0; font-weight: 550; }
.seo-copy__keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid #e6ebf3; list-style: none; }
.seo-copy__keys li { padding: 5px 10px; border-radius: 9px; background: #f1f4f9; color: var(--ink-2); font-size: 0.86rem; }
@media (max-width: 860px) {
  .seo-copy { grid-template-columns: minmax(0, 1fr); border-radius: 32px; }
  .seo-copy__side { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
  .seo-copy__pic { padding: 6px; border-radius: 20px; }
  .seo-copy__pic img { border-radius: 14px; }
  .seo-copy__tools { margin-top: 0; }
  .seo-copy__doc { border-radius: 22px; }
}
@media (max-width: 560px) {
  /* Перемикачам потрібна вся ширина, а фото товару й так є в назві й описі */
  .seo-copy__side { grid-template-columns: minmax(0, 1fr); }
  .seo-copy__pic { display: none; }
  .seo-copy__tools .chip { padding: 0 8px; }
}
@media (max-width: 480px) {
  .seo-copy__specs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .seo-copy__specs dd { margin-bottom: 8px; }
}

/* Інші сторінки: картки-посилання */
.seo-more ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.seo-more a { display: grid; gap: 4px; height: 100%; padding: 18px 20px; border: 1px solid var(--edge); border-radius: 22px; background: var(--convex); box-shadow: var(--raise-xs); color: var(--ink); text-decoration: none; transition: box-shadow 140ms var(--ease-out); }
.seo-more b { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.seo-more span { color: var(--ink-2); font-size: 0.93rem; line-height: 1.4; }
.seo-more a:active { box-shadow: var(--press-s); }
@media (hover: hover) { .seo-more a:hover { box-shadow: var(--raise-s); } }

/* Питання: та сама дошка, що й на головній */
.seo-faq .faq__board { margin-top: clamp(22px, 3vw, 30px); }