/* ============================================================
   ICHIYAJO Showcase — Layout primitives
   Containers + grid + section frames
   spec §5
   ============================================================ */

/* ─── Containers ─────────────────────────────────────── */

.container,
.container-wide,
.container-narrow,
.container-full {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}

.container        { max-width: var(--container-default); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }
.container-full   { max-width: var(--container-full); }

/* ─── Section frames ─────────────────────────────────── */

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section-sm {
  padding-block: var(--section-y-sm);
  position: relative;
}
.section-bleed {
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}

/* Optional ink-soft surface for alternating sections */
.surface-soft { background: var(--ink-soft); }
.surface-deep { background: var(--ink-deep); }

/* ─── 12-column grid ─────────────────────────────────── */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter-x);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }

/* Column span utilities */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Mobile collapse: everything to full width */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [class*="col-span-"] { grid-column: span 4; }
}

/* ─── Flex helpers ───────────────────────────────────── */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.stack-sm  { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack-lg  { display: flex; flex-direction: column; gap: var(--space-lg); }
.stack-xl  { display: flex; flex-direction: column; gap: var(--space-xl); }

.row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}
.row-baseline { display: flex; gap: var(--space-md); align-items: baseline; }
.row-between  { display: flex; gap: var(--space-md); justify-content: space-between; align-items: center; }
.row-end      { display: flex; gap: var(--space-md); justify-content: flex-end; align-items: center; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ─── Section header (eyebrow + title + lead) ────────── */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  max-width: 720px;
}

.section-header__title {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: var(--fw-black);
  color: var(--paper);
}

.section-header__lead {
  color: var(--paper-soft);
  font-size: var(--text-md);
  max-width: 60ch;
}

/* ─── Decorative: gold accent line under heading ─────── */

.divider-gold {
  width: 60px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: var(--space-md) 0;
}

/* ─── Floating orb decorations (for hero / sections) ─── */

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.4;
  z-index: var(--z-base);
}
.orb-gold   { background: radial-gradient(circle, var(--gold)   0%, transparent 60%); }
.orb-ember  { background: radial-gradient(circle, var(--ember)  0%, transparent 60%); }
.orb-paper  { background: radial-gradient(circle, var(--paper)  0%, transparent 60%); opacity: 0.06; }

/* ─── Visually placed grids: bg pattern ──────────────── */

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--gold-a08) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gold-a08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
  z-index: var(--z-base);
}

/* ─── Z-index helpers ────────────────────────────────── */

.z-base    { z-index: var(--z-base); }
.z-raised  { z-index: var(--z-raised); }
.z-overlay { z-index: var(--z-overlay); }
.z-nav     { z-index: var(--z-nav); }

/* ─── Position helpers ───────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0  { inset: 0; }

/* ─── Display helpers ────────────────────────────────── */

.flex      { display: flex; }
.inline-flex { display: inline-flex; }
.grid      { display: grid; }
.hidden    { display: none; }

@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}
@media (max-width: 768px) {
  .hidden-mobile  { display: none !important; }
}