/* =========================================================
   VAMPIROV.NET - Gothic Signal Dark
   Optimized & Refactored for Cassiopeia (Joomla 5)
   ========================================================= */

/* =========================================================
   1. COLOR SYSTEM (Root Variables)
   ========================================================= */
:root {
    --v-bg: #151518;
    --v-bg-deep: #111114;
    --v-bg-soft: #1a191d;
    --v-panel: #211f23;
    --v-panel-2: #262329;
    --v-panel-3: #2b2830;
    --v-border: rgba(255, 255, 255, .075);
    --v-border-strong: rgba(255, 255, 255, .12);
    --v-red: #91445d;
    --v-red-light: #b66a82;
    --v-red-dark: #713247;
    --v-purple: #8b8294;
    --v-purple-light: #aaa1b0;
    --v-text: #d2ced2;
    --v-text-bright: #e8e3e7;
    --v-text-soft: #aaa4aa;
    --v-text-muted: #858087;
    --v-link: #bd9aaa;
    --v-link-hover: #d39caf;
    --v-shadow: 0 10px 35px rgba(0, 0, 0, .28);
    --v-radius: 5px;

    /* Bootstrap Override via CSS Variables */
    --body-bg: #151518 !important;
    --body-color: #d2ced2 !important;
    --secondary-bg: #1d1b20 !important;
    --tertiary-bg: #211f23 !important;
    --link-color: #bd9aaa !important;
    --link-hover-color: #d39caf !important;
    --border-color: rgba(255, 255, 255, .075) !important;
}

/* =========================================================
   2. GLOBAL RESET & BODY
   ========================================================= */
html {
    background: var(--v-bg-deep) !important;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    background: radial-gradient(ellipse at top, #1b191e 0%, #151518 45%, #111114 100%) !important;
    color: var(--v-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
    min-width: 0;
}

/* Reset Cassiopeia's default light backgrounds */
.site-grid,
.container-component,
.container-sidebar-left,
.container-sidebar-right,
main,
main>*,
.com-content,
.com-content-article,
.item-page,
.card,
.card-body,
.card-header,
.list-group-item,
.table,
.offcanvas,
.dropdown-menu,
.form-control {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--v-text) !important;
    border-color: var(--v-border) !important;
}

/* =========================================================
   3. LAYOUT & GRID (Full Width + Sidebar Fix)
   ========================================================= */
.site-grid {
    width: 100% !important;
    max-width: none !important;
    
    grid-template-columns: 
        [full-start] 
        20px
        [content-start]
        minmax(200px, 250px)
        25px
        [main-start]
        minmax(0, 1fr)
        25px
        [main-end]
        minmax(200px, 250px)
        20px
        [full-end] !important;
    
    column-gap: 0 !important;
}

.site-grid > * {
    min-width: 0;
    max-width: 100%;
}

.container-component {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-column: main-start / main-end !important;
}

.container-sidebar-left {
    width: 100% !important;
    max-width: 250px !important;
    min-width: 200px !important;
    grid-column: content-start / main-start !important;
    align-self: start !important;
    justify-self: stretch !important;
    padding-left: 0 !important;
}

.container-sidebar-right {
    width: 100% !important;
    max-width: 250px !important;
    min-width: 200px !important;
    grid-column: main-end / full-end !important;
    align-self: start !important;
    justify-self: stretch !important;
    padding-right: 0 !important;
}

.container-component:first-child:last-child {
    grid-column: content-start / full-end !important;
}

.container-breadcrumb {
    grid-column: content-start / full-end !important;
    width: 100% !important;
    max-width: none !important;
    padding-right: 20px !important;
}

.container-main,
.grid-child {
    width: 100% !important;
    max-width: none !important;
}

/* =========================================================
   4. HEADER & TOP MENU
   ========================================================= */
.container-header {
    background: linear-gradient(180deg, #1c1a1f 0%, #18171a 100%) !important;
    border-bottom: 1px solid var(--v-border);
    box-shadow: 0 5px 25px rgba(0, 0, 0, .25);
}

.container-header .navbar-brand,
.container-header .navbar-brand a {
    color: var(--v-text-bright) !important;
}

.container-header .mod-menu {
    background: transparent !important;
}

.container-header .mod-menu>li>a,
.container-header .mod-menu>li>span {
    color: var(--v-text-soft) !important;
    transition: color .2s ease, background .2s ease;
}

.container-header .mod-menu>li>a:hover,
.container-header .mod-menu>li>span:hover {
    color: var(--v-text-bright) !important;
    background: rgba(145, 68, 93, .12) !important;
}

.container-header .mod-menu>li.active>a,
.container-header .mod-menu>li.current>a {
    color: var(--v-link-hover) !important;
}

.container-header .mod-menu .metismenu-item>ul {
    background: var(--v-panel) !important;
    border: 1px solid var(--v-border-strong);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .45);
}

.container-header .mod-menu .metismenu-item>ul a {
    color: var(--v-text-soft) !important;
}

.container-header .mod-menu .metismenu-item>ul a:hover {
    background: var(--v-panel-3) !important;
    color: var(--v-text-bright) !important;
}

/* =========================================================
   5. BREADCRUMBS
   ========================================================= */
.breadcrumb {
    background: #18171a !important;
    border: 1px solid var(--v-border);
    border-radius: 4px;
    padding: 7px 12px !important;
    margin-bottom: 15px !important;
    font-size: .78rem;
    color: var(--v-text-muted) !important;
}

.breadcrumb a {
    color: var(--v-link) !important;
}

/* =========================================================
   6. MAIN CONTENT & ARTICLES
   ========================================================= */
main {
    padding-top: 15px;
    padding-bottom: 40px;
}

.item-page,
.com-content-article {
    background: linear-gradient(145deg, var(--v-panel) 0%, #1e1d20 100%) !important;
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    padding: clamp(20px, 3vw, 45px);
    color: var(--v-text) !important;
    overflow-wrap: anywhere;
}

.item-page .page-header,
.com-content-article .page-header {
    margin-bottom: 10px !important;
    border: 0 !important;
}

.item-page .page-header h1,
.com-content-article .page-header h1,
.item-page h1,
.com-content-article h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 2.6vw, 2.25rem) !important;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--v-text-bright) !important;
    margin: 0 0 12px 0 !important;
}

