/* ══════════════════════════════════════════════════════════════════════════
   Галузь — медичні заклади /galuzi/medychni-zaklady/
   (templates/medychni-zaklady.php)

   Порт `healthcare-bim-page-template/healthcare.css` — надбудови над системою
   `.public-*`, яку шаблон підключає окремим файлом (public-government.css).
   Сама система в нас спільна: css/blocks/public-industry.css.

   ПЕРЕЙМЕНУВАННЯ (класи шаблону → наші, бо розмітка спільна для галузей):
     .healthcare-hero__photo        → .public-hero__photo
     .healthcare-hero__image-note   → .public-hero__photo-note
     .healthcare-intro__cta         → .public-intro__btn
     .healthcare-accordion__visual  → .public-accordion__visual
     .healthcare-management__link   → .public-management__grid .public-text-link
     .healthcare-management__process→ .public-management__process
     .healthcare-timing__window     → .public-timing__window
     .healthcare-renovation         → .public-timing__aside
     .healthcare-timing__checklist  → .public-timing__checklist
     .healthcare-timing__icon       → малюється CSS (::before + маска check.svg)
   Власні секції сторінки (досвід, дослідження, напрями) лишили назви шаблону.

   01 · Хіро          04 · Коли потрібна
   02 · Вступ         05 · Досвід і дослідження
   03 · Менеджмент    06 · Напрями          07 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Хіро ──────────────────────────────────────────────────────────── */
.healthcare-page .public-hero {
    min-height: 760px;
    background:  radial-gradient(ellipse at 81% 29%, rgba(56, 115, 208, .13), transparent 42%), #031c45;
}

/* Фото тут контентне (<img> із alt), а не тло псевдоелемента. */
.healthcare-page .public-hero__image::before { content: none; }

.healthcare-page .public-hero__photo {
    position:           absolute;
    top:                0;
    right:              0;
    width:              58%;
    height:             100%;
    object-fit:         cover;
    object-position:    65% center;
    filter:             saturate(.85) brightness(.8);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .56) 15%, #000 31%);
    mask-image:         linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .56) 15%, #000 31%);
}

.healthcare-page .public-hero__image::after {
    background: linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .88) 28%, rgba(3, 28, 69, .36) 56%, transparent 80%),
                linear-gradient(0deg, #031c45 0%, transparent 18%);
}

.healthcare-page .public-hero__copy { max-width: 745px; }

.healthcare-page .public-hero h1 { max-width: 730px; }

.healthcare-page .public-proof { width: min(960px, calc(100% - 284px)); }

.healthcare-page .public-hero__photo-credit {
    width:                   258px;
    padding:                 14px 16px;
    border-color:            rgba(228, 240, 255, .25);
    background:              linear-gradient(135deg, rgba(121, 162, 216, .16), rgba(9, 31, 68, .32)), rgba(8, 25, 58, .48);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter:         blur(18px) saturate(1.15);
}

.healthcare-page .public-hero__photo-credit dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.healthcare-page .public-hero__photo-credit dl > div:last-child { grid-column: 1 / -1; }

.healthcare-page .public-hero__photo-note {
    display:     block;
    margin-top:  9px;
    color:       #bdcde4;
    font-size:   10px;
    line-height: 1.4;
}

/* ── 02 · Вступ і зони ──────────────────────────────────────────────────── */
.healthcare-page .public-intro__btn {
    width:           min(320px, 100%);
    min-width:       0;
    min-height:      56px;
    justify-content: space-between;
    padding:         17px 28px;
    border-radius:   10px;
    text-align:      left;
}

.healthcare-page .public-intro__btn .icon { flex: 0 0 17px; }

.healthcare-page .public-accordion__copy a {
    color:                 #90d0ff;
    text-decoration-color: rgba(144, 208, 255, .45);
    text-underline-offset: 3px;
}

