/* =====================================================================
   ТЗ Софії 28.10.2026 — косметичні правки (/, /portfolio/, /corporate-website-v2/, /rozrobka-sajtiv/).
   Лише позиції/відступи/розміри/контраст. Тексти, посилання, data-атрибути не змінюються.
   Підключається тільки на цих 4 сторінках; селектори з префіксом html body — бо calc-cta.css
   вантажиться пізніше (у body) з тією ж специфічністю.
   ===================================================================== */

/* ---------- 1.1 Головна, desktop: блок CTA піднято цілком (≥64 px до «Чому варто обрати») ---------- */
@media (min-width: 1024px) {
    html body .hf-hero { padding-bottom: clamp(80px, 11svh, 120px); }
    html body .hf-hero .hf-hero__actions.hf-hero__actions--calc { margin-top: clamp(40px, calc(100svh - 600px), 290px); }
}

/* ---------- 1.2 Головна, mobile: H1 + рядок послуг вище, затемнення під текстом ---------- */
@media (max-width: 767px) {
    html body .hf-hero { padding-top: 112px; }
    html body .hf-hero .hf-hero__content { top: 0; z-index: 1; }
    html body .hf-hero .hf-hero__actions.hf-hero__actions--calc { margin-top: 56px; z-index: 1; }
    html body .hf-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 60%);
        pointer-events: none;
    }
    html body .hf-hero .hf-hero__lead { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
}

/* ---------- 2.1 Портфоліо: темний оверлей на фоні херо (45%, верхня межа ТЗ) ---------- */
html body .pfg-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* ---------- 2.3 «Оберіть категорію…» більше й жирніше ---------- */
html body .pfg-hero .pfg-filters__title { width: auto; max-width: 720px; font-size: 22px; font-weight: 700; }
@media (max-width: 767px) {
    html body .pfg-hero .pfg-filters__title { width: 100%; max-width: 330px; font-size: 18px; line-height: 1.25; }
}

/* 2.1/2.3: м'яке локальне затемнення під «Оберіть категорію…» (найсвітліша ділянка стрічки) → контраст ≥ 4.5:1 */
html body .pfg-hero .pfg-filters__title { position: relative; isolation: isolate; text-shadow: 0 0 8px rgba(0, 0, 0, .8), 0 1px 14px rgba(0, 0, 0, .6); }
html body .pfg-hero .pfg-filters__title::before {
    content: '';
    position: absolute;
    inset: -10px -28px;
    z-index: -1;
    background: rgba(0, 0, 0, .5); border-radius: 999px; filter: blur(14px);
    pointer-events: none;
}

/* ---------- 2.4 Портфоліо, mobile: «Усі проєкти» на всю ширину + 2×2, категорії вище ---------- */
@media (max-width: 767px) {
    html body .pfg-hero { padding-bottom: 40px; }
    html body .pfg-hero .pfg-hero__intro { gap: 20px; }
    html body .pfg-hero .pfg-filters { margin-top: 28px; gap: 12px; }
    html body .pfg-hero .pfg-filters__bar:not(.is-stuck) .pfg-filters__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    html body .pfg-hero .pfg-filters__bar:not(.is-stuck) .pfg-filter {
        order: 0;
        grid-column: auto;
        height: 44px;
        min-height: 44px;
        border-radius: 14px;
    }
    html body .pfg-hero .pfg-filters__bar:not(.is-stuck) .pfg-filter[data-pf-filter="all"] { grid-column: 1 / -1; }
    html body .pfg-hero .pfg-filters__bar:not(.is-stuck) .pfg-filter .pfg-filter__label,
    html body .pfg-hero .pfg-filters__bar:not(.is-stuck) .pfg-filter:last-child:nth-child(odd) .pfg-filter__label {
        width: auto;
        font-size: 14px;
        letter-spacing: -0.3px;
        white-space: nowrap;
    }
}

/* ---------- 3.1 Корпоративні сайти: sticky з відступами як на /rozrobka-sajtiv/ (mobile 12 px) ---------- */
@media (max-width: 767px) {
    html body.pl-corp-body { --pl-calc-sticky-side: 12px; }
}