/* =========================================================
   7. ARTICLE INFO (Meta)
   ========================================================= */
.article-info {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 18px;
    margin: 0 0 25px 0 !important;
    padding: 8px 12px !important;
    background: #18171a !important;
    border: 1px solid var(--v-border);
    border-left: 3px solid var(--v-red);
    border-radius: 3px;
    color: var(--v-text-muted) !important;
    font-size: .78rem;
    line-height: 1.5;
}

.article-info .article-info-term {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--v-red-light) !important;
    font-weight: 600;
}

.article-info>dt,
.article-info>dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--v-text-muted) !important;
}

.article-info>dd:not(:last-child)::after {
    content: "  •";
    color: var(--v-red);
    margin-left: 18px;
}

.article-info a {
    color: var(--v-link) !important;
    text-decoration: none;
}

.article-info a:hover {
    color: var(--v-link-hover) !important;
}

/* =========================================================
   8. ARTICLE BODY & TYPOGRAPHY
   ========================================================= */
.item-page .com-content-article__body,
.com-content-article__body {
    color: var(--v-text) !important;
    font-size: 1rem;
    line-height: 1.85;
}

.item-page p,
.com-content-article p {
    color: var(--v-text) !important;
    margin-top: 0;
    margin-bottom: 1.15em;
    overflow-wrap: anywhere;
}

.item-page strong,
.com-content-article strong {
    color: var(--v-text-bright);
}

.item-page h2,
.com-content-article h2 {
    color: var(--v-text-bright) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    line-height: 1.3;
    margin: 2em 0 .7em;
    padding-bottom: .35em;
    border-bottom: 1px solid var(--v-border);
}

.item-page h3,
.com-content-article h3 {
    color: var(--v-text-bright) !important;
    font-size: 1.25rem;
    margin: 1.7em 0 .6em;
}

.item-page h4,
.com-content-article h4 {
    color: var(--v-text-bright) !important;
}

