/* =====================================================
   Layout System for repeater_section
   ===================================================== */

/* Base container */
.default-page-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0; /* Add spacing if desired */
}

/* Each section defaults to flex item */
.repeater_section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

/* =====================================================
   HEIGHT MODIFIERS
   ===================================================== */

.auto {
  height: auto;
  min-height: auto;
}
 /*
.spacious {
  min-height: 75vh;
}

.compact {
  min-height: 60vh;
}

.narrow {
  min-height: 40vh;
}
*/

/* =====================================================
   WIDTH MODIFIERS
   ===================================================== */

.full-width {
  flex: 0 0 100%;
  max-width: 100%;
}

.one-third {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

.two-thirds {
  flex: 0 0 66.666%;
  max-width: 66.666%;
}

.one-half {
  flex: 0 0 50%;
  max-width: 50%;
}

/* =====================================================
   OFFSET MODIFIERS
   ===================================================== */

.no-margin {
  margin-left: 0 !important;
}

.offset-by-one {
  margin-left: 33.333%;
}

.offset-by-two {
  margin-left: 66.666%;
}

.offset-by-half {
  margin-left: 50%;
}

/* =====================================================
   COLLAPSIBLE SECTION (smooth + stable)
   ===================================================== */

.collapse {
  overflow: hidden;
}

.collapse > :first-child {
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
}

.collapse > :first-child:hover {
  color: var(--accent-color, #555);
}

/* collapsible wrapper */
.collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* open state */
.collapse.open .collapse-content {
  max-height: 2000px;
}

/* =====================================================
   ADVANCED IMAGES STYLINGS
   ===================================================== */

.spacious img,
.compact img,
.narrow img {
  min-height: 340px;
  }

.spacious img {
  height: 70vh;
  }

.compact img {
  height: 60vh;
  }

.narrow img {
  height: 30vh;
  }




/* =====================================================
   RESPONSIVE BEHAVIOR
   ===================================================== */

@media (max-width: 768px) {
  .default-page-grid {
    flex-direction: column;
  }

  .repeater_section,
  .full-width,
  .one-half,
  .one-third,
  .two-thirds {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0 !important;
  }
}