.healthcare-page .public-accordion__copy a:hover { color: #fff; }

.healthcare-page .public-accordion__visual {
    min-width: 0;
    margin:    0;
}

.healthcare-page .public-accordion__visual figcaption {
    margin-top:     10px;
    color:          #a6bbd5;
    font-size:      11px;
    line-height:    1.5;
    letter-spacing: .015em;
}

/* ── 03 · BIM-менеджмент ────────────────────────────────────────────────── */
.healthcare-page .public-management__grid .public-text-link {
    min-height:    46px;
    margin-top:    2px;
    padding:       10px 15px;
    border:        1px solid rgba(128, 190, 246, .32);
    border-radius: 9px;
    background:    rgba(32, 79, 142, .2);
    font-size:     14px;
    line-height:   1.4;
}

.healthcare-page .public-management__grid .public-text-link:hover {
    border-color: rgba(151, 210, 255, .65);
    background:   rgba(41, 100, 172, .28);
    transform:    none;
}

.healthcare-page .public-management__process {
    padding:       25px 28px 25px 26px;
    border:        1px solid rgba(116, 176, 237, .27);
    border-radius: 16px;
    background:    linear-gradient(145deg, rgba(30, 69, 123, .38), rgba(7, 30, 69, .48));
    box-shadow:    inset 0 1px 0 rgba(220, 238, 255, .05);
}

.healthcare-page .public-management__process-label {
    margin:         0 0 17px;
    color:          #a8cef3;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.healthcare-page .public-management__steps {
    position:   relative;
    border-top: 0;
}

/* Вертикальна нитка, що з’єднує кружечки етапів. */
.healthcare-page .public-management__steps::before {
    content:    "";
    position:   absolute;
    top:        18px;
    bottom:     18px;
    left:       17px;
    width:      1px;
    background: linear-gradient(180deg, rgba(125, 188, 250, .55), rgba(125, 188, 250, .15));
}

.healthcare-page .public-management__steps li {
    position:              relative;
    grid-template-columns: 36px minmax(0, 1fr);
    gap:                   16px;
    min-height:            57px;
    padding:               4px 0;
    border:                0;
    color:                 #e4edfa;
    font-size:             14px;
    line-height:           1.45;
}

.healthcare-page .public-management__steps span {
    z-index:        1;
    display:        grid;
    place-items:    center;
    width:          36px;
    height:         36px;
    border:         1px solid rgba(138, 199, 251, .37);
    border-radius:  50%;
    background:     #143869;
    color:          #b5ddff;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .02em;
}

/* ── 04 · Коли потрібна ─────────────────────────────────────────────────── */
.healthcare-page .public-timing__window {
    margin-top:    28px;
    padding:       14px 18px;
    border-left:   2px solid #80c3fa;
    border-radius: 0 9px 9px 0;
    background:    linear-gradient(90deg, rgba(42, 104, 177, .19), rgba(42, 104, 177, .03));
}

.healthcare-page .public-timing__window > span {
    color:          #a8d7ff;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.healthcare-page .public-timing__window p {
    margin:      7px 0 0;
    color:       #d7e4f6;
    font-size:   15px;
    line-height: 1.6;
}

.healthcare-page .public-timing__aside {
    margin-top:    22px;
    padding:       21px 23px;
    border:        1px solid rgba(139, 179, 219, .22);
    border-left:   2px solid #d7ba81;
    border-radius: 0 11px 11px 0;
    background:    linear-gradient(112deg, rgba(28, 59, 104, .38), rgba(7, 28, 63, .24));
}

.healthcare-page .public-timing__aside h3 {
    margin:         0;
    color:          #f1f4fc;
    font-size:      17px;
    font-weight:    500;
    letter-spacing: -.02em;
}

.healthcare-page .public-timing__aside p {
    max-width:   56ch;
    margin:      9px 0 5px;
    color:       #c8d6eb;
    font-size:   14px;
    line-height: 1.6;
}

.healthcare-page .public-timing__aside a {
    display:         inline-flex;
    align-items:     center;
    min-height:      44px;
    border-bottom:   1px solid rgba(144, 208, 255, .4);
    color:           #a8d8ff;
    font-size:       14px;
    line-height:     1.4;
    text-decoration: none;
}

.healthcare-page .public-timing__aside a:hover {
    border-color: currentColor;
    color:        #fff;
}

.healthcare-page .public-timing__aside a:focus-visible,
.healthcare-page .public-management__grid .public-text-link:focus-visible {
    outline:        2px solid #99d4ff;
    outline-offset: 3px;
}

.healthcare-page .public-timing__checklist {
    min-width:     0;
    padding:       22px 24px 20px;
    border:        1px solid rgba(116, 176, 237, .27);
    border-radius: 16px;
    background:    linear-gradient(145deg, rgba(30, 69, 123, .36), rgba(7, 30, 69, .45));
    box-shadow:    inset 0 1px 0 rgba(220, 238, 255, .05);
}

.healthcare-page .public-timing__checklist > p {
    margin:         0 0 14px;
    color:          #a8cef3;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Перелік у дві колонки, заповнення по колонках (як у шаблоні). */
.healthcare-page .public-timing__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows:    repeat(5, minmax(66px, auto));
    grid-auto-flow:        column;
    column-gap:            22px;
    row-gap:               0;
}

.healthcare-page .public-timing__list li {
    display:               grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap:                   10px;
    align-items:           center;
    min-height:            66px;
    padding:               10px 0;
    border:                0;
    border-top:            1px solid rgba(126, 175, 234, .22);
    border-radius:         0;
    background:            transparent;
    box-shadow:            none;
    color:                 #dce7f8;
    font-size:             14px;
    line-height:           1.45;
}

/* Плашка з галочкою: у шаблоні це inline-SVG, у нас — два псевдоелементи. */
.healthcare-page .public-timing__list li::before {
    content:       "";
    width:         24px;
    height:        24px;
    border:        1px solid rgba(123, 194, 252, .31);
    border-radius: 7px;
    background:    rgba(61, 133, 206, .13);
}

.healthcare-page .public-timing__list li::after {
    content:             "";
    position:            absolute;
    width:               14px;
    height:              14px;
    margin:              5px 0 0 5px;
    background:          #9ad0ff;
    -webkit-mask-image:  url("../../img/check.svg");
    mask-image:          url("../../img/check.svg");
    -webkit-mask-size:   contain;
    mask-size:           contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
}

/* ── 05 · Досвід і дослідження ──────────────────────────────────────────── */
.healthcare-experience__grid,
.healthcare-directions__grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   17px;
}

