/* Cro Article Module
 * Block 12
 * ------------------------------------------------------------------------------------------------------------------ */

 /* Base Styles */
.cro-article.article-section {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #1a202c;
line-height: 1.65;
padding: 4rem 1rem;
}

.cro-article .article-container {
max-width: 800px;
margin: 0 auto;
}

/* Article Header */
.cro-article .article-header {
border-bottom: 1px solid var(--gray-200);
padding-bottom: 2rem;
margin-bottom: 2rem;
}

.cro-article .article-category {
display: inline-block;
background-color: #e6f6ff;
color: #0077B5;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}

.cro-article .article-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
margin: 0;
}

.cro-article .article-subtitle {
font-size: 1.25rem;
color: var(--gray-600);
margin-top: 0.5rem;
font-weight: 400;
}

/* Meta Information */
.cro-article .article-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}

.cro-article .author-info {
display: flex;
align-items: center;
}

.cro-article .author-avatar {
width: 48px;
height: 48px;
background-color: #0077B5;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 600;
font-size: 1.1rem;
margin-right: 1rem;
}

.cro-article .author-name {
font-weight: 600;
color: var(--gray-700);
display: flex;
align-items: center;
}

.cro-article .linkedin-badge {
margin-left: 0.5rem;
display: inline-flex;
align-items: center;
transition: transform 0.2s ease;
}

.cro-article .linkedin-badge:hover {
transform: scale(1.1);
}

.cro-article .publish-details {
font-size: 0.875rem;
color: var(--gray-500);
}

.cro-article .dot-separator {
margin: 0 0.5rem;
}

/* Live Engagement Counter */
.cro-article .live-engagement {
display: flex;
align-items: center;
font-size: 0.875rem;
color: var(--gray-700);
font-weight: 500;
}

.cro-article .live-icon {
width: 8px;
height: 8px;
background-color: var(--success);
border-radius: 50%;
margin-right: 0.5rem;
animation: pulse__cro-article 1.5s infinite;
}

@keyframes pulse__cro-article {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.cro-article #viewer-count {
min-width: 20px;
text-align: center;
}

/* Summary Section */
.cro-article .summary-section {
background-color: var(--gray-100);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}

.cro-article .summary-title {
font-size: 1.25rem;
font-weight: 600;
margin-top: 0;
margin-bottom: 1rem;
}

.cro-article .summary-content {
max-height: 100px;
overflow: hidden;
position: relative;
transition: max-height 0.5s ease-in-out;
}

.cro-article .summary-content.expanded {
max-height: 500px;
}

.cro-article .summary-content p {
margin: 0;
color: var(--gray-600);
}

.cro-article .toggle-summary-btn {
background: none;
border: none;
color: #0077B5;
font-weight: 600;
cursor: pointer;
padding: 0;
margin-top: 1rem;
}

.cro-article .toggle-summary-btn:hover {
text-decoration: underline;
}

/* Article Content */
.cro-article .article-content {
font-size: 1.125rem;
color: var(--gray-700);
}

.cro-article .article-content p,
.cro-article .article-content ul,
.cro-article .article-content blockquote {
margin-bottom: 1.5rem;
}

.cro-article .article-content h3 {
font-size: 1.75rem;
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 1rem;
}

.cro-article .article-content ul {
list-style-type: disc;
padding-left: 2rem;
}

.cro-article .article-content li {
margin-bottom: 0.75rem;
}

.cro-article .article-quote,
.cro-article blockquote {
border-left: 4px solid #0077B5;
padding-left: 1.5rem;
margin: 2rem 0;
font-style: italic;
color: var(--gray-600);
}

.cro-article .article-quote p,
.cro-article blockquote p {
margin: 0;
font-size: 1.25rem;
}

.cro-article .article-image-container {
margin: 2.5rem 0;
}

.cro-article .article-image {
width: 100%;
height: auto;
border-radius: 8px;
opacity: 0.2;
transition: opacity 0.5s ease-in-out;
}

.cro-article .article-image.loaded {
opacity: 1;
}

.cro-article .article-image-container figcaption {
text-align: center;
font-size: 0.875rem;
color: var(--gray-500);
margin-top: 0.75rem;
}

/* Responsive Design */
@media (max-width: 768px) {
.cro-article .article-title {
font-size: 2rem;
}
.cro-article .article-subtitle {
font-size: 1.125rem;
}
.cro-article .article-meta {
flex-direction: column;
align-items: flex-start;
}
}

/* ------------------------------------------------------------------------------------------------------------------ *