/* ============================================
   SWIPER / CAROUSEL STYLES
   Styles for project sliders and client logos
   ============================================ */

/* Main swiper container - enables grab cursor for dragging */
.swiper {
    cursor: grab !important;
}

/* Change cursor to grabbing when actively dragging */
.swiper:active {
    cursor: grabbing !important;
}

/* Center content within swiper slides */
.swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure project cards are centered on mobile */
@media (max-width: 1023px) {
    .swiper-slide > div {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Client logo slide - transparent background */
.swiper-slide2 {
    background: transparent;
}

/* Custom navigation buttons positioning (prev/next arrows) */
.custom-navigation {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    z-index: 100;
}

/* Pagination dots positioning */
.swiper-pagination {
    bottom: 20px !important;
}

/* Active pagination bullet color */
.swiper-pagination-bullet-active {
    background-color: #07F29C;
}

/* Pagination bullet size */
.swiper-pagination-bullet {
    width: 15px;
    height: 15px;
}

/* ============================================
   TEXT LAYOUT & READABILITY
   Responsive max-widths and centering for better reading experience
   ============================================ */

/* Center all headlines and paragraphs except in hero section and project detail page */
h1:not(.hero-section h1):not(.hero-section *):not(.project-view *),
p:not(.hero-section p):not(.hero-section *):not(.project-view *) {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Base max-width - prevents text from stretching too wide */
h1 {
    max-width: 90%;
    font-weight: 700;
    color: #0b3228;
}

p {
    max-width: 90%;
}

/* Mobile and Tablet - add padding to prevent text hitting edges */
@media (max-width: 1023px) {
    h1:not(.hero-section h1):not(.hero-section *),
    p:not(.hero-section p):not(.hero-section *) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Desktop - comfortable reading width on standard monitors */
@media (min-width: 1024px) {
    h1 {
        max-width: 900px;
    }
    
    p {
        max-width: 800px;
    }
}

/* Large screens - slightly wider for bigger displays */
@media (min-width: 1536px) {
    h1 {
        max-width: 1100px;
    }
    
    p {
        max-width: 950px;
    }
}

/* Ultra-large screens (4K etc) - maximum comfortable width */
@media (min-width: 2560px) {
    h1 {
        max-width: 1400px;
    }
    
    p {
        max-width: 1200px;
    }
}

/* ============================================
   CLIENT LOGO GRID
   Grid utilities not yet in compiled Tailwind
   ============================================ */

.inline-grid {
    display: inline-grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mt-20 {
    margin-top: 5rem; /* Tailwind mt-20 */
}

.clients-section {
    margin-bottom: 5vh;
}

.logo-grid {
    gap: 5rem; /* Tailwind gap-20 equivalent */
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:gap-x-16 {
        column-gap: 4rem;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================
   SERVICES PAGE — MOBILE ACCORDION
   Divider line between accordion header and expanded content (service.blade.php)
   ============================================ */

.accordion-body-divider {
    border-top: 1px solid #0b3228;
}