/*
 * Layout of the header buttons and the home page (2026-10), all widths. Printed right before css/responsive.css,
 * which holds the phone / tablet side of the same changes and overrides these rules there.
 */

/* «Дії населення в умовах НС» banner: the copy in the header shows on phones, the one in the sidebar from 768px up
   (custome.js used to switch them after the page had loaded, so the banner flashed). On the home page phones get
   the sidebar copy instead, next to the other two banners (header.php, sidebar.php). */
@media (min-width: 768px) {
    #headerDSNS {
        display: none;
    }
}
@media (max-width: 767.98px) {
    #sidebarDSNS:not(.dec-phone-visible) {
        display: none;
    }
}

/* desktop: BPR and vacancies at the right end of the menu bar (header.php .dec-nav-extra) */
@media (min-width: 992px) {
    .dec-nav-extra {
        gap: 8px;
        margin-left: auto;
        align-items: center;
    }
    .dec-nav-extra .btn {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 14px;
        font-size: 14px;
    }
}

/* ===== home page (index.php: main.dec-home) ===== */

/* carousel (#h-c, Owl Carousel 1 started by custome.js). Owl hides the whole block until the script starts it, so
   the page below jumped down by the carousel's height once the scripts had loaded: until then the first slide
   stands in its place (before the start the slides are direct children of #h-c, afterwards Owl wraps them). */
.home-carusel.owl-carousel {
    display: block;
}
.home-carusel.owl-carousel > .item:not(:first-child) {
    display: none;
}
/* the photo fills its slide and is cropped to the slide's proportions instead of being stretched */
#content .home-carusel.owl-carousel .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* announcements: the excerpt is cut at two lines and the whole card opens the announcement */
.dec-home .announcement .card-text > p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dec-home .announcement .cart .btn::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* «Конференції, Форуми, Події» in the main column (template-parts/events.php): three cards like the news;
   phones get a swipeable strip of all five (css/responsive.css) */
.dec-events.sidebar-widget {
    background: transparent;
    padding: 0;
    margin-top: 34px;
}
.dec-events__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.dec-events .news-sidebar {
    border: 0;
    margin: 0;
    padding: 0;
}
.dec-events .news-sidebar:nth-child(n+4) {
    display: none;
}
.dec-events .news-sidebar .row {
    margin: 0;
}
.dec-events .news-sidebar .col-12 {
    padding: 0;
}
.dec-events .widget-post-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 25px 0 25px 0;
}
.dec-events .title-news-sidebar h6 {
    font-size: 16px;
    line-height: 1.25;
    color: #263238;
    margin-bottom: 0;
}