/* ============================================================
   Robnety adBanner Manager - Frontend Styles
   ============================================================ */

/* Force full width inside Elementor auto-width widgets */
.elementor-widget-html:has(.radb-grid),
.elementor-widget-html:has(.radb-fullwidth) {
    width: 100% !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
}
.elementor-widget-html .elementor-widget-container:has(.radb-grid) {
    width: 100%;
}

.radb-grid {
    display: grid;
    gap: 16px;
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    box-sizing: border-box;
}

.radb-cols-1 { grid-template-columns: 1fr; }
.radb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.radb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.radb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.radb-cols-5 { grid-template-columns: repeat(5, 1fr); }
.radb-cols-6 { grid-template-columns: repeat(6, 1fr); }

.radb-fullwidth {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    box-sizing: border-box;
}

.radb-fullwidth .radb-grid {
    width: 100%;
}

@media (max-width: 1024px) {
    .radb-fullwidth {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.radb-banner-item {
    position: relative;
    overflow: hidden;
    line-height: 0;
    border-radius: 0 !important;
}

.radb-banner-link {
    display: block;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    border-radius: 0 !important;
}

.radb-banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.35s ease,
                box-shadow 0.35s ease;
    will-change: transform;
}

/* Ratio box */
.radb-ratio-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.radb-ratio-box .radb-banner-link {
    position: absolute;
    inset: 0;
}
.radb-ratio-box .radb-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Hover effects */
.radb-hover-shrink { background: #ffffff; }
.radb-hover-shrink .radb-banner-img { transform: scale(1); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.radb-hover-shrink:hover .radb-banner-img { transform: scale(0.88); }

.radb-hover-zoom { overflow: hidden; }
.radb-hover-zoom .radb-banner-img { transform: scale(1); }
.radb-hover-zoom:hover .radb-banner-img { transform: scale(1.06); }

.radb-hover-fade .radb-banner-img { opacity: 1; }
.radb-hover-fade:hover .radb-banner-img { opacity: 0.72; }

.radb-hover-lift {
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.radb-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.radb-hover-slide { overflow: hidden; }
.radb-hover-slide .radb-banner-img { transform: translateY(0); }
.radb-hover-slide:hover .radb-banner-img { transform: translateY(-8px) scale(1.03); }

.radb-banner-link.radb-clicking { opacity: 0.7; pointer-events: none; }

/* Responsive */
@media (max-width: 1024px) {
    .radb-cols-5, .radb-cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .radb-cols-4, .radb-cols-5, .radb-cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .radb-cols-3, .radb-cols-4, .radb-cols-5, .radb-cols-6 { grid-template-columns: repeat(2, 1fr); }
    .radb-grid { gap: 10px; }
}
@media (max-width: 480px) {
    .radb-cols-2, .radb-cols-3, .radb-cols-4, .radb-cols-5, .radb-cols-6 { grid-template-columns: 1fr; }
    .radb-grid { gap: 8px; }
}