.healthcare-experience__grid article,
.healthcare-directions__grid article {
    position:      relative;
    min-width:     0;
    padding:       31px 28px;
    border:        1px solid rgba(110, 177, 249, .2);
    border-radius: 15px;
    background:    linear-gradient(145deg, rgba(24, 57, 114, .65), rgba(6, 26, 62, .88));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 46px rgba(0, 8, 30, .12);
}

.healthcare-experience__grid article::before,
.healthcare-directions__grid article::before {
    content:    "";
    position:   absolute;
    inset:      -1px 20px auto;
    height:     1px;
    background: var(--gradient-line);
}

.healthcare-page .healthcare-experience__grid h3,
.healthcare-page .healthcare-directions__grid h3 {
    margin:      23px 0 22px;
    color:       #edf4ff;
    font-size:   clamp(20px, 1.65vw, 24px);
    font-weight: 500;
}

.healthcare-experience__grid dl {
    display: grid;
    gap:     0;
    margin:  0;
}

.healthcare-experience__grid dl div {
    display:         flex;
    justify-content: space-between;
    gap:             12px;
    padding:         11px 0;
    border-top:      1px solid rgba(130, 186, 244, .12);
}

.healthcare-experience__grid dt {
    color:     #95aecd;
    font-size: 12px;
}

.healthcare-experience__grid dd {
    margin:     0;
    color:      #e2ebf9;
    font-size:  12px;
    text-align: right;
}

.healthcare-page .healthcare-experience__cta {
    width:      min(270px, 100%);
    min-width:  0;
    margin-top: 26px;
}

.healthcare-research {
    display:               grid;
    grid-template-columns: minmax(0, .48fr) minmax(0, 1fr);
    gap:                   clamp(22px, 3vw, 42px);
    align-items:           start;
    margin-top:            40px;
    padding-top:           34px;
    border-top:            1px solid rgba(121, 184, 245, .17);
}

.healthcare-page .healthcare-research__intro h3 {
    margin:      12px 0 9px;
    font-size:   clamp(24px, 2.3vw, 31px);
    font-weight: 300;
    line-height: 1.2;
}

.healthcare-research__intro p {
    max-width:   38ch;
    margin:      0;
    font-size:   14px;
    line-height: 1.55;
}

.healthcare-research__grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   12px;
}

.healthcare-research__grid article {
    display:        flex;
    flex-direction: column;
    min-width:      0;
    padding:        20px 22px;
    border:         1px solid rgba(119, 198, 255, .2);
    border-radius:  13px;
    background:     rgba(6, 27, 65, .72);
}

.healthcare-research__grid article > span {
    display:        block;
    color:          #88b8e8;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.healthcare-research__grid strong {
    display:     block;
    margin:      10px 0 8px;
    color:       #dbeaff;
    font-size:   clamp(30px, 2.8vw, 38px);
    font-weight: 300;
    line-height: 1;
}

.healthcare-research__grid p {
    margin:      0 0 14px;
    font-size:   13px;
    line-height: 1.55;
}

.healthcare-research__grid a {
    margin-top:      auto;
    color:           #8fcfff;
    font-size:       12px;
    line-height:     1.4;
    text-decoration: none;
}

.healthcare-research__grid a:hover {
    color:                 #fff;
    text-decoration:       underline;
    text-underline-offset: 3px;
}

