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

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

   Перейменування класів (розмітка спільна, назви — наші):
     .defense-hero__photo           → .public-hero__photo
     .defense-intro__cta            → .public-intro__btn
     .defense-accordion__visual     → .public-accordion__visual
     .defense-timing__intro         → .public-timing__grid > header
     .defense-timing__window        → .public-timing__window
     .defense-timing-note           → .public-timing__aside
     .defense-timing__checklist     → .public-timing__checklist
     .defense-timing__checklist-title → .public-timing__checklist > p
     .public-breadcrumbs            → .breadcrumbs (спільний компонент теми)
     .public-accent                 → .is-accent (Theme\rich_title())
   Власні секції (користь, напрями) лишили назви шаблону.

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

   01 · Хіро            05 · Практична користь
   02 · Вступ і тексти  06 · Напрями
   03 · Критичні зони   07 · Адаптив
   04 · Коли критична
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Хіро ──────────────────────────────────────────────────────────── */
.defense-page .public-hero {
    min-height: 770px;
    background: radial-gradient(ellipse at 78% 31%, rgba(46, 112, 206, .13), transparent 42%), #031c45;
}

/* Фото приходить тегом <img> (аргумент photo => 'img'), тому загальний
   псевдоелемент-підкладка блока вимикається. */
.defense-page .public-hero__image::before { content: none; }

.defense-page .public-hero__photo {
    position:           absolute;
    top:                0;
    right:              0;
    width:              62%;
    height:             100%;
    object-fit:         cover;
    object-position:    72% center;
    filter:             saturate(.76) brightness(.74);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .47) 17%, #000 39%);
    mask-image:         linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .47) 17%, #000 39%);
}

.defense-page .public-hero__image::after {
    background: linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .96) 28%, rgba(3, 28, 69, .37) 61%, rgba(3, 28, 69, .08) 90%),
                linear-gradient(0deg, #031c45 0%, transparent 22%);
}

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

/* ── 02 · Вступ і загальні тексти ───────────────────────────────────────── */
/* Кнопка вступу переносить рядок: підпис довгий, а фіксовані 270px
   із .btn--lg його обрізали б. */
.defense-page .public-intro__btn {
    width:           min(320px, 100%);
    min-width:       0;
    height:          auto;
    min-height:      56px;
    justify-content: space-between;
    padding:         17px 24px;
    border-radius:   10px;
    white-space:     normal;
    text-align:      left;
}

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

/* Посилання на норми (UFC, USACE) всередині абзаців. */
.defense-page .public-section p a:not(.btn) {
    color:                  #b5e3ff;
    text-decoration-color:  rgba(181, 227, 255, .62);
    text-underline-offset:  3px;
}

