/* ============================================
   Blog Page Styles
   ============================================ */

/* ============================================
   Hero Section - Matching Home Page Style
   ============================================ */
.blog-page .hero-section {
    background: var(--gradient-hero, linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%));
    padding: var(--space-16, 8rem) 0;
    position: relative;
    overflow: hidden;
}

.blog-page .hero-section.hero-dark {
    background: var(--gradient-hero, linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%));
}

.blog-page .hero-content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

.blog-page .hero-title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-6);
    background: linear-gradient(135deg, var(--color-text-primary, #fff) 0%, var(--color-accent-lime, #D6F08D) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-page .hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary, #a0a0b0);
    margin-bottom: var(--space-8);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Blog Index Page */

/* Card link wrapper - ensures entire card is clickable */
.blog-page a.text-decoration-none {
    display: block;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* Make sure the anchor captures all clicks */
.blog-page a.text-decoration-none * {
    pointer-events: none;
}

/* Re-enable pointer events only for actual interactive elements if needed */
.blog-page a.text-decoration-none {
    pointer-events: auto;
}

.blog-page .article-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(26, 26, 46, 0.5);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.blog-page .article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: var(--color-accent-lime, #D6F08D);
}

.blog-page .article-card .card-title {
    color: var(--color-accent-lime, #D6F08D);
}

.blog-page .article-card:hover .card-title {
    color: #fff;
}

.blog-page .article-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.blog-page .article-placeholder {
    height: 200px;
    background: linear-gradient(145deg, rgba(37, 37, 64, 0.6) 0%, rgba(26, 26, 46, 0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary, #707080);
    border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
}

.blog-page .article-placeholder svg {
    opacity: 0.5;
    color: var(--color-text-tertiary, #707080);
}

/* Ensure "Read more" link doesn't interfere with card click */
.blog-page .article-card .btn-link {
    color: var(--color-accent-lime, #D6F08D);
}

/* Pagination */
.blog-page .pagination .page-link {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.blog-page .pagination .page-item.active .page-link {
    background-color: var(--color-accent-lime, #D6F08D);
    border-color: var(--color-accent-lime, #D6F08D);
    color: #0a0a0f;
}

.blog-page .pagination .page-link:hover {
    background-color: rgba(214, 240, 141, 0.2);
    border-color: var(--color-accent-lime, #D6F08D);
}

/* Blog Detail Page */
.blog-article {
    min-height: 60vh;
}

.blog-article .article-header h1 {
    color: var(--color-accent-lime, #D6F08D);
}

.blog-article .article-featured-image img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}

.blog-article .article-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.blog-article .article-content h2,
.blog-article .article-content h3,
.blog-article .article-content h4 {
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-article .article-content p {
    margin-bottom: 1.5rem;
}

.blog-article .article-content a {
    color: var(--color-accent-lime, #D6F08D);
}

.blog-article .article-content a:hover {
    color: #fff;
}

.blog-article .article-content pre {
    background: #0a0a0f;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.blog-article .article-content code {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9em;
}

.blog-article .article-content blockquote {
    border-left: 4px solid var(--color-accent-lime, #D6F08D);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}

.blog-article .article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.blog-article .article-content ul,
.blog-article .article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.blog-article .article-content li {
    margin-bottom: 0.5rem;
}

.blog-article .article-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Article Meta - compact inline display for date | author | read time */
.blog-article .article-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-size: var(--font-size-sm);
}

.blog-article .article-meta .meta-separator {
    margin: 0 0.5rem;
    opacity: 0.5;
}

/* Ensure article header hero-title uses the lime color */
.blog-article .article-header .hero-title {
    color: var(--color-accent-lime, #D6F08D);
    background: none;
    -webkit-text-fill-color: var(--color-accent-lime, #D6F08D);
}

/* ============================================
   Hide empty PageBuilder editable areas on live site
   This removes the blue/dark bar that appears when
   editable areas have no content
   ============================================ */

/* Force wrapper divs to have no background/spacing when they only contain PageBuilder areas */
.blog-article .article-additional-content,
.blog-article .article-sidebar {
    background: transparent !important;
    min-height: 0 !important;
}

/* Make the editable area wrappers invisible when not in admin mode */
body:not(.ktc-admin-mode) .blog-article .article-additional-content [data-kentico-editable-area],
body:not(.ktc-admin-mode) .blog-article .article-sidebar [data-kentico-editable-area],
body:not(.ktc-admin-mode) .blog-article .article-additional-content .ktc-editable-area,
body:not(.ktc-admin-mode) .blog-article .article-sidebar .ktc-editable-area {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* When there are no widgets, hide the wrapper completely */
body:not(.ktc-admin-mode) .blog-article .article-additional-content:not(:has(.ktc-widget)),
body:not(.ktc-admin-mode) .blog-article .article-sidebar:not(:has(.ktc-widget)) {
    display: none !important;
}

/* Hide wrapper divs that contain only empty editable areas */
.blog-article .article-additional-content:empty,
.blog-article .article-sidebar:empty {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Target the Kentico editable area elements directly */
.blog-article [data-kentico-editable-area]:empty,
.blog-article .ktc-editable-area:empty {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Hide editable areas that contain only empty widget zones */
.blog-article .article-additional-content:has([data-kentico-widget-zone]:empty),
.blog-article .article-additional-content:has(.ktc-widget-zone:empty) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-article .article-sidebar:has([data-kentico-widget-zone]:empty),
.blog-article .article-sidebar:has(.ktc-widget-zone:empty) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide wrapper when editable area inside has no sections/widgets */
.blog-article .article-additional-content:not(:has(.ktc-section)),
.blog-article .article-additional-content:not(:has(.ktc-widget)),
.blog-article .article-additional-content:not(:has([data-kentico-section])),
.blog-article .article-additional-content:not(:has([data-kentico-widget])) {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override any background colors on empty areas */
.blog-article .article-additional-content,
.blog-article .article-sidebar {
    background: transparent;
}

/* Ensure no blue/dark background shows through */
.blog-article [data-kentico-editable-area],
.blog-article .ktc-editable-area {
    background: transparent !important;
    border: none !important;
}

/* Remove any min-height that might cause visible space */
.blog-article .article-additional-content [data-kentico-widget-zone],
.blog-article .article-additional-content .ktc-widget-zone,
.blog-article .article-sidebar [data-kentico-widget-zone],
.blog-article .article-sidebar .ktc-widget-zone {
    min-height: 0 !important;
}

/* Force hide completely when no actual content exists */
.blog-article .article-additional-content:not(:has(*:not([data-kentico-editable-area]):not([data-kentico-widget-zone]):not(.ktc-editable-area):not(.ktc-widget-zone))) {
    display: none !important;
}

/* ============================================
   Additional PageBuilder overrides for blog
   Ensure consistent dark theme background
   ============================================ */

/* Override any Bootstrap or default backgrounds in article area */
.blog-article .card,
.blog-article .card-body {
    background-color: rgba(26, 26, 46, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Ensure the main article container has transparent/dark background */
.blog-article .container {
    background: transparent;
}

/* Override any Kentico PageBuilder admin preview backgrounds */
.blog-article div[class*="ktc-"],
.blog-article div[data-kentico-] {
    background-color: transparent !important;
}

/* Specifically target the common PageBuilder preview bar */
.blog-article .ktc-admin-ui,
.blog-article .ktc-preview-info,
.blog-article [class*="preview-bar"],
.blog-article [class*="admin-bar"] {
    display: none !important;
}

/* Ensure my-4 wrapper for additional content stays hidden when empty */
.blog-article .article-additional-content.my-4:has(:empty) {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   Blog Article Page - Content Layout
   ============================================ */

/* Article header - centered with max-width for readability */
.blog-article .article-header {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Article content - centered with comfortable reading width */
.blog-article .article-content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Article footer - match header width */
.blog-article .article-footer {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Featured image - can be wider than content */
.blog-article .article-featured-image {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Additional content area - centered */
.blog-article .article-additional-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Related Articles - proper card grid layout */
.blog-article .related-articles .row {
    display: flex;
    flex-wrap: wrap;
}

.blog-article .related-articles .col-md-4 {
    display: flex;
    margin-bottom: 1.5rem;
}

.blog-article .related-articles .article-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-article .related-articles .article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.blog-article .related-articles .article-card .card-img-top {
    height: 160px;
    object-fit: cover;
    width: 100%;
}

.blog-article .related-articles .article-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.blog-article .related-articles .article-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-article .related-articles .article-card .card-title a {
    color: var(--color-accent-lime, #D6F08D);
    text-decoration: none;
}

.blog-article .related-articles .article-card .card-title a:hover {
    color: #fff;
}

.blog-article .related-articles .article-card .card-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ============================================
   Responsive Hero Title Adjustments
   ============================================ */
@media (max-width: 991px) {
    .blog-page .hero-title {
        font-size: var(--font-size-5xl);
    }

    .blog-page .hero-subtitle {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 767px) {
    .blog-page .hero-title {
        font-size: var(--font-size-4xl);
    }

    .blog-page .hero-subtitle {
        font-size: var(--font-size-base);
    }
}