/* polish.css — правки керівника проєкту поверх main.css (підключається після нього).
   1) логотип; 2) заклики на телефоні; 3) текст поверх вежі на телефоні. */

/* ───────── 1. Логотип: знак клієнтки завжди в повному кольорі ─────────
   Було: непідсвічені пелюстки opacity .5 — на темному фоні жовтий ставав болотним,
   червоний коричневим, синя пелюстка зникала. Тепер усі 8 у кольорі,
   а пелюстка поточного розділу (остання підсвічена) світиться. */
.rosette .petal,
.rosette .petal.is-lit { opacity: 1; }
.rosette .petal.is-current {
  filter: drop-shadow(0 0 2px rgba(255, 240, 205, .95)) drop-shadow(0 0 5px rgba(240, 184, 18, .55)) brightness(1.1);
}

/* шапка після прокрутки — майже суцільна: розмиття під нею прибрали заради плавності 3D,
   і при 89 % крізь неї читався текст розділу під нею (напр. останнє питання FAQ у кінці сторінки) */
/* .97 теж мало: на майже чорному оку видно навіть 3 % білого тексту (знімок wf/1440x810/end.png 17:47) */
.top.is-solid { background-color: rgb(6, 12, 26); }

/* ───────── 2. Телефон: один великий заклик на екрані ───────── */
@media (max-width: 899px) {
  /* липка кнопка внизу — головна; поки вона на екрані, кнопку в шапці ховаємо */
  .top .btn-primary { transition: opacity .3s var(--ease-out); }
  html.sticky-on .top .btn-primary { opacity: 0; pointer-events: none; }

  /* заклик курсу — текстове посилання з тією самою чернеткою в Telegram, а не друга велика кнопка */
  .has3d .course-panel .card-course .go {
    min-height: 44px; padding: 0; border: 0; background: none;
    justify-content: flex-start; color: var(--gold); font-weight: 600;
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  }
  /* лічильник «2 / 4» не налазить на заклик курсу */
  .has3d .course-panel { padding-bottom: 6px; }
  .has3d .pin > .sticky > .pin-foot { margin-top: 14px; }
}

/* ───────── 3. Телефон: заголовок першого екрана на щільній підкладці ─────────
   H1 лежить на тілі вежі; золоті лінії вежі просвічували крізь літери. */
@media (max-width: 899px) {
  .hero::before {
    background: linear-gradient(180deg, transparent, rgba(6, 12, 26, .84) 15%, rgba(6, 12, 26, .92) 38%);
  }
  /* тест: заголовок лежав просто на даху вежі — одна суцільна смуга під підписом і заголовком */
  .quiz-inner > .eyebrow, .quiz-inner > .h2 {
    background: rgba(6, 12, 26, .9);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    max-width: none; box-sizing: content-box;
  }
  .quiz-inner > .eyebrow { margin-bottom: 0; padding-top: 14px; padding-bottom: 8px; }
  .quiz-inner > .h2 { margin-top: 0; padding-bottom: 16px; }
}

/* ───────── 4. Правило власника: кожен розділ = один екран, усе влазить ─────────
   Мої розділи: «Як навчаємо» (#how), «Питання» (#faq), «Контакти» (#contact).
   Не влазить — прибираємо менш важливе (повтори), а не зменшуємо все до дрібниці. */

