/* ============================================================
   AfriSkill AI — Frontend Responsive System
   Premium cross-device layout (CSS only — no logic changes)
   ============================================================ */

/* --- Global foundations --- */
html {
    overflow-x: clip;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: clip;
    min-width: 320px;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

img {
    object-fit: cover;
}

/* Responsive embeds (YouTube, Vimeo, MP4) */
.video-embed,
.video-modal-player,
.embed-responsive {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: inherit;
}

.video-embed iframe,
.video-embed video,
.video-modal-player iframe,
.video-modal-player video,
.embed-responsive iframe,
.embed-responsive video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

/* Prevent layout shift on lazy images */
img[loading="lazy"] {
    background: var(--card);
}

/* Focus & touch accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-link,
.mobile-nav-link,
.btn,
.nav-action-btn,
.hamburger,
.slider-btn {
    min-height: var(--touch-min, 44px);
}

/* --- Typography scaling --- */
p, li, label, input, textarea, select {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.hero-title {
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: 1.1;
    word-wrap: break-word;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* --- Navigation refinements --- */
@media (max-width: 1024px) {
    .navbar.scrolled { height: 64px; }
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        border: none;
        padding: 0 0 0 12px;
        display: none;
    }
}

@media (max-width: 900px) {
    .navbar-inner { gap: 8px; }
    .navbar-logo .logo-img { max-height: 36px; width: auto; }
    .nav-action-btn,
    .hamburger {
        width: var(--touch-min, 44px);
        height: var(--touch-min, 44px);
        flex-shrink: 0;
    }
    .mobile-menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .mobile-nav-link {
        min-height: var(--touch-min, 44px);
        display: flex;
        align-items: center;
    }
    body.menu-open { overflow: hidden; }
}

/* --- Hero --- */
@media (max-width: 768px) {
    .hero { min-height: auto; min-height: 100svh; }
    .hero-shapes .shape { opacity: 0.5; transform: scale(0.7); }
    .shape-1 { width: 280px; height: 280px; }
    .shape-2 { width: 220px; height: 220px; }
    .shape-3 { width: 180px; height: 180px; }
    .hero-badge { font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .hero-content { padding: 40px 0 80px; }
    .cursor-glow { display: none; }
}

/* --- Grids & cards --- */
.services-grid,
.projects-grid,
.videos-grid,
.trust-grid,
.tech-grid,
.why-grid {
    gap: clamp(1rem, 3vw, 1.75rem);
}

.service-card,
.project-card,
.video-card,
.glass-card {
    min-width: 0;
}

.project-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) and (max-width: 1280px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1281px) {
    .services-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .projects-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* --- Process timeline --- */
@media (max-width: 1024px) {
    .process-timeline { padding-left: 8px; }
}

/* --- Testimonials --- */
@media (max-width: 600px) {
    .testimonial-review { font-size: 1.0625rem; }
    .slider-controls { gap: 16px; }
    .slider-btn { width: 44px; height: 44px; }
}

/* --- FAQ --- */
@media (max-width: 600px) {
    .faq-layout { gap: 32px; }
    .faq-item.active .faq-answer { max-height: 600px; }
}

/* --- Contact & forms --- */
.form-group input,
.form-group textarea,
.form-group select {
    min-height: var(--touch-min, 44px);
    font-size: 16px; /* prevents iOS zoom */
}

@media (max-width: 600px) {
    .contact-layout { gap: 32px; }
    .contact-info-card { padding: 16px; }
    .contact-map iframe { width: 100%; min-height: 200px; }
    .file-label {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min, 44px);
    }
}

/* --- Newsletter --- */
@media (max-width: 600px) {
    .newsletter-input-wrap .btn { width: 100%; }
}

/* --- Footer --- */
@media (max-width: 600px) {
    .footer { padding: 48px 0 24px; }
    .footer-bottom-links {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    .footer-social { justify-content: center; }
}

/* --- Video modal (main.css) --- */
@media (max-width: 768px) {
    .video-modal {
        padding: 0;
        align-items: stretch;
    }
    .video-modal-content {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }
    .video-modal-player {
        flex: 1;
        aspect-ratio: unset;
        min-height: 0;
    }
}

/* --- Video gallery (videos.css) --- */
@media (max-width: 600px) {
    .videos-gallery { grid-template-columns: 1fr; }
    .video-slide-content { padding: 32px 20px; }
    .video-slide-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
    .video-lightbox-toolbar { flex-wrap: wrap; gap: 8px; }
    .video-lightbox-title {
        flex: 1 1 100%;
        font-size: 0.8125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --- Proposal public page --- */
.proposal-doc {
    max-width: min(800px, 100%);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .proposal-doc .prop-header,
    .proposal-doc .prop-body,
    .proposal-doc .prop-footer {
        padding-left: clamp(1rem, 4vw, 1.5rem);
        padding-right: clamp(1rem, 4vw, 1.5rem);
    }
    .proposal-doc .prop-header {
        flex-direction: column;
        gap: 16px;
        padding-top: 28px;
        padding-bottom: 28px;
    }
    .proposal-doc .prop-meta { text-align: left; }
    .proposal-doc .client-grid { grid-template-columns: 1fr; }
    .proposal-doc .signature-area { grid-template-columns: 1fr; gap: 24px; }
    .proposal-doc table.pricing {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .proposal-doc .pricing-totals .row { gap: 20px; }
}

/* --- Utility: prevent overflow --- */
.section-header,
.hero-content,
.newsletter-content,
.testimonial-card {
    overflow-wrap: break-word;
    word-break: break-word;
}

pre, code {
    overflow-x: auto;
    max-width: 100%;
}

/* --- Ultra-wide --- */
@media (min-width: 1920px) {
    .section-header { margin-bottom: 80px; }
    .hero-stats { max-width: 900px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 2560px) {
    .hero-shapes .shape { transform: scale(1.2); }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}