/* ==========================================================================
   Digital Maheshwari — Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--dm-container);
  margin-inline: auto;
  padding-inline: var(--dm-gutter);
}
.container--narrow { max-width: var(--dm-container-narrow); }

.section {
  padding-block: var(--dm-space-9);
}
.section--tight { padding-block: var(--dm-space-7); }
.section--alt { background: var(--dm-surface-alt); }
.section--ink { background: var(--dm-ink); color: var(--dm-text-inverse); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--dm-text-inverse); }
.section--ink p { color: rgba(248, 248, 251, 0.72); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dm-space-2);
  font-family: var(--dm-font-body);
  font-size: var(--dm-caption);
  font-weight: 700;
  letter-spacing: var(--dm-tracking-wider);
  text-transform: uppercase;
  color: var(--dm-gold-dark);
  margin-bottom: var(--dm-space-4);
}
.section--ink .eyebrow { color: var(--dm-gold-light); }
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.section-head {
  max-width: 760px;
  margin-bottom: var(--dm-space-8);
}
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--dm-space-6);
  max-width: none;
  flex-wrap: wrap;
}

/* ---- Grid system ---- */
.grid {
  display: grid;
  gap: var(--dm-space-6);
}
/* minmax(0, 1fr) — not a bare 1fr — so a track's content (long button
   labels, unbroken text) can never force it past its equal share and
   overflow the container. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--dm-space-8);
  align-items: center;
}
.split--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }

/* ---- Bento (mixed-span grid, used sparingly) ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--dm-space-5);
}
.bento > .span-4 { grid-column: span 4; }
.bento > .span-3 { grid-column: span 3; }
.bento > .span-2 { grid-column: span 2; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > .span-4, .bento > .span-3, .bento > .span-2 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--dm-space-7); }
  /* .hero's own mobile padding lives in components.css (it defines the
     base .hero rule, and loads after this file — a copy here would just
     lose the cascade tie-break to that unconditional rule). */
}