.item-page a,
.com-content-article a {
    color: var(--v-link) !important;
    text-decoration-color: rgba(189, 154, 170, .35);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.item-page a:hover,
.com-content-article a:hover {
    color: var(--v-link-hover) !important;
    text-decoration-color: var(--v-link-hover);
}

.item-page blockquote,
.com-content-article blockquote {
    margin: 1.5em 0;
    padding: 15px 20px;
    background: #19181b !important;
    border-left: 3px solid var(--v-red);
    color: var(--v-text-soft) !important;
    border-radius: 0 4px 4px 0;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .12);
}

.item-page ul,
.item-page ol,
.com-content-article ul,
.com-content-article ol {
    color: var(--v-text);
    margin-bottom: 1.3em;
}

.item-page li::marker,
.com-content-article li::marker {
    color: var(--v-red-light);
}

.item-page table,
.com-content-article table {
    width: 100%;
    border-collapse: collapse;
    background: #19181b !important;
    color: var(--v-text) !important;
    margin: 20px 0;
}

.item-page th,
.com-content-article th {
    background: #28252b !important;
    color: var(--v-text-bright) !important;
    font-weight: 600;
}

.item-page td,
.item-page th,
.com-content-article td,
.com-content-article th {
    border: 1px solid var(--v-border);
    padding: 9px 12px;
}

.item-page tr:nth-child(even),
.com-content-article tr:nth-child(even) {
    background: rgba(255, 255, 255, .018);
}

.item-page hr,
.com-content-article hr {
    border: 0;
    border-top: 1px solid var(--v-border);
    margin: 30px 0;
}

/* =========================================================
   9. ARTICLE IMAGES & FIGURES
   ========================================================= */
.item-page img,
.com-content-article img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .35);
}

.item-page img.float-start,
.com-content-article img.float-start,
.item-page img.left,
.com-content-article img.left {
    float: left;
    max-width: 42%;
    margin: 5px 25px 15px 0;
}

.item-page img.float-end,
.com-content-article img.float-end,
.item-page img.right,
.com-content-article img.right {
    float: right;
    max-width: 42%;
    margin: 5px 0 15px 25px;
}

.item-page figure figcaption,
.com-content-article figure figcaption {
    color: var(--v-text-muted) !important;
    background: #18171a;
    padding: 6px 10px;
    font-size: .78rem;
    border-radius: 0 0 4px 4px;
}

/* =========================================================
   10. CATEGORY BLOG & HOME (Latest Articles)
   ========================================================= */
.com-content-category-blog,
.blog,
.blog-items,
.items-leading {
    background: transparent !important;
    color: var(--v-text) !important;
}

.com-content-category-blog .page-header,
.blog .page-header {
    background: linear-gradient(135deg, var(--v-panel), #1b191e) !important;
    border: 1px solid var(--v-border);
    border-left: 3px solid var(--v-red);
    border-radius: 5px;
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .25);
}

.com-content-category-blog .page-header h1,
.blog .page-header h1 {
    color: var(--v-text-bright) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem !important;
    margin: 0 !important;
}

.com-content-category-blog .category-desc,
.blog .category-desc {
    background: #1b1a1e !important;
    color: var(--v-text-soft) !important;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 4px;
    padding: 15px 18px;
    margin-bottom: 22px;
}

.com-content-category-blog .blog-item,
.blog .blog-item,
.mod-articleslatest .mod-articleslatest__item,
.mod-articles-category .mod-articles-category-group>li {
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, var(--v-panel), #1e1c20) !important;
    color: var(--v-text) !important;
    border: 1px solid var(--v-border) !important;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.com-content-category-blog .blog-item:hover,
.blog .blog-item:hover {
    border-color: rgba(182, 106, 130, .28) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .3);
}

.com-content-category-blog .item-title,
.blog .item-title,
.mod-articleslatest .mod-articleslatest__item h4,
.mod-articles-category h4 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.com-content-category-blog .item-title a,
.blog .item-title a,
.mod-articleslatest a,
.mod-articles-category a,
.blog-item .item-title a {
    color: var(--v-text-bright) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem !important;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
}

.com-content-category-blog .item-title a:hover,
.blog .item-title a:hover,
.mod-articleslatest a:hover,
.mod-articles-category a:hover,
.blog-item .item-title a:hover {
    color: var(--v-link-hover) !important;
}

