/* 1. FONT IMPORT & VARIABLES */
/* ------------------------------------ */

/* Import the Inter font from Google Fonts with the weights we plan to use */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

:root {
    /* Color Palette */
    --color-dark-bg: #333333;
    --color-light-bg: #ffffff;
    --color-dark-text: #333333;
    /* Using a slightly off-white for text is easier on the eyes */
    --color-light-text: #f0f0f0;
    --color-light-grey-text: #bbbbbb;

    /* Typography */
    --font-main: 'Inter', sans-serif;

    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-semibold: 600;
}


/* 2. GENERAL RESETS & BASE STYLES */
/* ------------------------------------ */

/* A simple reset for consistent box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-dark-bg);
    color: var(--color-light-text);
    -webkit-font-smoothing: antialiased;
    /* Improves font rendering on Mac */
    -moz-osx-font-smoothing: grayscale;
    /* Improves font rendering on Mac */
}

h1,
h2,
h3 {
    font-weight: var(--fw-semibold);
}


/* 3. LAYOUT & COMPONENTS (Mobile First) */
/* ------------------------------------ */

/* --- Site Header --- */
.site-header {
    /* Center the logo between viewport top and hero text */
    padding: 5rem 0 1.5rem;
}

.site-logo {
    display: block;
    /* Allows the use of margin: auto for centering */
    width: 150px;
    /* Set a specific width for the logo */
    margin: 0 auto;
    /* A standard way to center a block element */
}

/* --- Main Container with CSS Grid for Mobile Order --- */
main {
    display: grid;
    grid-template-columns: 1fr;
}

/* --- Hero Section --- */
.hero {
    /* Make the hero section fill most of the screen's height */
    min-height: 70vh;

    /* Use Flexbox to perfectly center the text inside */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Add padding to prevent text from touching the screen edges */
    padding: 1.5rem 2rem 2rem;
    text-align: center;

    /* Order for mobile */
    order: 1;
}

.hero__text {
    font-size: 2.25rem;
    /* A large, impactful font size for mobile */
    font-weight: var(--fw-light);
    /* Use the light weight for an elegant feel */
    line-height: 1.3;
    /* Increase spacing between lines for readability */
    /* Limit the width to prevent lines from becoming too long */
    max-width: 25ch;
}

/* --- Service Panels --- */
.service-panel {
    background-color: var(--color-light-bg);
    color: var(--color-dark-text);

    /* Generous padding for a clean, spacious feel */
    padding: 3rem 1.5rem;
    
    /* Consistent spacing - top and bottom */
    margin: 2.5rem 2rem;

    /* The rounded corners */
    border-radius: 12px;
}

/* Mobile order for interleaving */
.service-panel--1 {
    order: 2;
}

.service-panel--2 {
    order: 4;
}

.service-panel--3 {
    order: 6;
}

.service-panel__headline {
    font-size: 1.55rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 1rem;
}

.service-panel__body {
    font-weight: var(--fw-regular);
    line-height: 1.6;
    text-align: center;
}

/* --- Testimonials Section --- */
.testimonials {
    margin: 2.5rem 0;
    padding: 0 2rem;
    
    /* Enable horizontal scrolling */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;

    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */

    /* Order for mobile */
    order: 5;
}

.testimonials::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.testimonial-card {
    border: 1px solid var(--color-light-text);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;

    /* Card sizing for peek effect */
    flex: 0 0 85%;
    /* Each card takes 85% of container width */
    scroll-snap-align: center;
}