/* — телефон — */
@media (max-width: 899px) {
  /* IV. Як навчаємо: вступ і нижній абзац (тривалість, кваліфікація) — є в «Питаннях» */
  #how .lead { display: none; }
  /* верхній відступ розділу 6svh штовхав останній факт під липку кнопку (до 776 при межі 760) */
  #how { padding-block: 10px; }
  #how .h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2rem); }
  #how .how-inner { padding: 16px 16px 6px; }
  #how .facts { margin-top: 10px; }
  #how .fact { padding: 10px 0 11px; }
  #how .fact .v { font-size: 1.3rem; line-height: 1.15; }
  #how .fact .l { margin-top: 4px; font-size: .875rem; line-height: 1.42; }

  /* VII. Питання: заголовок у 3 рядки; ховаємо 4 питання, на які вже відповідає «Як навчаємо»
     (2 — як проходить навчання, 6 — прогрес / звіт 14 днів, 8 — пропуск, 9 — перерва).
     Порядок питань у шаблоні змінять — оновити номери тут. */
  #faq .h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 1.9rem); max-width: none; }
  /* заголовок лежав на циферблаті вежі — суцільна смуга, як у тесті */
  #faq > .eyebrow, #faq > .h2 {
    background: rgba(6, 12, 26, .9);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  }
  #faq > .eyebrow { margin-bottom: 0; padding-top: 12px; padding-bottom: 6px; }
  #faq > .h2 { margin-top: 0; padding-bottom: 14px; }
  #faq .faq-box { margin-top: 16px; }
  #faq .faq-box > details:nth-of-type(2),
  #faq .faq-box > details:nth-of-type(6),
  #faq .faq-box > details:nth-of-type(8),
  #faq .faq-box > details:nth-of-type(9) { display: none; }
  #faq summary { padding: 14px 0; font-size: 1rem; }
  #faq details p { padding: 0 8px 14px 0; font-size: .9375rem; }

  /* VIII. Контакти: заголовок і текст щільніше, телефон одним рядком */
  #contact .h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2rem); }
  #contact .lead { font-size: .9375rem; line-height: 1.5; margin-top: 12px; }
  #contact .contacts-title { margin-top: 22px; }
  #contact .contacts a { font-size: .9375rem; padding: 6px 0; }
  #contact .contacts a[href^="tel:"] span { white-space: nowrap; }

  /* останній екран = розділ + підвал. Підвал був 209 px (логотип, текст, «Нагору» стовпчиком) —
     логотип є в шапці, тож у підвалі лише рядок і «Нагору», ~64 px */
  .foot { flex-wrap: nowrap; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); font-size: .75rem; line-height: 1.35; }
  .foot .foot-logo { display: none; }
  .foot .to-top { flex: none; }
  #contact { min-height: calc(100svh - var(--header-h) - 64px); }
}
/* — невеликий телефон (360×740 і подібні): ще щільніше, щоб усе влізло — */
@media (max-width: 899px) and (max-height: 780px) {
  #how .h2, #faq .h2, #contact .h2 { font-size: 1.5rem; }
  #how .how-inner { padding-top: 8px; }
  #how .facts { margin-top: 4px; }
  #how .fact { padding: 6px 0 7px; }
  #how .fact .v { font-size: 1.15rem; }
  #how .fact .l { font-size: .8125rem; line-height: 1.38; }
  #faq summary { padding: 10px 0; font-size: .9375rem; }
  #faq details p { font-size: .875rem; padding-bottom: 10px; }
  #contact .lead { font-size: .875rem; margin-top: 8px; }
  #contact .contacts-title { margin-top: 14px; }
  #contact .contacts a { padding: 3px 0; min-height: 40px; }
  #contact .hero-actions { margin-top: 16px; }
}

