/* ==========================================================================
   Homepage — unified section styling, RTL/LTR, animations & fallbacks
   Matches services.css / blog.css / projects.css design language
   ========================================================================== */

/* --- Shared section rhythm --- */
.home-page-main .services-section,
.home-page-main .home-projects-section,
.home-page-main .home-blog-section {
    position: relative;
    overflow: hidden;
}

.home-page-main .home-projects-section.projects-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 55%, #f0fdf4 100%);
}

.home-page-main .home-projects-section.projects-section::before,
.home-page-main .home-projects-section.projects-section::after {
    opacity: 0.12;
}

.home-page-main .home-blog-section.blog-section {
    padding: 120px 0;
}

.home-page-main .home-blog-section .container,
.home-page-main .home-projects-section .container {
    position: relative;
    z-index: 2;
}

/* --- Unified headers (same as services/products) --- */
.home-page-main .services-header {
    margin-bottom: 70px;
    opacity: 1;
    transform: none;
    text-align: start;
}

.home-page-main .services-header.animate-fade-in {
    animation: homeHeaderIn 0.75s ease-out both;
}

.home-page-main .services-header .section-label-wrapper {
    justify-content: flex-start;
}

.home-page-main .services-header .section-title {
    font-size: clamp(2rem, 4vw, 2.875rem);
}

.home-page-main .services-header .section-description {
    max-width: 720px;
}

[dir="ltr"] .home-page-main .services-header .section-description {
    max-width: 760px;
}

/* --- Primary CTA arrows (RTL/LTR) --- */
[dir="rtl"] .home-page-main .services-header-right .btn-primary i.fa-arrow-left,
[dir="rtl"] .hero-section .hero-buttons .btn-primary i.fa-arrow-left,
[dir="rtl"] .home-page-main .about-button .btn-primary i.fa-arrow-left {
    transform: none;
    margin-inline-start: 0.5rem;
}

[dir="ltr"] .home-page-main .services-header-right .btn-primary i.fa-arrow-right,
[dir="ltr"] .hero-section .hero-buttons .btn-primary i.fa-arrow-right,
[dir="ltr"] .home-page-main .about-button .btn-primary i.fa-arrow-right {
    transform: none;
    margin-inline-start: 0.5rem;
}

[dir="ltr"] .home-page-main .services-section .service-nav-icon i.fa-arrow-up-right {
    transform: scale(-1, 1);
}

[dir="rtl"] .home-page-main .services-section .service-nav-icon i.fa-arrow-up-right {
    transform: none;
}

/* --- About section --- */
.home-page-main .about-section.fade-in {
    opacity: 1;
}

.home-page-main .about-section .about-services .service-item {
    opacity: 0;
    transform: translateX(-30px);
    animation: fadeInSlide 0.6s ease-out both;
}

[dir="ltr"] .home-page-main .about-section .about-services .service-item {
    transform: translateX(30px);
}

.home-page-main .about-section .about-services .service-item:nth-child(1) { animation-delay: 0.6s; }
.home-page-main .about-section .about-services .service-item:nth-child(2) { animation-delay: 0.7s; }
.home-page-main .about-section .about-services .service-item:nth-child(3) { animation-delay: 0.8s; }
.home-page-main .about-section .about-services .service-item:nth-child(4) { animation-delay: 0.9s; }

/* --- Services / products list --- */
.home-page-main .services-section .services-list .service-item.animate-fade-in {
    opacity: 1;
    transform: translateY(0);
}

.home-page-main .products-showcase {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 45%, #f0fdf4 100%);
}

/* --- Projects grid (homepage) --- */
.home-page-main .home-projects-grid {
    margin-top: 0;
}

.home-page-main .home-projects-grid .project-card {
    opacity: 0;
    transform: translateY(28px);
}

.home-page-main .home-projects-grid .project-card.in-view {
    animation: homeCardIn 0.7s ease-out forwards;
}

.home-page-main .home-projects-grid .project-card.in-view:nth-child(1) { animation-delay: 0.05s; }
.home-page-main .home-projects-grid .project-card.in-view:nth-child(2) { animation-delay: 0.14s; }
.home-page-main .home-projects-grid .project-card.in-view:nth-child(3) { animation-delay: 0.23s; }

.home-page-main .home-projects-section .project-card-link:hover {
    transform: translateY(-6px);
}

[dir="ltr"] .home-page-main .home-projects-section .project-card-cta i.fa-angle-right {
    transform: none;
}

[dir="rtl"] .home-page-main .home-projects-section .project-card-cta i.fa-angle-left {
    transform: none;
}

/* --- Blog grid (homepage) --- */
.home-page-main .home-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 0;
    align-items: stretch;
}

