/* =====================================================
   Layout System for repeater_section with 4px gaps
   ===================================================== */

/* Base container */
.default-page-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 4px;
  margin-left: -2px;   /* counteract first column gap */
  margin-right: -2px;  /* counteract last column gap */
}

/* Each section defaults to flex item */
.repeater_section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 0.3s ease;
  margin-left: 2px;   /* half of the 4px gap */
  margin-right: 2px;  /* half of the 4px gap */
}

/* =====================================================
   Width modifiers with gap adjustments
   ===================================================== */
.full-width {
  flex: 0 0 calc(100% - 4px);
  max-width: calc(100% - 4px);
}

.one-third {
  flex: 0 0 calc(33.333% - 4px);
  max-width: calc(33.333% - 4px);
}

.two-thirds {
  flex: 0 0 calc(66.666% - 4px);
  max-width: calc(66.666% - 4px);
}

.one-half {
  flex: 0 0 calc(50% - 4px);
  max-width: calc(50% - 4px);
}

/* =====================================================
   Offset modifiers with gap adjustments
   ===================================================== */
.offset-by-one {
  margin-left: calc(33.333% + 2px);
}

.offset-by-two {
  margin-left: calc(66.666% + 4px);
}

.offset-by-half {
  margin-left: calc(50% + 2px);
}

/* =====================================================
   COLLAPSIBLE SECTIONS
   ===================================================== */
.repeater_section.collapse {
  overflow: hidden;
}

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

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

/* =====================================================
   COLLAPSE CONTENT BASE
   ===================================================== */
.collapse-content {
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* =====================================================
   OPEN STATE
   ===================================================== */
.repeater_section.open .collapse-content {
  overflow: visible;
}

/* Only first child visible for fully collapsed .collapse sections */
.repeater_section.collapse:not(.open) > .collapse-content {
  display: none;
}

/* For .narrow, .compact, .spacious, JS controls height; CSS ensures smooth overflow & spacing */
.repeater_section.narrow > .collapse-content,
.repeater_section.compact > .collapse-content,
.repeater_section.spacious > .collapse-content {
  transition: max-height 0.5s ease;
  overflow: hidden;
}

/* =====================================================
   IMAGE SECTIONS (.has-image)
   ===================================================== */
.repeater_section.has-image .repeater_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Heights for text-style sections if needed */
.repeater_section.narrow .repeater_img {
  height: 28vh;
}

.repeater_section.compact .repeater_img {
  height: 56vh;
}

.repeater_section.spacious .repeater_img {
  height: 84vh;
}

/* =====================================================
   RESPONSIVE BEHAVIOR
   ===================================================== */
@media (max-width: 768px) {
  .default-page-grid {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }
  .repeater_section,
  .full-width,
  .one-half,
  .one-third,
  .two-thirds {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}