/* =========================================================
   BIBLIOTEKA.KG HOME PAGE
   ВАЖНО: подключать после theme.css
   ========================================================= */

.home-page {
    position: relative;
}

.home-page .page-content {
    position: relative;
    z-index: 2;
}

.home-main-layout {
    position: relative;
}

.home-main-column,
.home-sidebar {
    position: relative;
    z-index: 2;
}

.home-section {
    margin-bottom: 28px;
}

.home-section:last-child {
    margin-bottom: 0;
}

/* =========================================================
   ОБЩИЕ ПОВЕРХНОСТИ
   ========================================================= */

.home-widget-section,
.home-roll-section,
.home-live-section,
.home-banner-frame,
.home-subscription-section,
.home-side-ad-card {
    color: var(--text);
}

.home-widget-section,
.home-roll-section,
.home-live-section {
    border-radius: 22px;
}

/* =========================================================
   PLACEHOLDER ДЛЯ RollWidget
   ========================================================= */

.home-placeholder-block {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border-radius: 22px;
    color: var(--text);
    background: rgba(var(--surface-rgb), var(--glass-alpha));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
}

.home-placeholder-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--bg);
    background: var(--accent);
    box-shadow: 0 12px 28px rgba(0, 227, 248, .22);
    font-size: 26px;
}

.home-placeholder-block h2 {
    margin: 0 0 8px;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    color: var(--text);
}

.home-placeholder-block p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

/* =========================================================
   БАННЕРЫ ГОРИЗОНТАЛЬНЫЕ
   ========================================================= */

.home-banner-horizontal {
    position: relative;
}

.home-banner-frame {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(var(--surface-rgb), var(--glass-alpha));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
}

.home-banner-item {
    padding: 6px;
}

.home-banner-link {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: var(--surface);
}

.home-banner-link img {
    display: block;
    width: 100%;
    min-height: 120px;
    object-fit: cover;
    border-radius: 18px;
    transition: transform .25s ease, filter .25s ease;
}

.home-banner-link:hover img {
    transform: scale(1.015);
    filter: saturate(1.08);
}

.home-banner-bottom {
    margin-top: 34px;
    margin-bottom: 34px;
}

/* Owl внутри главной */
.home-page .owl-theme .owl-nav {
    margin-top: 8px;
}

.home-page .owl-theme .owl-nav [class*='owl-'] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--bg) !important;
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 0 8px 18px rgba(0, 227, 248, .18);
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.home-page .owl-theme .owl-nav [class*='owl-']:hover {
    color: var(--accent) !important;
    background: var(--bg) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 18px rgba(103, 232, 249, .38);
    transform: translateY(-1px);
}

.home-page .owl-theme .owl-dots .owl-dot span {
    background: rgba(var(--tint-rgb), .35);
}

.home-page .owl-theme .owl-dots .owl-dot.active span,
.home-page .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--accent);
}

/* =========================================================
   ПАРАЛЛАКС-БЛОКИ ВНУТРИ ГЛАВНОЙ
   ========================================================= */

.home-parallax-box,
.home-news-section {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.home-parallax-box {
    padding: 34px 22px;
}

.home-parallax-box .overlay,
.home-news-section .overlay {
    z-index: 1;
}

.home-parallax-content,
.home-news-content {
    z-index: 2;
}

.home-news-section {
    padding: 44px 28px;
}

/* =========================================================
   ПРАВАЯ КОЛОНКА / РЕКЛАМА
   ========================================================= */

.home-sidebar-sticky {
    position: sticky;
    top: 96px;
}

.home-side-ad-card {
    overflow: hidden;
    margin-bottom: 24px;
    border-radius: 22px;
    background: rgba(var(--surface-rgb), var(--glass-alpha));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
}

.home-side-ad-card:last-child {
    margin-bottom: 0;
}

.home-side-ad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.home-side-ad-header span {
    color: var(--muted);
}

.home-side-ad-body {
    padding: 10px;
}

.home-side-ad-link {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface);
}

.home-side-ad-link img {
    display: block;
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    transition: transform .25s ease, filter .25s ease;
}

.home-side-ad-link:hover img {
    transform: scale(1.02);
    filter: saturate(1.08);
}

