/* Sections générales */
.section {
    padding: 50px 0;
}

.categories-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Ensure items have the same width */
    gap: 15px; /* Consistent gap between items */
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px; /* Limit overall width */
}

.category-link {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #05012e;
    border-radius: 32px;

    transition: all 0.3s ease;
}

.category-link:hover {
    background-color: #1260CC;
    color: #fff;
    text-decoration: none;
}


/* Articles */
.card {
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.card-text {
    color: #666;
}

/* Articles populaires */
.bg-light {
    background-color: #f8f9fa !important;
}

/* Responsivité : Réduire la largeur de la carte en fonction de l'écran */
@media (max-width: 768px) {
    .categories-list {
        grid-template-columns: repeat(2, 1fr); /* Sur mobile, 2 colonnes */
    }
}

@media (max-width: 480px) {
    .categories-list {
        grid-template-columns: 1fr; /* Sur petits écrans, 1 seule colonne */
    }
}
.btn:focus {
    
    background-color: #1260CC;

}

/* static/css/main.css */
.sticky-top {
    z-index: 1;
}

.ad-card {
    transition: transform 0.3s ease-in-out;
}

.ad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.ad-image {
    border-radius: 8px 8px 0 0;
}

.ad-title {
    font-size: 0.9rem;
    color: #6c757d;
    letter-spacing: 0.5px;
}

.widget {
    background: #ebebeb;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.1),
        -4px -4px 12px rgba(255, 255, 255, 0.8),
        inset 2px 2px 4px rgba(255, 255, 255, 0.2),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    overflow: hidden;
}

.widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.3);
    pointer-events: none;
}

.widget:hover {
    transform: translateY(-2px) perspective(1000px) rotateX(1deg) rotateY(1deg);
    box-shadow: 
        12px 12px 24px rgba(0, 0, 0, 0.15),
        -6px -6px 16px rgba(255, 255, 255, 0.9),
        inset 3px 3px 6px rgba(255, 255, 255, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.1);
}

.widget:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.1),
        -2px -2px 8px rgba(255, 255, 255, 0.8),
        inset 1px 1px 2px rgba(255, 255, 255, 0.2),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
}

/* Optional: Add for floating text effect */
.widget h2, .widget p {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* Navbar styles */
.navbar-logo-img {
    height: 180px;       /* The height of the logo on large screens */
    width: auto;         /* This maintains the image's aspect ratio */
    margin-top: -75px;   /* Negative margin to pull the oversized logo up and center it vertically */

    /* A smooth transition effect when the screen is resized */
    transition: height 0.3s ease, margin-top 0.3s ease;
}

/*
 * Responsive styles for mobile screens.
*/
@media (max-width: 767px) {
    .navbar-logo-img {
        height: 85px;      /* A smaller, more appropriate height for mobile */
        margin-top: -25px; /* A smaller negative margin to keep it centered in the mobile navbar */
    }
}

.django-ckeditor-widget {
    margin-top: 2rem;
}