@contentgrowth/content-widget 1.3.5 → 1.3.6

package/dist/styles.css

@@ -1019,7 +1019,7 @@ a.cg-card {
 }
 
 .cg-featured-card-inner {
-  padding: 2rem 2.5rem;
+  padding: var(--cg-card-padding, 2rem 2.5rem);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -1118,51 +1118,114 @@ a.cg-card {
   line-height: 1.7;
 }
 
-/* List & Steps Template - Styled like reference */
-.cg-featured-card-summary ul,
-.cg-featured-card-summary ol {
+/* ===== Structured Summary Items ===== */
+.cg-summary-items {
   margin: 0;
-  padding: 1.25rem 1.5rem;
-  padding-left: 1.5rem;
+  padding: 1rem 1.25rem;
   list-style: none;
   background: var(--cg-items-bg);
   border-radius: 8px;
 }
 
-.cg-featured-card-summary li {
-  margin-bottom: 1.25rem;
-  padding-left: 2.5rem;
+.cg-summary-items li {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
   line-height: 1.5;
-  position: relative;
 }
 
-.cg-featured-card-summary li:last-child {
+.cg-summary-items li:last-child {
   margin-bottom: 0;
 }
 
-/* Unordered list: simple bullets */
-.cg-featured-card-summary ul li::before {
-  content: '';
-  position: absolute;
-  left: 0.5rem;
-  top: 0.5rem;
-  width: 6px;
-  height: 6px;
+/* Hide the legacy counter ::before for new structure */
+.cg-summary-items li::before {
+  display: none;
+}
+
+/* Numbered badge */
+.cg-item-number {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
   background: var(--cg-primary);
-  border-radius: 50%;
+  color: white;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.125rem;
+}
+
+/* Content container */
+.cg-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Title styling */
+.cg-item-title {
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--cg-text);
+  margin-bottom: 0.125rem;
+}
+
+/* Description styling */
+.cg-item-description {
+  display: block;
+  font-size: 0.875rem;
+  color: var(--cg-text-secondary);
+  line-height: 1.5;
+}
+
+/* Quote Template */
+.cg-featured-card-summary blockquote {
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  border-left: 3px solid var(--cg-primary);
+  background: var(--cg-items-bg);
+  border-radius: 0 8px 8px 0;
+  font-style: italic;
+  font-size: 1.0625rem;
+  line-height: 1.7;
+  color: var(--cg-text);
 }
 
-/* Ordered list: numbered circles like reference */
+/* Legacy markdown list support (for old content) */
+.cg-featured-card-summary ul,
 .cg-featured-card-summary ol {
+  margin: 0;
+  padding: 1rem 1.25rem;
+  list-style: none;
+  background: var(--cg-items-bg);
+  border-radius: 8px;
   counter-reset: item;
 }
 
+.cg-featured-card-summary ul li,
+.cg-featured-card-summary ol li {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  line-height: 1.6;
+  font-size: 0.875rem;
+  color: var(--cg-text-secondary);
+}
+
+.cg-featured-card-summary ul li:last-child,
+.cg-featured-card-summary ol li:last-child {
+  margin-bottom: 0;
+}
+
+.cg-featured-card-summary ul li::before,
 .cg-featured-card-summary ol li::before {
   content: counter(item);
   counter-increment: item;
-  position: absolute;
-  left: 0;
-  top: 0;
+  flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
   background: var(--cg-primary);
@@ -1173,76 +1236,119 @@ a.cg-card {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 0.125rem;
 }
 
-/* List item content: bold title + description on next line */
 .cg-featured-card-summary li strong {
-  display: block;
   font-size: 0.9375rem;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--cg-text);
-  margin-bottom: 0.125rem;
 }
 
-/* Quote Template */
-.cg-featured-card-summary blockquote {
-  margin: 0;
-  padding: 1rem 1.25rem;
-  border-left: 3px solid var(--cg-primary);
-  background: var(--cg-bg-secondary);
-  border-radius: 0 8px 8px 0;
+/* Fix double numbering - Hide the legacy counter ::before for new structure */
+.cg-summary-items li::before {
+  content: none !important;
+  display: none !important;
+}
+
+/* Primary/Secondary Panels (Vertical Default) */
+.cg-card-primary {
+  display: flex;
+  flex-direction: column;
+}
+
+.cg-card-secondary {
+  margin-top: 1.5rem;
+}
+
+/* Global Quote Styling (Vertical & Horizontal) */
+.cg-card-secondary blockquote {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  font-weight: 500;
   font-style: italic;
-  font-size: 1rem;
-  color: var(--cg-text);
+  color: #1f2937;
+  border: none;
+  position: relative;
+  padding-left: 3.5rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 120px;
+  /* Ensure some height in vertical mode */
+}
+
+.cg-card-secondary blockquote::before {
+  content: '“';
+  position: absolute;
+  left: -0.5rem;
+  top: -1.5rem;
+  font-size: 6rem;
+  color: var(--cg-primary, #3b82f6);
+  font-family: serif;
+  line-height: 1;
 }
 
 /* ===== Horizontal Layout ===== */
-/* Horizontal layout: intro paragraph on left, list/remaining content on right */
+/* Horizontal layout: intro on left, bullets/quote on right */
+
+/* CTA default spacing (Vertical) */
+.cg-featured-card-cta {
+  margin-top: 1.5rem;
+}
 
 @media (min-width: 768px) {
   .cg-layout-horizontal .cg-featured-card-inner {
-    padding: 2.5rem 3rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    /* Two rows: Content and CTA */
+    gap: 1.5rem 3rem;
+    /* Row gap, Col gap */
+    padding: var(--cg-card-padding, 2.5rem 3rem);
+    align-items: start;
+    /* Align top by default, center handled by flex children */
   }
 
-  .cg-layout-horizontal .cg-featured-card-title {
-    font-size: 1.875rem;
+  .cg-layout-horizontal .cg-card-primary {
+    grid-column: 1;
+    grid-row: 1;
   }
 
-  /* Only the summary content gets the horizontal grid */
-  .cg-layout-horizontal .cg-featured-card-summary {
-    display: grid;
-    grid-template-columns: 1fr 1.25fr;
-    gap: 2.5rem;
-    align-items: stretch;
-    /* Changed from start to stretch for balance */
+  /* CTA moves to row 2, col 1 */
+  .cg-layout-horizontal .cg-featured-card-cta {
+    grid-column: 1;
+    grid-row: 2;
+    margin-top: 0;
+    align-self: end;
   }
 
-  /* First paragraph (intro) stays on left - improved styling */
-  .cg-layout-horizontal .cg-featured-card-summary>p:first-child {
-    grid-column: 1;
-    grid-row: 1;
-    margin: 0;
-    font-size: 1.0625rem;
-    line-height: 1.8;
-    color: var(--cg-text-secondary);
+  /* Secondary (Quote/List) spans both rows */
+  .cg-layout-horizontal .cg-card-secondary {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    margin-top: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    /* Vertically center the text */
+    height: 100%;
   }
 
-  /* List/quote goes on right */
-  .cg-layout-horizontal .cg-featured-card-summary ul,
-  .cg-layout-horizontal .cg-featured-card-summary ol,
-  .cg-layout-horizontal .cg-featured-card-summary blockquote {
-    grid-column: 2;
-    grid-row: 1;
-    margin: 0;
+  /* Specific Quote tweaks for Horizontal if needed */
+  /* Specific Quote tweaks for Horizontal if needed */
+  .cg-layout-horizontal .cg-card-secondary blockquote {
+    height: auto;
+    /* Let it wrap content so icon stays close */
   }
 
-  /* If no list, additional paragraphs go on right */
-  .cg-layout-horizontal .cg-featured-card-summary>p:not(:first-child) {
-    grid-column: 2;
-    margin: 0 0 0.75rem;
+  .cg-layout-horizontal .cg-featured-card-title {
+    font-size: 1.875rem;
+    margin-bottom: 1rem;
+  }
+
+  /* Reset margins for horizontal layout */
+  .cg-layout-horizontal .cg-featured-card-summary {
+    margin-bottom: 1.5rem;
   }
 }

package/dist/vue/FeaturedCard.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from 'vue';
-import { marked } from 'marked';
 import { ContentGrowthClient } from '../core/client';
 import type { ArticleWithContent, Article } from '../types';
 
+// Summary data interface for structured JSON format
+interface SummaryData {
+  type: 'classic' | 'list' | 'steps' | 'quote' | 'legacy';
+  text?: string;
+  intro?: string;
+  items?: Array<{ title: string; description: string }>;
+  quote?: string;
+  highlight?: string;
+}
+
 const props = withDefaults(defineProps<{
   // Pre-loaded article data (bypasses API fetch)
   article?: Article | ArticleWithContent;
@@ -24,6 +33,11 @@ const props = withDefaults(defineProps<{
   linkTarget?: string;
   ctaText?: string;
   layout?: 'vertical' | 'horizontal';
+  borderStyle?: 'none' | 'line' | 'dashed';
+  borderColor?: string;
+  cardBackground?: string;
+  itemsBackground?: string;
+  padding?: string;
   className?: string;
 }>(), {
   tags: () => [],
@@ -32,6 +46,10 @@ const props = withDefaults(defineProps<{
   showReadingTime: false,
   showAuthor: false,
   linkPattern: '/articles/{slug}',
+  borderStyle: 'none',
+  borderColor: '#e5e7eb',
+  cardBackground: 'none',
+  itemsBackground: '#f3f4f6',
   className: ''
 });
 
@@ -56,12 +74,27 @@ const articleUrl = computed(() => {
     .replace('{category}', loadedArticle.value.category || 'uncategorized');
 });
 
-// Render featured summary (or fallback to regular summary) as HTML
-const summaryHtml = computed(() => {
-  if (!loadedArticle.value) return '';
+// Parse featured summary - supports both JSON (new) and plain text (legacy)
+const summaryData = computed((): SummaryData | null => {
+  if (!loadedArticle.value) return null;
   const summaryText = (loadedArticle.value as any).featuredSummary || loadedArticle.value.summary;
-  if (!summaryText) return '';
-  return marked.parse(summaryText, { async: false }) as string;
+  if (!summaryText) return null;
+  
+  // Try to parse as JSON
+  try {
+    const parsed = JSON.parse(summaryText);
+    if (parsed.type) {
+      return parsed as SummaryData;
+    }
+  } catch (e) {
+    // Not JSON, treat as legacy markdown/plain text
+  }
+  
+  // Legacy fallback - render as plain text
+  return {
+    type: 'legacy',
+    text: summaryText
+  };
 });
 
 const readingTime = computed(() => {
@@ -76,11 +109,25 @@ const layoutClass = computed(() => {
   return layout !== 'vertical' ? `cg-layout-${layout}` : '';
 });
 
+const borderClass = computed(() => {
+  return props.borderStyle !== 'none' ? `cg-border-${props.borderStyle}` : '';
+});
+
 // Compute CTA text from prop or article data
 const ctaText = computed(() => {
   return props.ctaText || (loadedArticle.value as any)?.featuredCtaText || 'Read full story';
 });
 
+// Custom CSS properties
+const customStyles = computed(() => {
+  const styles: Record<string, string> = {};
+  if (props.borderColor !== '#e5e7eb') styles['--cg-card-border-color'] = props.borderColor;
+  if (props.cardBackground !== 'none') styles['--cg-card-bg'] = props.cardBackground;
+  if (props.itemsBackground !== '#f3f4f6') styles['--cg-items-bg'] = props.itemsBackground;
+  if (props.padding) styles['--cg-card-padding'] = props.padding;
+  return styles;
+});
+
 onMounted(async () => {
   // If article is already provided, no need to fetch
   if (props.article) {
@@ -141,37 +188,66 @@ onMounted(async () => {
     v-else
     :href="articleUrl"
     class="cg-widget cg-featured-card"
-    :class="[className, layoutClass]"
+    :class="[className, layoutClass, borderClass]"
+    :style="customStyles"
     data-cg-widget="featured-card"
     :target="linkTarget"
     :rel="linkTarget === '_blank' ? 'noopener noreferrer' : undefined"
   >
     <article class="cg-featured-card-inner">
-      <!-- Header with category badge -->
-      <div v-if="showCategory && loadedArticle.category" class="cg-featured-card-category">
-        <span class="cg-category-badge">{{ loadedArticle.category }}</span>
+      <div class="cg-card-primary">
+        <!-- Header with category badge -->
+        <div v-if="showCategory && loadedArticle.category" class="cg-featured-card-category">
+          <span class="cg-category-badge">{{ loadedArticle.category }}</span>
+        </div>
+
+        <!-- Title -->
+        <h3 class="cg-featured-card-title">{{ loadedArticle.title }}</h3>
+
+        <!-- Featured Summary - Intro Part -->
+        <div v-if="summaryData" class="cg-featured-card-summary">
+          <!-- Structured Intro -->
+          <p v-if="(summaryData.type === 'list' || summaryData.type === 'steps' || summaryData.type === 'quote') && summaryData.intro">
+            {{ summaryData.intro }}
+          </p>
+          
+          <!-- Classic type -->
+          <p v-else-if="summaryData.type === 'classic'">{{ summaryData.text }}</p>
+          
+          <!-- Legacy type -->
+          <p v-else-if="summaryData.type === 'legacy'">{{ summaryData.text }}</p>
+        </div>
+
+        <!-- Footer with meta info -->
+        <div v-if="showAuthor || showReadingTime" class="cg-featured-card-footer">
+          <span v-if="showAuthor" class="cg-featured-card-author">{{ loadedArticle.authorName }}</span>
+          <template v-if="showAuthor && showReadingTime">
+            <span class="cg-featured-card-separator">•</span>
+          </template>
+          <span v-if="showReadingTime" class="cg-featured-card-reading-time">{{ readingTime }} min read</span>
+        </div>
+
+
+      </div>
+
+      <!-- Right Panel - Structured Visual Items -->
+      <div v-if="summaryData && (summaryData.type === 'list' || summaryData.type === 'steps')" class="cg-card-secondary">
+        <ul class="cg-summary-items">
+          <li v-for="(item, index) in summaryData.items" :key="index">
+            <span class="cg-item-number">{{ index + 1 }}</span>
+            <div class="cg-item-content">
+              <strong class="cg-item-title">{{ item.title }}</strong>
+              <span class="cg-item-description">{{ item.description }}</span>
+            </div>
+          </li>
+        </ul>
       </div>
 
-      <!-- Title -->
-      <h3 class="cg-featured-card-title">{{ loadedArticle.title }}</h3>
-
-      <!-- Featured Summary -->
-      <div
-        v-if="summaryHtml"
-        class="cg-featured-card-summary"
-        v-html="summaryHtml"
-      ></div>
-
-      <!-- Footer with meta info -->
-      <div v-if="showAuthor || showReadingTime" class="cg-featured-card-footer">
-        <span v-if="showAuthor" class="cg-featured-card-author">{{ loadedArticle.authorName }}</span>
-        <template v-if="showAuthor && showReadingTime">
-          <span class="cg-featured-card-separator">•</span>
-        </template>
-        <span v-if="showReadingTime" class="cg-featured-card-reading-time">{{ readingTime }} min read</span>
+      <div v-else-if="summaryData && summaryData.type === 'quote'" class="cg-card-secondary">
+        <blockquote>{{ summaryData.quote }}</blockquote>
       </div>
 
-      <!-- Read more indicator -->
+      <!-- CTA (Bottom) -->
       <div class="cg-featured-card-cta">
         <span>{{ ctaText }}</span>
         <svg class="cg-featured-card-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">

package/dist/widget/widget.css

@@ -1 +1 @@
-.cg-content-list,.cg-content-viewer,.cg-widget{--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--cg-text)}.cg-content-list.cg-theme-dark,.cg-content-viewer.cg-theme-dark,.cg-widget[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-content-list *,.cg-content-viewer *,.cg-widget *{box-sizing:border-box;margin:0;padding:0}.cg-content-list,.cg-content-viewer,.cg-widget{width:100%;max-width:100%}.cg-content-list{width:100%}.cg-list-header{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.cg-display-toggle{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);font-size:0.875rem}.cg-display-toggle:hover{background:var(--cg-bg);border-color:var(--cg-primary)}.cg-display-toggle svg{width:20px;height:20px}.cg-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}@media (max-width:768px){.cg-content-grid{grid-template-columns:1fr}}.cg-content-rows{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.cg-content-rows .cg-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0.75rem 1.5rem;align-items:start}.cg-content-rows .cg-card-header{grid-column:1 / 2;grid-row:1;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:0}.cg-content-rows .cg-card-meta{grid-column:1 / 2;grid-row:2;margin-top:0}.cg-content-rows .cg-expand-btn{grid-column:2 / 3;grid-row:1;flex-shrink:0}.cg-content-rows .cg-card-title{margin:0;flex:1}.cg-content-rows .cg-card--compact,.cg-content-rows .cg-card--comfortable,.cg-content-rows .cg-card--spacious{width:100%}@media (max-width:768px){.cg-content-rows .cg-card{grid-template-columns:1fr;grid-template-rows:auto auto}.cg-content-rows .cg-expand-btn{grid-column:1;grid-row:1;justify-self:end}}.cg-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);padding:1.5rem;cursor:pointer;transition:var(--cg-transition);display:block}a.cg-card{text-decoration:none;color:inherit}.cg-card--compact{padding:1rem}.cg-card--compact .cg-card-title{font-size:1rem;line-height:1.4}.cg-card--compact .cg-card-meta{font-size:0.75rem}.cg-card--comfortable{padding:1.5rem}.cg-card--comfortable .cg-card-title{font-size:1.125rem;line-height:1.5}.cg-card--comfortable .cg-card-meta{font-size:0.875rem}.cg-card--spacious{padding:2rem}.cg-card--spacious .cg-card-title{font-size:1.25rem;line-height:1.6}.cg-card--spacious .cg-card-meta{font-size:0.875rem;margin-top:0.75rem}.cg-card:hover{box-shadow:var(--cg-shadow-lg);border-color:var(--cg-primary)}.cg-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.cg-card-title{font-size:1.25rem;font-weight:600;color:var(--cg-text);line-height:1.4;flex:1}.cg-expand-btn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;color:var(--cg-text-secondary);cursor:pointer;transition:var(--cg-transition)}.cg-expand-btn:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-card-summary{margin-bottom:1rem;padding:1rem;background:var(--cg-bg-secondary);border-radius:8px}.cg-card-summary p{color:var(--cg-text-secondary);font-size:0.9375rem;line-height:1.6}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.cg-tag{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:999px;font-size:0.75rem;font-weight:500}.cg-card-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-meta-item{display:flex;align-items:center;gap:0.375rem}.cg-meta-item svg{width:14px;height:14px;flex-shrink:0}.cg-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.5rem 0}.cg-btn-prev,.cg-btn-next{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-btn-prev:hover:not(:disabled),.cg-btn-next:hover:not(:disabled){background:var(--cg-primary-hover);box-shadow:var(--cg-shadow-lg)}.cg-btn-prev:disabled,.cg-btn-next:disabled{opacity:0.5;cursor:not-allowed}.cg-page-info{color:var(--cg-text-secondary);font-size:0.875rem}.cg-content-viewer{width:100%;background:var(--cg-bg);min-height:400px}.cg-viewer-header{margin-bottom:2rem;background:var(--cg-bg)}.cg-back-btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-viewer-content{max-width:800px;margin:0 auto;background:var(--cg-bg);padding:1rem}.cg-content-header{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1.5rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-meta{display:flex;flex-wrap:wrap;gap:1.5rem;color:var(--cg-text-secondary);font-size:0.9375rem}.cg-content-body{color:var(--cg-text);line-height:1.75}.cg-content-body h2{font-size:1.875rem;font-weight:700;margin:2rem 0 1rem;color:var(--cg-text)}.cg-content-body h3{font-size:1.5rem;font-weight:600;margin:1.5rem 0 0.75rem;color:var(--cg-text)}.cg-content-body p{margin-bottom:1.25rem}.cg-content-body ul,.cg-content-body ol{margin-bottom:1.25rem;padding-left:1.5rem}.cg-content-body li{margin-bottom:0.5rem}.cg-content-body a{color:var(--cg-primary);text-decoration:underline}.cg-content-body a:hover{color:var(--cg-primary-hover)}.cg-content-body code{padding:0.125rem 0.375rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:4px;font-size:0.875em;font-family:'Courier New',monospace}.cg-content-body pre{padding:1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;overflow-x:auto;margin-bottom:1.25rem}.cg-content-body pre code{padding:0;background:none;border:none}.cg-content-body blockquote{padding-left:1rem;border-left:4px solid var(--cg-primary);margin:1.25rem 0;font-style:italic;color:var(--cg-text-secondary)}.cg-content-body img{max-width:100%;height:auto;border-radius:8px;margin:1.25rem 0}.cg-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s ease;--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}.cg-modal--active{opacity:1;pointer-events:auto}.cg-modal[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);cursor:pointer}.cg-modal-content{position:relative;max-width:900px;max-height:90vh;margin:5vh auto;background:var(--cg-bg);border-radius:var(--cg-radius);overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);z-index:10;opacity:1 !important}.cg-modal-close{position:sticky;top:1rem;right:1rem;float:right;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:50%;color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);z-index:10}.cg-modal-close:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-modal-body{padding:2rem;background:var(--cg-bg);min-height:200px}.cg-loading,.cg-viewer-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-spinner{width:48px;height:48px;border:4px solid var(--cg-border);border-top-color:var(--cg-primary);border-radius:50%;animation:cg-spin 0.8s linear infinite;margin-bottom:1rem}@keyframes cg-spin{to{transform:rotate(360deg)}}.cg-loading p,.cg-viewer-loading p{color:var(--cg-text-secondary)}.cg-error,.cg-viewer-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-error svg,.cg-viewer-error svg{color:#ef4444;margin-bottom:1rem}.cg-error p,.cg-viewer-error p{color:var(--cg-text);margin-bottom:1.5rem}.cg-retry-btn{padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-retry-btn:hover{background:var(--cg-primary-hover)}.cg-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-empty-state svg{color:var(--cg-text-secondary);margin-bottom:1rem}.cg-empty-state p{color:var(--cg-text-secondary);margin-top:1rem}.cg-articles-grid.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.cg-articles-grid.cg-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.cg-articles-grid.cg-featured-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.cg-articles-grid.cg-featured-cards-grid .cg-featured-card{height:100%}@media (max-width:768px){.cg-articles-grid.cg-grid{grid-template-columns:1fr}.cg-articles-grid.cg-featured-cards-grid{grid-template-columns:1fr;gap:1.5rem}}.cg-article-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);overflow:hidden;transition:var(--cg-transition)}.cg-article-card:hover{box-shadow:var(--cg-shadow-lg);transform:translateY(-2px)}.cg-card-link{display:block;text-decoration:none;color:inherit}.cg-card-content{padding:1.5rem}.cg-display-compact .cg-card-content{padding:1rem}.cg-display-spacious .cg-card-content{padding:2rem}.cg-card-category{margin-bottom:0.75rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:9999px;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.cg-card-title{font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:0.75rem;color:var(--cg-text)}.cg-display-compact .cg-card-title{font-size:1.1rem}.cg-display-spacious .cg-card-title{font-size:1.5rem}.cg-card-summary{color:var(--cg-text-secondary);line-height:1.6;margin-bottom:1rem;font-size:0.95rem}.cg-card-meta{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-meta-separator{color:var(--cg-border)}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem}.cg-tag{padding:0.25rem 0.75rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:9999px;font-size:0.75rem;color:var(--cg-text-secondary)}.cg-content-header-back{margin-bottom:2rem}.cg-back-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);text-decoration:none;font-size:0.875rem;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-back-btn svg{width:20px;height:20px}.cg-content-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-category{margin-bottom:1rem}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-summary{font-size:1.125rem;line-height:1.6;color:var(--cg-text-secondary);margin-bottom:1.5rem}.cg-ai-summary{background:linear-gradient(to right,#eff6ff,#dbeafe);border-left:4px solid #3b82f6;border-radius:0 var(--cg-radius) var(--cg-radius) 0;padding:1rem 1.25rem;margin-bottom:1.5rem}.cg-theme-dark .cg-ai-summary{background:linear-gradient(to right,#1e3a5f,#1e40af);border-left-color:#60a5fa}.cg-ai-summary-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}.cg-ai-summary-icon{width:1rem;height:1rem;color:#2563eb}.cg-theme-dark .cg-ai-summary-icon{color:#60a5fa}.cg-ai-summary-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#1d4ed8}.cg-theme-dark .cg-ai-summary-label{color:#93c5fd}.cg-ai-summary-text{font-size:0.875rem;font-style:italic;line-height:1.6;color:#374151}.cg-theme-dark .cg-ai-summary-text{color:#d1d5db}.cg-content-meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-info-separator{color:var(--cg-border)}.cg-content-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}.cg-content-body{max-width:100%;color:var(--cg-text)}.cg-empty-state p{color:var(--cg-text-secondary);font-size:1.125rem}.cg-featured-card{--cg-card-border-color:#e5e7eb;--cg-card-bg:transparent;--cg-items-bg:#f3f4f6;display:block;text-decoration:none;color:inherit;border-radius:12px;background:var(--cg-card-bg);border:none;transition:all 0.2s ease;overflow:hidden}.cg-featured-card.cg-border-line{border:1px solid var(--cg-card-border-color)}.cg-featured-card.cg-border-dashed{border:2px dashed var(--cg-card-border-color)}.cg-featured-card:hover{border-color:var(--cg-primary)}.cg-featured-card-inner{padding:2rem 2.5rem;height:100%;display:flex;flex-direction:column}.cg-featured-card-category{margin-bottom:1.25rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:#eff6ff;color:var(--cg-primary);border-radius:4px;font-size:0.75rem;font-weight:600}.cg-featured-card-title{margin:0 0 1rem;font-size:1.625rem;font-weight:800;line-height:1.25;color:var(--cg-text);letter-spacing:-0.02em}.cg-featured-card-summary{font-size:1rem;line-height:1.7;color:var(--cg-text-secondary);margin-bottom:1.5rem;flex-grow:1}.cg-featured-card-summary p{margin:0 0 1rem}.cg-featured-card-summary p:last-child{margin:0}.cg-featured-card-summary strong,.cg-featured-card-summary b{font-weight:700;color:var(--cg-text)}.cg-featured-card-footer{display:flex;align-items:center;font-size:0.875rem;font-weight:500;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-featured-card-separator{margin:0 0.5rem;opacity:0.4}.cg-featured-card-cta{display:inline-flex;align-items:center;gap:0.375rem;font-size:1rem;font-weight:600;color:var(--cg-primary);text-decoration:none;transition:all 0.2s ease;align-self:flex-start}.cg-featured-card:hover .cg-featured-card-cta{gap:0.625rem;text-decoration:underline}.cg-featured-card-arrow{transition:transform 0.2s ease}.cg-featured-card:hover .cg-featured-card-arrow{transform:translateX(3px)}.cg-featured-card-summary>p:first-child{font-size:1rem;line-height:1.7}.cg-featured-card-summary ul,.cg-featured-card-summary ol{margin:0;padding:1.25rem 1.5rem;padding-left:1.5rem;list-style:none;background:var(--cg-items-bg);border-radius:8px}.cg-featured-card-summary li{margin-bottom:1.25rem;padding-left:2.5rem;line-height:1.5;position:relative}.cg-featured-card-summary li:last-child{margin-bottom:0}.cg-featured-card-summary ul li::before{content:'';position:absolute;left:0.5rem;top:0.5rem;width:6px;height:6px;background:var(--cg-primary);border-radius:50%}.cg-featured-card-summary ol{counter-reset:item}.cg-featured-card-summary ol li::before{content:counter(item);counter-increment:item;position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;background:var(--cg-primary);color:white;border-radius:4px;font-size:0.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}.cg-featured-card-summary li strong{display:block;font-size:0.9375rem;font-weight:700;color:var(--cg-text);margin-bottom:0.125rem}.cg-featured-card-summary blockquote{margin:0;padding:1rem 1.25rem;border-left:3px solid var(--cg-primary);background:var(--cg-bg-secondary);border-radius:0 8px 8px 0;font-style:italic;font-size:1rem;color:var(--cg-text)}@media (min-width:768px){.cg-layout-horizontal .cg-featured-card-inner{padding:2.5rem 3rem}.cg-layout-horizontal .cg-featured-card-title{font-size:1.875rem}.cg-layout-horizontal .cg-featured-card-summary{display:grid;grid-template-columns:1fr 1.25fr;gap:2.5rem;align-items:stretch}.cg-layout-horizontal .cg-featured-card-summary>p:first-child{grid-column:1;grid-row:1;margin:0;font-size:1.0625rem;line-height:1.8;color:var(--cg-text-secondary);display:flex;flex-direction:column;justify-content:center}.cg-layout-horizontal .cg-featured-card-summary ul,.cg-layout-horizontal .cg-featured-card-summary ol,.cg-layout-horizontal .cg-featured-card-summary blockquote{grid-column:2;grid-row:1;margin:0}.cg-layout-horizontal .cg-featured-card-summary>p:not(:first-child){grid-column:2;margin:0 0 0.75rem}}
+.cg-content-list,.cg-content-viewer,.cg-widget{--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--cg-text)}.cg-content-list.cg-theme-dark,.cg-content-viewer.cg-theme-dark,.cg-widget[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-content-list *,.cg-content-viewer *,.cg-widget *{box-sizing:border-box;margin:0;padding:0}.cg-content-list,.cg-content-viewer,.cg-widget{width:100%;max-width:100%}.cg-content-list{width:100%}.cg-list-header{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.cg-display-toggle{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);font-size:0.875rem}.cg-display-toggle:hover{background:var(--cg-bg);border-color:var(--cg-primary)}.cg-display-toggle svg{width:20px;height:20px}.cg-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}@media (max-width:768px){.cg-content-grid{grid-template-columns:1fr}}.cg-content-rows{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.cg-content-rows .cg-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0.75rem 1.5rem;align-items:start}.cg-content-rows .cg-card-header{grid-column:1 / 2;grid-row:1;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:0}.cg-content-rows .cg-card-meta{grid-column:1 / 2;grid-row:2;margin-top:0}.cg-content-rows .cg-expand-btn{grid-column:2 / 3;grid-row:1;flex-shrink:0}.cg-content-rows .cg-card-title{margin:0;flex:1}.cg-content-rows .cg-card--compact,.cg-content-rows .cg-card--comfortable,.cg-content-rows .cg-card--spacious{width:100%}@media (max-width:768px){.cg-content-rows .cg-card{grid-template-columns:1fr;grid-template-rows:auto auto}.cg-content-rows .cg-expand-btn{grid-column:1;grid-row:1;justify-self:end}}.cg-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);padding:1.5rem;cursor:pointer;transition:var(--cg-transition);display:block}a.cg-card{text-decoration:none;color:inherit}.cg-card--compact{padding:1rem}.cg-card--compact .cg-card-title{font-size:1rem;line-height:1.4}.cg-card--compact .cg-card-meta{font-size:0.75rem}.cg-card--comfortable{padding:1.5rem}.cg-card--comfortable .cg-card-title{font-size:1.125rem;line-height:1.5}.cg-card--comfortable .cg-card-meta{font-size:0.875rem}.cg-card--spacious{padding:2rem}.cg-card--spacious .cg-card-title{font-size:1.25rem;line-height:1.6}.cg-card--spacious .cg-card-meta{font-size:0.875rem;margin-top:0.75rem}.cg-card:hover{box-shadow:var(--cg-shadow-lg);border-color:var(--cg-primary)}.cg-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.cg-card-title{font-size:1.25rem;font-weight:600;color:var(--cg-text);line-height:1.4;flex:1}.cg-expand-btn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;color:var(--cg-text-secondary);cursor:pointer;transition:var(--cg-transition)}.cg-expand-btn:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-card-summary{margin-bottom:1rem;padding:1rem;background:var(--cg-bg-secondary);border-radius:8px}.cg-card-summary p{color:var(--cg-text-secondary);font-size:0.9375rem;line-height:1.6}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.cg-tag{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:999px;font-size:0.75rem;font-weight:500}.cg-card-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-meta-item{display:flex;align-items:center;gap:0.375rem}.cg-meta-item svg{width:14px;height:14px;flex-shrink:0}.cg-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.5rem 0}.cg-btn-prev,.cg-btn-next{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-btn-prev:hover:not(:disabled),.cg-btn-next:hover:not(:disabled){background:var(--cg-primary-hover);box-shadow:var(--cg-shadow-lg)}.cg-btn-prev:disabled,.cg-btn-next:disabled{opacity:0.5;cursor:not-allowed}.cg-page-info{color:var(--cg-text-secondary);font-size:0.875rem}.cg-content-viewer{width:100%;background:var(--cg-bg);min-height:400px}.cg-viewer-header{margin-bottom:2rem;background:var(--cg-bg)}.cg-back-btn{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-viewer-content{max-width:800px;margin:0 auto;background:var(--cg-bg);padding:1rem}.cg-content-header{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1.5rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-meta{display:flex;flex-wrap:wrap;gap:1.5rem;color:var(--cg-text-secondary);font-size:0.9375rem}.cg-content-body{color:var(--cg-text);line-height:1.75}.cg-content-body h2{font-size:1.875rem;font-weight:700;margin:2rem 0 1rem;color:var(--cg-text)}.cg-content-body h3{font-size:1.5rem;font-weight:600;margin:1.5rem 0 0.75rem;color:var(--cg-text)}.cg-content-body p{margin-bottom:1.25rem}.cg-content-body ul,.cg-content-body ol{margin-bottom:1.25rem;padding-left:1.5rem}.cg-content-body li{margin-bottom:0.5rem}.cg-content-body a{color:var(--cg-primary);text-decoration:underline}.cg-content-body a:hover{color:var(--cg-primary-hover)}.cg-content-body code{padding:0.125rem 0.375rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:4px;font-size:0.875em;font-family:'Courier New',monospace}.cg-content-body pre{padding:1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:8px;overflow-x:auto;margin-bottom:1.25rem}.cg-content-body pre code{padding:0;background:none;border:none}.cg-content-body blockquote{padding-left:1rem;border-left:4px solid var(--cg-primary);margin:1.25rem 0;font-style:italic;color:var(--cg-text-secondary)}.cg-content-body img{max-width:100%;height:auto;border-radius:8px;margin:1.25rem 0}.cg-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s ease;--cg-primary:#3b82f6;--cg-primary-hover:#2563eb;--cg-bg:#ffffff;--cg-bg-secondary:#f9fafb;--cg-text:#1f2937;--cg-text-secondary:#6b7280;--cg-border:#e5e7eb;--cg-shadow:0 1px 3px rgba(0,0,0,0.1);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1);--cg-radius:12px;--cg-transition:all 0.2s ease;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}.cg-modal--active{opacity:1;pointer-events:auto}.cg-modal[data-theme="dark"]{--cg-primary:#60a5fa;--cg-primary-hover:#3b82f6;--cg-bg:#1f2937;--cg-bg-secondary:#111827;--cg-text:#f9fafb;--cg-text-secondary:#9ca3af;--cg-border:#374151;--cg-shadow:0 1px 3px rgba(0,0,0,0.3);--cg-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.5)}.cg-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);cursor:pointer}.cg-modal-content{position:relative;max-width:900px;max-height:90vh;margin:5vh auto;background:var(--cg-bg);border-radius:var(--cg-radius);overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);z-index:10;opacity:1 !important}.cg-modal-close{position:sticky;top:1rem;right:1rem;float:right;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:50%;color:var(--cg-text);cursor:pointer;transition:var(--cg-transition);z-index:10}.cg-modal-close:hover{background:var(--cg-primary);color:white;border-color:var(--cg-primary)}.cg-modal-body{padding:2rem;background:var(--cg-bg);min-height:200px}.cg-loading,.cg-viewer-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-spinner{width:48px;height:48px;border:4px solid var(--cg-border);border-top-color:var(--cg-primary);border-radius:50%;animation:cg-spin 0.8s linear infinite;margin-bottom:1rem}@keyframes cg-spin{to{transform:rotate(360deg)}}.cg-loading p,.cg-viewer-loading p{color:var(--cg-text-secondary)}.cg-error,.cg-viewer-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-error svg,.cg-viewer-error svg{color:#ef4444;margin-bottom:1rem}.cg-error p,.cg-viewer-error p{color:var(--cg-text);margin-bottom:1.5rem}.cg-retry-btn{padding:0.75rem 1.5rem;background:var(--cg-primary);color:white;border:none;border-radius:var(--cg-radius);font-weight:500;cursor:pointer;transition:var(--cg-transition)}.cg-retry-btn:hover{background:var(--cg-primary-hover)}.cg-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.cg-empty-state svg{color:var(--cg-text-secondary);margin-bottom:1rem}.cg-empty-state p{color:var(--cg-text-secondary);margin-top:1rem}.cg-articles-grid.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.cg-articles-grid.cg-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.cg-articles-grid.cg-featured-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.cg-articles-grid.cg-featured-cards-grid .cg-featured-card{height:100%}@media (max-width:768px){.cg-articles-grid.cg-grid{grid-template-columns:1fr}.cg-articles-grid.cg-featured-cards-grid{grid-template-columns:1fr;gap:1.5rem}}.cg-article-card{background:var(--cg-bg);border:1px solid var(--cg-border);border-radius:var(--cg-radius);overflow:hidden;transition:var(--cg-transition)}.cg-article-card:hover{box-shadow:var(--cg-shadow-lg);transform:translateY(-2px)}.cg-card-link{display:block;text-decoration:none;color:inherit}.cg-card-content{padding:1.5rem}.cg-display-compact .cg-card-content{padding:1rem}.cg-display-spacious .cg-card-content{padding:2rem}.cg-card-category{margin-bottom:0.75rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:var(--cg-primary);color:white;border-radius:9999px;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.cg-card-title{font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:0.75rem;color:var(--cg-text)}.cg-display-compact .cg-card-title{font-size:1.1rem}.cg-display-spacious .cg-card-title{font-size:1.5rem}.cg-card-summary{color:var(--cg-text-secondary);line-height:1.6;margin-bottom:1rem;font-size:0.95rem}.cg-card-meta{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-meta-separator{color:var(--cg-border)}.cg-card-tags{display:flex;flex-wrap:wrap;gap:0.5rem}.cg-tag{padding:0.25rem 0.75rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:9999px;font-size:0.75rem;color:var(--cg-text-secondary)}.cg-content-header-back{margin-bottom:2rem}.cg-back-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:var(--cg-bg-secondary);border:1px solid var(--cg-border);border-radius:var(--cg-radius);color:var(--cg-text);text-decoration:none;font-size:0.875rem;transition:var(--cg-transition)}.cg-back-btn:hover{background:var(--cg-bg);border-color:var(--cg-primary);color:var(--cg-primary)}.cg-back-btn svg{width:20px;height:20px}.cg-content-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--cg-border)}.cg-content-category{margin-bottom:1rem}.cg-content-title{font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem;color:var(--cg-text)}@media (max-width:768px){.cg-content-title{font-size:2rem}}.cg-content-summary{font-size:1.125rem;line-height:1.6;color:var(--cg-text-secondary);margin-bottom:1.5rem}.cg-ai-summary{background:linear-gradient(to right,#eff6ff,#dbeafe);border-left:4px solid #3b82f6;border-radius:0 var(--cg-radius) var(--cg-radius) 0;padding:1rem 1.25rem;margin-bottom:1.5rem}.cg-theme-dark .cg-ai-summary{background:linear-gradient(to right,#1e3a5f,#1e40af);border-left-color:#60a5fa}.cg-ai-summary-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}.cg-ai-summary-icon{width:1rem;height:1rem;color:#2563eb}.cg-theme-dark .cg-ai-summary-icon{color:#60a5fa}.cg-ai-summary-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#1d4ed8}.cg-theme-dark .cg-ai-summary-label{color:#93c5fd}.cg-ai-summary-text{font-size:0.875rem;font-style:italic;line-height:1.6;color:#374151}.cg-theme-dark .cg-ai-summary-text{color:#d1d5db}.cg-content-meta{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-info-separator{color:var(--cg-border)}.cg-content-tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}.cg-content-body{max-width:100%;color:var(--cg-text)}.cg-empty-state p{color:var(--cg-text-secondary);font-size:1.125rem}.cg-featured-card{--cg-card-border-color:#e5e7eb;--cg-card-bg:transparent;--cg-items-bg:#f3f4f6;display:block;text-decoration:none;color:inherit;border-radius:12px;background:var(--cg-card-bg);border:none;transition:all 0.2s ease;overflow:hidden}.cg-featured-card.cg-border-line{border:1px solid var(--cg-card-border-color)}.cg-featured-card.cg-border-dashed{border:2px dashed var(--cg-card-border-color)}.cg-featured-card:hover{border-color:var(--cg-primary)}.cg-featured-card-inner{padding:var(--cg-card-padding,2rem 2.5rem);height:100%;display:flex;flex-direction:column}.cg-featured-card-category{margin-bottom:1.25rem}.cg-category-badge{display:inline-block;padding:0.25rem 0.75rem;background:#eff6ff;color:var(--cg-primary);border-radius:4px;font-size:0.75rem;font-weight:600}.cg-featured-card-title{margin:0 0 1rem;font-size:1.625rem;font-weight:800;line-height:1.25;color:var(--cg-text);letter-spacing:-0.02em}.cg-featured-card-summary{font-size:1rem;line-height:1.7;color:var(--cg-text-secondary);margin-bottom:1.5rem;flex-grow:1}.cg-featured-card-summary p{margin:0 0 1rem}.cg-featured-card-summary p:last-child{margin:0}.cg-featured-card-summary strong,.cg-featured-card-summary b{font-weight:700;color:var(--cg-text)}.cg-featured-card-footer{display:flex;align-items:center;font-size:0.875rem;font-weight:500;color:var(--cg-text-secondary);margin-bottom:1rem}.cg-featured-card-separator{margin:0 0.5rem;opacity:0.4}.cg-featured-card-cta{display:inline-flex;align-items:center;gap:0.375rem;font-size:1rem;font-weight:600;color:var(--cg-primary);text-decoration:none;transition:all 0.2s ease;align-self:flex-start}.cg-featured-card:hover .cg-featured-card-cta{gap:0.625rem;text-decoration:underline}.cg-featured-card-arrow{transition:transform 0.2s ease}.cg-featured-card:hover .cg-featured-card-arrow{transform:translateX(3px)}.cg-featured-card-summary>p:first-child{font-size:1rem;line-height:1.7}.cg-summary-items{margin:0;padding:1rem 1.25rem;list-style:none;background:var(--cg-items-bg);border-radius:8px}.cg-summary-items li{display:flex;gap:0.75rem;margin-bottom:1rem;line-height:1.5}.cg-summary-items li:last-child{margin-bottom:0}.cg-summary-items li::before{display:none}.cg-item-number{flex-shrink:0;width:1.5rem;height:1.5rem;background:var(--cg-primary);color:white;border-radius:4px;font-size:0.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:0.125rem}.cg-item-content{flex:1;min-width:0}.cg-item-title{display:block;font-size:0.9375rem;font-weight:600;color:var(--cg-text);margin-bottom:0.125rem}.cg-item-description{display:block;font-size:0.875rem;color:var(--cg-text-secondary);line-height:1.5}.cg-featured-card-summary blockquote{margin:0;padding:1.25rem 1.5rem;border-left:3px solid var(--cg-primary);background:var(--cg-items-bg);border-radius:0 8px 8px 0;font-style:italic;font-size:1.0625rem;line-height:1.7;color:var(--cg-text)}.cg-featured-card-summary ul,.cg-featured-card-summary ol{margin:0;padding:1rem 1.25rem;list-style:none;background:var(--cg-items-bg);border-radius:8px;counter-reset:item}.cg-featured-card-summary ul li,.cg-featured-card-summary ol li{display:flex;gap:0.75rem;margin-bottom:1rem;line-height:1.6;font-size:0.875rem;color:var(--cg-text-secondary)}.cg-featured-card-summary ul li:last-child,.cg-featured-card-summary ol li:last-child{margin-bottom:0}.cg-featured-card-summary ul li::before,.cg-featured-card-summary ol li::before{content:counter(item);counter-increment:item;flex-shrink:0;width:1.5rem;height:1.5rem;background:var(--cg-primary);color:white;border-radius:4px;font-size:0.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:0.125rem}.cg-featured-card-summary li strong{font-size:0.9375rem;font-weight:600;color:var(--cg-text)}.cg-summary-items li::before{content:none !important;display:none !important}.cg-card-primary{display:flex;flex-direction:column}.cg-card-secondary{margin-top:1.5rem}.cg-card-secondary blockquote{font-size:1.5rem;line-height:1.4;font-weight:500;font-style:italic;color:#1f2937;border:none;position:relative;padding-left:3.5rem;margin:0;display:flex;flex-direction:column;justify-content:center;min-height:120px}.cg-card-secondary blockquote::before{content:'“';position:absolute;left:-0.5rem;top:-1.5rem;font-size:6rem;color:var(--cg-primary,#3b82f6);font-family:serif;line-height:1}.cg-featured-card-cta{margin-top:1.5rem}@media (min-width:768px){.cg-layout-horizontal .cg-featured-card-inner{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1.5rem 3rem;padding:var(--cg-card-padding,2.5rem 3rem);align-items:start}.cg-layout-horizontal .cg-card-primary{grid-column:1;grid-row:1}.cg-layout-horizontal .cg-featured-card-cta{grid-column:1;grid-row:2;margin-top:0;align-self:end}.cg-layout-horizontal .cg-card-secondary{grid-column:2;grid-row:1 / span 2;margin-top:0;display:flex;flex-direction:column;justify-content:center;height:100%}.cg-layout-horizontal .cg-card-secondary blockquote{height:auto}.cg-layout-horizontal .cg-featured-card-title{font-size:1.875rem;margin-bottom:1rem}.cg-layout-horizontal .cg-featured-card-summary{margin-bottom:1.5rem}}