/* ==========================================================================
   DEMOS — CSS riêng cho từng demo
   (Các class chung .demo, .demo-header, .demo-stage đã có trong lesson.css)
   ========================================================================== */

/* ---------- SENSOR SIZE (Bài 02) ---------- */
.sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.sensor-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  text-align: left;
}

.sensor-card:hover {
  border-color: var(--primary);
}

.sensor-card.active {
  border-color: var(--primary);
  background: var(--surface);
}

.sensor-card-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.sensor-card-size {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.sensor-info {
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  display: none;
}

.sensor-info-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
  color: var(--text);
}

.sensor-info-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  list-style: none;
}

.sensor-info-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sensor-info-list strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}

/* ---------- MODE SELECTOR (Bài 04) ---------- */
.mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.mode-btn {
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  min-height: 44px;
  min-width: 60px;
}

.mode-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.mode-btn.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.mode-description {
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  display: none;
}

.mode-description-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
  color: var(--text);
}

.mode-description-body {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- COMPOSITION GRID (Bài 05) ---------- */
.composition-demo-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.composition-demo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.grid-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.grid-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.grid-line.vertical {
  top: 0;
  bottom: 0;
  width: 2px;
}

.grid-line.horizontal {
  left: 0;
  right: 0;
  height: 2px;
}

.intersection {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #FFD700;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.golden-spiral {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M 0 100 Q 0 40 40 40 Q 70 40 70 20 Q 70 5 55 5 Q 40 5 40 20' fill='none' stroke='rgba(255,215,0,0.7)' stroke-width='1'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ---------- LICENSE COMPARE (Bài 15) ---------- */
.license-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.license-card {
  padding: var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
}

.license-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.license-card-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin: 0;
}

.license-card-short {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.license-card-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-md) 0;
}

.license-perms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.license-perm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
}

.license-perm-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.license-perm-value {
  font-weight: var(--fw-medium);
}

.license-perm.yes .license-perm-value {
  color: var(--success);
}

.license-perm.no .license-perm-value {
  color: var(--error);
}

@media (min-width: 640px) {
  .license-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- PORTFOLIO BUILDER (Bài 14) ---------- */
.portfolio-preview {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}

.portfolio-preview.portfolio-layout-minimal {
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.portfolio-preview.portfolio-layout-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.portfolio-preview.portfolio-layout-magazine {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.portfolio-item {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.portfolio-item:hover img {
  transform: scale(1.03);
}

.portfolio-layout-minimal .portfolio-item {
  aspect-ratio: 16 / 9;
}

.portfolio-layout-grid .portfolio-item {
  aspect-ratio: 1 / 1;
}

.portfolio-layout-magazine .portfolio-item-small {
  grid-column: span 1;
  aspect-ratio: 1 / 1;
}

.portfolio-layout-magazine .portfolio-item-medium {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.portfolio-layout-magazine .portfolio-item-large {
  grid-column: span 4;
  aspect-ratio: 16 / 9;
}

.portfolio-info {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.portfolio-info-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--primary);
  margin-bottom: var(--space-xs);
}

.portfolio-info-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 640px) {
  .portfolio-preview.portfolio-layout-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .portfolio-preview.portfolio-layout-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- WORKFLOW (Bài 13) ---------- */
.workflow-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.workflow-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.workflow-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.workflow-progress-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-align: right;
}

.workflow-info {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
}

.workflow-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-bottom: var(--space-xs);
}

.workflow-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.workflow-tasks-wrap {
  padding: var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.workflow-tasks-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-sm);
}

.workflow-tasks {
  padding-left: var(--space-lg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.workflow-tasks li {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
  list-style: disc;
}

/* ---------- COLOR SPACE (Bài 12) ---------- */
.color-space-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.color-space-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.color-space-info-label {
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.color-space-info-value {
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.color-space-info-desc {
  padding-top: var(--space-sm);
  margin-top: var(--space-xs);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- HISTOGRAM (Bài 11) ---------- */
.histogram-status {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
}

/* ---------- MACRO INFO (Bài 10) ---------- */
.macro-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
}

.macro-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.macro-info-item strong {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--primary);
}

.macro-info-status {
  flex: 1 1 100%;
  padding-top: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* ---------- ONE-LIGHT SETUP (Bài 09) ---------- */
.one-light-ratio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.one-light-ratio-label {
  color: var(--text-muted);
}

.one-light-ratio-value {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--primary);
}

.one-light-ratio-status {
  color: var(--text);
}

/* ---------- HORIZON LINE (Bài 08) ---------- */
.horizon-demo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform var(--transition);
  margin-bottom: var(--space-md);
}

.horizon-demo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.horizon-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #FFD700;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  transition: top var(--transition), transform var(--transition);
  z-index: 2;
}

/* ---------- DOF INFO (Bài 07) ---------- */
.dof-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
}

.dof-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.dof-info-item strong {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--primary);
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 640px) {
  .sensor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .sensor-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}