/* ---------- 3.2 Корпоративні сайти, mobile: сховати 2 плашки (розмітка лишається) ---------- */
@media (max-width: 767px) {
    html body .pl-corp__hero-card .pl-corp__hero-offers:not(.pl-corp__hero-offers--more) { display: none; }
}

/* ---------- 4.2 Розробка сайтів: H1 / опис / кнопка як на /corporate-website-v2/ ---------- */
html body .pl-rs__hero .pl-rs__lead .pl-rs__acc { color: #ff8a3d; font-weight: 700; }
html body .pl-rs__hero .pl-rs__lead { color: #e6e6e6; }
@media (max-width: 767px) {
    html body .pl-rs__hero .pl-rs__h1 { font-size: 34px; letter-spacing: -1.7px; line-height: 1; margin-top: 24px; }
    html body .pl-rs__hero .pl-rs__lead { margin-top: 20px; max-width: 320px; font-size: 15px; line-height: 1.25; letter-spacing: -0.3px; }
    html body .pl-rs__hero .pl-rs__hero-copy > .pl-calc-cta { margin: 20px auto 0; }
    html body .pl-rs__hero .pl-calc-cta__btn { min-height: 56px; font-size: 17px; }
}
@media (min-width: 768px) {
    html body .pl-rs__hero .pl-rs__lead { font-size: 18px; line-height: 1.25; letter-spacing: -0.36px; max-width: 640px; }
}
@media (min-width: 1024px) {
    html body .pl-rs__hero .pl-rs__h1 { font-size: 70px; letter-spacing: -3.5px; line-height: 1; max-width: 762px; }
    html body .pl-rs__hero .pl-rs__hero-copy { gap: 0; max-width: 820px; }
    html body .pl-rs__hero .pl-rs__lead { margin-top: 30px; }
    html body .pl-rs__hero .pl-rs__hero-copy > .pl-calc-cta { margin: 30px auto 0; }
}
@media (min-width: 1024px) and (max-height: 860px) {
    html body .pl-rs__hero .pl-rs__h1 { font-size: 62px; letter-spacing: -3.1px; }
    html body .pl-rs__hero .pl-rs__lead { margin-top: 22px; }
    html body .pl-rs__hero .pl-rs__hero-copy > .pl-calc-cta { margin-top: 22px; }
}

/* ---------- 4.4 Блок Telegram / телефон: більший, впорядкований ---------- */
html body .pl-rs__hero .pl-rs__hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.3;
}
html body .pl-rs__hero .pl-rs__hero-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    white-space: nowrap;
}
html body .pl-rs__hero .pl-rs__hero-trust { margin-top: 10px; font-size: 13px; }
@media (max-width: 767px) {
    html body .pl-rs__hero .pl-rs__hero-links { font-size: 15px; margin-top: 12px; }
    html body .pl-rs__hero .pl-rs__hero-trust { margin-top: 8px; font-size: 12px; }
}
@media (min-width: 1024px) {
    html body .pl-rs__hero .pl-rs__hero-links a { min-height: 32px; }
}

/* ---------- 4.5 Херо в один екран ---------- */
@media (max-width: 767px) {
    html body .pl-rs__hero { padding-bottom: 16px; }
}

/* ---------- 4.6 #pl-rs-calc: менші вертикальні відступи ---------- */
html body #pl-rs-calc.pl-rs__calc { padding: 16px 0; }
html body #pl-rs-calc .pl-rs__calc-card { min-height: 0; padding-top: 24px; padding-bottom: 24px; }
html body #pl-rs-calc .pl-rs__calc-body { gap: 12px; }
html body #pl-rs-calc .pl-rs__note--center { margin-top: 0; }
html body #pl-rs-calc .pl-rs__calc-alt { margin-top: 0; }
@media (max-width: 767px) {
    html body #pl-rs-calc .pl-rs__calc-card { padding: 20px 14px; }
    html body #pl-rs-calc .pl-rs__calc-body { gap: 10px; }
}