/* ── 06 · Напрями ───────────────────────────────────────────────────────── */
.healthcare-directions { background: radial-gradient(circle at 86% 17%, rgba(43, 108, 205, .11), transparent 44%); }

.healthcare-directions__grid article > span {
    color:          #7cc6ff;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.healthcare-page .healthcare-directions__grid h3 { margin-bottom: 14px; }

.healthcare-directions__grid p {
    margin:      0;
    font-size:   14px;
    line-height: 1.65;
}

/* ── 07 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .healthcare-page .public-proof { width: 100%; }

    .healthcare-page .public-hero__photo-credit { width: min(100%, 280px); }

    .healthcare-experience__grid,
    .healthcare-directions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .healthcare-research { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .healthcare-page .public-management__grid,
    .healthcare-page .public-timing__grid { gap: 28px; }

    .healthcare-page .public-hero {
        min-height:  0;
        padding-top: 34px;
    }

    .healthcare-page .public-hero__photo {
        width:              100%;
        object-position:    59% top;
        filter:             saturate(.8) brightness(.66);
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 35%, transparent 88%);
        mask-image:         linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 35%, transparent 88%);
    }

    .healthcare-page .public-hero__image::after {
        background: linear-gradient(90deg, rgba(3, 28, 69, .8), rgba(3, 28, 69, .42)),
                    linear-gradient(180deg, rgba(3, 28, 69, .25), #031c45 75%);
    }

    .healthcare-page .public-hero .breadcrumbs { margin-bottom: 42px; }

    .healthcare-page .public-hero h1 {
        max-width: 650px;
        font-size: clamp(38px, 5.2vw, 46px);
    }

    .healthcare-page .public-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .healthcare-page .public-proof li:nth-child(2) { border-top: 0; }

    .healthcare-page .public-proof li:nth-child(odd) { border-right: 1px solid rgba(132, 175, 237, .2); }

    .healthcare-page .public-proof li:nth-child(even) { border-right: 0; }

    .healthcare-page .public-hero__photo-credit {
        width:      min(100%, 280px);
        margin-top: 22px;
    }
}

@media (max-width: 520px) {
    .healthcare-page .healthcare-experience__cta { width: 100%; }

    .healthcare-page .public-management__grid .public-text-link {
        display:         flex;
        width:           100%;
        justify-content: space-between;
    }

    .healthcare-page .public-management__process { padding: 20px 18px; }

    .healthcare-page .public-timing__checklist { padding: 19px 18px 14px; }

    .healthcare-page .public-timing__list {
        grid-template-columns: 1fr;
        grid-template-rows:    none;
        grid-auto-flow:        row;
    }

    .healthcare-page .public-timing__list li {
        min-height: 0;
        padding:    11px 0;
    }

    .healthcare-page .public-timing__aside {
        margin-top: 18px;
        padding:    18px;
    }

    .healthcare-page .public-intro__btn { width: 100%; }

    .healthcare-page .public-hero__photo-credit { width: 100%; }

    .healthcare-page .public-hero {
        padding-top:    26px;
        padding-bottom: 52px;
    }

    .healthcare-page .public-hero .breadcrumbs {
        gap:           7px;
        margin-bottom: 42px;
        font-size:     12px;
    }

    .healthcare-page .public-hero h1 {
        margin-top:     12px;
        font-size:      clamp(32px, 9vw, 39px);
        line-height:    1.08;
        letter-spacing: -1.25px;
    }

    .healthcare-page .public-hero__lead {
        font-size:   16px;
        line-height: 1.6;
    }

    .healthcare-page .public-hero__detail {
        font-size:   14px;
        line-height: 1.65;
    }

    .healthcare-page .public-proof {
        grid-template-columns: 1fr;
        margin-top:            32px;
    }

    .healthcare-page .public-proof li:nth-child(odd) { border-right: 0; }

    .healthcare-page .public-proof li:nth-child(2) { border-top: 1px solid rgba(132, 175, 237, .2); }

    .healthcare-experience__grid,
    .healthcare-directions__grid,
    .healthcare-research__grid { grid-template-columns: 1fr; }

    .healthcare-experience__grid article,
    .healthcare-directions__grid article { padding: 27px 24px; }
}


/* Match section dividers and gradient outlines to the approved commercial page. */
.healthcare-page {
    --gradient-line: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 152, 240, .08) 8%,
        rgba(0, 152, 240, .48) 30%,
        rgba(237, 242, 255, .72) 52%,
        rgba(242, 200, 147, .46) 74%,
        rgba(242, 200, 147, .08) 92%,
        transparent 100%
    );
}