.home-page-main .home-blog-grid .blog-post-card {
    opacity: 0;
    transform: translateY(28px);
    height: 100%;
    margin: 0;
}

.home-page-main .home-blog-grid .blog-post-card.animate-fade-in {
    opacity: 1;
    transform: translateY(0);
    animation: homeCardIn 0.75s ease-out both;
}

.home-page-main .home-blog-grid .blog-post-card.animate-fade-in:nth-child(1) { animation-delay: 0.08s; }
.home-page-main .home-blog-grid .blog-post-card.animate-fade-in:nth-child(2) { animation-delay: 0.16s; }
.home-page-main .home-blog-grid .blog-post-card.animate-fade-in:nth-child(3) { animation-delay: 0.24s; }

.home-page-main .home-blog-grid .blog-post-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.home-page-main .home-blog-grid .blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.home-page-main .home-blog-grid .blog-post-card:hover .blog-post-image img {
    transform: scale(1.06);
}

.home-page-main .home-blog-grid .blog-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 26px;
}

.home-page-main .home-blog-grid .blog-post-excerpt {
    flex: 1;
}

.home-page-main .home-blog-grid .blog-post-link {
    margin-top: auto;
    font-weight: 700;
}

[dir="ltr"] .home-page-main .home-blog-section .blog-post-link i.fa-arrow-right {
    transform: none;
}

[dir="rtl"] .home-page-main .home-blog-section .blog-post-link i.fa-arrow-left {
    transform: none;
}

/* --- How We Work (homepage) --- */
.home-page-main .how-we-work-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
}

.home-page-main .how-we-work-header.animate-fade-in,
.home-page-main .how-we-work-features.animate-fade-in,
.home-page-main .how-we-work-cta.animate-fade-in {
    opacity: 1;
    transform: none;
}

.home-page-main .how-we-work-section.is-visible .how-we-work-header,
.home-page-main .how-we-work-section.is-visible .how-we-work-features,
.home-page-main .how-we-work-section.is-visible .how-we-work-cta {
    opacity: 1;
    transform: none;
}

[dir="ltr"] .home-page-main .how-we-work-cta .btn-primary i.fa-arrow-right {
    transform: none;
}

[dir="rtl"] .home-page-main .how-we-work-cta .btn-primary i.fa-arrow-left {
    transform: none;
}

/* --- Work process (legacy block) --- */
.home-page-main .work-process-header.animate-fade-in,
.home-page-main .process-step.animate-fade-in {
    opacity: 1;
    transform: none;
}

.home-page-main .work-process-header,
.home-page-main .process-step {
    opacity: 1;
    transform: none;
}

/* --- Contact form --- */
[dir="ltr"] .home-page-main .contact-section .btn-submit .fa-angle-right {
    transform: rotate(180deg);
}

[dir="ltr"] .home-page-main .contact-section .btn-submit .fa-arrow-right {
    transform: none;
}

/* --- Hero visual --- */
.hero-visual {
    max-width: 520px;
}

[dir="ltr"] .hero-section .hero-visual,
[dir="rtl"] .hero-section .hero-visual {
    margin-inline: auto;
}

.hero-float-card {
    box-shadow: 0 12px 32px rgba(11, 106, 50, 0.14);
    border: 1px solid rgba(11, 106, 50, 0.1);
}

/* --- Keyframes --- */
@keyframes homeHeaderIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes homeCardIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .home-page-main .home-projects-section.projects-section,
    .home-page-main .home-blog-section.blog-section {
        padding: 90px 0;
    }

    .home-page-main .services-header {
        margin-bottom: 50px;
    }

    .home-page-main .home-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page-main .services-header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
    }

    .home-page-main .services-header-right {
        padding-top: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .home-page-main .how-we-work-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .home-page-main .home-projects-section.projects-section,
    .home-page-main .home-blog-section.blog-section {
        padding: 70px 0;
    }

    .home-page-main .home-blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hero-float-card {
        padding: 10px 12px;
        max-width: calc(100% - 12px);
    }

    .hero-float-text {
        font-size: 12px;
        white-space: normal;
    }

    .hero-float-card-2 {
        inset-inline-end: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page-main .about-section .about-services .service-item,
    .home-page-main .how-we-work-header,
    .home-page-main .how-we-work-features,
    .home-page-main .how-we-work-cta,
    .home-page-main .work-process-header,
    .home-page-main .services-section .services-list .service-item,
    .home-page-main .process-step,
    .home-page-main .home-projects-grid .project-card,
    .home-page-main .home-blog-grid .blog-post-card,
    .home-page-main .services-header {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hero-float-card {
        animation: none;
    }
}