/* ============================================================
   Service page (template) — only NEW blocks live here.
   Reused look comes from style/results/shop/map/footer/modal css.
   Tokens: --bg-dark #050409  --text-light #FFF8EA  --accent-gold #FDC667
   ============================================================ */

:root {
    --svc-navy: #1C1A29;
    --svc-cream: #F8F5EE;
    --svc-dot: #B2A27F;
}

/* Header at start inherits standard fixed style to avoid jump */

/* ---- Shared section shell ---- */
.svc-intro,
.svc-who,
.svc-banner {
    width: 100%;
    margin: 0 auto;
    background: var(--svc-navy);
}
.svc-when {
    width: 100%;
    margin: 0 auto;
    background: var(--svc-cream);
    padding: 120px 0;
}
.svc-intro .container,
.svc-who .container,
.svc-when .container {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

/* ---- Breadcrumb ---- */
.svc-breadcrumb {
    background: var(--svc-navy);
    padding-top: 166px;          /* clears the absolute header (logo 110 + padding) */
    padding-bottom: 18px;
}
.svc-breadcrumb .container {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}
.svc-breadcrumb a,
.svc-breadcrumb span {
    font-family: var(--font-number), sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 248, 234, 0.7);
    text-decoration: none;
}
.svc-breadcrumb a:hover { color: var(--accent-gold); }
.svc-breadcrumb__sep { margin: 0 8px; }
.svc-breadcrumb__current { color: var(--text-light); }

/* ---- Intro ---- */
.svc-intro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 160px;
}
.svc-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 500;
    line-height: 56px;
    color: var(--text-light);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.svc-lead {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    color: var(--text-light);
    text-align: center;
    max-width: 1120px;
    margin: 0 auto;
}

/* ---- Dotted divider ---- */
.svc-divider {
    width: 100%;
    max-width: 1168px;
    height: 6px;
    margin: 40px auto 56px;
    background-image: radial-gradient(circle, var(--svc-dot) 3px, transparent 3.5px);
    background-size: 26px 6px;
    background-position: center;
    background-repeat: repeat-x;
}
.svc-divider--dark { --svc-dot: #B2A27F; }

/* ---- Two-column text + media ---- */
.svc-two-col {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
}
.svc-two-col--media-left { flex-direction: row-reverse; }

.svc-col-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.svc-col-media {
    flex-shrink: 0;
    width: 600px;
}
.svc-col-media img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
.svc-col-media--tall {
    width: 400px;
}
.svc-col-media--tall img {
    height: 558px;
    border-radius: 16px;
}

.svc-paragraph {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    color: var(--text-light);
    margin: 0;
}
.svc-paragraph--dark { color: #050409; }
.svc-paragraph--full {
    text-align: center;
    max-width: 1280px;
    margin: 56px auto 0;
}

.svc-list-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.svc-list-head {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    color: var(--text-light);
    margin: 0;
}
.svc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.svc-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    color: var(--text-light);
}
.svc-list--dark .svc-list-head,
.svc-list--dark li { color: #050409; }

.svc-bullet {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(253, 198, 103, 0.5);
    position: relative;
}
.svc-bullet::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent-gold);
}

/* ---- CTA wrapper (button reuses .btn-results) ---- */
.svc-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 56px;
}
.svc-cta .btn-results {
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.svc-cta .btn-results:hover {
    transform: scale(1.02);
    filter: brightness(1.08);
}

/* ---- Section heading (who / when) ---- */
.svc-who { padding: 120px 0; }
.svc-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 64px;
}
.svc-h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 500;
    line-height: 56px;
    color: var(--text-light);
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}
.svc-h2--dark { color: #050409; }
.svc-head .svc-divider { margin: 24px auto 0; }

/* ---- Before / After block spacing (cards reuse .ba-card) ---- */
.svc-who .before-after-grid {
    margin-top: 80px;
    gap: clamp(24px, 5vw, 71px);
    flex-wrap: wrap;
}

/* Від 769px і вище responsive.css перетворює цей рядок на карусель і серед
   іншого ставить `margin-top:-16px !important` — компенсацію власного
   `padding:16px`, щоб картки каруселей на головній лягали врівень із краєм
   контейнера. Тут ця компенсація з'їдала весь відступ: нижній край фото з
   блоку «кому підходить» і верх карток «до/після» збігалися піксель у піксель,
   і фото візуально налазило на фото.

   Селектор із двох класів довший за `.before-after-grid` у responsive.css, тож
   виграє серед !important без гонки і не чіпає каруселі решти сайту.
   64px + власні 16px padding = ті самі 80px, що й на вузьких екранах. */
@media (min-width: 769px) {
    .svc-who .before-after-grid { margin-top: 64px !important; }
}

/* На вузьких екранах те саме правило-карусель дає 20px (+4px власного
   padding) — злипання там немає, бо колонки стають одна під одною, але
   24px проти 80px на десктопі виглядало б неохайно. Вирівнюємо до 40px:
   більше й не треба, екран і так вузький. */
@media (max-width: 768px) {
    .svc-who .before-after-grid { margin-top: 36px !important; }
}

/* ---- CTA banner ---- */
.svc-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 80px 40px;
    position: relative;
}
.svc-banner__text {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 500;
    line-height: 56px;
    color: var(--text-light);
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}
.svc-banner__star {
    width: 57px;
    height: 56px;
    flex-shrink: 0;
}
.svc-banner__star--left { align-self: flex-start; }
.svc-banner__star--right { align-self: flex-end; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .svc-col-media { width: 480px; }
    .svc-col-media img { height: 340px; }
    .svc-col-media--tall { width: 360px; }
    .svc-col-media--tall img { height: 500px; }
}

@media (max-width: 992px) {
    .svc-two-col,
    .svc-two-col--media-left {
        flex-direction: column;
        gap: 40px;
    }
    .svc-col-media,
    .svc-col-media--tall {
        width: 100%;
        max-width: 560px;
    }
    .svc-col-media img,
    .svc-col-media--tall img {
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .svc-col-media--tall img { aspect-ratio: 400 / 558; }
    .svc-when { padding: 80px 0; }
    .svc-who { padding: 80px 0; }
    .svc-intro__inner { padding-bottom: 80px; }
}

@media (max-width: 768px) {
    .svc-title,
    .svc-h2,
    .svc-banner__text {
        font-size: 28px;
        line-height: 38px;
    }
    .svc-lead,
    .svc-paragraph,
    .svc-list-head,
    .svc-list li {
        font-size: 16px;
        line-height: 26px;
    }
    .svc-bullet { width: 16px; height: 16px; margin-top: 5px; }
    .svc-bullet::after { width: 8px; height: 8px; }
    .svc-banner { flex-direction: column; gap: 20px; padding: 56px 24px; }
    .svc-banner__star { width: 40px; height: 40px; align-self: center; }
    .svc-breadcrumb { padding-top: 95px; }
}