/**
 * Speciální opravy pro homepage
 *
 * @package dumabyt
 */

/* Odstranění mezer mezi prvky v sidebar */
.lg\:col-span-1 > .space-y-6 {
    margin-top: 0 !important;
}

/* Zarovnání sidebar bannerů s články */
.lg\:col-span-1 .uw-banner {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Odstranění výchozích marginů u prvního banneru */
.lg\:col-span-1 .uw-banner:first-child {
    margin-top: 0 !important;
}

/* Zarovnání všech bannerů na úroveň článků */
@media (min-width: 1024px) {
    .lg\:col-span-1 {
        margin-top: 0 !important;
        align-self: flex-start;
    }
    
    /* Třída pro sidebar s pevnou šířkou */
    .sidebar-fixed-width {
        width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Fixní šířka pro všechny elementy v sidebaru */
    .lg\:col-span-1 > div,
    .sidebar-fixed-width > div {
        width: 300px !important;
        max-width: 300px !important;
    }
    
    /* Nastavení pro newsletterový box */
    .lg\:col-span-1 .bg-gradient-to-br,
    .sidebar-fixed-width .bg-gradient-to-br {
        width: 300px !important;
        max-width: 300px !important;
    }
    
    /* Nastavení pro box nejnovějších článků */
    .lg\:col-span-1 .bg-white.card-elevation,
    .sidebar-fixed-width .bg-white.card-elevation {
        width: 300px !important;
        max-width: 300px !important;
    }
}

/* Zarovnání nových Tailwind bannerů na homepage */
.sidebar-fixed-width > div.aspect-square,
.lg\:col-span-1 > div.aspect-square {
    width: 300px !important;
    height: 300px !important;
    max-width: 300px !important;
    margin: 0 auto 1.5rem auto !important;
    display: block !important;
}

/* Obrázek v novém Tailwind banneru */
.sidebar-fixed-width .aspect-square img,
.lg\:col-span-1 .aspect-square img {
    width: 300px !important;
    height: 300px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Link v novém Tailwind banneru */
.sidebar-fixed-width .aspect-square a,
.lg\:col-span-1 .aspect-square a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Placeholder v novém Tailwind banneru */
.sidebar-fixed-width .aspect-square div.bg-gray-100,
.lg\:col-span-1 .aspect-square div.bg-gray-100 {
    width: 300px !important;
    height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Legacy support pro staré bannery */
.uw-banner-square {
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 auto 1.5rem auto !important;
    display: block !important;
}

.sidebar-fixed-width .uw-banner-square,
.lg\:col-span-1 .uw-banner-square {
    width: 300px !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.5rem !important;
}

/* Mobile responsive fixes for SQUARE banners */
@media (max-width: 1023px) {
    /* Hide carousel sidebar banners on mobile to prevent them appearing below carousel */
    .carousel-sidebar-fix {
        display: none !important;
    }

    /* Ensure all square banners appear together in main sidebar on mobile */
    .sidebar-fixed-width,
    .lg\:col-span-1 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 1rem !important;
    }

    /* Mobile styling for square banners in sidebar */
    .sidebar-fixed-width > div.aspect-square,
    .lg\:col-span-1 > div.aspect-square,
    .sidebar-fixed-width .uw-banner-square,
    .lg\:col-span-1 .uw-banner-square {
        width: 280px !important;
        height: 280px !important;
        max-width: 280px !important;
        margin: 0 auto 1.5rem auto !important;
        display: block !important;
    }

    /* Mobile styling for images in square banners */
    .sidebar-fixed-width .aspect-square img,
    .lg\:col-span-1 .aspect-square img,
    .sidebar-fixed-width .uw-banner-square .uw-banner-image,
    .lg\:col-span-1 .uw-banner-square .uw-banner-image {
        width: 280px !important;
        height: 280px !important;
        object-fit: cover !important;
        display: block !important;
    }
}