.defense-page .public-section p a:not(.btn):hover,
.defense-page .public-section p a:not(.btn):focus-visible { color: #fff; }

/* ── 03 · Критичні зони ─────────────────────────────────────────────────── */
.defense-page .public-accordion__visual { min-width: 0; margin: 0; }

/* Панорамний кадр: модифікатор ставиться полем рядка репітера. */
.defense-page .public-accordion__image--wide { aspect-ratio: 2 / 1; }

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

/* ── 04 · Коли координація критична ─────────────────────────────────────── */
.public-page.defense-page .public-timing__grid {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    gap:                   clamp(32px, 5vw, 78px);
}

.defense-page .public-timing__grid > header    { min-width: 0; }
.defense-page .public-timing__grid > header h2 { margin-bottom: 22px; }

.defense-page .public-timing__window {
    padding:     17px 19px;
    border-left: 2px solid #86c3fb;
    background:  linear-gradient(90deg, rgba(61, 111, 183, .2), rgba(61, 111, 183, .04));
}

.defense-page .public-timing__window > span,
.defense-page .public-timing__checklist > p {
    display:        block;
    color:          #b0d7fb;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .13em;
    line-height:    1.4;
    text-transform: uppercase;
}

.defense-page .public-timing__window p {
    margin:      8px 0 0;
    color:       #e2ecfa;
    font-size:   14px;
    line-height: 1.58;
}

.defense-page .public-timing__aside {
    margin-top:    17px;
    padding:       20px 22px;
    border:        1px solid rgba(198, 177, 132, .26);
    border-left:   2px solid #d5b97c;
    border-radius: 0 11px 11px 0;
    background:    rgba(17, 36, 76, .56);
}

.defense-page .public-timing__aside h3 {
    margin:      0;
    color:       #f0f4fb;
    font-size:   16px;
    font-weight: 500;
    line-height: 1.35;
}

.defense-page .public-timing__aside p {
    margin:      9px 0 0;
    color:       #cbdaf0;
    font-size:   14px;
    line-height: 1.58;
}

.defense-page .public-timing__aside p + p {
    margin-top:  12px;
    padding-top: 11px;
    border-top:  1px solid rgba(144, 175, 215, .16);
    color:       #b6c9e3;
    font-size:   13px;
    line-height: 1.5;
}

.defense-page .public-timing__checklist {
    min-width:     0;
    padding:       24px 27px 18px;
    border:        1px solid rgba(139, 181, 240, .3);
    border-radius: 16px;
    background:    linear-gradient(145deg, rgba(32, 55, 102, .53), rgba(14, 35, 76, .65));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.defense-page .public-timing__checklist > p { margin: 0 0 15px; }

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

.public-page.defense-page .public-timing__list li {
    display:               grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items:           center;
    gap:                   10px;
    min-width:             0;
    min-height:            61px;
    padding:               10px 0;
    border:                0;
    border-top:            1px solid rgba(137, 181, 239, .23);
    border-radius:         0;
    background:            transparent;
    box-shadow:            none;
    color:                 #e3ecfb;
    font-size:             14px;
    line-height:           1.4;
}

/* Галочку малює CSS: плашка ::before + маска check.svg у ::after —
   той самий прийом, що на медичній сторінці. */
.public-page.defense-page .public-timing__list li::before {
    content:       "";
    width:         24px;
    height:        24px;
    border:        1px solid rgba(133, 191, 251, .37);
    border-radius: 7px;
    background:    rgba(63, 128, 204, .12);
}

.public-page.defense-page .public-timing__list li::after {
    content:             "";
    position:            absolute;
    width:               16px;
    height:              16px;
    margin:              4px 0 0 4px;
    background:          #acd7ff;
    -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 · Практична користь ─────────────────────────────────────────────── */
.public-page.defense-page .public-section.defense-benefits {
    background-color: #031c45;
    background-image:
        linear-gradient(180deg,
            #031c45 0%,
            rgba(3, 28, 69, .98) 7%,
            rgba(4, 23, 58, .8) 24%,
            rgba(5, 20, 52, .7) 50%,
            rgba(4, 23, 58, .8) 76%,
            rgba(3, 28, 69, .98) 93%,
            #031c45 100%),
        url("../../img/defense-benefits-blueprint.webp");
    background-position: center, center;
    background-size:     cover, cover;
    background-repeat:   no-repeat;
}

.public-page.defense-page .defense-benefits__heading {
    max-width:    1080px;
    margin-right: auto;
    margin-left:  auto;
    text-align:   center;
}

.defense-benefits__heading .public-eyebrow { justify-content: center; }

.defense-benefits__heading > p:last-child {
    max-width: 800px;
    margin:    18px auto 0;
    color:     #bdcbe4;
}

.defense-benefits__layout {
    position:              relative;
    display:               grid;
    grid-template-columns: minmax(290px, .78fr) minmax(0, 1.72fr);
    grid-template-rows:    repeat(5, minmax(76px, auto));
    gap:                   10px 24px;
    max-width:             1200px;
    margin:                0 auto;
    padding-left:          21px;
}

.defense-benefits__layout::before {
    content:    "";
    position:   absolute;
    top:        33px;
    bottom:     33px;
    left:       5px;
    width:      1px;
    background: linear-gradient(180deg, rgba(124, 181, 255, .8), rgba(124, 181, 255, .18));
}

.defense-benefits__item { display: contents; }

.defense-benefits__trigger {
    position:              relative;
    display:               grid;
    grid-column:           1;
    grid-row:              var(--benefit-row);
    grid-template-columns: 32px minmax(0, 1fr) 25px;
    align-items:           center;
    gap:                   11px;
    width:                 100%;
    min-width:             0;
    min-height:            76px;
    padding:               13px 15px;
    border:                1px solid rgba(135, 179, 239, .21);
    border-radius:         13px;
    background:            rgba(29, 46, 89, .74);
    color:                 #e9f0fc;
    font:                  inherit;
    text-align:            left;
    cursor:                pointer;
    transition:            border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.defense-benefits__trigger::before {
    content:       "";
    position:      absolute;
    top:           calc(50% - 4px);
    left:          -21px;
    width:         7px;
    height:        7px;
    border:        1px solid #78aeed;
    border-radius: 50%;
    background:    #0b1b43;
}

.defense-benefits__trigger:hover {
    border-color: rgba(137, 188, 255, .6);
    background:   rgba(40, 64, 116, .88);
}

.defense-benefits__trigger:focus-visible {
    outline:        2px solid #a4caff;
    outline-offset: 3px;
}

.defense-benefits__item.is-open .defense-benefits__trigger {
    border-color: #7caff7;
    background:   rgba(42, 67, 121, .91);
}

.defense-benefits__item.is-open .defense-benefits__trigger::before {
    border-color: #8fc2ff;
    background:   #8fc2ff;
    box-shadow:   0 0 0 3px rgba(104, 169, 255, .15);
}

.defense-benefits__number {
    align-self:            start;
    padding-top:           1px;
    color:                 #91bdff;
    font-size:             17px;
    font-weight:           500;
    font-variant-numeric:  tabular-nums;
    line-height:           1.3;
}

.defense-benefits__trigger-copy { display: grid; min-width: 0; gap: 5px; }

.defense-benefits__trigger-copy > span {
    color:          #9bbbe8;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .12em;
    line-height:    1.2;
    text-transform: uppercase;
}

.defense-benefits__trigger-copy strong {
    color:         #f1f5ff;
    font-size:     13px;
    font-weight:   500;
    line-height:   1.3;
    overflow-wrap: anywhere;
}

.defense-benefits__toggle {
    position:      relative;
    display:       block;
    width:         24px;
    height:        24px;
    border:        1px solid rgba(136, 184, 250, .42);
    border-radius: 50%;
    color:         #99c3fb;
    transition:    transform .2s ease, border-color .2s ease;
}

.defense-benefits__toggle::before,
.defense-benefits__toggle::after {
    content:    "";
    position:   absolute;
    top:        50%;
    left:       50%;
    width:      10px;
    height:     1px;
    background: currentColor;
    transform:  translate(-50%, -50%);
}

.defense-benefits__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.defense-benefits__item.is-open .defense-benefits__toggle {
    border-color: rgba(156, 204, 255, .65);
    transform:    rotate(45deg);
}

/* Усі п'ять панелей лежать в одній комірці сітки й перемикаються
   видимістю, а не display: none. Так faqAccordion() може виміряти
   scrollHeight (у display:none він нульовий, і панель відкрилась би
   складеною), а висота блока перестає стрибати при перемиканні: комірка
   тримає розмір найвищої панелі. Атрибут hidden із шаблону тут не
   потрібен — стан тримає клас .is-open на пункті. */
.defense-benefits__panel {
    display:        flex;
    grid-column:    2;
    grid-row:       1 / span 5;
    flex-direction: column;
    min-width:      0;
    padding:        clamp(28px, 3vw, 42px);
    border:         1px solid rgba(143, 183, 246, .24);
    border-radius:  18px;
    background:     linear-gradient(140deg, rgba(32, 48, 89, .97), rgba(18, 32, 69, .97));
    box-shadow:     0 16px 44px rgba(0, 8, 32, .18), inset 0 1px 0 rgba(255, 255, 255, .05);

    visibility:     hidden;
    opacity:        0;
    pointer-events: none;
    transition:     opacity .2s ease, max-height .2s ease;
}

.defense-benefits__item.is-open .defense-benefits__panel {
    visibility:     visible;
    opacity:        1;
    pointer-events: auto;
}

.defense-benefits__panel-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.defense-benefits__index {
    min-width:      0;
    color:          #92bdff;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .13em;
    line-height:    1.35;
    text-transform: uppercase;
}

.defense-benefits__close {
    display:         inline-flex;
    flex:            0 0 auto;
    align-items:     center;
    justify-content: center;
    gap:             9px;
    min-width:       98px;
    min-height:      44px;
    padding:         8px 11px;
    border:          1px solid rgba(157, 198, 250, .4);
    border-radius:   9px;
    background:      rgba(119, 166, 235, .09);
    color:           #dbeaff;
    font:            inherit;
    font-size:       12px;
    font-weight:     600;
    cursor:          pointer;
    transition:      border-color .2s ease, background-color .2s ease;
}

.defense-benefits__close span:last-child {
    font-size:   19px;
    font-weight: 400;
    line-height: 1;
}

.defense-benefits__close:hover {
    border-color: #9cc9ff;
    background:   rgba(119, 166, 235, .18);
}

.defense-benefits__close:focus-visible {
    outline:        2px solid #a4caff;
    outline-offset: 3px;
}

.defense-benefits__panel h3 {
    max-width:   33ch;
    margin:      15px 0 24px;
    color:       #f3f6ff;
    font-size:   clamp(22px, 2.1vw, 29px);
    font-weight: 500;
    line-height: 1.22;
}

.defense-benefits__detail {
    display:     grid;
    gap:         20px;
    padding-top: 22px;
    border-top:  1px solid rgba(157, 193, 244, .14);
}

.defense-benefits__label {
    display:        block;
    color:          #9dcafc;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.defense-benefits__panel p {
    margin:      8px 0 0;
    color:       #d3deef;
    font-size:   15px;
    line-height: 1.68;
}

.defense-benefits__outcome {
    padding:       17px 20px;
    border-left:   2px solid rgba(145, 203, 255, .8);
    border-radius: 0 9px 9px 0;
    background:    rgba(112, 162, 238, .08);
}

.defense-benefits__outcome p { color: #e8effc; }

.public-page .defense-benefits__conclusion {
    max-width:     1200px;
    margin:        28px auto 0;
    padding:       23px 28px;
    border:        1px solid rgba(135, 188, 248, .23);
    border-radius: 14px;
    background:    rgba(27, 45, 88, .84);
    color:         #e7efff;
    font-size:     15px;
    line-height:   1.65;
}

.defense-benefits__conclusion span {
    display:        block;
    margin-bottom:  7px;
    color:          #9bcdf2;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── 06 · Напрями ───────────────────────────────────────────────────────── */
.defense-directions { background: radial-gradient(circle at 89% 12%, rgba(46, 106, 197, .1), transparent 45%); }

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

.defense-directions__grid article {
    position:      relative;
    min-width:     0;
    padding:       30px 27px;
    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));
    overflow:      hidden;
}

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

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

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

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

/* ── 07 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .defense-directions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .defense-page .public-hero__image::after {
        background: linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .94) 37%, rgba(3, 28, 69, .72) 70%, rgba(3, 28, 69, .18) 100%),
                    linear-gradient(0deg, #031c45 0%, transparent 22%);
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .public-page.defense-page .public-matrix__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 950px) {
    .public-page.defense-page .public-timing__grid {
        grid-template-columns: 1fr;
        gap:                   28px;
    }
    .defense-page .public-timing__grid > header { max-width: 760px; }
}

@media (max-width: 820px) {
    .public-page.defense-page .public-section.defense-benefits { background-position: center, 22% center; }
    .defense-benefits__layout { display: block; padding-left: 0; }
    .defense-benefits__layout::before,
    .defense-benefits__trigger::before { content: none; }
    .defense-benefits__item { display: block; margin-bottom: 10px; }
    .defense-benefits__trigger { min-height: 70px; }

    /* На вузькому екрані панель стає звичайним акордеоном під тригером,
       тож і ховати її треба з потоку, а не лише видимістю. */
    .defense-benefits__panel {
        display:    none;
        margin-top: 9px;
        padding:    28px;
    }
    .defense-benefits__item.is-open .defense-benefits__panel { display: flex; }

    .public-page .defense-benefits__conclusion { margin-top: 24px; }
}

@media (max-width: 768px) {
    .defense-page .public-hero { min-height: 0; padding-top: 32px; }
    .defense-page .public-hero__photo {
        width:              100%;
        object-position:    63% top;
        filter:             saturate(.7) brightness(.64);
        -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%);
    }
    .defense-page .public-hero__image::after {
        background: linear-gradient(90deg, rgba(3, 28, 69, .78), rgba(3, 28, 69, .5)),
                    linear-gradient(180deg, rgba(3, 28, 69, .2), #031c45 66%);
    }
    .defense-page .public-hero h1 { max-width: 650px; font-size: clamp(37px, 5.2vw, 46px); }
    .defense-page .public-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .defense-page .public-proof li:nth-child(2) { border-top: 0; }
    .defense-page .public-proof li:nth-child(odd) { border-right: 1px solid rgba(132, 175, 237, .2); }
    .defense-page .public-proof li:nth-child(even) { border-right: 0; }
}

@media (max-width: 640px) {
    .defense-page .public-timing__checklist { padding: 20px 21px 14px; }
    .public-page.defense-page .public-timing__list {
        grid-template-columns: 1fr;
        grid-template-rows:    none;
        grid-auto-flow:        row;
    }
    .public-page.defense-page .public-timing__list li { min-height: 0; padding: 12px 0; }
}

@media (max-width: 520px) {
    .defense-page .public-intro__btn { width: 100%; }
    .defense-page .public-hero { padding-top: 24px; padding-bottom: 52px; }
    .defense-page .public-hero .breadcrumbs { gap: 7px; margin-bottom: 34px; font-size: 12px; }
    .defense-page .public-hero h1 { margin-top: 12px; font-size: clamp(31px, 8.8vw, 39px); line-height: 1.08; letter-spacing: -1.3px; }
    .defense-page .public-hero__lead { font-size: 16px; line-height: 1.58; }
    .defense-page .public-hero__detail { font-size: 14px; line-height: 1.63; }
    .defense-page .public-proof { grid-template-columns: 1fr; margin-top: 32px; }
    .defense-page .public-proof li:nth-child(odd) { border-right: 0; }
    .defense-page .public-proof li:nth-child(2) { border-top: 1px solid rgba(132, 175, 237, .2); }
    .defense-directions__grid { grid-template-columns: 1fr; }
    .defense-directions__grid article { padding: 26px 23px; }
    .defense-benefits__heading > p:last-child { font-size: 15px; }
    .defense-benefits__trigger { grid-template-columns: 29px minmax(0, 1fr) 25px; gap: 9px; padding: 13px 12px; }
    .defense-benefits__trigger-copy strong { font-size: 13px; line-height: 1.38; }
    .defense-benefits__panel { padding: 23px 20px; }
    .defense-benefits__close { min-width: 90px; }
    .defense-benefits__panel h3 { margin-bottom: 19px; font-size: 22px; }
    .defense-benefits__detail { gap: 18px; padding-top: 18px; }
    .defense-benefits__panel p { font-size: 14px; }
    .defense-benefits__outcome { padding: 16px 17px; }
    .public-page .defense-benefits__conclusion { padding: 21px 19px; font-size: 14px; }
    .defense-page .public-timing__window { padding: 16px 17px; }
    .defense-page .public-timing__aside { padding: 18px 17px; }
    .defense-page .public-cta .btn { gap: 8px; padding: 14px 16px; font-size: 14px; }
}

@media (max-width: 360px) {
    .defense-page .public-hero__copy .btn { gap: 8px; padding: 14px; font-size: 13px; }
}