/* ══════════════════════════════════════════════════════════════════════════
   Галузь — інфраструктурні об'єкти (templates/infrastrukturni-obyekty.php)

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

   Перейменування класів (розмітка спільна, назви — наші):
     .infrastructure-accordion__visual → .public-accordion__visual
     .infrastructure-accordion__image--wide → .public-accordion__image--wide
     .public-breadcrumbs               → .breadcrumbs
     .public-accent                    → .is-accent (Theme\rich_title())
   Власні секції (принципи, напрями) лишили назви шаблону.

   Фон FAQ: у шаблоні це картинка в ::after, у темі — контентний <img>
   у .public-faq__art. Тому тут не URL, а лише поправки прозорості й
   способу вписування.

   01 · Хіро          04 · Напрями
   02 · Тексти й зони 05 · FAQ
   03 · Принципи      06 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Хіро ──────────────────────────────────────────────────────────── */
.infrastructure-page .public-hero {
    min-height: 760px;
    background: radial-gradient(ellipse at 80% 35%, rgba(53, 117, 215, .12), transparent 43%), #031c45;
}

/* Фото — тло псевдоелемента (як на державних будівлях); адреса приходить
   у змінній --public-hero-photo з поля. Блок малює його «портретною»
   пропорцією з нахилом, тут потрібен простий прямокутник на 62% ширини. */
.infrastructure-page .public-hero__image::before {
    top:                0;
    right:              0;
    width:              62%;
    height:             100%;
    aspect-ratio:       auto;
    transform:          none;
    background:         var(--public-hero-photo) 70% center / cover no-repeat;
    filter:             saturate(.8) brightness(.77);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 17%, #000 38%);
    mask-image:         linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .5) 17%, #000 38%);
}

.infrastructure-page .public-hero__image::after {
    background: linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .95) 30%, rgba(3, 28, 69, .36) 63%, rgba(3, 28, 69, .07) 90%),
                linear-gradient(0deg, #031c45 0%, transparent 21%);
}

.infrastructure-page .public-hero__copy { max-width: 780px; }
.infrastructure-page .public-hero h1    { max-width: 770px; }
.infrastructure-page .public-proof      { width: min(960px, 100%); }

/* ── 02 · Тексти й критичні зони ────────────────────────────────────────── */
.infrastructure-page .public-accordion__visual { min-width: 0; margin: 0; }
.infrastructure-page .public-accordion__image--wide { aspect-ratio: 2 / 1; }

.infrastructure-page .public-accordion__visual figcaption {
    margin-top:     10px;
    color:          #a8bdd8;
    font-size:      12px;
    line-height:    1.5;
    letter-spacing: .01em;
}

.infrastructure-page .public-intro .public-prose a,
.infrastructure-page .public-building-type a,
.infrastructure-page .infrastructure-principles a {
    color:                 #8dcfff;
    text-decoration-color: rgba(141, 207, 255, .45);
    text-underline-offset: 3px;
}