.com-content-category-blog .item-content,
.blog .item-content,
.mod-articleslatest .mod-articleslatest__item,
.mod-articles-category {
    color: var(--v-text-soft) !important;
    line-height: 1.7;
}

.com-content-category-blog .item-content p,
.blog .item-content p {
    color: var(--v-text-soft) !important;
    margin-bottom: 10px;
}

.com-content-category-blog .readmore,
.blog .readmore {
    margin-top: 12px;
}

.com-content-category-blog .readmore a,
.blog .readmore a {
    display: inline-block;
    background: #29252b !important;
    color: #c7a7b4 !important;
    border: 1px solid rgba(182, 106, 130, .25);
    border-radius: 3px;
    padding: 5px 12px;
    font-size: .78rem;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease;
}

.com-content-category-blog .readmore a:hover,
.blog .readmore a:hover {
    background: #392b32 !important;
    color: #e1c2cc !important;
    border-color: rgba(182, 106, 130, .5);
}

/* =========================================================
   11. INTRO IMAGE (150x150)
   ========================================================= */
.mod-articleslatest img,
.mod-articles-category img,
.blog-item .item-image img,
.blog-item figure.item-image img,
.article-intro-image,
.com-content-category-blog .item-image img,
.blog .item-image img {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    object-fit: cover !important;
    float: left !important;
    margin: 0 20px 8px 0 !important;
    border-radius: 4px !important;
    border: 1px solid var(--v-border-strong) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4) !important;
}

.blog-item .item-image,
.blog-item figure.item-image,
.com-content-category-blog .blog-item .item-image {
    float: left !important;
    width: 150px !important;
    max-width: 150px !important;
    margin: 0 20px 8px 0 !important;
    background: transparent !important;
}

.item-page .com-content-article__body::after,
.com-content-article__body::after,
.blog-item::after,
.mod-articleslatest .mod-articleslatest__item::after,
.com-content-category-blog .blog-item::after {
    content: "";
    display: table;
    clear: both;
}

/* =========================================================
   12. SIDEBAR MODULES
   ========================================================= */
.container-sidebar-left .moduletable,
.container-sidebar-right .moduletable {
    background: #1b1a1e !important;
    border: 1px solid var(--v-border);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
}

.container-sidebar-left .module-title,
.container-sidebar-right .module-title {
    color: var(--v-text-bright) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--v-border);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.container-sidebar-left .mod-menu a,
.container-sidebar-right .mod-menu a {
    color: var(--v-text-soft) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .035);
    transition: background .2s ease, color .2s ease;
}

.container-sidebar-left .mod-menu a:hover,
.container-sidebar-right .mod-menu a:hover {
    background: rgba(145, 68, 93, .10) !important;
    color: var(--v-text-bright) !important;
}

.container-sidebar-left .mod-menu .current>a,
.container-sidebar-right .mod-menu .current>a {
    color: var(--v-link-hover) !important;
    border-left: 2px solid var(--v-red);
}

/* =========================================================
   13. POCA GALLERY (Dark Override)
   ========================================================= */
.poca-gallery,
.poca-gallery-container,
.poca-container,
.poca-gallery .gallery {
    background: #18171a !important;
    color: var(--v-text) !important;
}

.com-content-article .poca-gallery,
.item-page .poca-gallery {
    margin: 25px 0;
    padding: 15px;
    border: 1px solid var(--v-border);
    border-radius: 5px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .2);
}

.poca-gallery img,
.poca img {
    border: 1px solid var(--v-border) !important;
    border-radius: 3px !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .45) !important;
    transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}

.poca-gallery img:hover,
.poca img:hover {
    transform: translateY(-2px);
    border-color: rgba(182, 106, 130, .45) !important;
    filter: brightness(1.08);
}

.poca-gallery .caption,
.poca-gallery .title,
.poca-gallery figcaption {
    background: #18171a !important;
    color: var(--v-text-soft) !important;
}

/* =========================================================
   14. FORMS, INPUTS & BUTTONS
   ========================================================= */
input,
textarea,
select {
    background: #19181b !important;
    color: var(--v-text) !important;
    border: 1px solid var(--v-border-strong) !important;
    border-radius: 4px;
}

