/* Published blog module (list cards + article iframe) */

.blogs-sm .card .card-body img {
    width: 100%;
    height: 200px;
    object-fit: initial;
    border-radius: 8px;
}

.blog-thumb-fallback {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    background: linear-gradient(135deg, #78c2ad 0%, #f3969a 100%);
    opacity: 0.85;
}

/* Cover-video preview: first frame (or writer poster) shown as a still, with a play badge. */
.blog-thumb-video-wrap {
    position: relative;
    display: block;
}

.blog-thumb-video {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    background: #000;
}

.blog-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    pointer-events: none;
}

.blogs-sm .post-entry-1-contents {
    padding-top: 14px;
}

.blog-category {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #78c2ad;
    margin-bottom: 6px;
}

.blogs-sm .post-entry-1-contents h2 {
    font-size: 1.15rem;
    line-height: 1.35;
    margin-bottom: 10px;
}

.blogs-sm .post-entry-1-contents h2 a {
    color: inherit;
    text-decoration: none;
}

.blogs-sm .post-entry-1-contents h2 a:hover {
    color: #78c2ad;
}

.blog-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #6c757d;
    font-size: 0.92rem;
    margin-bottom: 12px;
}

.blog-detail-section {
    min-height: 300px;
}

/* Blog list pager — same button style as the site's search-results pager */
.blog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

.blog-pager-status {
    color: #6c757d;
    font-size: 0.95rem;
}

/* Blog list search — reuses the site's form-control input and .login-primary button (same as the header Login button) */
.blog-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

/* Field wrapper holds the input + the absolutely-positioned suggestion dropdown. */
.blog-search-field {
    position: relative;
    flex: 1 1 auto;
}

/* Match the input height to the login button's natural height so the button
   doesn't stretch taller than the header Login button. */
.blog-search .form-control {
    padding: 20px 12px;
    width: 100%;
}

/* Autocomplete dropdown — overlays the cards below rather than pushing them down. */
.blog-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    max-height: 320px;
    overflow-y: auto;
    text-align: left;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.blog-suggestions .list-group-item {
    cursor: pointer;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

/* Highlighted row — mouse hover (CSS) and keyboard navigation (.active-suggestion). */
.blog-suggestions .list-group-item:hover,
.blog-suggestions .list-group-item.active-suggestion {
    background-color: #eef1fb;
}

.blog-suggestion-text {
    color: #333;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* margin-top pulls the buttons up to line them up with the input field.
   The transparent border reserves the same box as the outline Clear button
   below, so both buttons render at the exact same height. */
.blog-search .login-primary {
    margin: -17px 0 0 0;
    padding: 10px 16px;
    border: 1px solid transparent;
    white-space: nowrap;
    justify-content: center;
}

/* Clear button — outline variant of the Login button (same style used for Cancel across the site) */
.blog-search .blog-search-clear {
    border: 1px solid #3F51B5;
    background: transparent;
    color: #3F51B5;
}

/* ---- Like + Share row, bottom of the article ---- */
.blog-actions-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.blog-share-inline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.blog-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 1.5px solid #78c2ad;
    border-radius: 999px;
    background: #fff;
    color: #4a8f7c;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.blog-like-btn i {
    font-size: 18px;
    line-height: 1;
}

.blog-like-btn:hover:not(:disabled) {
    background: #78c2ad;
    color: #fff;
    box-shadow: 0 4px 12px rgba(120, 194, 173, 0.35);
}

/* Already liked — filled, non-interactive. */
.blog-like-btn.liked,
.blog-like-btn:disabled {
    background: #78c2ad;
    color: #fff;
    cursor: default;
    box-shadow: none;
}

.blog-like-count {
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.blog-like-btn.liked .blog-like-count,
.blog-like-btn:disabled .blog-like-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ---- "Please log in" confirmation modal ---- */
.blog-like-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf6f2;
    color: #78c2ad;
    font-size: 26px;
}

.blog-like-modal-actions {
    gap: 12px;
}

.blog-like-cancel {
    border: 1px solid #3F51B5;
    background: transparent;
    color: #3F51B5;
}

/* ---- Social share buttons ---- */
.blog-share-label {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.blog-share-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.blog-share-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.blog-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
}

.share-facebook { background: #1877F2; }
.share-twitter { background: #1DA1F2; }
.share-whatsapp { background: #25D366; }
.share-linkedin { background: #0A66C2; }
.share-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* ---- Reader comments ---- */
.blog-comments {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid #e6e6e6;
}

.blog-comments-title {
    font-weight: 700;
    color: #333;
    margin-bottom: 18px;
}

.blog-comments-count {
    display: inline-block;
    min-width: 24px;
    padding: 0 8px;
    margin-left: 6px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    background: #78c2ad;
    border-radius: 12px;
    vertical-align: middle;
}

.blog-comment-form {
    margin-bottom: 24px;
}

.blog-comment-input {
    width: 100%;
    border: 1px solid #d5d5d5;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    resize: vertical;
    min-height: 84px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blog-comment-input:focus {
    outline: none;
    border-color: #78c2ad;
    box-shadow: 0 0 0 3px rgba(120, 194, 173, 0.2);
}

.blog-comment-error {
    color: #c0392b;
    font-size: 13px;
    margin: 6px 2px 0;
}

.blog-comment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.blog-comment-signin {
    text-align: center;
    padding: 22px;
    margin-bottom: 24px;
    background: #f7f9f9;
    border: 1px dashed #cfd8d6;
    border-radius: 10px;
}

.blog-comment-signin p {
    margin-bottom: 12px;
}

.blog-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-comment-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.blog-comment-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #78c2ad;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Uploaded commenter photo fills the avatar circle; initials show only when there's no photo. */
.blog-comment-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.blog-comment-body {
    flex: 1 1 auto;
    min-width: 0;
}

.blog-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.blog-comment-author {
    font-weight: 600;
    color: #333;
}

.blog-comment-date {
    font-size: 12px;
    color: #999;
}

.blog-comment-text {
    margin: 0;
    color: #444;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.blog-comment-empty {
    padding: 18px 0;
    text-align: center;
}