/* ==========================================================================
   03-layout.css — Container, Section, Grid & Utility Layout
   ========================================================================== */

/* Container */
.rentl-container {
  width: min(100% - var(--rentl-container-gutter) * 2, var(--rentl-container));
  margin-inline: auto;
}

.rentl-container--sm {
  max-width: var(--rentl-container-sm);
}

.rentl-container--md {
  max-width: var(--rentl-container-md);
}

.rentl-container--wide {
  max-width: var(--rentl-container-wide);
}

/* Sections */
.rentl-section {
  padding-block: var(--rentl-section-y);
}

.rentl-section--sm {
  padding-block: var(--rentl-section-y-sm);
}

.rentl-section--lg {
  padding-block: var(--rentl-section-y-lg);
}

/* Grid */
.rentl-grid {
  display: grid;
  gap: var(--rentl-grid-gap);
  grid-template-columns: 1fr;
}

.rentl-grid--2 {
  grid-template-columns: 1fr;
}

.rentl-grid--3 {
  grid-template-columns: 1fr;
}

.rentl-grid--4 {
  grid-template-columns: 1fr;
}

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

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

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

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

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

/* Stack — vertical flow with consistent gap */
.rentl-stack {
  display: flex;
  flex-direction: column;
}

.rentl-stack > * + * {
  margin-top: var(--rentl-stack-gap, var(--rentl-space-4));
}

.rentl-stack--sm {
  --rentl-stack-gap: var(--rentl-space-2);
}

.rentl-stack--lg {
  --rentl-stack-gap: var(--rentl-space-8);
}

/* Flow — prose spacing */
.rentl-flow > * + * {
  margin-top: var(--rentl-space-6);
}

/* Cluster — horizontal wrapping group */
.rentl-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rentl-space-3);
  align-items: center;
}

/* Split — push last item to far end */
.rentl-split {
  display: flex;
  align-items: center;
  gap: var(--rentl-space-4);
}

.rentl-split > :last-child {
  margin-left: auto;
}

/* Mobile overrides */
@media (max-width: 639px) {
  :root {
    --rentl-container-gutter: 1.5rem;
    --rentl-section-y: 4rem;
    --rentl-section-y-sm: 2.5rem;
    --rentl-section-y-lg: 5rem;
  }
}