/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Grid Layout */
.grid-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 !important;
    padding: 3rem 10px;
}

.grid-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* First row: 3 columns */
.grid-row:first-child .grid-item {
    grid-column: span 2;
    height: 100%;
}

/* Second row: one wide (span-two) and stacked column */
.grid-row:nth-child(2) .grid-item.span-two {
    grid-column: span 4;
    height: 100%;
}
.grid-row:nth-child(2) .stacked-column {
    grid-column: span 2;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    height: 100%;
}
.grid-row:nth-child(2) .stacked-column .grid-item {
    grid-column: span 2;
    height: 100%;
}

/* Ensure images fill their containers */
.grid-item .project-image img,
.grid-item.span-two .project-image img,
.stacked-column .grid-item .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset;
}

/* Grid Loading Animation */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.98) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.project-header p.metadata {
    margin: 0 !important;
}
.grid-item {
    position: relative;
    grid-column: span 2;
    transition: transform 0.3s ease;
    animation: fadeInScale 0.6s ease-out forwards;
    opacity: 0;
}

/* Stagger animation for grid items */
.grid-row .grid-item:nth-child(1) { animation-delay: 0.1s; }
.grid-row .grid-item:nth-child(2) { animation-delay: 0.2s; }
.grid-row .grid-item:nth-child(3) { animation-delay: 0.3s; }
.grid-row .grid-item:nth-child(4) { animation-delay: 0.4s; }

.project-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.project-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.grid-item.span-two {
    grid-column: span 4 !important;
}

