/**
 * layout.css
 * Layout utilities: container, sections, grids, and flex helpers.
 * Responsive breakpoints are applied here so all layouts adapt from mobile to large desktop.
 * Depends on variables.css and base.css.
 */

/* ========== Breakpoint mixins (comments for reference) ========== */
/* Mobile: 0–767px (default, no media query)
   Tablet: 768px+  @media (min-width: 768px)
   Desktop: 1024px+ @media (min-width: 1024px)
   Large desktop: 1280px+ @media (min-width: 1280px) */

/* ========== Container ========== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ========== Section ========== */
.section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.section--tight {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

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

/* ========== Grid system (for cards and content) ========== */
.grid {
    display: grid;
    gap: var(--spacing-xl);
}

/* Mobile: single column by default */
.grid--2,
.grid--3,
.grid--4 {
    grid-template-columns: 1fr;
}

/* Tablet: two columns for 2-col and 4-col; two for 3-col */
@media (min-width: 768px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

/* Desktop: full columns */
@media (min-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* Large desktop: optional tighter container or same */
@media (min-width: 1280px) {
    .grid {
        gap: var(--spacing-lg);
    }
}

/* ========== Product categories grid ========== */
/* 1 col mobile, 2 tablet, 3 desktop. Use with .reveal on cards for scroll-in. */
.product-grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .product-grid {
        gap: var(--spacing-lg);
    }
}

/* ========== Industries Served grid (#industries) ========== */
/* 1 col mobile, 2 tablet, 3 desktop — minmax prevents overflow in grid. */

.industries-section__grid {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .industries-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .industries-section__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ========== About section — two-column layout ========== */

.about-section__layout {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}

.about-section__column--content {
    min-width: 0;
}

.about-section__column--media {
    min-width: 0;
}

@media (min-width: 1024px) {
    .about-section__layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }
}

/* ========== Contact CTA — centered conversion strip ========== */

.contact-cta-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: clamp(3.25rem, 7vw, 5.25rem);
    padding-bottom: clamp(3.25rem, 7vw, 5.25rem);
}

/* ========== Capabilities page — technical highlights grid ========== */

.cap-page-specs__grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .cap-page-specs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .cap-page-specs__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ========== Feature grid (Why Choose Us, etc.) ========== */
/* 1 col mobile, 2 tablet, 3 desktop. */

.feature-grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .feature-grid {
        gap: var(--spacing-lg);
    }
}

/* ========== Flex helpers ========== */
.flex {
    display: flex;
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

.flex--column {
    flex-direction: column;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--gap-sm { gap: var(--spacing-sm); }
.flex--gap-md { gap: var(--spacing-md); }
.flex--gap-lg { gap: var(--spacing-lg); }
.flex--gap-xl { gap: var(--spacing-xl); }

/* ========== Main content area ========== */
main {
    min-height: 60vh;
}

/* Inner pages: space below fixed/sticky navbar */
main > .page-section:first-child {
    padding-top: var(--spacing-section);
}

/* ========== Homepage content sections ========== */
/* Alternating backgrounds; .section on container provides vertical padding. */

.home-section:nth-child(odd) {
    background-color: var(--color-bg-section);
}

.home-section:nth-child(even) {
    background-color: var(--color-bg-light);
}

/* ========== Industrial background utilities ========== */
/* Reusable, subtle textures. Apply to any section. Low opacity for readability. */

.bg-light-section {
    background-color: var(--color-bg-section);
}

/* Blueprint-style grid: very subtle engineering grid pattern */
.bg-blueprint {
    background-color: var(--color-bg-light);
    background-image:
        linear-gradient(rgba(var(--bg-blueprint-color), var(--bg-texture-opacity)) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--bg-blueprint-color), var(--bg-texture-opacity)) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Light industrial: soft diagonal lines (brushed metal feel) */
.bg-industrial {
    background-color: var(--color-bg-section);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(var(--bg-blueprint-color), var(--bg-texture-opacity)) 8px,
        rgba(var(--bg-blueprint-color), var(--bg-texture-opacity)) 9px
    );
}

/* Stronger blueprint for CTA/dark sections (slightly more visible) */
.bg-blueprint-strong {
    background-color: var(--color-primary-dark);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ========== Footer grid ========== */
/* 4 columns desktop, 2 tablet, 1 mobile. */

.footer__grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========== AI / Industry 4.0 section layout ========== */
/* Desktop: copy left, feature cards right. Mobile: single column stack. */

.ai-section__layout {
    display: grid;
    gap: var(--spacing-xl);
    align-items: start;
}

.ai-section__column {
    min-width: 0;
}

@media (min-width: 1024px) {
    .ai-section__layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--spacing-2xl);
        align-items: center;
    }
}

.ai-section__cards {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .ai-section__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== Capabilities & Smart Machinery — horizontal blocks ========== */

.capabilities-blocks {
    display: flex;
    flex-direction: column;
}

.capability-row {
    display: grid;
    gap: var(--spacing-xl);
    align-items: center;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--cap-border);
}

.capability-row--last {
    border-bottom: none;
}

@media (min-width: 1024px) {
    .capability-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 4rem);
        padding-top: var(--spacing-section);
        padding-bottom: var(--spacing-section);
    }

    .capability-row--media-left .capability-row__media {
        grid-column: 1;
        grid-row: 1;
    }

    .capability-row--media-left .capability-row__content {
        grid-column: 2;
        grid-row: 1;
    }

    .capability-row--media-right .capability-row__content {
        grid-column: 1;
        grid-row: 1;
    }

    .capability-row--media-right .capability-row__media {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 1023px) {
    .capability-row--media-right {
        display: flex;
        flex-direction: column;
    }

    .capability-row--media-right .capability-row__content {
        order: 1;
    }

    .capability-row--media-right .capability-row__media {
        order: 2;
    }
}