/* ============================================================
   LAYOUT.CSS — Section spacing, grids, responsive
   Ecolux Lighting B2B — v1.0
   Mobile-first: styles viết không có media query trước,
   sau đó min-width breakpoints.
   Ref: responsive-strategy.md, layout-specs.md
   ============================================================ */


/* ──────────────────────────────────────────
   1. NAVBAR LAYOUT
   ────────────────────────────────────────── */

.navbar {
  padding-inline: var(--container-px-mobile);
}

@media (min-width: 768px) {
  .navbar {
    padding-inline: var(--container-px-tablet);
  }
}

@media (min-width: 1280px) {
  .navbar {
    padding-inline: var(--container-px-desktop);
  }
}


/* ──────────────────────────────────────────
   2. HERO LAYOUT
   ────────────────────────────────────────── */

.hero {
  padding-block: var(--section-py-md);
}

@media (min-width: 1280px) {
  .hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-block: var(--section-py-lg);
  }

  .hero > .container {
    width: 100%;
  }
}


/* ──────────────────────────────────────────
   3. CREDIBILITY BAR LAYOUT
   ────────────────────────────────────────── */

.credibility-bar {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .credibility-bar {
    padding-block: var(--section-py-sm);
  }
}


/* ──────────────────────────────────────────
   4. PRODUCTS SECTION LAYOUT
   ────────────────────────────────────────── */

.products-section {
  padding-block: var(--section-py-sm);
}

@media (min-width: 768px) {
  .products-section {
    padding-block: var(--section-py-md);
  }
}

@media (min-width: 1280px) {
  .products-section {
    padding-block: var(--section-py-lg);
  }
}

/* Section header inline — desktop có "Xem toàn bộ →" bên phải */
.products-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .products-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .products-header .section-header {
    margin-bottom: 0;
  }
}

/* Products grid — mobile 1 cột */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Tablet: card thứ 3 lẻ span full-width để không bị lệch */
@media (min-width: 640px) {
  .products-grid .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-3));
    margin-inline: auto;
  }
}

/* Reset khi lên 3-col desktop */
@media (min-width: 1024px) {
  .products-grid .product-card:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}


/* ──────────────────────────────────────────
   5. USP SECTION LAYOUT
   ────────────────────────────────────────── */

.usp-section {
  padding-block: var(--section-py-sm);
}

@media (min-width: 768px) {
  .usp-section {
    padding-block: var(--section-py-md);
  }
}

@media (min-width: 1280px) {
  .usp-section {
    padding-block: var(--section-py-lg);
  }
}

.usp-section .section-header {
  max-width: 600px;
}


/* ──────────────────────────────────────────
   6. SPACES SECTION LAYOUT
   ────────────────────────────────────────── */

.spaces-section {
  padding-block: var(--section-py-sm);
}

@media (min-width: 768px) {
  .spaces-section {
    padding-block: var(--section-py-md);
  }
}

@media (min-width: 1280px) {
  .spaces-section {
    padding-block: var(--section-py-lg);
  }
}


/* ──────────────────────────────────────────
   7. TESTIMONIALS LAYOUT
   ────────────────────────────────────────── */

.testimonials-section {
  padding-block: var(--section-py-sm);
}

@media (min-width: 768px) {
  .testimonials-section {
    padding-block: var(--section-py-md);
  }
}

@media (min-width: 1280px) {
  .testimonials-section {
    padding-block: var(--section-py-lg);
  }
}


/* ──────────────────────────────────────────
   8. CTA BANNER LAYOUT
   ────────────────────────────────────────── */

.cta-banner {
  padding-block: var(--section-py-md);
}

@media (min-width: 1280px) {
  .cta-banner {
    padding-block: var(--section-py-lg);
  }
}


/* ──────────────────────────────────────────
   9. FOOTER LAYOUT
   ────────────────────────────────────────── */

/* Footer layout is handled in components.css for clarity */