/* Teqtum Masters. Цвета и шрифт — переменные темы (--red, --ff); золото — знак «Амбассадор». */
.tqm { --tqm-dark: #1a1a1a; --tqm-gold: #d4af37; --tqm-gold-dark: #7a5c00; --tqm-grey: #f2f2f2; --tqm-line: #e8e8e8; --tqm-muted: #888884; --tqm-wa: #25d366; }
.tqm .container { max-width: 960px; }

/* Полоса страницы. Тема ведёт страницу цветом во всю ширину — фотография, светлая полоса,
   тёмный подвал, — и голого белого проёма на ней не бывает нигде. Наши секции живут по тем же
   правилам: цвет на всю ширину, содержимое в колонке. В макете клиента фон под карточкой
   тоже светлый (--g1), белым он стал только у нас при сборке. */
.section.tqm { padding-bottom: 100px; background: var(--tqm-grey); }
.section.tqm[is="verify"] { background: var(--tqm-dark); }
/* Список центров идёт вместе с остальными блоками страницы, поэтому и колонка у него как у темы */
.section.tqm[is="centers"] .container { max-width: 1440px; }
/* вход и центры стоят подряд и оба на светлой полосе: без этого между ними 200 px пустого серого */
.section.tqm + .section.tqm { padding-top: 0; }

/* Кнопки */
/* Геометрия кнопки взята у темы: 12 px, обычное начертание, разрядка 2 px, прописными.
   Кнопка — самый повторяемый элемент страницы, по ней вставка и опознаётся как чужая. */
.tqm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 32px; font: 400 12px/1.2 var(--ff); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: opacity .2s; }
.tqm-btn:hover { opacity: .85; }
.tqm-btn--wa { background: var(--tqm-wa); color: #fff; }
.tqm-btn--red { background: var(--red); color: #fff; }
.tqm-btn--ghost { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.25); }
.tqm-state .tqm-btn--ghost { border-color: var(--tqm-line); color: var(--tqm-dark); }
.tqm-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.tqm-label--gold { color: var(--tqm-gold); }
.tqm-pill { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.tqm-pill--gold { background: var(--tqm-gold); color: var(--tqm-gold-dark); }

/* Карточка */
.tqm-card { background: #fff; border: 1px solid var(--tqm-line); overflow: hidden; }
.tqm-strip { background: linear-gradient(135deg, #1a1a1a, #2a0000); padding: 10px 32px; border-bottom: 1px solid rgba(212,175,55,.2); }
.tqm-head { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 40px 32px 32px; background: var(--tqm-dark); color: #fff; }
.tqm-portrait { width: 180px; height: 180px; overflow: hidden; background: #2a2a2a; border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tqm-card--ambassador .tqm-portrait { border: 2px solid var(--tqm-gold); }
.tqm-portrait img { width: 100%; height: 100%; object-fit: cover; }
.tqm-portrait-brand { color: var(--red); font-size: 18px; font-weight: 800; letter-spacing: .25em; }
.tqm-portrait-sub { margin-top: 6px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); text-align: center; padding: 0 12px; }
.tqm-name { margin: 0 0 4px; font-size: 32px; font-weight: 700; line-height: 1.15; color: #fff; text-transform: none; }
.tqm-company { font-size: 16px; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.tqm-meta { font-size: 14px; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.tqm-verified { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.tqm-check { color: #4caf50; font-weight: 700; font-size: 14px; letter-spacing: .06em; }
.tqm-verified--expired .tqm-check { color: #f0a020; }
.tqm-number { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; color: rgba(255,255,255,.55); }
.tqm-notice { margin: 0 0 12px; padding: 10px 14px; background: rgba(240,160,32,.12); color: #f0c060; font-size: 13px; }
.tqm-courses { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.tqm-courses li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.tqm-course-title { color: #fff; font-weight: 600; }
.tqm-course-date { color: rgba(255,255,255,.45); white-space: nowrap; }
.tqm-course--expired .tqm-course-title { color: rgba(255,255,255,.5); text-decoration: line-through; }
.tqm-guarantee { padding: 12px 14px 12px; margin-bottom: 12px; background: rgba(255,255,255,.04); border-top: 2px solid var(--red); }
.tqm-card--ambassador .tqm-guarantee { border-top-color: var(--tqm-gold); }
.tqm-guarantee-title { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
.tqm-guarantee-text { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }
.tqm-verify-code { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; font-size: 13px; color: rgba(255,255,255,.55); }
.tqm-verify-code strong { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .2em; color: #fff; }
.tqm-verify-code small { font-size: 11px; color: rgba(255,255,255,.3); }
.tqm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tqm-card--ambassador .tqm-btn--wa { background: var(--tqm-gold); color: var(--tqm-gold-dark); }

/* Работы */
/* полоса страницы теперь серая, поэтому портфолио внутри карточки белое с отбивкой линией:
   иначе низ карточки сливается с фоном и она перестаёт читаться цельным листом */
.tqm-portfolio { padding: 28px 32px; background: #fff; border-top: 1px solid var(--tqm-line); }
.tqm-portfolio-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.tqm-portfolio-head h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tqm-muted); }
.tqm-portfolio-head span { font-size: 13px; color: var(--tqm-muted); }
.tqm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tqm-photo { margin: 0; background: #fff; border: 1px solid var(--tqm-line); overflow: hidden; }
.tqm-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tqm-photo figcaption { padding: 8px 10px; font-size: 12px; color: var(--tqm-muted); display: flex; flex-direction: column; gap: 1px; }
.tqm-photo-city { font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.tqm-empty { margin: 0; padding: 18px; text-align: center; font-size: 14px; color: var(--tqm-muted); background: #fff; border: 1px dashed #d0cfc9; }

/* Заявка */
.tqm-request { padding: 28px 32px; border-top: 1px solid var(--tqm-line); }
.tqm-request h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.tqm-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tqm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tqm-muted); }
/* Поля темы: подчёркивание снизу, без рамки по кругу, фон на тон темнее бумаги */
.tqm-form input, .tqm-form textarea { font: 14px var(--ff); padding: 8px 20px; border: 0; border-bottom: 1px solid #b9b9b9; background: var(--tqm-line); color: var(--tqm-dark); }
.tqm-form input:focus, .tqm-form textarea:focus { outline: none; border-bottom-color: var(--red); }
.tqm-form-wide { grid-column: 1 / -1; }
.tqm-note { margin: 0; font-size: 12px; color: var(--tqm-muted); text-align: center; }
.tqm-foot { padding: 16px 32px; border-top: 1px solid var(--tqm-line); font-size: 14px; }
.tqm-foot a { color: var(--red); }

/* Состояния без страницы */
.tqm-state { max-width: 640px; margin: 0 auto; padding: 48px 32px; background: #fff; border: 1px solid var(--tqm-line); text-align: center; }
.tqm-state .tqm-label { color: var(--tqm-muted); }
.tqm-state-title { margin: 0 0 12px; font-size: 26px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; }
.tqm-state-text { margin: 0 0 24px; font-size: 16px; color: #444; }
.tqm-state--revoked .tqm-state-title, .tqm-state--not_found .tqm-state-title { color: var(--red); }

/* Вход для мастеров */
.tqm-login .tqm-message { margin: 12px 0 0; font-size: 14px; min-height: 1.4em; }
.tqm-message--ok { color: #2e7d32; }
.tqm-message--error { color: var(--red); }

/* Подпись только для чтения с экрана: класс темы для этого не подходит, он есть не везде */
.tqm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tqm-verify-form input { flex: 1 1 auto; min-width: 0; }

/* Проверка сертификата */
.tqm-verify { color: #fff; }
.tqm-verify .tqm-label { color: var(--red); }
.tqm-verify-title { margin: 0 0 28px; font-size: 35px; font-weight: 300; line-height: 1.16; letter-spacing: 3px; color: #fff; text-transform: uppercase; max-width: 900px; }
.tqm-verify-form { display: flex; gap: 10px; max-width: 520px; }
.tqm-verify-form input { flex: 1; font: 14px var(--ff); padding: 8px 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; }
.tqm-verify-form input:focus { outline: none; border-bottom-color: var(--tqm-gold); }
.tqm-verify-result { margin-top: 16px; font-size: 15px; min-height: 1.4em; }
.tqm-verify-result a { display: inline-block; margin-top: 6px; color: var(--tqm-gold); }
.tqm-verify-result--ok { color: #7ddc8a; }
.tqm-verify-result--expired, .tqm-verify-result--warn { color: #f0c060; }
.tqm-verify-result--error { color: #ff7b6e; }

/* Учебные центры */
.tqm-country { margin: 24px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tqm-muted); }
.tqm-centers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tqm-center { padding: 18px 20px; background: #fff; border: 1px solid var(--tqm-line); }
.tqm-center-type { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tqm-muted); margin-bottom: 6px; }
.tqm-center-type--tc { color: var(--red); }
.tqm-center-name { font-size: 17px; font-weight: 600; }
.tqm-center-city { font-size: 14px; color: var(--tqm-muted); margin-bottom: 10px; }
.tqm-center-stat { font-size: 13px; color: #444; margin-bottom: 8px; }
.tqm-center-link { font-size: 13px; font-weight: 600; color: var(--red); }

@media (max-width: 767px) {
  .section.tqm { padding-bottom: 48px; }
  .tqm-verify-title { font-size: 24px; letter-spacing: 2px; }
  .tqm-btn { padding: 16px 24px; }
  .tqm-head { grid-template-columns: 1fr; padding: 28px 20px; gap: 20px; }
  .tqm-portrait { width: 140px; height: 140px; }
  .tqm-name { font-size: 26px; }
  .tqm-portfolio, .tqm-request { padding: 22px 20px; }
  .tqm-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tqm-form { grid-template-columns: 1fr; }
  .tqm-verify { padding: 28px 20px; }
  .tqm-verify-form { flex-direction: column; }
  .tqm-centers { grid-template-columns: 1fr; }
  .tqm-actions .tqm-btn { width: 100%; }
}