/* Creative (cat 4) - V13: 5 blocks with VISUAL SWATCHES (May 1 2026) */
:root {
  --crv-principle: #e11d48;
  --crv-principle-bg: hsl(348, 78%, 97%);
  --crv-ba: #ea580c;
  --crv-ba-bg: hsl(20, 78%, 97%);
  --crv-palette: #a21caf;
  --crv-palette-bg: hsl(290, 70%, 97%);
  --crv-typo: #b45309;
  --crv-typo-bg: hsl(35, 78%, 96%);
  --crv-insp: #7c3aed;
  --crv-insp-bg: hsl(258, 88%, 97%);
}

.design-principle,.before-after,.color-palette,.typography-spec,.inspiration{
  margin-block:18px;border-radius:8px;padding:clamp(14px,3vw,18px);
  font-size:15px;line-height:1.6;
}
.design-principle .content-block-header,
.before-after .content-block-header,
.color-palette .content-block-header,
.typography-spec .content-block-header,
.inspiration .content-block-header{
  font-weight:600;margin-block-end:12px;display:flex;align-items:center;gap:8px;
}

/* 1. design-principle (CORAL PINK with subtle gradient) */
.design-principle{
  background:linear-gradient(135deg,var(--crv-principle-bg) 0%,#fff 100%);
  border-left:4px solid var(--crv-principle);
}
.design-principle .content-block-header{color:var(--crv-principle)}
.design-principle strong{color:color-mix(in srgb,var(--crv-principle) 80%,black)}

/* 2. before-after (SUNSET ORANGE with grid) */
.before-after{
  background:var(--crv-ba-bg);
  border-left:4px solid var(--crv-ba);
}
.before-after .content-block-header{color:var(--crv-ba)}
.before-after .ba-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block:10px;
}
.before-after .ba-before,.before-after .ba-after{
  padding:14px;border-radius:6px;background:#fff;
}
.before-after .ba-before{border-left:3px solid #f87171}
.before-after .ba-after{border-left:3px solid #4ade80}

/* 3. color-palette (DEEP MAGENTA with VISUAL SWATCHES) */
.color-palette{
  background:var(--crv-palette-bg);
  border-left:4px solid var(--crv-palette);
}
.color-palette .content-block-header{color:var(--crv-palette)}
.color-palette strong{color:color-mix(in srgb,var(--crv-palette) 80%,black)}
.color-palette .palette-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-block:12px;
}
.color-palette .swatch{
  background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 3px hsla(290,30%,30%,0.1);
}
.color-palette .swatch-tile{
  height:60px;background:var(--swatch-color,#ccc);
  border-bottom:1px solid hsla(0,0%,0%,0.1);
}
.color-palette .swatch-info{
  padding:8px 12px;text-align:center;
}
.color-palette .swatch-info strong{
  display:block;font-family:monospace;font-size:13px;color:#0f172a;
}
.color-palette .swatch-info span{
  display:block;font-size:11px;color:#666;margin-block-start:2px;
}

/* 4. typography-spec (GOLD with hierarchy demo) */
.typography-spec{
  background:var(--crv-typo-bg);
  border-left:4px solid var(--crv-typo);
}
.typography-spec .content-block-header{color:var(--crv-typo)}
.typography-spec strong{color:color-mix(in srgb,var(--crv-typo) 85%,black)}
.typography-spec ul{margin-block:8px;padding-inline-start:24px;background:#fff;padding-block:14px;border-radius:4px}

/* 5. inspiration (LAVENDER with italic pull-quote) */
.inspiration{
  background:var(--crv-insp-bg);
  border-left:4px double var(--crv-insp);
  padding-inline-start:clamp(20px,4vw,28px);
}
.inspiration .content-block-header{color:var(--crv-insp)}
.inspiration strong{color:color-mix(in srgb,var(--crv-insp) 85%,black)}
.inspiration .insp-quote{
  font-style:italic;font-size:16px;color:#3f3f46;
  padding:10px 14px;background:#fff;border-radius:4px;
  border-inline-start:3px solid var(--crv-insp);margin-block:8px;
}

/* Phase 5 mask-image icons */
.design-principle .content-block-header::before,
.before-after .content-block-header::before,
.color-palette .content-block-header::before,
.typography-spec .content-block-header::before,
.inspiration .content-block-header::before{
  content:'';display:inline-block;width:18px;height:18px;
  background-color:currentColor;mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;flex-shrink:0;
}
.design-principle .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'/%3E%3C/svg%3E")}
.before-after .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'/%3E%3C/svg%3E")}
.color-palette .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01'/%3E%3C/svg%3E")}
.typography-spec .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E")}
.inspiration .content-block-header::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){
  .design-principle,.color-palette .swatch{transition:none}
}
@media (max-width:768px){
  .before-after .ba-grid{grid-template-columns:1fr}
}