/* =====================================================
   I'm Hopping — Layout / Grid utilities (v3)
   ===================================================== */

/* -----------------------------------------------------------------
 * Grid helpers
 * --------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

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

/* New named grid helpers from guideline */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Two-column layout with sidebar */
.split {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .split--6-5 {
    grid-template-columns: 1.2fr 1fr;
  }
  .split--7-5 {
    grid-template-columns: 1.4fr 1fr;
  }
}

.split--reverse > :first-child { order: 2; }
.split--reverse > :last-child  { order: 1; }
@media (max-width: 1023px) {
  .split--reverse > :first-child { order: 0; }
  .split--reverse > :last-child  { order: 0; }
}

/* Stack utility */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.stack--lg { gap: var(--space-lg); }
.stack--sm { gap: var(--space-xs); }

/* Cluster (inline group) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* Section divider */
.section-divider {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

/* Eyebrow + heading grouping */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  max-width: 56em;
}
.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* Text block — limited width for readability */
.text-block { max-width: 640px; }

/* Mascot float positions */
.mascot-pop {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.mascot-pop img { width: 100%; height: auto; }

.relative { position: relative; }
.overflow-clip { overflow: clip; overflow-x: clip; }