/* ══════════════════════════════════════════════════════════════════════════
   Галузь — державні та громадські будівлі
   /galuzi/derzhavni-ta-gromadski-budivli/
   (templates/derzhavni-ta-gromadski-budivli.php)

   Порт `public-government-bim-page-template/public-government.css`. Файл один,
   але складається з двох шарів: базового і «Commercial page design system»,
   який у другій половині перемальовує майже все під вигляд сторінки
   комерційної нерухомості (типографіка, смуги секцій, картки, акордеони).
   Тут записано ФІНАЛЬНИЙ стан — те, що реально бачить браузер.

   ЩО НЕ ПЕРЕНОСИЛОСЬ:
     .public-footer__*, .public-page .site-footer — підвал теми;
     .public-skip, .icon-sprite, .language-switch  — службове шаблону;
     мертві базові правила, перекриті другим шаром (вигляд акордеонів,
     матриці, карток, FAQ, плашки фактів).

   РОЗМІТКА vs ШАБЛОН:
     фото хіро     — поле в адмінці, адреса йде змінною --public-hero-photo
                     (малює псевдоелемент: йому потрібні маска й aspect-ratio);
     критичні зони — data-faq-* + faqAccordion() замість <details>;
     FAQ           — акордеон теми (шаблон сам писав, що копіює комерційну
                     сторінку), нумерація «01.» — CSS-лічильник;
     крихти        — компонент теми.

   01 · Оболонка        05 · Типи будівель     09 · Послуги
   02 · Хіро            06 · Матриця систем    10 · Проєкти
   03 · Вступ           07 · Практика          11 · CTA
   04 · Критичні зони   08 · Менеджмент        12 · FAQ
                             і «коли потрібна» 13 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.public-page {
    --public-line: rgba(123, 180, 255, .26);

    min-width:  320px;
    overflow-x: clip;
    background: radial-gradient(circle at 11% 8%, rgba(0, 152, 240, .09), transparent 25%),
                radial-gradient(circle at 92% 46%, rgba(76, 141, 255, .065), transparent 29%),
                #031c45;
    color:      var(--color-text);
}

/* Базова типографіка — через :where(): у шаблоні ті самі правила писалися як
   .public-page p (0,1,1) і потім скрізь перебивалися !important. */
:where(.public-page) h1,
:where(.public-page) h2,
:where(.public-page) h3 {
    font-family: var(--font-heading);
    color:       #eff5ff;
}

:where(.public-page) p {
    color:       #bdcae3;
    font-weight: 400;
    line-height: 1.72;
}

:where(.public-page) p,
:where(.public-page) li { font-size: 16px; }

:where(.public-page) li { line-height: 1.7; }

.public-page h1,
.public-page h2 { font-weight: 300; }

.public-page h2 {
    font-size:      clamp(30px, 4vw, 48px);
    line-height:    1.12;
    letter-spacing: -1.5px;
    text-wrap:      balance;
}

.public-page h3 {
    font-size:      clamp(20px, 2vw, 27px);
    font-weight:    500;
    line-height:    1.27;
    letter-spacing: -.025em;
}

.public-page a:focus-visible,
.public-page button:focus-visible {
    outline:        2px solid #90d6ff;
    outline-offset: 4px;
}

.public-section {
    position:            relative;
    padding:             104px 0;
    scroll-margin-top:   120px;
    border-bottom:       .5px solid transparent;
    border-image-source: var(--gradient-line);
    border-image-slice:  1;
}

.public-page .public-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(7, 35, 78, .23), rgba(3, 28, 69, .03)); }

.public-page .public-section:nth-of-type(3n) {
    background: radial-gradient(ellipse at 85% 12%, rgba(34, 114, 218, .1), transparent 42%),
                linear-gradient(180deg, rgba(2, 19, 50, .18), rgba(4, 30, 72, .2));
}

.public-eyebrow {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin:         0 0 20px;
    color:          #ffc203;
    font-size:      13px;
    font-weight:    600;
    line-height:    18px;
    letter-spacing: 1.82px;
    text-transform: uppercase;
}

.public-eyebrow::before {
    content:       "";
    width:         9px;
    height:        9px;
    flex:          0 0 9px;
    border-radius: 3px;
    background:    var(--gradient-dot);
}

.public-heading {
    max-width:     900px;
    margin-bottom: 54px;
}

.public-heading--center {
    margin-right: auto;
    margin-left:  auto;
    text-align:   center;
}

.public-heading--center .public-eyebrow { justify-content: center; }

