/* === CONTAINERS === */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.container-narrow  { max-width: var(--container-md); margin-left: auto; margin-right: auto; padding-left: var(--space-6); padding-right: var(--space-6); }
.container-wide    { max-width: var(--container-2xl); margin-left: auto; margin-right: auto; padding-left: var(--space-6); padding-right: var(--space-6); }

@media (min-width: 1024px) {
  .container { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* === SECTIONS === */
.section    { padding: var(--section-padding-md); }
.section-sm { padding: var(--section-padding-sm); }
.section-lg { padding: var(--section-padding-lg); }

/* Section colour variants */
.section-bg-warm  { background: #FAF8F5; }
.section-navy     { background: var(--color-navy); }
.section-navy h2, .section-navy h3, .section-navy p { color: rgba(255,255,255,0.85); }
.section-navy h2  { color: var(--color-white); }
.section-navy .section-label--light { color: var(--color-gold); }
.section-label--light { color: rgba(255,255,255,0.6); }

/* Text utilities */
.text-center { text-align: center; }

/* === GRID SYSTEM === */
.grid-2, .grid-3, .grid-4, .book-grid {
  display: grid;
  gap: var(--space-8);
}
.grid-2     { grid-template-columns: repeat(1, 1fr); }
.grid-3     { grid-template-columns: repeat(1, 1fr); }
.grid-4     { grid-template-columns: repeat(2, 1fr); }
.book-grid  { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4, .book-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3     { grid-template-columns: repeat(3, 1fr); }
  .grid-4     { grid-template-columns: repeat(4, 1fr); }
  .book-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* === FLEX UTILITIES === */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }

/* === MAIN CONTENT OFFSET (for fixed header) === */
.site-main, .homepage {
  padding-top: var(--nav-height);
}
.homepage {
  padding-top: 0; /* hero sits flush behind transparent header */
}

/* === TWO COLUMN LAYOUTS === */
.article-layout {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  padding-block: var(--space-12);
}
.shop-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-block: var(--space-8);
}
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: 1fr 320px; }
  .shop-layout    { grid-template-columns: 260px 1fr; }
}

/* === DIVIDERS === */
.divider-gold {
  height: 1px;
  background: var(--color-gold);
  border: none;
  margin: var(--space-12) 0;
  opacity: 0.4;
}
.divider-ornament {
  text-align: center;
  font-size: var(--text-xl);
  color: var(--color-gold);
  margin: var(--space-12) 0;
  letter-spacing: var(--space-4);
}

/* === BREADCRUMBS === */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb__sep { color: var(--color-text-subtle); }