/* Pochatok — внутрішні сторінки: шаблони (templates.html) і база знань (help.html).
   Figma шаблони: desktop 42:2, mobile 42:175, drop «Тип/Тема» 42:163, drop сортування 42:170.
   Figma база знань: desktop 43:314, mobile 43:433.
   Спільне для всього сайту (токени, шапка, меню, футер, кнопки, шрифт) — у style.css.
   Тут: спільний чорний верх із пошуком + пагінація → далі блоки кожної сторінки. */

/* ================= TOP: header + search (shared) ================= */
.page-top {
  position: relative;          /* .header from style.css is absolute inside */
  padding-top: 82px;           /* header row: 20 + 42 + 20 */
  background: var(--black);
  color: var(--white);
}

.page-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px var(--pad-wide) 0;
}
.page-search__title {
  font-size: var(--fs-xl);
  line-height: 1.1;
  text-align: center;
}
.page-search__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 622px;
  max-width: 100%;
  height: 64px;
  padding: 16px;
  border: 1px solid rgba(186, 185, 185, .5);
  transition: border-color .25s;
}
.page-search__box:focus-within { border-color: rgba(186, 185, 185, .9); }
.page-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 16px;
  line-height: 1.65;
}
.page-search__input::placeholder { color: #d9d9d9; opacity: 1; }
.page-search__input::-webkit-search-cancel-button { appearance: none; }
.page-search__submit { flex: none; display: grid; place-items: center; width: 24px; height: 24px; }
/* search hints (18.10): the drop list's look (black, 16 px rows, grey hover) under the box, on its border */
.page-search__box { position: relative; }
.search-hints {
  position: absolute;
  z-index: 20;
  top: calc(100% + 1px);
  left: -1px;
  right: -1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--black);
  color: var(--white);
  border: 1px solid rgba(186, 185, 185, .5);
  border-top: 0;
}
.search-hints[hidden] { display: none; }
.search-hints li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  font-size: 16px;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .15s;
}
.search-hints li:hover,
.search-hints li[aria-selected="true"] { background: rgba(89, 89, 89, .5); }
.search-hints small { flex: none; font-size: 14px; color: #d9d9d9; }
/* no filters under the search (help.html): the black block closes 60px below the box */
.page-search--end { padding-bottom: 60px; }

.tpl-filters {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px var(--pad-wide) 20px;
}
.tpl-filters__group { display: flex; align-items: center; gap: 40px; }

/* ---------- dropdown ---------- */
.drop { position: relative; }
.drop__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
}
.drop__chevron { transition: transform .25s; }
.drop.is-open .drop__chevron { transform: rotate(180deg); }
.drop__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 20px);      /* starts right where the black block ends */
  left: calc(-1 * var(--pad)); /* item padding 20 → option text lines up with the button text */
  width: max-content;          /* 18.10: «З кабінетом для курсів чи уроків» is longer than the 185 of the design */
  min-width: 185px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--black);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.drop.is-open .drop__list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s, transform .2s;
}
.drop--right .drop__list { left: auto; right: calc(-1 * var(--pad)); }
.drop__list li {
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  transition: background-color .15s;
}
.drop__list li[aria-selected="true"],
.drop__list li:hover,
.drop__list li:focus-visible { background: rgba(89, 89, 89, .5); }
/* a picked filter shows its value on the button (18.10: «З кабінетом для курсів чи уроків» is long) — cut with … */
.tpl-filters__group .drop__label { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .tpl-filters__group .drop__label { max-width: 80px; }
  .drop__list { max-width: calc(100vw - 2 * var(--pad)); }
  .drop__list li { white-space: normal; }
}