.testimonial-card__quote {
    font-size: 1rem;
    font-weight: var(--fw-regular);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.testimonial-card__author {
    font-weight: var(--fw-semibold);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.testimonial-card__title {
    font-size: 0.9rem;
    color: var(--color-light-grey-text);
    font-weight: var(--fw-regular);
}

/* --- Site Footer --- */
.site-footer {
    text-align: center;
    padding: 1rem 1rem 2rem;
    /* Top, horizontal, bottom padding */
    margin-top: 2.5rem;
    /* Consistent spacing */

    /* Order for mobile */
    order: 8;
}

.contact-info p {
    margin-bottom: 0.5rem;
    /* Space between contact lines */
    font-size: 0.9rem;
    /* Reduced font size slightly */
}

.contact-info a {
    color: var(--color-light-text);
    /* Ensure links are visible */
    text-decoration: none;
    /* Remove underline for a cleaner look */
    transition: color 0.3s ease;
    /* Smooth transition for hover effect */
}

.contact-info a:hover {
    color: var(--color-light-grey-text);
    /* Subtle hover effect */
}

.footer-separator {
    border: none;
    /* Remove default border */
    border-top: 1px solid var(--color-light-grey-text);
    /* Thin light grey line */
    width: 100%;
    /* Make it full width */
    /* Adjust vertical spacing. Top, horizontal, bottom */
    margin: 2rem 0 1.5rem;
}

.copyright p {
    font-size: 0.8rem;
    /* Made the font size smaller */
    color: var(--color-light-grey-text);
}

/* General link styling for the entire site */
a {
    color: var(--color-light-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* --- Image Gallery --- */
.gallery {
    margin: 2.5rem 0;
    padding: 0 2rem;
    
    /* Enable horizontal scrolling */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2rem;
    /* Ensure snap respects the padding */
    gap: 1rem;

    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */

    /* Order for mobile */
    order: 3;
}

.gallery::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.gallery img {
    /* Image sizing for peek effect */
    flex: 0 0 85%;
    /* Each image takes 85% of container width */
    scroll-snap-align: center;

    /* Ensure images respect flex-basis */
    min-width: 0;
    /* Allow shrink below intrinsic size */
    display: block;
    /* Remove inline gaps */
    width: 100%;
    /* Fill the flex item width */
    height: auto;
    /* Maintain aspect ratio */
    max-height: 60vh;
    /* Constrain height to fit within viewport */

    border: 3px solid var(--color-light-text);
    /* White border */
    border-radius: 12px;
    /* Rounded corners */
    object-fit: cover;
    /* Prevents images from distorting */
}

/* --- Client Logos --- */
.client-logos {
    display: grid;
    /* Create a grid with 3 columns of equal width */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    /* Space between logos */
    align-items: center;
    /* Vertically center logos in their grid cells */
    margin: 2.5rem 1rem;
    /* Consistent vertical spacing */
    padding: 0 1rem;
    /* Horizontal padding for the section */

    /* Order for mobile */
    order: 7;
}

.client-logos img {
    width: 100%;
    /* Make logo scale to fit the grid column */
    border-radius: 12px;
    /* Rounded corners for each logo image */
    background-color: #ffffff;
    /* Set the background color for the image element */
    aspect-ratio: 1 / 1;
    /* Make the logo panels square */
    object-fit: scale-down;
    /* Ensure logo fits inside the square without being cut off */
    padding: 0.5rem;
    /* Add some padding inside the panel */
}


/* 4. RESPONSIVE - TABLET & DESKTOP */
/* ------------------------------------ */

/* Tablet breakpoint (768px and up) */
@media (min-width: 768px) {

    /* Add max-width constraint and center content */
    main {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 3rem;

        /* Reset order for desktop - group service panels */
        display: grid;
        grid-template-columns: 1fr;
    }

    .site-header {
        max-width: 1100px;
        margin: 0 auto;
        padding: 6rem 3rem 1.5rem;
    }

    .site-logo {
        width: 180px;
    }

    /* Hero Section */
    .hero {
        min-height: 70vh;
        padding: 2rem 3rem;
        order: 1;
    }

    .hero__text {
        font-size: 3rem;
        max-width: 30ch;
    }

    /* Service Panels - group together at top */
    .service-panel--1 {
        order: 2;
    }

    .service-panel--2 {
        order: 3;
    }

    .service-panel--3 {
        order: 4;
    }

    .service-panel {
        margin: 3rem 0;
        padding: 3rem 2.5rem;
    }

    .service-panel__headline {
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }

    .service-panel__body {
        font-size: 1.1rem;
        line-height: 1.7;
    }

    /* Gallery - after service panels */
    .gallery {
        margin-top: 3rem;
        padding: 0 3rem;
        order: 5;
    }

    .gallery img {
        flex: 0 0 70%;
        max-height: 50vh;
    }

    /* Testimonials - after gallery */
    .testimonials {
        margin-top: 3rem;
        padding: 0 3rem;
        order: 6;
    }

    .testimonial-card {
        flex: 0 0 70%;
    }

    /* Client Logos - 6 columns on tablet */
    .client-logos {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.5rem;
        margin: 3rem 3rem;
        padding: 0;
        order: 7;
    }

    /* Footer */
    .site-footer {
        max-width: 1100px;
        margin: 0 auto;
        padding: 2rem 3rem 3rem;
        order: 8;
    }
}

/* Desktop breakpoint (1024px and up) */
@media (min-width: 1024px) {

    /* Header - adjust logo position */
    .site-header {
        padding: 8rem 3rem 1.5rem;
    }

    /* Hero Section - maintain height and position */
    .hero {
        min-height: 70vh;
        order: 1;
    }

    .hero__text {
        font-size: 3.5rem;
        max-width: 28ch;
        line-height: 1.25;
    }

    /* Main - use CSS Grid to create 3-column layout for service panels */
    main {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Hero spans all 3 columns */
    .hero {
        grid-column: 1 / -1;
    }

    /* Service panels each take 1 column and sit side by side */
    .service-panel--1 {
        grid-column: 1 / 2;
        order: 2;
    }

    .service-panel--2 {
        grid-column: 2 / 3;
        order: 2;
    }

    .service-panel--3 {
        grid-column: 3 / 4;
        order: 2;
    }

    .service-panel {
        margin: 0;
        padding: 2.5rem 2rem;
    }

    .service-panel__headline {
        font-size: 1.25rem;
        text-align: left;
        margin-bottom: 1rem;
    }

    .service-panel__body {
        font-size: 0.95rem;
        line-height: 1.7;
        text-align: left;
    }

    /* Gallery spans all 3 columns - static 2x3 grid */
    .gallery {
        margin-top: 4rem;
        grid-column: 1 / -1;
        order: 3;
        
        /* Convert to static grid layout */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 1.5rem;
        
        /* Remove scrolling behavior */
        overflow-x: visible;
        scroll-snap-type: none;
        
        /* Align with service panels */
        padding: 0;
    }

    .gallery img {
        /* Reset flex properties for grid */
        flex: none;
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    
    /* Hide the 4th image to create 2x3 grid */
    .gallery img:nth-child(4) {
        display: none;
    }

    /* Testimonials span all 3 columns */
    .testimonials {
        margin-top: 4rem;
        grid-column: 1 / -1;
        order: 4;
        
        /* Align with service panels */
        padding: 0;
    }

    .testimonial-card {
        /* Show 2 full cards + 1 peeking */
        flex: 0 0 45%;
    }

    .testimonial-card__quote {
        font-size: 1.05rem;
    }

    /* Client Logos - maintain 6 columns, span all 3 columns */
    .client-logos {
        gap: 2rem;
        margin: 4rem 0;
        grid-column: 1 / -1;
        order: 5;
        padding: 0;
    }

    /* Footer spans all 3 columns */
    .site-footer {
        grid-column: 1 / -1;
        order: 6;
    }
}

/* Large Desktop breakpoint (1440px and up) */
@media (min-width: 1440px) {

    .hero__text {
        font-size: 4rem;
    }

    .service-panel__headline {
        font-size: 2.5rem;
    }

    .gallery img {
        height: 380px;
    }
}