/* Акцент у заголовках: Theme\rich_title() позначає його класом теми.

   Градієнт — `--gradient-accent`, а не `--gradient-heading`. У шаблоні
   замовника обидва токени мають однакове синє значення
   (90deg, #0098f0 → #edf2ff 52% → #f2c893), тож ім'я `heading` там нічого
   не означало. У темі ж `--gradient-heading` інший — із бузковою серединою
   (109deg, #9cc0ff → #b9a6ff 39% → #ffc77a 87%), і саме вона давала
   фіолетовий відтінок у h1/h2 цих сторінок.

   Беремо `--gradient-accent` (стиль «Gradient-2» з макета), бо так зроблено
   на решті сторінок — зокрема на сусідніх галузевих (.com-page,
   .residential-page, .ind-page). Те саме зауваження вже відпрацьоване на
   /galuzi/ (css/pages/galuzi.css) і /partnery-ta-kliyenty/. */
.public-page .is-accent {
    display:                 inline-block;
    padding:                 0 0 6px;
    margin:                  0 0 -6px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
    font-weight:             600;
    letter-spacing:          -1px;
}

.public-text-link {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    color:           #78c9ff;
    font-size:       15px;
    font-weight:     500;
    line-height:     1.5;
    text-decoration: none;
    transition:      color .2s ease, transform .2s ease;
}

.public-text-link:hover,
.public-text-link:focus-visible {
    color:     #fff;
    transform: translateX(2px);
}

.public-text-link .icon {
    flex:   0 0 17px;
    width:  17px;
    height: 17px;
}

.public-card-number {
    color:          #77c6ff;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .15em;
}

/* Кнопки — теми (вигляд у header.css), але кегль вони беруть зі сторінки. */
.btn--primary {
    font-size:      var(--fs-button);
    line-height:    var(--lh-button);
    letter-spacing: var(--ls-button);
}

.btn--lg { min-height: 56px; }

.public-page .btn {
    max-width:   100%;
    height:      auto;
    white-space: normal;
}

.public-page .btn__label { min-width: 0; }

.public-page .btn .icon { flex-shrink: 0; }

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.public-page .public-hero {
    display:     flex;
    /* По верху, а не по центру: інакше відстань від крихт до надзаголовка
       залежала б від кількості тексту нижче й стрибала між сторінками. */
    align-items: flex-start;
    min-height:  760px;
    padding:     54px 0 70px;
    overflow:    hidden;
    isolation:   isolate;
    background:  radial-gradient(ellipse at 78% 46%, rgba(28, 106, 216, .22), transparent 38%),
                 linear-gradient(120deg, #031c45 7%, #041a3e 55%, #020e25 100%);
}

/* Фото праворуч: розтягнуте під висоту хіро й розмите маскою ліворуч. */
.public-hero__image {
    position:   absolute;
    z-index:    -1;
    inset:      0;
    overflow:   hidden;
    background: #031c45;
}

.public-hero__image::before {
    content:            "";
    position:           absolute;
    top:                50%;
    right:              0;
    width:              auto;
    height:             100%;
    aspect-ratio:       1920 / 1903;
    transform:          translateY(-50%);
    background:         var(--public-hero-photo) center / cover no-repeat;
    filter:             brightness(.88) saturate(.92);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .85) 17%, #000 23%);
    mask-image:         linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .85) 17%, #000 23%);
}

