/* Первый экран сервисных страниц: окно в две равные колонки — слева заголовок и форма, справа сцена «что получишь».
   Разметка — templates/includes/service_hero.html и шаблоны сервисов; сцена — 02_scene.css, формы — 03_forms.css. */

.svc-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 16px;
    border-radius: 24px;
    background: var(--surface-primary);
}

.svc-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
    padding: 32px;
    box-sizing: border-box;
}

html .svc-title {
    margin: 0;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: var(--fw-semibold);
    color: var(--text-color);
    text-align: left;
    text-wrap: balance;
}

html .svc-title span { color: var(--text-muted); }

html .svc-sub {
    margin: 16px 0 0;
    max-width: 480px;
    font-size: var(--fs-17);
    line-height: var(--lh-17);
    letter-spacing: var(--ls-17);
    color: var(--text-color);
    text-align: left;
    text-wrap: pretty;
}

.svc-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; container: svcform / inline-size; }
/* форма с зоной загрузки или полем текста забирает всю свободную высоту колонки */
.svc-form:has(.cv-input-card, textarea) { flex: 1; }
.svc-hero[data-svc="linkedin"] .svc-title span { display: block; }

/* Остаток лимита — второй строкой внутри кнопки, как в кнопке отклика на странице вакансии; на время запроса прячется */
.svc-form .btn[data-quota] { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; row-gap: 0; }
.svc-form .btn[data-quota]::after { content: attr(data-quota); flex: 0 0 100%; margin-top: -2px; color: rgba(255, 255, 255, 0.75); font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); font-weight: var(--fw-regular); text-align: center; }
.svc-form .btn[data-quota]:disabled::after { display: none; }

@media (max-width: 1279px) {
    .svc-hero { grid-template-columns: minmax(0, 1fr); }
    .svc-left { padding: 20px; }
    html .svc-title { font-size: 32px; }
    html .svc-sub { margin-top: 12px; max-width: none; }
}

@media (max-width: 520px) {
    .svc-left { padding: 16px; }
    html .svc-title { font-size: 30px; }
}