.infrastructure-page .public-intro .public-prose a:hover,
.infrastructure-page .public-intro .public-prose a:focus-visible,
.infrastructure-page .public-building-type a:hover,
.infrastructure-page .public-building-type a:focus-visible,
.infrastructure-page .infrastructure-principles a:hover,
.infrastructure-page .infrastructure-principles a:focus-visible { color: #fff; }

/* ── 03 · Практичні принципи ────────────────────────────────────────────── */
.infrastructure-principles { background: radial-gradient(ellipse at 88% 15%, rgba(42, 116, 210, .12), transparent 45%); }

.infrastructure-principles .public-heading > p:last-child { margin-top: 18px; }

/* Шість колонок: перші три картки по дві, останні дві по три — сітка
   сама розкладає п'ять карток у два ряди без порожнин. */
.infrastructure-principles__grid {
    display:               grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap:                   18px;
}

.infrastructure-principles__grid article {
    position:      relative;
    grid-column:   span 2;
    min-width:     0;
    padding:       clamp(26px, 3vw, 38px);
    border:        1px solid rgba(113, 179, 245, .2);
    border-radius: 15px;
    background:    linear-gradient(145deg, rgba(24, 57, 113, .64), rgba(6, 25, 60, .9));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 42px rgba(0, 8, 28, .11);
}

.infrastructure-principles__grid article:nth-child(n+4) { grid-column: span 3; }

.infrastructure-principles__grid article::before {
    content:    "";
    position:   absolute;
    top:        -1px;
    left:       24px;
    width:      min(112px, calc(100% - 48px));
    height:     1px;
    background: var(--gradient-line);
}

.infrastructure-principles__grid article > span {
    color:          #85c8fb;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.infrastructure-principles__grid h3 {
    margin:      21px 0 14px;
    font-size:   clamp(21px, 1.75vw, 25px);
    font-weight: 500;
    line-height: 1.27;
}

.infrastructure-principles__grid p { margin: 0; font-size: 14px; line-height: 1.7; }

.infrastructure-principles__portfolio {
    display:               grid;
    grid-template-columns: minmax(0, .38fr) minmax(0, 1fr);
    gap:                   clamp(25px, 4vw, 56px);
    align-items:           center;
    margin-top:            45px;
    padding:               clamp(25px, 3vw, 38px);
    border:                1px solid rgba(116, 179, 246, .2);
    border-left:           2px solid #77c8ff;
    border-radius:         0 14px 14px 0;
    background:            linear-gradient(110deg, rgba(22, 67, 130, .39), rgba(5, 28, 66, .46));
}

.infrastructure-principles__portfolio h3 { margin: 0; font-size: clamp(22px, 2.3vw, 31px); font-weight: 400; }
.infrastructure-principles__portfolio p  { margin: 0; font-size: 15px; line-height: 1.7; }

/* ── 04 · Напрями ───────────────────────────────────────────────────────── */
.infrastructure-directions { background: radial-gradient(circle at 87% 15%, rgba(42, 106, 198, .1), transparent 43%); }

.infrastructure-directions__grid {
    display:               grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap:                   17px;
}

.infrastructure-directions__grid article {
    position:      relative;
    grid-column:   span 2;
    min-width:     0;
    padding:       30px 27px;
    border:        1px solid rgba(106, 174, 245, .2);
    border-radius: 15px;
    background:    linear-gradient(145deg, rgba(23, 56, 111, .64), rgba(6, 25, 61, .86));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.infrastructure-directions__grid article:nth-child(n+4) { grid-column: span 3; }

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

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

.infrastructure-page .infrastructure-directions__grid h3 {
    margin:      21px 0 13px;
    color:       #edf4ff;
    font-size:   clamp(20px, 1.65vw, 24px);
    font-weight: 500;
}

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

/* Колір, кегль та інтерліньяж тут свідомо НЕ задаємо. У шаблоні вони є
   (13px / 1.6 / #9fb7d4), але це мертві декларації: селектор односкладовий
   (0,1,0), а базове `.public-page p` (0,1,1) вище за специфічністю — у
   рефі примітка малюється звичайним абзацом 16px/1.72. Сусідні правила
   шаблону (`__grid p`, `__portfolio p`) мають у селекторі тег, тому
   виграють і застосовуються — це стосується саме примітки. */
.infrastructure-directions__note {
    max-width:  760px;
    margin:     30px auto 0;
    text-align: center;
}

.infrastructure-directions__note a { color: #91cfff; text-underline-offset: 3px; }

/* ── 05 · FAQ ───────────────────────────────────────────────────────────── */
/* У шаблоні фонове фото вписане `cover` і приглушене до .15 — у блоці
   інші значення, бо там інший знімок. */
.infrastructure-page .public-faq__art { opacity: .15; }
.infrastructure-page .public-faq__art img { object-fit: cover; }

/* ── 06 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .infrastructure-page .public-hero__image::after {
        background: linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .94) 38%, rgba(3, 28, 69, .72) 70%, rgba(3, 28, 69, .18) 100%),
                    linear-gradient(0deg, #031c45 0%, transparent 22%);
    }
    .infrastructure-principles__grid article { grid-column: span 3; }
    .infrastructure-principles__grid article:last-child { grid-column: 1 / -1; }
    .infrastructure-directions__grid article { grid-column: span 3; }
    .infrastructure-directions__grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .infrastructure-page .public-hero { min-height: 0; padding-top: 32px; }
    .infrastructure-page .public-hero__image::before {
        width:               100%;
        background-size:     cover;
        background-position: 62% top;
        filter:              saturate(.74) brightness(.62);
        -webkit-mask-image:  linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 35%, transparent 84%);
        mask-image:          linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .8) 35%, transparent 84%);
    }
    .infrastructure-page .public-hero__image::after {
        background: linear-gradient(90deg, rgba(3, 28, 69, .8), rgba(3, 28, 69, .48)),
                    linear-gradient(180deg, rgba(3, 28, 69, .2), #031c45 67%);
    }
    .infrastructure-page .public-hero h1 { max-width: 650px; font-size: clamp(37px, 7vw, 50px); }
    .infrastructure-page .public-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .infrastructure-page .public-proof li:nth-child(2) { border-top: 0; }
    .infrastructure-page .public-proof li:nth-child(odd) { border-right: 1px solid rgba(132, 175, 237, .2); }
    .infrastructure-page .public-proof li:nth-child(even) { border-right: 0; }
    .infrastructure-principles__portfolio { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .infrastructure-page .public-hero { padding-top: 24px; padding-bottom: 52px; }
    .infrastructure-page .public-hero .breadcrumbs { gap: 7px; margin-bottom: 34px; font-size: 12px; }
    .infrastructure-page .public-hero h1 { margin-top: 12px; font-size: clamp(31px, 8.8vw, 39px); line-height: 1.08; letter-spacing: -1.3px; }
    .infrastructure-page .public-hero__lead { font-size: 16px; line-height: 1.58; }
    .infrastructure-page .public-hero__detail { font-size: 14px; line-height: 1.63; }
    .infrastructure-page .public-proof { grid-template-columns: 1fr; margin-top: 32px; }
    .infrastructure-page .public-proof li:nth-child(odd) { border-right: 0; }
    .infrastructure-page .public-proof li:nth-child(2) { border-top: 1px solid rgba(132, 175, 237, .2); }
    .infrastructure-principles__grid,
    .infrastructure-directions__grid { grid-template-columns: 1fr; }
    .infrastructure-principles__grid article,
    .infrastructure-principles__grid article:nth-child(n+4),
    .infrastructure-principles__grid article:last-child,
    .infrastructure-directions__grid article,
    .infrastructure-directions__grid article:nth-child(n+4),
    .infrastructure-directions__grid article:last-child { grid-column: auto; }
    .infrastructure-principles__grid article,
    .infrastructure-directions__grid article { padding: 26px 23px; }
    .infrastructure-principles__portfolio { padding: 25px 22px; }
    .infrastructure-page .public-cta .btn { gap: 8px; padding: 14px 16px; font-size: 14px; }
}


/* Card-top accent: approved blue to white to gold gradient. */
.infrastructure-page .infrastructure-principles__grid article::before,
.infrastructure-page .infrastructure-directions__grid article::before {
    background: linear-gradient(
        90deg,
        rgba(0, 152, 240, 0) 0%,
        #0098f0 14%,
        #edf2ff 56%,
        #f2c893 100%
    );
}


/* Remaining card-top accents: blue to white to gold. */
.infrastructure-page .public-building-type__detail::before,
.infrastructure-page .public-services__grid article::before {
    background: linear-gradient(
        90deg,
        rgba(0, 152, 240, 0) 0%,
        #0098f0 14%,
        #edf2ff 56%,
        #f2c893 86%,
        rgba(242, 200, 147, 0) 100%
    );
}


/* 2026-10-12: long infrastructure CTA labels wrap without covering arrows. */
@media (max-width: 767.98px) {
    .site-main.infrastructure-page .public-hero .btn,
    .site-main.infrastructure-page .public-cta .btn {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 17px;
        align-items: center;
        gap: 12px !important;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 56px;
        height: auto !important;
        padding: 15px 18px !important;
    }
    .site-main.infrastructure-page .public-hero .btn .btn__label,
    .site-main.infrastructure-page .public-cta .btn .btn__label {
        min-width: 0;
        max-width: 100%;
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: normal;
        line-height: 1.4;
        text-align: center;
    }
    .site-main.infrastructure-page .public-hero .btn > .icon-arrow,
    .site-main.infrastructure-page .public-cta .btn > .icon-arrow {
        position: static !important;
        transform: none !important;
        width: 17px;
        height: 17px;
        margin: 0;
        justify-self: end;
    }
}