/* =========================================================
   КОММЕРЧЕСКИЕ БЛОКИ
   ========================================================= */

.home-subscription-section {
    margin-top: 10px;
}

.home-commercial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.home-commercial-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 34px;
    border-radius: 28px;
    color: var(--text);
    background: rgba(var(--surface-rgb), var(--glass-alpha));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.05);
}

.home-commercial-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 220px at 10% -10%, rgba(103, 232, 249, .20), transparent 62%),
        radial-gradient(520px 220px at 110% 110%, rgba(var(--tint-rgb), .20), transparent 60%);
    pointer-events: none;
}

.home-commercial-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.home-section-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--bg);
    background: var(--accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.home-commercial-card h2 {
    margin: 0 0 14px;
    font-size: clamp(25px, 2.4vw, 38px);
    font-weight: 850;
    line-height: 1.12;
    color: var(--text);
}

.home-commercial-card p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.home-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.home-feature-list span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--text);
    background: rgba(var(--surface-rgb), .72);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 13px;
    font-weight: 700;
}

.home-feature-list i {
    color: var(--accent);
}

.home-commercial-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-btn-primary,
.home-btn-outline {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.home-btn-primary {
    color: var(--bg);
    background: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: 0 10px 24px rgba(103, 232, 249, .24);
}

.home-btn-primary:hover,
.home-btn-primary:focus {
    color: var(--accent);
    background: var(--bg);
    border-color: var(--accent);
    box-shadow: 0 0 22px rgba(103, 232, 249, .42);
    transform: translateY(-1px);
}

.home-btn-outline {
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
}

.home-btn-outline:hover,
.home-btn-outline:focus {
    color: var(--bg);
    background: var(--text);
    border-color: var(--text);
    box-shadow: 0 0 18px rgba(var(--tint-rgb), .26);
    transform: translateY(-1px);
}

.home-commercial-visual {
    position: relative;
    z-index: 2;
    width: 116px;
    min-width: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 82px;
    opacity: .86;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */

@media (max-width: 1199.98px) {
    .home-commercial-card {
        padding: 28px;
    }

    .home-commercial-visual {
        width: 88px;
        min-width: 88px;
        font-size: 64px;
    }
}

@media (max-width: 991.98px) {
    .home-sidebar-sticky {
        position: static;
        top: auto;
    }

    .home-sidebar {
        margin-top: 6px;
    }

    .home-side-ad-card {
        margin-bottom: 18px;
    }

    .home-commercial-grid {
        grid-template-columns: 1fr;
    }

    .home-commercial-card {
        min-height: auto;
    }

    .home-parallax-box {
        padding: 30px 18px;
    }

    .home-news-section {
        padding: 34px 20px;
    }
}

@media (max-width: 575.98px) {
    .home-section {
        margin-bottom: 22px;
    }

    .home-placeholder-block {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
        border-radius: 20px;
    }

    .home-placeholder-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 22px;
    }

    .home-banner-frame,
    .home-side-ad-card,
    .home-parallax-box,
    .home-news-section {
        border-radius: 20px;
    }

    .home-banner-item {
        padding: 5px;
    }

    .home-banner-link,
    .home-banner-link img,
    .home-side-ad-link,
    .home-side-ad-link img {
        border-radius: 15px;
    }

    .home-commercial-card {
        flex-direction: column;
        padding: 24px;
        border-radius: 22px;
    }

    .home-commercial-visual {
        width: 72px;
        min-width: 72px;
        justify-content: flex-start;
        font-size: 52px;
    }

    .home-commercial-actions {
        flex-direction: column;
    }

    .home-btn-primary,
    .home-btn-outline {
        width: 100%;
    }
    /* =========================================================
   HOME PAGE — БОЛЬШИЕ БЛОКИ БЕЗ ЗАКРУГЛЕНИЙ
   ========================================================= */

.home-page .home-placeholder-block,
.home-page .home-banner-frame,
.home-page .home-banner-link,
.home-page .home-banner-link img,
.home-page .home-side-ad-card,
.home-page .home-side-ad-link,
.home-page .home-side-ad-link img,
.home-page .home-popular-section,
.home-page .home-news-section,
.home-page .home-info-section {
    border-radius: 0 !important;
}
}