.public-hero__image::after {
    content:        "";
    position:       absolute;
    inset:          0;
    background:     linear-gradient(0deg, #031c45 0%, transparent 13%);
    pointer-events: none;
}

.public-hero__inner {
    position: relative;
    z-index:  1;
    width:    100%;
}

.public-hero__copy {
    max-width:   760px;
    text-shadow: 0 4px 28px rgba(0, 4, 15, .72);
}

.public-hero h1 {
    max-width:      760px;
    margin:         16px 0 26px;
    font-size:      clamp(40px, 3vw, 58px);
    font-weight:    300;
    line-height:    1.08;
    letter-spacing: -1.9px;
    text-shadow:    none;
    text-wrap:      balance;
}

.public-hero h1 .is-accent {
    display:     inline;
    padding:     0;
    margin:      0;
    text-shadow: none;
}

.public-hero__lead {
    max-width:   730px;
    margin:      0 0 18px;
    color:       #e7efff;
    font-size:   18px;
    font-weight: 400;
    line-height: 1.7;
}

.public-hero__detail {
    max-width: 700px;
    margin:    0 0 28px;
    color:     #b7c3de;
}

.public-page .public-hero__copy .btn {
    min-width:       320px;
    min-height:      56px;
    justify-content: space-between;
    padding:         17px 28px;
    border-radius:   10px;
    font-weight:     400;
}

.public-proof {
    display:                 grid;
    grid-template-columns:   repeat(4, minmax(0, 1fr));
    gap:                     0;
    width:                   min(960px, calc(100% - 300px));
    max-width:               960px;
    margin:                  48px 0 0;
    padding:                 12px 10px;
    border:                  1px solid rgba(134, 178, 245, .26);
    border-radius:           14px;
    background:              linear-gradient(120deg, rgba(37, 58, 111, .75), rgba(8, 27, 65, .9));
    box-shadow:              0 20px 55px rgba(0, 9, 30, .28), inset 0 1px rgba(255, 255, 255, .1);
    list-style:              none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter:         blur(14px);
}

.public-proof li {
    display:      flex;
    align-items:  center;
    gap:          9px;
    min-height:   40px;
    padding:      8px 14px;
    border-right: 1px solid rgba(132, 175, 237, .25);
    color:        #dbe8ff;
    font-size:    14px;
    font-weight:  400;
    line-height:  1.5;
}

.public-proof li:last-child { border: 0; }

.public-proof .icon {
    flex:   0 0 18px;
    width:  18px;
    height: 18px;
    color:  #80c9ff;
}

/* Підпис до знімка: на широких екранах — у правому нижньому куті хіро. */
.public-hero__photo-credit {
    position:                absolute;
    right:                   var(--container-padding);
    bottom:                  0;
    width:                   280px;
    padding:                 16px 18px;
    border:                  1px solid rgba(218, 234, 255, .3);
    border-radius:           14px;
    background:              linear-gradient(135deg, rgba(119, 156, 211, .24), rgba(21, 45, 88, .42)), rgba(8, 25, 58, .48);
    box-shadow:              0 16px 36px rgba(0, 9, 32, .22), inset 0 1px rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter:         blur(22px) saturate(1.3);
}

.public-hero__photo-label {
    display:        block;
    margin-bottom:  8px;
    color:          #b9dcff;
    font-size:      9px;
    font-weight:    600;
    line-height:    1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.public-hero__photo-title {
    display:        block;
    color:          #f4f7ff;
    font-family:    var(--font-heading);
    font-size:      18px;
    font-weight:    500;
    line-height:    1.2;
    letter-spacing: -.025em;
}

.public-hero__photo-title span {
    display:        block;
    margin-top:     3px;
    color:          #cfdef2;
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0;
}

.public-hero__photo-credit dl {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   9px 10px;
    margin:                11px 0 0;
    padding-top:           10px;
    border-top:            1px solid rgba(216, 234, 255, .2);
}

.public-hero__photo-credit dt {
    margin-bottom: 2px;
    color:         #b2cae7;
    font-size:     10px;
    line-height:   1.3;
}

.public-hero__photo-credit dd {
    margin:      0;
    color:       #f0f5ff;
    font-size:   11px;
    font-weight: 500;
    line-height: 1.35;
}

/* ── 03 · Вступ ─────────────────────────────────────────────────────────── */
.public-intro__grid {
    display:               grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap:                   clamp(34px, 5vw, 76px);
    align-items:           start;
}

.public-intro h2 { margin-bottom: 30px; }

.public-prose p + p { margin-top: 22px; }

.public-intro__statement {
    position:      relative;
    padding:       17px 19px;
    border-left:   2px solid #55bdff;
    border-radius: 0 10px 10px 0;
    background:    rgba(25, 79, 149, .2);
    color:         #edf4ff;
    font-weight:   500;
}

/* ── 04 · Критичні зони ─────────────────────────────────────────────────── */
.public-zones { background: linear-gradient(180deg, rgba(8, 36, 78, .4), transparent 90%); }

.public-accordion {
    display:   grid;
    gap:       10px;
    max-width: 1120px;
    margin:    0 auto;
}

.public-accordion__item {
    overflow:      hidden;
    border:        1px solid rgba(67, 137, 220, .18);
    border-radius: 11px;
    background:    rgba(8, 32, 72, .72);
    box-shadow:    0 12px 26px -20px rgba(0, 4, 19, .95);
    transition:    border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.public-accordion__item:hover {
    border-color: rgba(89, 170, 244, .3);
    background:   rgba(10, 39, 84, .8);
}

.public-accordion__item.is-open {
    border-color: rgba(74, 179, 255, .58);
    background:   linear-gradient(145deg, rgba(14, 54, 111, .9), rgba(7, 31, 72, .95));
    box-shadow:   inset 0 1px rgba(203, 231, 255, .07), 0 20px 42px -31px rgba(62, 165, 255, .58);
}

.public-accordion__toggle {
    display:               grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    gap:                   14px;
    align-items:           center;
    width:                 100%;
    min-height:            66px;
    padding:               13px 17px 13px 21px;
    border:                0;
    background:            transparent;
    color:                 #ecf5ff;
    font:                  inherit;
    font-size:             16px;
    font-weight:           500;
    line-height:           1.35;
    text-align:            left;
    cursor:                pointer;
}

.public-accordion__num {
    color:          #65bdf7;
    font-size:      12px;
    line-height:    1;
    letter-spacing: .16em;
}

.public-accordion__arrow {
    display:       grid;
    place-items:   center;
    width:         29px;
    height:        29px;
    border:        1px solid rgba(72, 145, 224, .25);
    border-radius: 7px;
    background:    #102a51;
    box-shadow:    0 5px 11px rgba(0, 7, 22, .26);
    color:         #9fc5ef;
    transition:    transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.public-accordion__item.is-open .public-accordion__arrow {
    border-color: rgba(88, 180, 255, .42);
    background:   #123d75;
    box-shadow:   0 0 14px rgba(69, 171, 255, .16);
    color:        #d7edff;
    transform:    rotate(90deg);
}

.public-accordion__arrow-svg {
    width:  15px;
    height: 15px;
}

/* Розкриття — механізм FAQ (js/main.js → faqAccordion()). */
.public-accordion__panel {
    max-height: 0;
    overflow:   hidden;
    transition: max-height .4s ease;
}

.public-accordion__item.is-open .public-accordion__panel { max-height: none; }

.public-accordion__body {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap:                   clamp(24px, 3vw, 42px);
    align-items:           start;
    margin:                0 17px 17px;
    padding:               clamp(24px, 3vw, 38px);
    border-top:            1px solid rgba(104, 181, 249, .16);
    border-radius:         8px;
    background:            radial-gradient(circle at 90% 18%, rgba(49, 148, 244, .12), transparent 38%), rgba(5, 24, 58, .68);
}

.public-accordion__copy { min-width: 0; }

.public-accordion__body h3 {
    margin:      0 0 13px;
    color:       #eff5ff;
    font-size:   clamp(23px, 2.5vw, 34px);
    font-weight: 400;
    line-height: 1.2;
}

.public-accordion__body p {
    max-width:   850px;
    font-size:   15.5px;
    line-height: 1.7;
}

.public-accordion__body p + p { margin-top: 15px; }

.public-accordion__image {
    display:         block;
    width:           100%;
    height:          auto;
    aspect-ratio:    16 / 10;
    object-fit:      cover;
    object-position: center;
    border:          1px solid rgba(143, 197, 255, .22);
    border-radius:   10px;
    box-shadow:      0 18px 36px rgba(0, 9, 29, .24);
}

/* ── 05 · Типи будівель ─────────────────────────────────────────────────── */
.public-building-type { background: radial-gradient(circle at 85% 50%, rgba(45, 101, 178, .09), transparent 45%); }

.public-building-type__grid {
    display:               grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr);
    gap:                   clamp(44px, 7vw, 110px);
    align-items:           center;
}

.public-building-type__copy h2 {
    max-width: 710px;
    margin:    0 0 26px;
}

.public-page .public-building-type__copy h2 .is-accent {
    display: inline;
    padding: 0;
    margin:  0;
}

.public-building-type__copy > p:last-child {
    max-width: 690px;
    margin:    0;
}

.public-building-type__detail {
    position:      relative;
    padding:       clamp(26px, 3vw, 38px);
    border:        1px solid rgba(145, 190, 250, .21);
    border-radius: 16px;
    background:    linear-gradient(145deg, rgba(39, 64, 117, .42), rgba(7, 27, 62, .64));
    box-shadow:    inset 0 1px rgba(255, 255, 255, .06), 0 18px 42px rgba(0, 10, 38, .13);
}

.public-building-type__detail::before {
    content:    "";
    position:   absolute;
    top:        -1px;
    left:       28px;
    width:      100px;
    height:     1px;
    background: var(--gradient-line);
}

.public-building-type__detail-label {
    display:        block;
    margin-bottom:  21px;
    color:          #93caff;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.public-building-type__detail ul {
    display:    grid;
    gap:        15px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.public-building-type__detail li {
    position:     relative;
    padding-left: 23px;
    color:        #dce9fc;
    font-size:    15px;
    line-height:  1.5;
}

.public-building-type__detail li::before {
    content:       "";
    position:      absolute;
    top:           .6em;
    left:          0;
    width:         7px;
    height:        7px;
    border:        1px solid #7acaff;
    border-radius: 50%;
    box-shadow:    0 0 10px rgba(60, 180, 255, .4);
}

/* line-height тут свідомо НЕ задаємо. У шаблоні замовника він стоїть (1.4),
   але це мертва декларація: нижче в тому ж файлі йде `.public-page p` з
   тією самою специфічністю (0,1,1) і line-height 1.72, і виграє саме вона.
   У нас базова типографіка опущена через :where(), тож 1.4 ожив би і зробив
   тезу на 40-50px нижчою за еталон — перевірено на державних будівлях і
   військових об'єктах. */
.public-building-type__detail--statement p {
    margin:    0;
    color:     #edf4ff;
    font-size: clamp(20px, 2vw, 27px);
}

/* ── 06 · Матриця систем ────────────────────────────────────────────────── */
.public-matrix { background: radial-gradient(circle at 50% 20%, rgba(24, 104, 210, .16), transparent 53%); }

.public-matrix__grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   16px 18px;
}

.public-matrix__grid > div {
    position:         relative;
    min-height:       260px;
    padding:          27px 28px 25px;
    border:           1px solid rgba(75, 141, 213, .12);
    border-top-color: rgba(100, 190, 255, .44);
    border-radius:    0 0 10px 10px;
    background:       linear-gradient(150deg, rgba(9, 39, 84, .72), rgba(4, 23, 55, .54));
    box-shadow:       inset 0 1px rgba(213, 237, 255, .025);
}

.public-matrix__grid > div::before {
    content:    "";
    position:   absolute;
    top:        -1px;
    left:       0;
    width:      100px;
    height:     1px;
    background: #60c5ff;
    box-shadow: 0 0 13px rgba(74, 185, 255, .4);
}

.public-matrix__num {
    color:          #7bbfff;
    font-size:      13px;
    letter-spacing: .14em;
}

.public-matrix__grid h3 {
    margin:      22px 0;
    font-size:   20px;
    font-weight: 500;
}

.public-matrix__grid ul {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.public-matrix__grid li {
    position:      relative;
    padding:       8px 11px 8px 22px;
    border:        1px solid rgba(88, 161, 231, .18);
    border-radius: 6px;
    background:    rgba(7, 27, 61, .66);
    color:         #c5d6ec;
    font-size:     12.5px;
    line-height:   1.25;
}

.public-matrix__grid li::before {
    content:       "";
    position:      absolute;
    top:           50%;
    left:          10px;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    #76c7ff;
    transform:     translateY(-50%);
}

.public-matrix__statement {
    max-width:     1040px;
    margin:        52px 0 0;
    padding:       23px 27px 23px 31px;
    border:        1px solid rgba(84, 161, 230, .16);
    border-left:   2px solid #61c4ff;
    border-radius: 0 10px 10px 0;
    background:    linear-gradient(90deg, rgba(19, 69, 132, .28), rgba(6, 31, 70, .16));
    color:         #d9e7f9;
    font-size:     16px;
    text-align:    left;
}

/* ── 07 · Практика ──────────────────────────────────────────────────────── */
.public-practice__grid {
    display:               grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap:                   clamp(38px, 6vw, 90px);
    align-items:           center;
}

.public-practice__visual {
    margin:        0;
    overflow:      hidden;
    border:        1px solid rgba(121, 190, 255, .36);
    border-radius: 9px;
    box-shadow:    0 22px 54px rgba(0, 10, 32, .22);
}

.public-practice__visual img {
    display: block;
    width:   100%;
    height:  auto;
}

.public-practice__copy h2 { margin-bottom: 23px; }

.public-practice__copy p + p { margin-top: 19px; }

.public-practice__copy .public-text-link { margin-top: 28px; }

/* ── 08 · BIM-менеджмент і «коли потрібна» ──────────────────────────────── */
.public-management { background: linear-gradient(160deg, rgba(18, 56, 119, .4), rgba(3, 28, 69, .04) 60%); }

.public-management__grid,
.public-timing__grid {
    display:               grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap:                   clamp(44px, 7vw, 110px);
    align-items:           start;
}

.public-management h2,
.public-timing h2 { margin-bottom: 24px; }

.public-management header > p,
.public-timing header > p { margin-bottom: 26px; }

.public-management__steps {
    display:    grid;
    gap:        0;
    margin:     0;
    padding:    0;
    border-top: 1px solid rgba(118, 177, 248, .36);
    list-style: none;
}

.public-management__steps li {
    display:               grid;
    grid-template-columns: 46px 1fr;
    gap:                   17px;
    align-items:           center;
    min-height:            71px;
    border-bottom:         1px solid rgba(118, 177, 248, .2);
    color:                 #e3ecff;
    font-size:             16px;
    font-weight:           400;
}

.public-management__steps span {
    color:          #7bc5ff;
    font-size:      13px;
    letter-spacing: .1em;
}

.public-timing__list {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   12px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.public-timing__list li {
    display:       flex;
    align-items:   center;
    min-height:    88px;
    padding:       17px 20px;
    border:        1px solid rgba(86, 157, 236, .2);
    border-radius: 11px;
    background:    linear-gradient(104deg, rgba(21, 67, 125, .58), rgba(13, 49, 101, .64));
    color:         #dce9fb;
    font-size:     15px;
    font-weight:   400;
    line-height:   1.4;
}

/* ── 09 · Послуги ───────────────────────────────────────────────────────── */
.public-services__grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   24px;
}

.public-services__grid article {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            22px;
    min-height:     330px;
    padding:        36px;
    overflow:       hidden;
    border:         1px solid rgba(160, 193, 244, .18);
    border-radius:  18px;
    background:     linear-gradient(135deg, rgba(45, 64, 110, .45), rgba(5, 22, 53, .72));
    box-shadow:     inset 0 1px rgba(255, 255, 255, .05);
    transition:     border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.public-services__grid article::before {
    content:    "";
    position:   absolute;
    inset:      0 16px auto;
    height:     1px;
    background: var(--gradient-line);
}

.public-services__grid article:hover,
.public-services__grid article:focus-within {
    border-color: rgba(119, 198, 255, .55);
    box-shadow:   0 22px 50px rgba(0, 10, 32, .25);
    transform:    translateY(-2px);
}

.public-services__grid h3 {
    margin:      0;
    color:       #f0f6ff;
    font-size:   clamp(23px, 2.3vw, 30px);
    font-weight: 500;
    line-height: 1.25;
}

.public-services__grid p {
    max-width: 520px;
    margin:    0 0 12px;
}

.public-page .public-services__grid .btn {
    width:           100%;
    min-height:      56px;
    justify-content: space-between;
    align-self:      flex-start;
    margin-top:      auto;
    padding:         16px 20px;
    font-weight:     400;
}

/* ── 10 · Проєкти ───────────────────────────────────────────────────────── */
.public-projects__grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   18px;
}

.public-projects__grid article {
    overflow:      hidden;
    border:        1px solid rgba(92, 155, 237, .2);
    border-radius: 14px;
    background:    linear-gradient(145deg, rgba(8, 30, 68, .97), rgba(4, 20, 48, .99));
    transition:    border-color .2s ease, transform .2s ease;
}

.public-projects__grid article:hover {
    border-color: rgba(91, 196, 255, .58);
    transform:    translateY(-2px);
}

.public-projects__grid img {
    display:         block;
    width:           100%;
    height:          auto;
    aspect-ratio:    16 / 9;
    object-fit:      cover;
    object-position: center;
    filter:          saturate(.88) contrast(1.035);
}

/* Перша картка — координаційне креслення, його не можна обрізати. */
.public-projects__grid article:first-child img {
    object-fit: contain;
    background: #f5f7fb;
}

.public-projects__grid article > div {
    display:        flex;
    flex-direction: column;
    min-height:     245px;
    padding:        27px 29px 29px;
}

.public-projects__grid h3 {
    margin:      13px 0;
    font-size:   24px;
    font-weight: 500;
}

.public-projects__grid p {
    min-height:  60px;
    margin:      0 0 23px;
    color:       #b8c9e2;
    font-size:   14px;
    line-height: 1.55;
}

.public-page .public-projects__grid .public-text-link {
    width:           max-content;
    min-width:       196px;
    min-height:      46px;
    justify-content: space-between;
    gap:             16px;
    margin-top:      auto;
    padding:         5px 6px 5px 18px;
    border:          1px solid rgba(105, 184, 255, .33);
    border-radius:   999px;
    background:      linear-gradient(115deg, rgba(15, 55, 111, .82), rgba(8, 36, 82, .72));
    box-shadow:      inset 0 1px rgba(255, 255, 255, .055), 0 12px 26px -18px rgba(54, 153, 255, .72);
    color:           #dcebff;
    font-size:       13px;
}

.public-page .public-projects__grid .public-text-link .icon {
    flex:          0 0 34px;
    width:         34px;
    height:        34px;
    padding:       8px;
    border:        1px solid rgba(166, 218, 255, .3);
    border-radius: 50%;
    background:    linear-gradient(135deg, #2878d4, #54b5ff);
    color:         #fff;
}

/* ── 11 · CTA ───────────────────────────────────────────────────────────── */
.public-cta__panel {
    display:       grid;
    justify-items: center;
    gap:           0;
    padding:       clamp(38px, 6vw, 75px);
    border:        1px solid rgba(125, 164, 255, .8);
    border-radius: 30px;
    background:    radial-gradient(ellipse at 0 0, rgba(113, 147, 234, .32), transparent 58%),
                   linear-gradient(165deg, #253464 0%, #18244d 58%, #0e1938 100%);
    box-shadow:    0 24px 64px rgba(0, 6, 24, .2);
    text-align:    center;
}

.public-cta__panel .public-eyebrow { justify-content: center; }

/* Специфічність як у шаблоні: інакше на ≤520 кегль H2 перебиває загальне
   правило .public-page h2. */
.public-page .public-cta h2 {
    max-width:   1000px;
    margin:      0 auto 26px;
    font-size:   clamp(30px, 3.5vw, 48px);
    font-weight: 600;
    line-height: 1.13;
}

.public-cta p:not(.public-eyebrow) {
    max-width:   960px;
    margin:      0 0 30px;
    color:       #bfcced;
    font-size:   18px;
    line-height: 1.65;
}

.public-page .public-cta .btn {
    width:           auto;
    min-width:       330px;
    max-width:       100%;
    min-height:      56px;
    justify-content: center;
    gap:             12px;
    padding:         16px 28px;
    font-weight:     400;
    text-align:      center;
}

.public-page .public-cta .btn__label {
    min-width:   0;
    line-height: 1.35;
}

/* ── 12 · FAQ ───────────────────────────────────────────────────────────── */
/* Акордеон спільний (main.css + faqAccordion()); шаблон сам писав, що копіює
   FAQ комерційної сторінки — тут ті самі значення, але через класи теми.
   Нумерація «01.» — лічильником, у тексті питання її немає. */
.public-page .public-section.public-faq {
    position:       relative;
    isolation:      isolate;
    overflow:       hidden;
    padding-bottom: clamp(190px, 23vw, 340px);
    background:     radial-gradient(ellipse at 50% 100%, rgba(0, 118, 225, .19), transparent 46%),
                    linear-gradient(180deg, rgba(0, 9, 29, .45), rgba(0, 13, 37, .76));
}

.public-faq__art {
    position:           absolute;
    z-index:            -1;
    bottom:             0;
    left:               50%;
    width:              min(1450px, 100%);
    transform:          translateX(-50%);
    pointer-events:     none;
    opacity:            .32;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
    mask-image:         linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}

.public-faq__art img {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image:         linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.public-faq > .container {
    position: relative;
    z-index:  1;
}

.public-faq .faq__list {
    display:       grid;
    gap:           9px;
    max-width:     1060px;
    margin-inline: auto;
    counter-reset: public-faq;
}

.public-faq .faq-item {
    overflow:      hidden;
    border:        1px solid rgba(105, 158, 230, .13);
    border-radius: 9px;
    background:    linear-gradient(145deg, rgba(13, 42, 86, .94), rgba(8, 29, 64, .97));
    box-shadow:    0 10px 26px -24px rgba(0, 0, 0, .78);
}

.public-faq .faq-item.is-open {
    border-color: rgba(91, 163, 249, .34);
    background:   linear-gradient(145deg, rgba(15, 48, 97, .98), rgba(8, 31, 68, .98));
}

.public-faq .faq-item__toggle {
    gap:        30px;
    min-height: 62px;
    padding:    17px 18px 17px 20px;
    color:      #dce8fc;
}

.public-faq .faq-item__question {
    color:          inherit;
    font-size:      15.5px;
    font-weight:    500;
    line-height:    1.4;
    letter-spacing: -.15px;
}

.public-faq .faq-item__question::before {
    content:           counter(public-faq, decimal-leading-zero) ".";
    margin-right:      .3em;
    counter-increment: public-faq;
}

.public-faq .faq-item__icon {
    flex:          0 0 28px;
    width:         28px;
    height:        28px;
    border-color:  rgba(109, 148, 202, .28);
    border-radius: 6px;
    background:    rgba(2, 15, 39, .7);
    box-shadow:    0 12px 24px rgba(0, 5, 20, .38);
    color:         #8eafd8;
}

.public-faq .faq-item.is-open .faq-item__icon {
    border-color: rgba(75, 168, 255, .7);
    background:   rgba(18, 99, 175, .36);
    box-shadow:   0 0 24px rgba(20, 158, 255, .28);
    color:        #d9f0ff;
}

.public-faq .faq-item__icon-svg {
    width:  18px;
    height: 18px;
}

.public-faq .faq-item__answer {
    max-width: 740px;
    padding:   0 62px 21px 20px;
}

.public-faq .faq-item__answer p {
    margin:      0;
    color:       #bdcae3;
    font-size:   14.5px;
    line-height: 1.65;
}

.public-faq .faq-item__answer p + p { margin-top: 10px; }

/* ── 13 · Адаптив ───────────────────────────────────────────────────────── */
/* Зменшення H2 на ≤768 у шаблоні МЕРТВЕ: правило другого шару
   .public-page h2 (clamp(30px, 4vw, 48px)) стоїть нижче з тією самою
   специфічністю, тому діє й у медіа. Тут його теж немає. */
@media (max-width: 1100px) {
    .public-proof { width: 100%; }

    .public-hero__photo-credit {
        position: relative;
        right:    auto;
        bottom:   auto;
        width:    min(100%, 420px);
        margin:   24px 0 0 auto;
    }
}

@media (max-width: 1000px) {
    .public-hero__image { background-position: 64% center; }

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

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

    .public-proof li:nth-child(n+3) { border-top: 1px solid rgba(132, 175, 237, .25); }

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

@media (max-width: 900px) {
    .public-building-type__grid {
        grid-template-columns: 1fr;
        gap:                   30px;
    }

    .public-building-type__detail { max-width: 720px; }
}

@media (max-width: 820px) {
    .public-accordion__body { grid-template-columns: 1fr; }

    .public-accordion__image { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
    .public-section {
        padding:           74px 0;
        scroll-margin-top: 70px;
    }

    .public-page .public-hero {
        min-height: 0;
        padding:    54px 0 66px;
    }

    .public-hero__image::before {
        width:               100%;
        height:              100%;
        aspect-ratio:        auto;
        background-position: 64% center;
        filter:              brightness(.52) saturate(.85);
        -webkit-mask-image:  none;
        mask-image:          none;
    }

    .public-hero__image::after {
        background: linear-gradient(90deg, rgba(3, 28, 69, .58), rgba(3, 28, 69, .35)),
                    linear-gradient(0deg, #031c45 0%, transparent 32%, rgba(3, 28, 69, .2) 100%);
    }

    .public-hero h1 { font-size: clamp(38px, 10vw, 54px); }

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

    .public-proof li {
        border-top:   1px solid rgba(132, 175, 237, .2);
        border-right: 0;
    }

    .public-proof li:first-child { border-top: 0; }

    .public-hero__photo-credit {
        width:      100%;
        margin-top: 24px;
    }

    .public-intro__grid,
    .public-practice__grid,
    .public-management__grid,
    .public-timing__grid {
        grid-template-columns: 1fr;
        gap:                   36px;
    }

    .public-heading { margin-bottom: 35px; }

    .public-page .public-matrix__grid,
    .public-timing__list { grid-template-columns: 1fr; }

    .public-services__grid,
    .public-projects__grid { grid-template-columns: 1fr; }

    .public-practice__visual { max-width: 760px; }

    /* Тач-ціль для текстових посилань: у шаблоні вони 23px заввишки, а на
       сайті контроли мають 44px. Область кліку розширює псевдоелемент —
       верстка не зсувається, геометрія лишається як у рефі. */
    .public-text-link { position: relative; }

    .public-text-link::after {
        content:  "";
        position: absolute;
        inset:    -11px -8px;
    }

    /* У картках проєктів посилання вже кнопка-пігулка 46px. */
    .public-projects__grid .public-text-link::after { content: none; }
}

@media (max-width: 520px) {
    .public-page .public-section { padding: 68px 0; }

    .public-page h2 {
        font-size:      clamp(30px, 8vw, 38px);
        letter-spacing: -.9px;
    }

    .public-page .public-hero__copy .btn,
    .public-page .public-services__grid .btn,
    .public-page .public-cta .btn {
        width:     100%;
        min-width: 0;
    }

    .public-proof li { padding: 11px 3px; }

    .public-page .public-accordion__toggle {
        grid-template-columns: 31px minmax(0, 1fr) 29px;
        gap:                   11px;
        padding:               15px 16px;
        font-size:             16px;
    }

    .public-page .public-accordion__body {
        margin:  0 10px 10px;
        padding: 22px 18px;
    }

    .public-page .public-accordion__body h3 { font-size: 23px; }

    .public-building-type__copy h2 { margin-bottom: 20px; }

    .public-building-type__detail { padding: 25px 22px; }

    .public-building-type__detail li { font-size: 14px; }

    .public-page .public-services__grid article { padding: 27px 23px; }

    .public-projects__grid p { min-height: 0; }

    .public-page .public-projects__grid .public-text-link { width: 100%; }

    .public-cta__panel { padding: 35px 23px; }

    .public-page .public-cta__panel { border-radius: 22px; }

    .public-page .public-cta p:not(.public-eyebrow) { font-size: 16px; }

    .public-faq .faq-item__toggle { gap: 16px; }

    .public-page .public-faq .faq-item__answer { padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .public-text-link,
    .public-accordion__item,
    .public-accordion__panel,
    .public-accordion__arrow,
    .public-services__grid article,
    .public-projects__grid article { transition: none; }
}

@media (max-width: 768px) {
}


/* Critical-zone accordion arrows: match the chevron system used by the
   residential, commercial and industrial industry pages. */
#public-zones .public-accordion__arrow {
    transform: none !important;
}

#public-zones .public-accordion__arrow-svg {
    display: none !important;
}

#public-zones .public-accordion__arrow::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

#public-zones .public-accordion__item.is-open .public-accordion__arrow::before {
    transform: rotate(225deg);
}


/* Approved section divider gradient shared across industry pages. */
.public-page .public-section {
    border-image-source: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 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%,
        rgba(0, 0, 0, 0) 100%
    );
}


/* Mobile refinement for the longer public/government page title. */
@media (max-width: 768px) {
    .public-page:not(.defense-page):not(.infrastructure-page):not(.healthcare-page) .public-hero h1 {
        font-size: clamp(31px, 8.5vw, 42px);
        line-height: 1.06;
        letter-spacing: -1.35px;
    }
}