/* ================= LIST ================= */
.tpl-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 40px var(--pad-wide) 140px;
}
.tpl-list__title { font-size: var(--fs-xl); line-height: 1.1; }
/* one category of the catalogue (templates.html + the cabinet's cabinet.html) */
.tpl-group { display: flex; flex-direction: column; gap: 40px; scroll-margin-top: 100px; }
.tpl-group[hidden] { display: none; }
.tpl-card[hidden] { display: none; }
.tpl-empty { font-size: 16px; line-height: 1.65; color: var(--grey-text); }
.tpl-empty[hidden] { display: none; }
/* «з кабінетом для курсів» before such templates exist: an info plate (yellow = hints only), not «nothing found» */
.tpl-empty--soon { align-self: flex-start; padding: 14px 20px; background: var(--accent); color: var(--black); }

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 20px;
}
.tpl-card { display: flex; flex-direction: column; }
.tpl-card__preview {
  aspect-ratio: 1440 / 900;   /* 1440 × 900 like every site preview (user 06.10: «усі превью — під пропорції 1440×900») */
  background: var(--grey-bg) center top / cover no-repeat;
  transition: filter .3s;
}
/* real template: a full-page screenshot, the site's full width from the top (never zoomed into) */
.tpl-card__preview.has-shot { background: #111 var(--pv) center top / 100% auto no-repeat; transition: background-position 1.2s ease, filter .3s; }
.tpl-card:hover .tpl-card__preview { filter: brightness(.96); }
/* desktop: the preview scrolls down the page while the card is hovered, back up on leave (user 10.10: «щоб він
   прокручувався у превью автоматично на десктопі») */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .tpl-card:hover .tpl-card__preview.has-shot { background-position: center bottom; transition: background-position 8s linear, filter .3s; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-card__preview.has-shot, .tpl-card:hover .tpl-card__preview.has-shot { transition: none; background-position: center top; }
}
/* the name + the landing's diagonal arrow — the card is a link (user 10.10: «не зовсім зрозуміло що воно має посилання») */
.tpl-card__name { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 20px; line-height: 1.1; }
.tpl-card__name img { flex: none; width: 16px; height: 16px; transition: transform .2s; }
.tpl-card:hover .tpl-card__name img { transform: translate(2px, -2px); }
.tpl-card__desc { margin-top: 6px; font-size: 16px; line-height: 1.65; color: var(--grey-text); }

/* ---------- pagination ---------- */
.pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}
.pag__num {
  width: 27px;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  transition: background-color .2s;
}
.pag__num:hover,
.pag__num.is-current { background: var(--grey-bg); }
.pag__num.is-current { color: var(--grey-text); }
.pag__arrow { display: flex; align-items: center; justify-content: center; height: 27px; }
.pag__arrow img { flex: none; }
/* the Figma icons are drawn pointing down / left — turned the same way the design turns them */
.pag__arrow--prev, .pag__arrow--next { width: 9px; }
.pag__arrow--prev img { transform: rotate(90deg); }
.pag__arrow--next img { transform: rotate(-90deg); }
.pag__arrow--last img { transform: scaleX(-1); }
.pag__arrow:hover { opacity: .6; }

/* ================= HELP / knowledge base (help.html) ================= */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 140px var(--pad-wide);
}
.faq__list { display: flex; flex-direction: column; gap: 40px; width: 808px; max-width: 100%; }
.faq__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--black);
}
/* 18.10 (owner: «шрифтами як друга секція головної»): the article titles = the «Обирай тему» items (.h-l, 32 at 1440 / 28 on
   phones), not the section title size; the arrow = one text line, like the accordion's icon */
.faq__title { font-size: var(--fs-l); line-height: 1.1; }
.faq__title a { display: flex; align-items: center; justify-content: space-between; gap: 40px; transition: opacity .2s; }
.faq__title a:hover { opacity: .6; }
/* the diagonal arrow on the right, like «Обирай тему» (user 10.10: «тут треба додати іконку … як тут») */
.faq__title a::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: url("/assets/arrow-24-black.svg") center / contain no-repeat; transition: transform .35s ease; }
/* 18.10 (owner: «при наведенні вона повинна рівною ставати»): ↗ turns 45° into → on hover */
.faq__title a:hover::after { transform: rotate(45deg); }
.faq__text { font-size: 16px; line-height: 1.65; }
.faq .pag { width: 100%; }

/* ================= MOBILE (templates 42:175, help 43:433) ================= */
@media (max-width: 900px) {
  .page-top { padding-top: 60px; }   /* header row: 16 + 28 + 16 */
  .page-search { padding-top: 40px; }
  .page-search__title { font-size: 28px; }
  .page-search__box { width: 100%; height: 60px; }
  .page-search__input { font-size: 16px; }

  .tpl-list { gap: 40px; }
  .tpl-list__title { font-size: 28px; }
  .tpl-group { gap: 20px; }
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .tpl-card__preview { aspect-ratio: 390 / 740; }   /* phone-screen previews */
  .tpl-card__preview.has-shot { background-image: var(--pv-phone, var(--pv)); }
  .tpl-card__desc { display: none; }
  .tpl-card:nth-child(n + 7) { display: none; }      /* 6 per page on mobile, as in the design */
  .pag__num--wide { display: none; }                  /* pages 1–3 on mobile */

  .page-search--end { padding-bottom: 40px; }
  .faq { gap: 40px; padding: 40px var(--pad) 140px; }
  .faq__title { font-size: 28px; }
  .faq__title a { gap: 20px; }
  .faq__title a::after { width: 24px; height: 24px; }
  .faq__text { font-size: 16px; }
}

/* ================= lists inside a document section (help articles, offer — 10.10) =================
   .doc-sec / .doc-sec p live in pages.css; a bulleted / numbered list reads like the paragraphs around it */
.doc-sec ul, .doc-sec ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 24px; font-size: 16px; line-height: 1.65; color: var(--grey-text); }
.doc-sec li::marker { color: var(--black); }
@media (max-width: 900px) {
  .doc-sec ul, .doc-sec ol { font-size: 16px; }
}