/* Кнопка покупки — искра, как на кнопках генерации (cover_letter, resume_tool); тут маской, потому что скрипты меняют textContent кнопки */
.svc-form .cv-input-card.is-limit-exhausted .cv-run-button,
.svc-form #linkedinCheckButton[data-linkedin-check-access="0"] { display: flex; align-items: center; justify-content: center; gap: 8px; }
.svc-form .cv-input-card.is-limit-exhausted .cv-run-button::before,
.svc-form #linkedinCheckButton[data-linkedin-check-access="0"]::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.86641 3.19523C6.09113 2.26847 7.40919 2.26847 7.63392 3.19523L8.25227 5.74527C8.3325 6.07615 8.59084 6.33449 8.92172 6.41473L11.4718 7.03307C12.3985 7.2578 12.3985 8.57586 11.4718 8.80059L8.92172 9.41893C8.59084 9.49917 8.3325 9.75751 8.25227 10.0884L7.63392 12.6384C7.40919 13.5652 6.09113 13.5652 5.86641 12.6384L5.24806 10.0884C5.16783 9.75751 4.90948 9.49917 4.5786 9.41893L2.02857 8.80059C1.10181 8.57586 1.10181 7.2578 2.02856 7.03307L4.5786 6.41473C4.90948 6.33449 5.16783 6.07615 5.24806 5.74527L5.86641 3.19523Z' fill='black'/%3E%3Cpath d='M13.2896 12.0946C13.4279 11.5243 14.2391 11.5243 14.3773 12.0946L14.7579 13.6638C14.8072 13.8674 14.9662 14.0264 15.1698 14.0758L16.7391 14.4563C17.3094 14.5946 17.3094 15.4057 16.7391 15.544L15.1698 15.9245C14.9662 15.9739 14.8072 16.1329 14.7579 16.3365L14.3773 17.9058C14.2391 18.4761 13.4279 18.4761 13.2896 17.9058L12.9091 16.3365C12.8598 16.1329 12.7008 15.9739 12.4972 15.9245L10.9279 15.544C10.3576 15.4057 10.3576 14.5946 10.9279 14.4563L12.4972 14.0758C12.7008 14.0264 12.8598 13.8674 12.9091 13.6638L13.2896 12.0946Z' fill='black'/%3E%3Cpath d='M15.9766 3.09336C16.0673 2.7191 16.5996 2.7191 16.6904 3.09336L16.9401 4.12319C16.9725 4.25681 17.0768 4.36114 17.2105 4.39354L18.2403 4.64326C18.6146 4.73402 18.6146 5.26631 18.2403 5.35706L17.2105 5.60678C17.0768 5.63918 16.9725 5.74351 16.9401 5.87714L16.6904 6.90696C16.5996 7.28123 16.0673 7.28123 15.9766 6.90696L15.7269 5.87714C15.6945 5.74351 15.5901 5.63918 15.4565 5.60678L14.4267 5.35706C14.0524 5.26631 14.0524 4.73402 14.4267 4.64326L15.4565 4.39355C15.5901 4.36114 15.6945 4.25681 15.7269 4.12319L15.9766 3.09336Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.3335 3.27607L16.1297 4.11659C16.0482 4.45256 15.7859 4.71488 15.4499 4.79635L14.6094 5.00016L15.4499 5.20398C15.7859 5.28544 16.0482 5.54776 16.1297 5.88373L16.3335 6.72425L16.5373 5.88373C16.6188 5.54776 16.8811 5.28544 17.2171 5.20398L18.0576 5.00016L17.2171 4.79635C16.8811 4.71488 16.6188 4.45256 16.5373 4.11659L16.3335 3.27607ZM16.7414 2.82096C16.6377 2.39323 16.0293 2.39323 15.9256 2.82096L15.6402 3.9979C15.6032 4.15062 15.484 4.26985 15.3312 4.30689L14.1543 4.59228C13.7266 4.696 13.7266 5.30433 14.1543 5.40805L15.3312 5.69344C15.484 5.73047 15.6032 5.84971 15.6402 6.00242L15.9256 7.17936C16.0293 7.6071 16.6377 7.6071 16.7414 7.17936L17.0268 6.00242C17.0638 5.84971 17.183 5.73047 17.3358 5.69344L18.5127 5.40805C18.9404 5.30433 18.9404 4.696 18.5127 4.59228L17.3358 4.30688C17.183 4.26985 17.0638 4.15062 17.0268 3.9979L16.7414 2.82096Z' fill='black'/%3E%3Cpath d='M6.3335 19.1668C5.87326 19.1668 5.50016 18.7937 5.50016 18.3335C5.50016 17.8733 5.87326 17.5002 6.3335 17.5002C6.79373 17.5002 7.16683 17.8733 7.16683 18.3335C7.16683 18.7937 6.79373 19.1668 6.3335 19.1668Z' fill='black'/%3E%3Cpath d='M2.16683 15.8335C1.70659 15.8335 1.3335 15.4604 1.3335 15.0002C1.3335 14.5399 1.70659 14.1668 2.16683 14.1668C2.62707 14.1668 3.00016 14.5399 3.00016 15.0002C3.00016 15.4604 2.62707 15.8335 2.16683 15.8335Z' fill='black'/%3E%3Cpath d='M11.3335 2.50016C10.8733 2.50016 10.5002 2.12707 10.5002 1.66683C10.5002 1.20659 10.8733 0.833496 11.3335 0.833496C11.7937 0.833496 12.1668 1.20659 12.1668 1.66683C12.1668 2.12707 11.7937 2.50016 11.3335 2.50016Z' fill='black'/%3E%3Cpath d='M18.8335 11.6668C18.3733 11.6668 18.0002 11.2937 18.0002 10.8335C18.0002 10.3733 18.3733 10.0002 18.8335 10.0002C19.2937 10.0002 19.6668 10.3733 19.6668 10.8335C19.6668 11.2937 19.2937 11.6668 18.8335 11.6668Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.86641 3.19523C6.09113 2.26847 7.40919 2.26847 7.63392 3.19523L8.25227 5.74527C8.3325 6.07615 8.59084 6.33449 8.92172 6.41473L11.4718 7.03307C12.3985 7.2578 12.3985 8.57586 11.4718 8.80059L8.92172 9.41893C8.59084 9.49917 8.3325 9.75751 8.25227 10.0884L7.63392 12.6384C7.40919 13.5652 6.09113 13.5652 5.86641 12.6384L5.24806 10.0884C5.16783 9.75751 4.90948 9.49917 4.5786 9.41893L2.02857 8.80059C1.10181 8.57586 1.10181 7.2578 2.02856 7.03307L4.5786 6.41473C4.90948 6.33449 5.16783 6.07615 5.24806 5.74527L5.86641 3.19523Z' fill='black'/%3E%3Cpath d='M13.2896 12.0946C13.4279 11.5243 14.2391 11.5243 14.3773 12.0946L14.7579 13.6638C14.8072 13.8674 14.9662 14.0264 15.1698 14.0758L16.7391 14.4563C17.3094 14.5946 17.3094 15.4057 16.7391 15.544L15.1698 15.9245C14.9662 15.9739 14.8072 16.1329 14.7579 16.3365L14.3773 17.9058C14.2391 18.4761 13.4279 18.4761 13.2896 17.9058L12.9091 16.3365C12.8598 16.1329 12.7008 15.9739 12.4972 15.9245L10.9279 15.544C10.3576 15.4057 10.3576 14.5946 10.9279 14.4563L12.4972 14.0758C12.7008 14.0264 12.8598 13.8674 12.9091 13.6638L13.2896 12.0946Z' fill='black'/%3E%3Cpath d='M15.9766 3.09336C16.0673 2.7191 16.5996 2.7191 16.6904 3.09336L16.9401 4.12319C16.9725 4.25681 17.0768 4.36114 17.2105 4.39354L18.2403 4.64326C18.6146 4.73402 18.6146 5.26631 18.2403 5.35706L17.2105 5.60678C17.0768 5.63918 16.9725 5.74351 16.9401 5.87714L16.6904 6.90696C16.5996 7.28123 16.0673 7.28123 15.9766 6.90696L15.7269 5.87714C15.6945 5.74351 15.5901 5.63918 15.4565 5.60678L14.4267 5.35706C14.0524 5.26631 14.0524 4.73402 14.4267 4.64326L15.4565 4.39355C15.5901 4.36114 15.6945 4.25681 15.7269 4.12319L15.9766 3.09336Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.3335 3.27607L16.1297 4.11659C16.0482 4.45256 15.7859 4.71488 15.4499 4.79635L14.6094 5.00016L15.4499 5.20398C15.7859 5.28544 16.0482 5.54776 16.1297 5.88373L16.3335 6.72425L16.5373 5.88373C16.6188 5.54776 16.8811 5.28544 17.2171 5.20398L18.0576 5.00016L17.2171 4.79635C16.8811 4.71488 16.6188 4.45256 16.5373 4.11659L16.3335 3.27607ZM16.7414 2.82096C16.6377 2.39323 16.0293 2.39323 15.9256 2.82096L15.6402 3.9979C15.6032 4.15062 15.484 4.26985 15.3312 4.30689L14.1543 4.59228C13.7266 4.696 13.7266 5.30433 14.1543 5.40805L15.3312 5.69344C15.484 5.73047 15.6032 5.84971 15.6402 6.00242L15.9256 7.17936C16.0293 7.6071 16.6377 7.6071 16.7414 7.17936L17.0268 6.00242C17.0638 5.84971 17.183 5.73047 17.3358 5.69344L18.5127 5.40805C18.9404 5.30433 18.9404 4.696 18.5127 4.59228L17.3358 4.30688C17.183 4.26985 17.0638 4.15062 17.0268 3.9979L16.7414 2.82096Z' fill='black'/%3E%3Cpath d='M6.3335 19.1668C5.87326 19.1668 5.50016 18.7937 5.50016 18.3335C5.50016 17.8733 5.87326 17.5002 6.3335 17.5002C6.79373 17.5002 7.16683 17.8733 7.16683 18.3335C7.16683 18.7937 6.79373 19.1668 6.3335 19.1668Z' fill='black'/%3E%3Cpath d='M2.16683 15.8335C1.70659 15.8335 1.3335 15.4604 1.3335 15.0002C1.3335 14.5399 1.70659 14.1668 2.16683 14.1668C2.62707 14.1668 3.00016 14.5399 3.00016 15.0002C3.00016 15.4604 2.62707 15.8335 2.16683 15.8335Z' fill='black'/%3E%3Cpath d='M11.3335 2.50016C10.8733 2.50016 10.5002 2.12707 10.5002 1.66683C10.5002 1.20659 10.8733 0.833496 11.3335 0.833496C11.7937 0.833496 12.1668 1.20659 12.1668 1.66683C12.1668 2.12707 11.7937 2.50016 11.3335 2.50016Z' fill='black'/%3E%3Cpath d='M18.8335 11.6668C18.3733 11.6668 18.0002 11.2937 18.0002 10.8335C18.0002 10.3733 18.3733 10.0002 18.8335 10.0002C19.2937 10.0002 19.6668 10.3733 19.6668 10.8335C19.6668 11.2937 19.2937 11.6668 18.8335 11.6668Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
