/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #eee;
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #00ff88;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.subtitle {
  text-align: center;
  color: #888;
  margin-bottom: 3rem;
}

h2 {
  color: #00d4ff;
  border-bottom: 2px solid #00d4ff;
  padding-bottom: 0.5rem;
}

/* Demo Section Styling */
.demo-section {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  border: 1px dashed rgba(0, 212, 255, 0.3);
}

.code-snippet {
  display: block;
  background: #0d1117;
  color: #7ee787;
  padding: 12px;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

.note {
  color: #ffd700;
  font-style: italic;
  font-size: 0.9rem;
}

/* Example 1: Basic Wrap - literally just a width constraint */
.basic-wrap {
  width: 300px;
}

/* Example 2: Image Wrap with Float */
.image-wrap img {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.image-wrap::after {
  content: '';
  display: table;
  clear: both;
}

/* Example 3: Shape Outside - Circular text wrap */
.shape-wrap {
  min-height: 120px;
}

.circle-shape {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  border-radius: 50%;
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  shape-outside: circle(50%);
}

/* Example 4: Flexbox Wrap */
.flex-wrap-demo {
  display: flex;
  flex-wrap: wrap; /* THIS IS ALL YOU NEED */
  gap: 10px;
}

.flex-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 15px 25px;
  border-radius: 6px;
  font-weight: bold;
}

/* Example 5: Grid Auto-fit */
.grid-wrap-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.grid-item {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  padding: 20px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  color: #000;
}

/* Example 6: Dynamic Textbox */
.dynamic-textbox {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 2px solid #00d4ff;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1rem;
  resize: both;
  font-family: inherit;
}

.dynamic-textbox:focus {
  outline: none;
  border-color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* Example 7: Word Break */
.word-break-demo {
  width: 250px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Example 8: Multi-column */
.column-demo {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid rgba(255, 255, 255, 0.2);
}

/* Example 9: Container Queries */
.container-query-wrapper {
  resize: horizontal;
  overflow: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 15px;
  min-width: 200px;
  max-width: 100%;
  border: 2px dashed #00ff88;
}

.container-query-demo {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cq-item {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 15px;
  border-radius: 6px;
  flex: 1;
  min-width: 100px;
  text-align: center;
  font-weight: bold;
}

@container (max-width: 300px) {
  .cq-item {
    flex-basis: 100%;
  }
}

/* Footer */
footer {
  text-align: center;
  margin-top: 50px;
  padding: 30px;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 12px;
  border: 2px solid #00ff88;
}

footer h2 {
  color: #00ff88;
  border: none;
}

.mic-drop {
  font-size: 2rem;
  margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .column-demo {
    column-count: 2;
  }

  h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 400px) {
  .column-demo {
    column-count: 1;
  }
}