.stacked-column {
    grid-column: span 2;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.stacked-column .grid-item {
    grid-column: span 2;
}

.project-info {
    padding: 5px 0 0;
}

.project-category {
    font-size: 14px;
    color: #777777;
    line-height: 24px;
    letter-spacing: 1px;
}

h3.project-title {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 1px;
}

.project-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project-title a:hover {
    color: #000;
}

/* Responsive Adjustments */
@media (max-width: 921px) {
    .grid-row {
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
    }
    .grid-item,
    .grid-item.span-two,
    .stacked-column,
    .stacked-column .grid-item {
        grid-column: span 2;
        height: 100%;
    }
    .stacked-column {
        grid-template-rows: 1fr 1fr;
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .grid-row {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(140px, auto);
        gap: 10px;
    }
    .grid-item,
    .grid-item.span-two,
    .stacked-column,
    .stacked-column .grid-item {
        grid-column: span 1 !important;
        height: auto;
        min-height: 140px;
    }
    .stacked-column {
        display: contents !important;
        grid-template-rows: unset !important;
        gap: unset !important;
    }
}

/* Loading Spinner for Infinite Scroll */
.load-more-spinner {
    width: 40px;
    height: 40px;
    margin: 40px auto;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    clear: both;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Grid Container Loading State */
.grid-container.loading {
    position: relative;
    min-height: 200px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.grid-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Project Category Filter Styles */
.project-category-filter {
    margin: 0;
    text-align: center;
    position: sticky;
    top: 80px;
    z-index: 100;
    padding: 1rem 0;
    width: 100%;
    left: 0;
    right: 0;
    background: #fff;
}

.project-category-filter ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    align-items: center;
}

.project-category-filter a {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
}

.project-category-filter li {
    margin: 0;
    padding: 0;
    width: calc(100% / 8);
}

.project-category-filter li.active a,
.project-category-filter a:hover {
    background: #000000;
    color: #ffffff;
}
@media (max-width: 980px) {    
    .project-category-filter li {
        width: auto;
    }
    .project-category-filter a {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}
@media (max-width: 768px) {    
    .project-category-filter ul {
        gap: 0.5rem;
    }
    .project-category-filter {
        top: 76px;
    }
}

/* Projects Grid Styles */
.page-template-template-projects .site-content > .ast-container {
    max-width: 1180px;
    padding: 0 20px;
    margin: 0 auto;
}

/* Projects Pagination Styles */
.projects-pagination {
    margin: 0;
    text-align: center;
    padding: 0 0 3rem;
}

.projects-pagination > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.projects-pagination > ul > li {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.projects-pagination > ul > li > a,
.projects-pagination > ul > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: all 0.3s ease;
}

.projects-pagination > ul > li > a:hover {
    background: #333;
    color: #fff;
}

.projects-pagination > ul > li > span.current {
    background: #333;
    color: #fff;
    cursor: default;
}

.projects-pagination > ul > li > span.dots {
    background: transparent;
    color: #333;
    cursor: default;
    min-width: 20px;
    padding: 0 5px;
}

.projects-pagination > ul > li > a.prev,
.projects-pagination > ul > li > a.next {
    padding: 0 20px;
}

.projects-pagination > ul > li > a.prev:hover,
.projects-pagination > ul > li > a.next:hover {
    background: #333;
    color: #fff;
}

@media (max-width: 768px) {
    .projects-pagination {
        margin: 2rem 0;
    }

    .projects-pagination > ul {
        gap: 5px;
    }

    .projects-pagination > ul > li > a,
    .projects-pagination > ul > li > span {
        min-width: 35px;
        height: 35px;
        padding: 0 10px;
        font-size: 13px;
    }
    
    .projects-pagination > ul > li > a.prev,
    .projects-pagination > ul > li > a.next {
        padding: 0 15px;
    }
}

/* Hover effect enhancement */
.grid-item .project-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.grid-item .project-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-item:hover .project-image img {
    transform: scale(1.03);
}

/* Loading placeholder animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.grid-item.loading .project-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* Project Slider Styles */
.project-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.project-slider .swiper-slide {
    width: 100% !important;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.project-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-slider .swiper-wrapper {
    height: 100%;
}

.project-slider .swiper-button-next,
.project-slider .swiper-button-prev {
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 999;
}

.project-slider .swiper-button-next:after,
.project-slider .swiper-button-prev:after {
    font-size: 20px;
}

.project-slider:hover .swiper-button-next,
.project-slider:hover .swiper-button-prev {
    opacity: 1;
}

/* Maintain aspect ratio for different grid items */
.grid-item .project-slider {
    aspect-ratio: 4/3;
}

.grid-item.span-two .project-slider {
    height: 617px;
}

.stacked-column .grid-item .project-slider {
    aspect-ratio: 4/3;
}

@media (max-width: 921px) {
    .grid-item.span-two .project-slider {
        height: auto;
        aspect-ratio: 16/9;
    }
}

@media (max-width: 544px) {
    .project-slider .swiper-button-next,
    .project-slider .swiper-button-prev {
        display: none;
    }
}

/* Remove contenteditable and cursor pointer */
[contenteditable] {
    -webkit-user-modify: read-only !important;
    -moz-user-modify: read-only !important;
    user-modify: read-only !important;
}

/* Add pointer cursor to clickable elements */
a, button, input[type="button"], input[type="submit"], 
.swiper-button-next, .swiper-button-prev,
.project-slider .swiper-button-next, .project-slider .swiper-button-prev,
.project-category-filter a,
.projects-pagination a,
.project-category {
    cursor: pointer !important;
}

/* Remove outline on focus */
*:focus {
    outline: none !important;
}

/* Remove text selection */
* {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Allow text selection in specific elements */
input, textarea, .project-title {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Home Page Slider Styles */
.home-slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.home-slider {
    width: 100%;
    height: 100%;
}

.home-slider .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-image {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 100%;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 0;
}

.slide-info {
    width: 100%;
    color: #fff;
    padding: 0;
}

.slide-location {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.4;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    padding: 10px;
    text-align: center;
    background: #000;
}

.slide-location span {
    display: inline-block;
    margin: 0 0.5rem;
    opacity: 0.8;
}

.slide-categories {
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 1.4;
}

.slide-categories span {
    display: inline-block;
    margin: 0 0.5rem;
}

/* Slider Navigation */
.home-slider .swiper-button-next,
.home-slider .swiper-button-prev {
    color: #fff;
    width: 40px;
    height: 40px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.home-slider .swiper-button-next:hover,
.home-slider .swiper-button-prev:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7);
}

.home-slider .swiper-button-next:after,
.home-slider .swiper-button-prev:after {
    font-size: 20px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .slide-location {
        font-size: 18px;
    }
    
    .slide-overlay {
        padding: 0;
    }
    
    .project-category-filter ul {
        justify-content: center;
    }
    .slide-info {
        padding: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .slide-location {
        font-size: 16px;
    }
    
    .slide-overlay {
        padding: 0;
    }
    .slide-info {
        padding: 0;
        margin-bottom: 0;
    }
    .project-category-filter {
        top: 65px;
    }
}

/* Remove the fixed positioning and margin-top from site-content */
.site-content {
    position: relative;
    z-index: 2;
}

/* Ensure content appears below the fixed slider */
.site-content {
    position: relative;
    z-index: 2;
}

/* Ensure proper navigation button positioning */
.swiper-button-next,
.swiper-button-prev {
    z-index: 10;
}

/* Project Single Template Styles */
.project-single-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.project-header {
    margin-bottom: 3rem;
    text-align: left;
}

.project-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.project-content {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* Modern Project Gallery Styles */
.project-gallery.masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 100%;
    margin: 0;
    padding: 0;
    grid-auto-flow: dense;
}
.project-gallery .gallery-item {
    margin: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 100%;
    padding: 0;
    break-inside: avoid;
}
.gallery-item a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}   
.project-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s ease;
    object-fit: cover;
}
.project-gallery .gallery-item:hover img {
    transform: scale(1.04);
}

/* Move Lightbox2 close button to the top right */
#lightbox .lb-close {
    top: -35px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    position: absolute !important;
    z-index: 1102;
}

.grid-item:hover {
    transform: translateY(-5px);
}   

.ast-container {
    position: relative;
    overflow: visible;
}   

@media (max-width: 1180px) {
    .grid-item.span-two .project-slider { 
        height: 609px;
    }   
}
@media (max-width: 1024px) {
    .grid-item.span-two .project-slider { 
        height: 539px;
    }
}
@media (max-width: 930px) {
    .grid-item.span-two .project-slider { 
        height: 482px;
    }
}
@media (max-width: 820px) {
    .grid-item.span-two .project-slider { 
        height: 430px;
    }
}
@media (max-width: 768px) {
    .grid-item.span-two .project-slider { 
        height: 411px;
    }
}
@media (max-width: 767px) {
    .grid-item.span-two .project-slider { 
        height: auto;
    }
}

/* Load More Button Styles */
.load-more-container {
    text-align: center;
    margin: 40px 0;
}

.load-more-button {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.load-more-button:hover {
    background-color: #333;
}

.load-more-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}