/**
 * BRICS News V2 - Custom Styles
 * Hover effects and additional styling
 */

/* ============================================
   HOVER EFFECTS
   ============================================ */

/* Box shadow outset effect (for category badges) */
.hvr-box-shadow-outset {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition-duration: 0.3s;
    transition-property: box-shadow;
}

.hvr-box-shadow-outset:hover,
.hvr-box-shadow-outset:focus,
.hvr-box-shadow-outset:active {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

/* Sweep to right effect (for buttons) */
.hvr-sweep-to-right {
    position: relative;
    transition-property: color;
    transition-duration: 0.3s;
    overflow: hidden;
}

.hvr-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.hvr-sweep-to-right:hover:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:active:before {
    transform: scaleX(1);
}

/* ============================================
   LINE CLAMPING (Fallback for older browsers)
   ============================================ */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   RESPONSIVE LINE CLAMPS
   ============================================ */

@media (min-width: 768px) {
    .md\:line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .md\:line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (min-width: 1024px) {
    .lg\:line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .lg\:line-clamp-4 {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ============================================
   MOBILE MENU ANIMATIONS
   ============================================ */

#mobileMenu {
    transition: opacity 0.3s ease-in-out;
}

/* ============================================
   CATEGORY BADGE STYLES
   ============================================ */

.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Aspect ratio fallback for older browsers */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-\[3\/2\] {
    aspect-ratio: 3 / 2;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 2px solid #B1181A;
    outline-offset: 2px;
}

/* ============================================
   HEADER/FOOTER SPECIFIC HOVERS
   ============================================ */

/* Red button hover - sweep to black effect */
header a[href="/"].hvr-sweep-to-right {
    position: relative;
    z-index: 1;
}

header a[href="/"].hvr-sweep-to-right:hover {
    color: #ffffff;
}