/* Responsive utilities and type scale */

/* Fluid root font-size for gentle scaling across devices */
html { font-size: clamp(14px, 0.9vw + 10px, 18px); }
@media (max-width: 400px){ html { font-size: clamp(14px, 1.6vw + 9px, 17px); } }

/* Ensure flex/grid children don’t overflow their boxes */
*, *::before, *::after { box-sizing: border-box; }
.minw0 { min-width: 0; }
.minh0 { min-height: 0; }

/* Golden layout variables and containers */
:root {
  --phi: 1.618;
  --phi-inv: 0.618; /* 1/phi */
  /* Slightly expand default grid max to allow wider layouts on desktop */
  --grid-max: 1920px;
  --page-pad: 12px;
  --page-pad-tight: 8px;
}

/* Containers scale to golden grid while respecting viewport */
.container { width: 100%; max-width: min(var(--grid-max, 1920px), 100vw); margin: 0 auto; padding: 0 var(--page-pad); }
.container.narrow { max-width: min(960px, 95vw); }
.container.wide { width: 100%; max-width: 100vw; }
.container.full { width: 100vw; max-width: 100vw; }

/* Break out of the centered container to span the full viewport width */
.breakout {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Layout helpers */
.stack { display: grid; gap: 12px; }
.stack.g1 { gap: 8px; }
.stack.g2 { gap: 16px; }
.stack.g3 { gap: 24px; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cluster.center { justify-content: center; }
.cluster.between { justify-content: space-between; }

/* Grid helpers */
.grid { display: grid; gap: 12px; }
.grid.g2 { gap: 16px; }
.grid.g3 { gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px){ .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* Content area (prose-like) */
.prose { line-height: 1.6; }
.prose h1 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; margin: 0 0 .6em; }
.prose h2 { font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.25; margin: 1.2em 0 .4em; }
.prose h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.3; margin: 1em 0 .3em; }
.prose p { margin: .6em 0; }
.prose ul, .prose ol { padding-left: 1.25em; margin: .6em 0; }
.prose img, .prose video, .prose canvas, .prose iframe { max-width: 100%; height: auto; border-radius: 10px; }
.prose pre { overflow:auto; padding: .75rem; border-radius: 10px; background: #0f1320; border: 1px solid #2c3552; }
.prose table { width: 100%; border-collapse: collapse; overflow: auto; display: block; }
.prose th, .prose td { padding: .5rem .6rem; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Media should never overflow containers */
img, canvas, svg, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Text utilities */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap { overflow-wrap: anywhere; word-break: break-word; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; }

/* Visibility */
.hide-sm { display: initial; }
.show-sm { display: none; }
@media (max-width: 900px){ .hide-sm { display:none; } .show-sm { display: initial; } }

/* App scaffolding */
.app-container { min-height: 100svh; display:flex; flex-direction: column; }
.app-main { flex: 1; }

/* Consistent page side padding to match homepage */
.app-main, main { padding-left: var(--page-pad); padding-right: var(--page-pad); }
@media (max-width: 640px){ .app-main, main { padding-left: 12px; padding-right: 12px; } }

/* On small screens, ensure containers never force narrow columns */
@media (max-width: 900px){
  .container, .container.wide, .app-container.container.wide { max-width: 100vw !important; padding-left: 12px; padding-right: 12px; }
}

/* Full-bleed utility: cancel global side padding for immersive canvases */
.full-bleed { margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad)); padding-left: var(--page-pad-tight); padding-right: var(--page-pad-tight); }

/* Page-tight: opt-in smaller side paddings across a page */
.page-tight .app-main, .page-tight main { padding-left: var(--page-pad-tight) !important; padding-right: var(--page-pad-tight) !important; }

/* Golden ratio grid helpers */
.phi-grid { display: grid; gap: 12px; }
.phi-gap { gap: calc(8px * var(--phi, 1.618)); }
.phi-split { display: grid; grid-template-columns: 0.618fr 0.382fr; gap: 12px; }
.phi-split.rev { grid-template-columns: 0.382fr 0.618fr; }

/* Golden‑ratio rhythm helpers on small screens */
@media (max-width: 640px){
  .stack { gap: calc(8px * var(--phi, 1.618)); }
  .grid { gap: calc(8px * var(--phi, 1.618)); }
}

/* Override overly rigid inline grids and widths on mobile */
@media (max-width: 768px){
  /* Collapse any inline grid with fixed columns to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Fallback: if authors used grid areas, let it flow vertically */
  [style*="grid-template-areas"] { display: block !important; }
  /* Avoid horizontal overflow from inline fixed widths */
  [style*="width:"] { max-width: 100% !important; }
  [style*="min-width:"] { min-width: 0 !important; }
  /* Ensure long words/URLs wrap to prevent overflow */
  .app-main, main { overflow-wrap: anywhere; word-break: break-word; }
  /* Make touch interactions feel responsive */
  button, a, input, select, textarea { touch-action: manipulation; }
  /* Relax tall viewports */
  .app-main [style*="height: 100vh"] { height: 85svh !important; }
  .app-main [style*="calc(100vh"] { height: 85svh !important; }
  .app-main [style*="height: 80vh"] { height: 60svh !important; }
  .app-main [style*="height: 70vh"] { height: 52svh !important; }

  /* Common three-pane editors (composer, site-builder) */
  main[style*="grid-template-columns"] > aside { width: 100% !important; max-width: 100% !important; }
  main[style*="grid-template-columns"] { gap: 12px !important; }
}

/* Header tweaks */
@media (max-width: 480px){
  header { padding: 8px 12px !important; }
}