/* ============================================================
   layout.css — Grid & Responsive Layout
   ============================================================ */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 12px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 50px;
  }
}

/* ============================================================
   GALLERY GRID — Scattered Layout
   ============================================================ */
.gallery {
  position: relative;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-4xl);
  overflow: hidden;
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* --- Card scatter rotations (mobile: reset) --- */
.gallery__item { transform: rotate(0deg); }

@media (min-width: 768px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  .gallery__item:nth-child(6n+1) { transform: rotate(-2deg); }
  .gallery__item:nth-child(6n+2) { transform: rotate(1.5deg);  margin-top: -2rem; }
  .gallery__item:nth-child(6n+3) { transform: rotate(-1deg); }
  .gallery__item:nth-child(6n+4) { transform: rotate(3deg);  margin-left: 0; }
  .gallery__item:nth-child(6n+5) { transform: rotate(-2deg); }
  .gallery__item:nth-child(6n+6) { transform: rotate(2deg);  margin-top: 6rem; }
}

@media (min-width: 1200px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    row-gap: 8rem;
  }

  .gallery__item:nth-child(6n+1) { transform: rotate(-2deg); margin-top: 3rem; }
  .gallery__item:nth-child(6n+2) { transform: rotate(1.5deg);  margin-top: 0; }
  .gallery__item:nth-child(6n+3) { transform: rotate(-1deg); margin-top: 6rem; }
  .gallery__item:nth-child(6n+4) { transform: rotate(3deg);  margin-top: -5rem; margin-left: 0; }
  .gallery__item:nth-child(6n+5) { transform: rotate(-2deg); margin-top: 2rem; }
  .gallery__item:nth-child(6n+6) { transform: rotate(2deg);  margin-top: 0; }
}

@media (min-width: 1400px) {
  .gallery__item:nth-child(6n+1) { transform: rotate(-3deg); }
  .gallery__item:nth-child(6n+2) { transform: rotate(2deg); }
  .gallery__item:nth-child(6n+4) { transform: rotate(5deg);  margin-left: 3rem; }
  .gallery__item:nth-child(6n+5) { transform: rotate(-4deg); }
  .gallery__item:nth-child(6n+6) { transform: rotate(3deg); }
}

/* ============================================================
   SECTION SPACING
   ============================================================ */
.section {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}