/* Articles Grid */
.ikbase-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.ikbase-article-item {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ikbase-article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.ikbase-article-item a {
    text-decoration: none;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ikbase-article-item h3 {
    margin-bottom: 10px;
    color: #1e73be;
}

.ikbase-article-item p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.ikbase-arrow {
    color: #1e73be;
    font-weight: bold;
    transition: color 0.3s ease;
    margin-left: 10px;
}

.ikbase-article-item:hover .ikbase-arrow {
    color: #0056b3;
}

/* Article Body */
.ikbase-article-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Responsive article media
 *
 * Editor toolbar media is intentionally supported whether it has legacy
 * `.ikbase-image` classes or standard WordPress `wp-image-*` markup. Keep
 * these selectors scoped to article/FAQ content so layout icons and category
 * artwork are not affected.
 */
.ikbase-plugin .ikbase-article-body,
.ikbase-plugin .ikbase-article-content-body,
.ikbase-plugin .hcm-article-body,
.ikbase-plugin .ikbase-faq-content,
.ikbase-plugin .prose {
    min-width: 0;
    max-width: 100%;
}

.ikbase-plugin .ikbase-article-body img,
.ikbase-plugin .ikbase-article-content-body img,
.ikbase-plugin .hcm-article-body img,
.ikbase-plugin .ikbase-faq-content img,
.ikbase-plugin .prose img,
.ikbase-plugin .ikbase-article-body video,
.ikbase-plugin .ikbase-article-content-body video,
.ikbase-plugin .hcm-article-body video,
.ikbase-plugin .ikbase-faq-content video,
.ikbase-plugin .prose video {
    display: block;
    width: auto;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
}

.ikbase-plugin .ikbase-article-body figure,
.ikbase-plugin .ikbase-article-content-body figure,
.ikbase-plugin .hcm-article-body figure,
.ikbase-plugin .ikbase-faq-content figure,
.ikbase-plugin .prose figure,
.ikbase-plugin .ikbase-article-body .wp-caption,
.ikbase-plugin .ikbase-article-content-body .wp-caption,
.ikbase-plugin .hcm-article-body .wp-caption,
.ikbase-plugin .ikbase-faq-content .wp-caption,
.ikbase-plugin .prose .wp-caption,
.ikbase-plugin .ikbase-image-container,
.ikbase-plugin .ikbase-gif-container,
.ikbase-plugin .ikbase-video-container {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.ikbase-plugin .ikbase-article-body iframe,
.ikbase-plugin .ikbase-article-content-body iframe,
.ikbase-plugin .hcm-article-body iframe,
.ikbase-plugin .ikbase-faq-content iframe,
.ikbase-plugin .prose iframe {
    max-width: 100% !important;
}

.ikbase-plugin .ikbase-article-body img:not(.emoji):not(.avatar),
.ikbase-plugin .ikbase-article-content-body img:not(.emoji):not(.avatar),
.ikbase-plugin .hcm-article-body img:not(.emoji):not(.avatar),
.ikbase-plugin .ikbase-faq-content img:not(.emoji):not(.avatar),
.ikbase-plugin .prose img:not(.emoji):not(.avatar) {
    cursor: zoom-in;
}

.ikbase-style-default .ikbase-article-header-card {
    max-width: 800px;
    margin: 0 auto 18px;
    padding: 0 0 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: none;
}

.ikbase-style-default .ikbase-article-header-card .ikbase-article-title {
    margin-bottom: 12px;
}

/* Article Feedback */
.ikbase-feedback-container {
    margin: 40px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.ikbase-like-dislike {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.ikbase-like,
.ikbase-dislike {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ikbase-like:hover,
.ikbase-dislike:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.ikbase-like.disabled,
.ikbase-dislike.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ikbase-like.voted {
    background: #28a745;
    color: #fff;
}

.ikbase-dislike.voted {
    background: #dc3545;
    color: #fff;
}

/* View Count */
.ikbase-view-container {
    text-align: right;
    color: #666;
    font-size: 14px;
    margin-top: 20px;
}

/* Related Articles */
.ikbase-related-articles {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.ikbase-style-default .ikbase-helpful,
.ikbase-style-default .ikbase-also-read {
    max-width: 800px;
    margin: 22px auto 0;
    padding: 22px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    box-shadow: none;
}

.ikbase-style-default .ikbase-helpful-title,
.ikbase-style-default .ikbase-also-read h4 {
    margin: 0 0 14px;
    color: #111827;
    font-size: var(--ikbase-h4-size);
}

.ikbase-style-default .ikbase-helpful-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ikbase-style-default .ikbase-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #dbe3ee;
    border-radius: 7px;
    color: #1f2937;
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    font-weight: 650;
}

.ikbase-style-default .ikbase-helpful-btn:hover,
.ikbase-style-default .ikbase-helpful-btn:focus {
    border-color: #bfdbfe;
    color: #1e73be;
    background: #eff6ff;
    outline: none;
}

.ikbase-style-default .ikbase-also-read-list {
    display: grid;
    gap: 10px;
}

.ikbase-style-default .ikbase-also-read-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #1f2937;
    text-decoration: none;
    font-weight: 650;
}

.ikbase-style-default .ikbase-also-read-item a:hover,
.ikbase-style-default .ikbase-also-read-item a:focus {
    border-color: #bfdbfe;
    color: #1e73be;
    background: #eff6ff;
    outline: none;
}

/* Shared Core article actions: intentionally layout-agnostic so Pro reuses it. */
.ikbase-article-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 24px;width:100%;max-width:860px;margin:28px auto 0;padding:18px 0;border-block:1px solid #e5e7eb;font-family:var(--ikbase-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
.ikbase-article-share,.ikbase-article-actions>.ikbase-helpful{display:flex;align-items:center;gap:12px;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.ikbase-article-actions-title,.ikbase-article-actions .ikbase-helpful-title{margin:0;color:#263244;font-size:14px!important;font-weight:650;line-height:1.3!important;text-align:left;white-space:nowrap}
.ikbase-article-share-buttons,.ikbase-article-actions .ikbase-helpful-actions{display:flex;align-items:center;justify-content:flex-start;gap:7px}
.ikbase-action-btn,.ikbase-article-actions .ikbase-helpful-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:34px;margin:0;padding:6px 10px;border:1px solid #d9e0e8;border-radius:6px;background:#fff;box-shadow:none;color:#263244;cursor:pointer;font-family:var(--ikbase-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:13px!important;font-weight:600;line-height:1.2!important;text-decoration:none;text-transform:none;letter-spacing:0;white-space:nowrap;transition:border-color .18s,background .18s,color .18s}
.ikbase-action-btn:hover,.ikbase-action-btn:focus-visible,.ikbase-article-actions .ikbase-helpful-btn:hover,.ikbase-article-actions .ikbase-helpful-btn:focus-visible{border-color:#9db7d4;background:#f6f9fc;color:#145a91;outline:none}
.ikbase-action-x{min-width:34px;color:#fff;background:#1f2937;border-color:#1f2937}.ikbase-action-facebook{color:#fff;background:#1877f2;border-color:#1877f2}.ikbase-action-x:hover,.ikbase-action-x:focus-visible,.ikbase-action-facebook:hover,.ikbase-action-facebook:focus-visible{color:#fff;filter:brightness(.94)}
.ikbase-action-btn .dashicons,.ikbase-article-actions .ikbase-helpful-btn .dashicons{width:14px;height:14px;font-size:14px!important;line-height:14px!important}.ikbase-article-actions .ikbase-helpful-message{position:absolute;margin-top:72px;padding:5px 8px;font-size:12px!important}
.ikbase-plugin .ikbase-article-actions .ikbase-article-actions-title,.ikbase-plugin .ikbase-article-actions .ikbase-helpful-title{font-size:14px!important;line-height:1.3!important}.ikbase-plugin .ikbase-article-actions .ikbase-action-btn,.ikbase-plugin .ikbase-article-actions .ikbase-helpful-btn{font-size:13px!important;line-height:1.2!important}.ikbase-plugin .ikbase-article-actions .dashicons{font-size:14px!important;line-height:14px!important}
@media(max-width:760px){.ikbase-article-actions{align-items:flex-start;flex-direction:column;gap:16px}.ikbase-article-share,.ikbase-article-actions>.ikbase-helpful{align-items:flex-start;flex-direction:column;gap:8px}}@media(max-width:420px){.ikbase-article-share-buttons{flex-wrap:wrap}}

/* Responsive Articles */
@media screen and (max-width: 768px) {
    .ikbase-articles-grid {
        grid-template-columns: 1fr;
    }
    
    .ikbase-article-body {
        padding: 15px;
    }
}