/* =============================================================================
   Content Studio — Author Box + Expert Review
   Hardcoded hex. High specificity. Beats Elementor.
   ============================================================================= */

/* ── Admin cards ─────────────────────────────────────────────────────────── */
.ck-no-authors { text-align: center; padding: 40px 20px; background: #f8f9fa; border-radius: 8px; border: 1px dashed #ccc; grid-column: 1/-1; }
.ck-authors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.ck-author-card { background: #fff; border-radius: 16px; padding: 20px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: transform .2s; }
.ck-author-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.ck-author-card .ck-author-avatar img { border-radius: 50%; width: 80px; height: 80px; object-fit: cover; }
.ck-author-name { margin: 12px 0; font-weight: bold; font-size: 16px; }
.ck-author-name small { display: block; color: #666; font-size: 12px; font-weight: normal; }
.ck-author-title-preview { display: block; color: #35AB7D; font-size: 12px; font-weight: 500; }
.ck-modal { display: none; position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); }
.ck-modal-content { background: #fff; margin: 5% auto; padding: 30px; width: 90%; max-width: 700px; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.2); position: relative; max-height: 85vh; overflow-y: auto; }
.ck-modal-close { position: absolute; right: 20px; top: 15px; font-size: 28px; cursor: pointer; color: #999; }
.ck-form-group { margin-bottom: 20px; }
.ck-form-group label { display: block; margin-bottom: 8px; font-weight: 600; }
.ck-avatar-preview { display: flex; align-items: center; gap: 15px; }
#ck-avatar-preview-img { width: 60px; height: 60px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid #ddd; }
.ck-form-actions { display: flex; gap: 10px; margin-top: 20px; }

/* ── Author spotlight box ────────────────────────────────────────────────── */
aside.cs-author-box-wrapper {
    display: block !important;
    box-sizing: border-box;
	border: 1px solid #BAE9D9 !important;
	background: #FAFFFB !important;
	padding: 24px !important;
	border-radius: 24px !important;
}
aside.cs-author-box-wrapper * { box-sizing: border-box; }

.cs-author-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
}

.cs-author-box .cs-author-box-title {
    color: #030C09 !important;
    font-size: 22px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    font-family: var(--cs-font-heading);
}

.cs-author-info-wrapper {
    display: flex !important;
    flex-direction: column !important;
	background: #FFFFFF !important;
	padding: 24px !important;
	border-radius: 16px !important;
    gap: 24px !important;
    width: 100% !important;
	box-shadow: 0 12px 24px -4px #0000000F !important;
}

.cs-author-info-header{
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
}

.cs-author-avatar {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
}

.cs-author-avatar img,
.cs-author-avatar .avatar {
    border-radius: 50% !important;
    width: 50px !important; 
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    border: 1px solid #F4F4F4 !important;
    object-fit: cover !important;
    display: block !important;
	margin: 0 !important;
}

.cs-author-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 10px !important;
}

.cs-author-name-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 !important;
    max-width: 70% !important;
}

.cs-author-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #030C09 !important; 
    font-family: var(--cs-font-body);
    line-height: 26px !important;
    word-break: break-word !important;
}

.cs-author-title {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #4A4D4C !important;
    margin: 0 !important;
    line-height: 16px !important;
    font-family: var(--cs-font-body);
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 180px !important;
}

.cs-author-social-links {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.cs-social-link {
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #35AB7D !important;
    transition: color 0.2s ease;
}

.cs-social-link:hover {
    color: #2d8f67 !important;
}

.cs-social-link svg {
    width: 20px !important;
    height: 20px !important;
    color: #35AB7D !important;
}

/* ── Featured article ───────────────────────────────────────────────────── */
.cs-featured-article { margin: 40px 0 30px !important; padding: 24px !important; background: #F4F4F4 !important; border-radius: 24px !important; display: flex; flex-direction: column; gap: 24px; }
.cs-featured-heading { color: #030C09 !important; font-size: 22px !important; font-weight: 600 !important; line-height: 28px !important; font-family: var(--cs-font-heading); }
.cs-featured-item { display: flex !important; align-items: flex-start; gap: 8px; flex-direction: row !important; }
.cs-featured-article-image { width: 25% !important; height: auto !important; object-fit: cover !important; }
.cs-featured-article-image img{ margin: 0 !important; }
.cs-featured-item-content { display: flex; flex-direction: column; gap: 12px; }
.cs-featured-item-title { font-size: 15px !important; font-weight: 600 !important; margin: 0 0 8px !important; color: #030C09 !important; }
.cs-featured-item-title a { text-decoration: none !important; color: #030C09 !important; }
.cs-featured-item-title a:hover { color: #35AB7D !important; }
.cs-featured-item-excerpt { font-size: 14px !important; color: #4A4D4C !important; margin: 0 !important; line-height: 20px !important; }

/* ── Expert review box ───────────────────────────────────────────────────── */
aside.cs-expert-review-wrapper {
    display: block !important;
    background: #FAFFFB !important;
    border: 1px solid #BAE9D9 !important;
    border-radius: 24px !important;
    margin: 36px 0 24px !important;
    box-sizing: border-box;
}
aside.cs-expert-review-wrapper * { box-sizing: border-box; }

.cs-expert-review-inner {
	display: flex !important; flex-direction: column !important;
	gap: 24px !important;
    padding: 24px !important;
    width: 100% !important;
}
.cs-expert-review-heading span {
    font-size: 22px !important; font-weight: 600 !important;
    color: #030C09 !important; padding: 0 !important; line-height: 28px !important; font-family: var(--cs-font-heading);
}
.cs-expert-review-heading svg { width: 16px !important; height: 16px !important; flex-shrink: 0; color: #B8860B !important; }
.cs-expert-review-body {
	width: 100% !important;
    margin: 0 0 20px !important;
	background: #FFFFFF !important; box-shadow: 0 12px 24px -4px #0000000F !important;
	border-radius: 16px !important; padding: 24px !important; display: flex !important;
	flex-direction: column !important; gap: 24px;
}
.cs-trust-card {
    display: flex !important; flex-direction: row !important;
    gap: 12px !important;
}
.cs-trust-avatar { flex-shrink: 0 !important; width: 52px !important; height: 52px !important; }
.cs-trust-avatar img { width: 52px !important; height: 52px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; }
.cs-trust-avatar-placeholder {
    width: 52px !important; height: 52px !important; border-radius: 50% !important;
    background: #F4F4F4 !important; display: flex !important; align-items: center !important;
    justify-content: center !important; color: #4A4D4C !important;
}
.cs-trust-avatar-placeholder svg { width: 26px !important; height: 26px !important; display: block !important; }
.cs-trust-info { display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1 !important; min-width: 0 !important; }
.cs-trust-badge{ display: flex !important; gap: 8px !important; }
.cs-trust-role-label { display: block !important; font-size: 12px !important; font-weight: 400 !important; color: #4A4D4C !important; line-height: 16px !important; font-family: var(---cs-font-body); }
.cs-trust-badge svg{ color: #35AB7D !important; }
.cs-trust-name { display: block !important; font-size: 16px !important; font-weight: 500 !important; color: #030C09 !important; line-height: 26px !important; font-family: var(---cs-font-body); }
.cs-trust-title { display: block !important; font-size: 13px !important; font-weight: 500 !important; color: #555 !important; }
.cs-trust-info-wrapper{ display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; }
.cs-trust-credentials { display: block !important; font-size: 14px !important; color: #252726 !important; line-height: 20px !important; font-family: var(---cs-font-body); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.cs-featured-article{ padding: 16px !important; }
	.cs-featured-heading{ font-size: 20px !important; line-height: 24px !important; }
	.cs-featured-item{ flex-direction: column !important; }
	.cs-featured-article-image{ width: 100% !important; }
	.cs-expert-review-heading span{ font-size: 20px !important; line-height: 24px !important; }
    .cs-author-box { flex-direction: column !important; gap: 16px !important; padding: 16px !important; }
	.cs-author-info-wrapper{ flex-wrap: wrap !important; }
    .cs-author-info { flex-wrap: wrap !important; gap: 8px !important; }
	.cs-author-name-wrapper { max-width: 100% !important; }
	.cs-author-title{ max-width: 100% !important; }
    .cs-author-header { flex-direction: column !important; align-items: center !important; }
    .cs-author-footer { flex-direction: column !important; align-items: center !important; }
    .cs-author-dates { justify-content: center !important; }
    .cs-social-links { justify-content: center !important; }
    .cs-expert-review-inner { padding: 16px !important; }
    .cs-expert-review-body { flex-direction: column !important; }
    .cs-trust-card { flex: 1 1 100% !important; }
}