input:focus,
textarea:focus,
select:focus {
    background: #1d1b20 !important;
    color: var(--v-text-bright) !important;
    border-color: var(--v-red) !important;
    box-shadow: 0 0 0 2px rgba(145, 68, 93, .15) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--v-text-muted) !important;
}

.btn,
button,
input[type="submit"] {
    background: #2b252a !important;
    border: 1px solid rgba(182, 106, 130, .35) !important;
    color: var(--v-text-bright) !important;
    border-radius: 4px;
    transition: background .2s ease, border-color .2s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    background: #392b32 !important;
    border-color: var(--v-red-light) !important;
}

/* =========================================================
   15. PAGINATION
   ========================================================= */
.pagination {
    margin-top: 30px;
    justify-content: flex-start !important;
}

.pagination a,
.pagination span {
    background: var(--v-panel) !important;
    border: 1px solid var(--v-border);
    color: var(--v-text-soft) !important;
}

.pagination .active span,
.pagination a:hover {
    background: #38272f !important;
    color: var(--v-text-bright) !important;
    border-color: rgba(182, 106, 130, .4);
}

/* =========================================================
   16. TAGS
   ========================================================= */
.tags .badge,
.tagspopular .badge {
    background: #29252b !important;
    color: var(--v-text-soft) !important;
    border: 1px solid var(--v-border);
    border-radius: 3px;
}

.tags .badge:hover,
.tagspopular .badge:hover {
    background: #392b32 !important;
    color: var(--v-text-bright) !important;
}

/* =========================================================
   17. FOOTER
   ========================================================= */
.container-footer {
    background: var(--v-bg-deep) !important;
    border-top: 1px solid var(--v-border);
    color: var(--v-text-muted) !important;
    margin-top: 30px;
    padding: 20px 0;
}

.container-footer a {
    color: var(--v-link) !important;
}

/* =========================================================
   18. JOOMLA ALERTS, MODAL & CODE
   ========================================================= */
.alert {
    background: var(--v-panel) !important;
    color: var(--v-text) !important;
    border: 1px solid var(--v-border);
}

.modal-content {
    background: var(--v-panel) !important;
    color: var(--v-text) !important;
    border: 1px solid var(--v-border-strong);
}

.modal-header,
.modal-footer {
    background: #19181b !important;
    border-color: var(--v-border) !important;
}

pre,
code {
    background: var(--v-bg-deep) !important;
    color: #c9b7c0 !important;
    border: 1px solid var(--v-border);
    border-radius: 4px;
}

pre {
    padding: 15px;
    overflow-x: auto;
}

/* =========================================================
   19. SCROLLBAR
   ========================================================= */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #111114;
}

::-webkit-scrollbar-thumb {
    background: #3a3036;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #58414c;
}

/* =========================================================
   20. RESPONSIVE (MOBILE) - ИСПРАВЛЕНАЯ ВЕРСИЯ
   ========================================================= */

/* Планшеты и маленькие экраны */
@media (max-width: 991px) {
    .site-grid {
        grid-template-columns: 
            [full-start] 
            15px
            [content-start main-start]
            minmax(0, 1fr)
            [main-end content-end]
            15px
            [full-end] !important;
        gap: 15px !important;
    }

    .container-sidebar-left,
    .container-sidebar-right {
        grid-column: content-start / content-end !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 15px;
    }

    .container-component {
        grid-column: content-start / content-end !important;
        width: 100% !important;
    }

    .container-breadcrumb {
        grid-column: content-start / content-end !important;
        padding-right: 0 !important;
    }

    /* Меню в мобильной версии должно быть сверху */
    .container-sidebar-left {
        order: -1 !important;
    }

    .container-sidebar-right {
        order: 1 !important;
    }
}

