/**
 * mobile-hero.css — NewsGrid
 * Mobile responsiveness fixes + hero carousel polish
 * Author: frontend-dev-6 (Sprint 8, ISS-T16/T17)
 * Date: 2026-03-02
 *
 * This file is additive — it only adds @media queries
 * and hero animation polish. Does NOT override base styles.
 */

/* ===========================
   GLOBAL MOBILE FIXES
   =========================== */

/* Prevent horizontal scroll on all mobile sizes */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure all images scale within containers */
    img, video, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }

    /* Minimum body font to prevent iOS auto-zoom */
    body {
        font-size: 16px;
    }

    input, select, textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}

/* ===========================
   375px — iPhone SE (Smallest Target)
   =========================== */
@media (max-width: 375px) {
    /* Header */
    .site-header .site-title {
        font-size: 18px;
        letter-spacing: 0;
    }

    .site-header .site-description {
        font-size: 10px;
    }

    /* Navigation: ensure hamburger toggle is usable */
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    /* Hero Carousel */
    .hero-carousel-section {
        margin-bottom: var(--spacing-sm, 1rem);
    }

    .hero-carousel {
        height: 280px;
    }

    .carousel-title {
        font-size: 18px;
        line-height: 1.2;
    }

    .carousel-excerpt {
        display: none; /* Hide excerpt on very small screens */
    }

    .carousel-category {
        font-size: 9px;
        padding: 3px 8px;
    }

    .carousel-meta {
        font-size: 11px;
    }

    .carousel-overlay {
        padding: 0.75rem;
    }

    /* Carousel controls: touch-friendly sizing */
    .carousel-prev,
    .carousel-next {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    .carousel-dots {
        bottom: 8px;
        gap: 6px;
    }

    .carousel-dot {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Content */
    .site-content {
        padding: 0.75rem;
    }

    .entry-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .entry-excerpt {
        font-size: 14px;
    }

    /* Footer */
    .site-footer {
        padding: 1rem 0.75rem;
    }

    .footer-nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 4px;
    }
}

/* ===========================
   HERO CAROUSEL TOUCH IMPROVEMENTS
   =========================== */

/* Ensure carousel controls meet WCAG touch target requirements */
@media (max-width: 768px) {
    .carousel-prev,
    .carousel-next {
        min-width: 44px;
        min-height: 44px;
    }

    .carousel-dots button,
    .carousel-dot {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Smooth transitions on touch devices */
    .carousel-slide {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ===========================
   HERO CAROUSEL ANIMATION POLISH
   =========================== */

/* Smoother fade transitions for carousel slides */
.carousel-slide {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

/* Subtle zoom effect on active slide */
.carousel-slide.active .carousel-image img {
    animation: hero-subtle-zoom 8s ease-out forwards;
}

@keyframes hero-subtle-zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

/* Gradient overlay enhancement for text readability */
.carousel-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        transparent 100%
    );
}

/* Carousel dot active state animation */
.carousel-dot.active {
    transform: scale(1.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* ===========================
   ACCESSIBILITY
   =========================== */

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .carousel-slide {
        transition: opacity 0.1s ease;
    }

    .carousel-slide.active .carousel-image img {
        animation: none;
    }

    .carousel-dot.active {
        transition: none;
    }
}