/* ============================================
   INFOHAS PRO - RESPONSIVE STYLES
   Mobile-first approach with comprehensive
   breakpoint coverage for all components
   ============================================ */

/* ============================================
   RESPONSIVE GRID UTILITY CLASSES
   These override inline grid-template-columns
   on mobile via !important (necessary because
   widgets use inline styles for desktop)
   ============================================ */

/* --- Mobile First Base (< 640px) --- */
/* Mobile header height override (top bar hidden, nav row shorter) */
:root {
    --ih-header-height-mobile: 64px;
}

/* All grids default to single column on mobile */
.ih-grid-2,
.ih-grid-3,
.ih-grid-4,
.ih-grid-6 {
    grid-template-columns: 1fr !important;
}

.ih-grid-2\@sm,
.ih-grid-3\@sm {
    grid-template-columns: 1fr !important;
}

/* Two-column layout: stack on mobile */
.ih-2col {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

/* Contact form row: stack on mobile */
.ih-form-row {
    grid-template-columns: 1fr !important;
}

/* Stats grid: 2 cols on mobile */
.stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* About preview grid */
.about-preview-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
}

/* Contact layout */
.contact-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
}

/* Sitemap columns */
.sitemap-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
}

/* Steps/process */
.steps-grid {
    grid-template-columns: 1fr !important;
}

/* Services page step items */
.step-item {
    padding: 1.5rem 1rem !important;
}

.step-num {
    font-size: 2.25rem !important;
    margin-bottom: 0.75rem !important;
}

.step-title {
    font-size: 1.1rem !important;
}

.step-desc {
    font-size: 0.85rem !important;
}

/* Service card icon mobile */
.card-service .service-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
}

.card-service .service-title {
    font-size: 1.1rem !important;
}

.card-service .service-desc {
    font-size: 0.85rem !important;
}

/* Section header on mobile */
.section-header .section-title {
    font-size: 1.5rem !important;
}

.section-header .section-desc {
    font-size: 0.95rem !important;
}

/* Section spacing mobile */
.section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.section-lg {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Hero mobile */
.hero-section {
    min-height: 85vh;
    padding-top: calc(var(--ih-header-height-mobile, 64px) + 3rem);
    padding-bottom: 3rem;
}

.hero-title {
    font-size: 2rem !important;
    line-height: 1.15 !important;
}

.hero-subtitle {
    font-size: 1.25rem !important;
}

.hero-desc {
    font-size: 0.95rem !important;
}

.hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.hero-buttons .btn {
    width: 100%;
    max-width: 280px;
}

.hero-institution {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    padding: 0.4rem 1rem !important;
}

.hero-scroll-indicator {
    bottom: 1.5rem;
    font-size: 0.75rem;
}

.hero-scroll-indicator .arrow {
    width: 18px;
    height: 18px;
}

/* Hide large keyword decorations on mobile */
.keyword.keyword-xl,
.keyword.keyword-lg {
    display: none;
}

/* CTA section mobile */
.cta-section {
    padding: 3rem 1.25rem !important;
}

.cta-section h2,
.cta-section .cta-title {
    font-size: 1.5rem !important;
}

.cta-section p {
    font-size: 0.95rem !important;
}

/* Page hero mobile */
.page-hero {
    padding-top: calc(var(--ih-header-height-mobile, 64px) + 2rem) !important;
    padding-bottom: 2rem !important;
}

.page-hero-title {
    font-size: 1.75rem !important;
}

.page-hero-subtitle {
    font-size: 0.95rem !important;
}

/* Card adjustments mobile */
.card-service,
.card-formation,
.card-team {
    padding: 1.5rem !important;
}

/* Team member photo/placeholder */
.card-team .team-photo,
.card-team .team-placeholder {
    max-width: 180px;
    margin: 0 auto;
}

/* Blog card image */
.blog-img,
.formation-img {
    min-height: 140px !important;
}

/* FAQ mobile */
details summary {
    padding: 1rem !important;
    font-size: 0.95rem !important;
}

details .faq-answer,
details > div {
    padding: 0 1rem 1rem !important;
}

/* Testimonial card mobile */
.testimonial-card {
    padding: 1.5rem !important;
}

/* Contact info items mobile */
.contact-info-item {
    gap: 0.75rem !important;
}

.contact-icon-box {
    width: 40px !important;
    height: 40px !important;
}

/* Footer mobile */
.footer-widgets {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
}

.footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center;
}

.footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

/* Back to top button mobile */
.back-to-top {
    width: 40px !important;
    height: 40px !important;
    bottom: 1rem !important;
    right: 1rem !important;
}

/* Pagination mobile */
.pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

/* Breadcrumb mobile */
.breadcrumb {
    font-size: 0.8rem !important;
    flex-wrap: wrap;
    justify-content: center;
}

/* Google Maps mobile */
.google-map-container iframe {
    height: 250px !important;
}

/* Sitemap mobile list */
.sitemap-col h4 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
}

.sitemap-col ul li {
    padding: 0.35rem 0 !important;
}

/* Counter font size mobile */
.counter,
.counter-animated {
    font-size: 1.75rem !important;
}

/* About preview text */
.about-preview-grid h2 {
    font-size: 1.75rem !important;
}

/* Content block cards */
.ih-value-card {
    padding: 1.5rem !important;
}

.ih-step-num {
    font-size: 2rem !important;
}

/* Partners logo */
.partners-grid img {
    max-height: 35px !important;
    max-width: 90px !important;
}


/* ============================================
   sm: 640px (Small tablets / Large phones)
   ============================================ */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .sm\:flex-row { flex-direction: row !important; }
    .sm\:text-left { text-align: left !important; }
    .sm\:text-center { text-align: center !important; }

    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-buttons {
        flex-direction: row;
        gap: 1rem;
    }

    .hero-buttons .btn {
        width: auto;
    }

    /* Grid classes at sm */
    .ih-grid-2,
    .ih-grid-2\@sm {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ih-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ih-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .ih-2col {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem !important;
    }

    .about-preview-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sitemap-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Step items at sm */
    .step-num {
        font-size: 2.5rem !important;
    }

    .step-item {
        padding: 1.75rem !important;
    }

    /* Service card at sm */
    .card-service .service-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.75rem !important;
    }

    /* Section header at sm */
    .section-header .section-title {
        font-size: 1.75rem !important;
    }

    .partners-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .page-hero-title {
        font-size: 2.25rem !important;
    }

    .cta-section h2,
    .cta-section .cta-title {
        font-size: 1.75rem !important;
    }
}


/* ============================================
   md: 768px (Tablets)
   ============================================ */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .md\:flex-row { flex-direction: row !important; }

    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .section-lg {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .hero-title {
        font-size: 3rem !important;
    }

    .hero-subtitle {
        font-size: 1.5rem !important;
    }

    .hero-desc {
        font-size: 1.05rem !important;
    }

    .hero-institution {
        font-size: 0.75rem !important;
    }

    .page-hero {
        padding-top: calc(var(--ih-header-height, 108px) + 3rem) !important;
        padding-bottom: 3rem !important;
    }

    .page-hero-title {
        font-size: 2.5rem !important;
    }

    /* Grid classes at md */
    .ih-grid-3,
    .ih-grid-3\@sm {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ih-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ih-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .ih-form-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .contact-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .formations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Step items at md */
    .step-num {
        font-size: 2.75rem !important;
    }

    .step-item {
        padding: 2rem !important;
    }

    /* Service card at md */
    .card-service .service-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: var(--ih-text-3xl) !important;
    }

    .card-service .service-title {
        font-size: var(--ih-text-xl) !important;
    }

    .card-service .service-desc {
        font-size: var(--ih-text-sm) !important;
    }

    /* Section header at md */
    .section-header .section-title {
        font-size: var(--ih-text-3xl) !important;
    }

    .section-header .section-desc {
        font-size: var(--ih-text-lg) !important;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .footer-widgets {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .blog-layout {
        grid-template-columns: 1fr 280px;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .counter,
    .counter-animated {
        font-size: 2.25rem !important;
    }

    .about-preview-grid h2 {
        font-size: 2rem !important;
    }

    .cta-section h2,
    .cta-section .cta-title {
        font-size: 2rem !important;
    }

    .cta-section {
        padding: 4rem 2rem !important;
    }

    /* Show large keywords on tablet+ */
    .keyword.keyword-lg {
        display: block;
    }
}


/* ============================================
   lg: 1024px (Desktop)
   ============================================ */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr) !important; }

    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hero-title {
        font-size: 3.5rem !important;
    }

    .hero-section {
        min-height: 100vh;
        padding-top: calc(var(--ih-header-height, 108px) + 4rem);
    }

    /* Grid classes at lg */
    .ih-grid-3,
    .ih-grid-3\@sm {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .ih-grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .ih-grid-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .formations-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Step items at lg - full desktop sizing */
    .step-num {
        font-size: 3rem !important;
    }

    /* Service card at lg - full desktop sizing */
    .card-service .service-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: var(--ih-text-3xl) !important;
    }

    .card-service .service-title {
        font-size: var(--ih-text-xl) !important;
    }

    .card-service .service-desc {
        font-size: var(--ih-text-sm) !important;
    }

    /* Section header at lg */
    .section-header .section-title {
        font-size: var(--ih-text-4xl) !important;
    }

    .section-header .section-desc {
        font-size: var(--ih-text-lg) !important;
    }

    .team-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .partners-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    .footer-widgets {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2.5rem !important;
    }

    .blog-layout {
        grid-template-columns: 1fr 320px;
    }

    /* Show extra-large keywords on desktop */
    .keyword.keyword-xl {
        display: block;
    }

    .page-hero-title {
        font-size: var(--ih-text-4xl) !important;
    }
}