/* Телефоны */
@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    main {
        padding: 8px 0 25px;
    }

    .site-grid {
        grid-template-columns: 
            [full-start] 
            10px
            [content-start main-start]
            minmax(0, 1fr)
            [main-end content-end]
            10px
            [full-end] !important;
        gap: 10px !important;
    }

    .item-page,
    .com-content-article {
        border-radius: 0;
        padding: 18px 15px !important;
        border-left: 0;
        border-right: 0;
        margin: 0 !important;
        width: 100% !important;
    }

    .item-page .page-header h1,
    .com-content-article .page-header h1 {
        font-size: 1.55rem !important;
    }

    .article-info {
        display: block !important;
        line-height: 1.8;
        padding: 8px 10px !important;
        font-size: .7rem;
    }

    .article-info>dt,
    .article-info>dd {
        display: inline !important;
    }

    .article-info>dd:not(:last-child)::after {
        margin-left: 8px;
    }

    /* Сброс обтекания для картинок на мобильных */
    .item-page img.float-start,
    .item-page img.float-end,
    .item-page img.left,
    .item-page img.right,
    .com-content-article img.float-start,
    .com-content-article img.float-end,
    .com-content-article img.left,
    .com-content-article img.right {
        float: none !important;
        display: block;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 15px auto !important;
    }

    /* Уменьшаем превью-картинки */
    .mod-articleslatest img,
    .mod-articles-category img,
    .blog-item .item-image img,
    .blog-item figure.item-image img,
    .article-intro-image,
    .com-content-category-blog .item-image img,
    .blog .item-image img {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        margin-right: 14px !important;
    }

    .blog-item .item-image,
    .blog-item figure.item-image,
    .com-content-category-blog .blog-item .item-image {
        width: 100px !important;
        max-width: 100px !important;
    }

    .com-content-category-blog .blog-item,
    .blog .blog-item,
    .mod-articleslatest .mod-articleslatest__item,
    .mod-articles-category .mod-articles-category-group>li {
        padding: 15px;
        margin-bottom: 12px;
    }

    .com-content-category-blog .item-title a,
    .blog .item-title a {
        font-size: 1.1rem !important;
    }

    .com-content-category-blog .item-image,
    .blog .item-image {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        text-align: center;
    }

    .com-content-category-blog .item-image img,
    .blog .item-image img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block;
        margin: 0 auto;
    }

    .com-content-article .poca-gallery,
    .item-page .poca-gallery {
        padding: 8px;
    }

    /* Хлебные крошки */
    .breadcrumb {
        padding: 5px 10px !important;
        font-size: .7rem;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Таблицы */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .item-page table,
    .com-content-article table {
        font-size: .85rem;
    }

    .item-page td,
    .item-page th,
    .com-content-article td,
    .com-content-article th {
        padding: 6px 8px;
    }

    /* Кнопки */
    .btn,
    button,
    input[type="submit"] {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Пагинация */
    .pagination {
        justify-content: center !important;
        flex-wrap: wrap;
    }

    .pagination .page-link {
        padding: 5px 10px !important;
        font-size: .8rem;
    }

    /* Боковые панели на мобильных */
    .container-sidebar-left .moduletable,
    .container-sidebar-right .moduletable {
        padding: 12px;
        margin-bottom: 12px;
    }
}

/* Очень маленькие телефоны */
@media (max-width: 480px) {
    .site-grid {
        grid-template-columns: 
            [full-start] 
            8px
            [content-start main-start]
            minmax(0, 1fr)
            [main-end content-end]
            8px
            [full-end] !important;
    }

    .item-page,
    .com-content-article {
        padding: 12px 12px !important;
    }

    .item-page .page-header h1,
    .com-content-article .page-header h1 {
        font-size: 1.35rem !important;
    }

    .mod-articleslatest img,
    .mod-articles-category img,
    .blog-item .item-image img,
    .blog-item figure.item-image img,
    .article-intro-image {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        margin-right: 10px !important;
    }

    .blog-item .item-image,
    .blog-item figure.item-image {
        width: 80px !important;
        max-width: 80px !important;
    }

    .com-content-category-blog .blog-item,
    .blog .blog-item,
    .mod-articleslatest .mod-articleslatest__item,
    .mod-articles-category .mod-articles-category-group>li {
        padding: 10px;
    }

    .com-content-category-blog .item-title a,
    .blog .item-title a {
        font-size: 1rem !important;
    }
}

/* =========================================================
   21. LARGE SCREENS (>1600px)
   ========================================================= */
@media (min-width: 1600px) {
    .item-page,
    .com-content-article {
        padding-left: clamp(40px, 4vw, 75px);
        padding-right: clamp(40px, 4vw, 75px);
    }
}

/* =========================================================
   END VAMPIROV.NET
   ========================================================= */