/* — десктоп — */
@media (min-width: 900px) {
  /* розділ — рівно один екран під шапкою, вміст по центру */
  #how, #faq { min-height: calc(100svh - var(--header-h)); padding-block: clamp(10px, 2svh, 32px); align-content: center; }
  /* VII. Питання: вежа в цьому розділі стоїть у лівій третині екрана — увесь текст праворуч від неї,
     заголовок над списком (раніше заголовок лежав просто на циферблаті) */
  #faq { display: block; padding-left: max(var(--gutter), 36vw); padding-right: var(--gutter); }
  #faq > .eyebrow, #faq > .h2, #faq > .faq-box { grid-column: auto; grid-row: auto; }
  #faq > .h2 { position: static; font-size: min(clamp(2rem, 1rem + 1.7vw, 3rem), 5svh); max-width: 30ch; }
  #faq > .faq-box { margin-top: clamp(12px, 2svh, 24px); max-width: 52rem; }
  /* IV. Як навчаємо: факти сіткою, без цитат (ці відгуки вже є в кільці відгуків — як на телефоні),
     без нижнього абзацу (тривалість і кваліфікація — у «Питаннях») */
  #how .h2 { font-size: min(clamp(2.2rem, 1.2rem + 2.2vw, 4.5rem), 7svh); }
  #how .how-quotes, #how .lead.small { display: none; }
  #how .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: clamp(12px, 2.4svh, 28px); }
  #how .fact { padding-block: clamp(8px, 1.4svh, 16px); }
  #how .fact .v { font-size: min(clamp(1.4rem, 1rem + .9vw, 2rem), 4svh); }
  #how .fact .l { font-size: .9375rem; line-height: 1.45; }
  /* контакти: заголовок у 2 рядки, менше повітря всередині картки */
  #contact .contacts-title { margin-top: clamp(14px, 3svh, 36px); }
  #faq summary { padding-block: clamp(10px, 1.6svh, 20px); }
  #faq details p { padding-bottom: clamp(10px, 1.6svh, 20px); }
  /* VIII. Контакти: останній екран = розділ + підвал разом (наприкінці сторінки видно обидва).
     Було: розділ на весь екран, і в самому кінці верх картки ховався під шапку на ~40 px. */
  .foot { --foot-h: 64px; min-height: var(--foot-h); padding-block: 10px; align-items: center; }
  .foot img { max-height: 34px; width: auto; }
  #contact { min-height: calc(100svh - var(--header-h) - 64px); padding-block: clamp(10px, 2.2svh, 28px); }
  /* фінал «вежа на своєму місці в місті»: картка ліворуч (~40 %), праворуч — вид на вежу й місто */
  #contact { justify-items: start; text-align: left; }
  #contact .final-card { width: min(46vw, 40rem); text-align: left; justify-items: start; padding-inline: clamp(20px, 2.6vw, 44px); }
  #contact .h2, #contact .lead { margin-inline: 0; }
  #contact .h2 { max-width: 16ch; }
  #contact .hero-actions, #contact .contacts { justify-content: flex-start; }
  #contact .act { align-items: flex-start; }
  #contact .contacts { gap: 0 22px; }
  #contact .contacts a { padding-block: 4px; }
  #contact .eyebrow { justify-content: flex-start; margin-inline: 0; }
  #contact .cta-sub, #contact .contacts-title { text-align: left; margin-inline: 0; }
  #contact .final-card { padding-block: clamp(16px, 3svh, 40px); }
  #contact .h2 { font-size: min(clamp(2rem, 1rem + 2vw, 3.4rem), 6.2svh); }
}
/* — десктоп/планшет до 800 px заввишки (1024×768, 1280×720): FAQ без 4 повторів «Як навчаємо» — */
@media (min-width: 900px) and (max-height: 800px) {
  #faq .faq-box > details:nth-of-type(2),
  #faq .faq-box > details:nth-of-type(6),
  #faq .faq-box > details:nth-of-type(8),
  #faq .faq-box > details:nth-of-type(9) { display: none; }
  /* «Як навчаємо»: вступ прибираємо — заголовок «Якщо випали з графіка» говорить сам */
  #how .lead { display: none; }
  /* контакти: @SprkAcademy під кнопкою — повтор адреси, куди й так веде кнопка */
  #contact .cta-sub { display: none; }
  #contact .contacts-title { margin-top: 10px; }
  #contact .lead { font-size: .9375rem; margin-top: 10px; }
  #contact .hero-actions { margin-top: 14px; }
}
/* картка фіналу на вузькому десктопі/планшеті — ширша, інакше текст ламається в 7 рядків і вона вилазить */
@media (min-width: 900px) and (max-width: 1199px) {
  #contact .final-card { width: min(58vw, 40rem); }
}
/* — невисокий десктоп (1366×650 і подібні) — */
@media (min-width: 900px) and (max-height: 700px) {
  #how .h2 { font-size: 6svh; }
  #contact .h2 { font-size: 5.4svh; }
}