/* ============================================
   xl: 1280px (Large Desktop)
   ============================================ */
@media (min-width: 1280px) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

    .hero-title {
        font-size: 4rem !important;
    }

    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   Disable hover transforms on touch devices
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .card-lift:hover {
        transform: none;
        box-shadow: var(--ih-shadow-md);
    }

    .card-img-zoom:hover img {
        transform: none;
    }

    .hover-grow:hover {
        transform: none;
    }

    /* Neutralize sticky hover states on cards */
    .card:hover,
    .card-service:hover,
    .card-formation:hover,
    .card-team:hover,
    .card-blog:hover {
        transform: none;
        box-shadow: none;
    }

    /* Increase touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    details summary {
        min-height: 48px;
    }

    .back-to-top {
        width: 48px !important;
        height: 48px !important;
    }
}


/* ============================================
   LANDSCAPE MOBILE (< 768px landscape)
   Adjust hero height when keyboard is open
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        min-height: 70vh;
        padding-top: calc(var(--ih-header-height-mobile, 64px) + 1.5rem);
    }

    .page-hero {
        padding-top: calc(var(--ih-header-height-mobile, 64px) + 1rem) !important;
        padding-bottom: 1.5rem !important;
    }

    .hero-scroll-indicator {
        bottom: 0.75rem;
        font-size: 0.7rem;
    }

    .hero-scroll-indicator .arrow {
        width: 16px;
        height: 16px;
    }
}


/* ============================================
   HIGH-DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-section::before,
    .hero-section::after {
        /* Sharper gradients on retina */
        background-size: 200% 200%;
    }
}


/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .top-bar,
    .main-header,
    .mobile-menu-toggle,
    .hero-scroll-indicator,
    .back-to-top,
    .hero-keywords-bg,
    .cta-section,
    .sidebar-widget,
    .blog-sidebar,
    .footer-widgets,
    .site-footer,
    .btn,
    .social-links,
    .google-map-container {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .section {
        padding: 20px 0;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        break-after: avoid;
    }

    p {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   ELEMENTOR EDITOR OVERRIDES
   Ensure content is visible in Elementor preview
   ============================================ */
body.elementor-editor-active .section,
body.elementor-editor-active .page-hero,
body.elementor-preview-active .section,
body.elementor-preview-active .page-hero {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body.elementor-editor-active .keyword,
body.elementor-preview-active .keyword {
    opacity: 0.08 !important;
}

body.elementor-editor-active .hero-keywords-bg,
body.elementor-preview-active .hero-keywords-bg {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Prevent header overlap issues in Elementor preview */
body.elementor-editor-active .main-header,
body.elementor-preview-active .main-header {
    position: relative !important;
    background: var(--ih-primary-900, #0A1628) !important;
}

body.elementor-editor-active .header-gold-line,
body.elementor-preview-active .header-gold-line {
    display: block;
}