/* Custom styles for MiniBlog - Premium Blog Typography System */

/* ============================================
   Root Variables & Design Tokens
   ============================================ */
:root {
    /* Font vars are set centrally in _fonts.html.
       Only layout & blog-content tokens live here. */
    --page-max-width: 72rem;
    --container-padding-x: 1rem;
    --container-padding-x-md: 2rem;
    /* Blog content tokens */
    --blog-accent: #4F46E5;
    --blog-accent-light: color-mix(in srgb, var(--blog-accent) 15%, transparent);
    --blog-text-primary: #1e293b;
    --blog-text-secondary: #475569;
    --blog-text-muted: #64748b;
    --blog-border: #e2e8f0;
    --blog-bg-subtle: #f8fafc;
    --blog-spacing-base: 1.5rem;
}

/* ============================================
   Base Typography
   ============================================ */
body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-display { font-family: var(--font-heading) !important; }
.font-heading { font-family: var(--font-heading) !important; }
.font-outfit { font-family: var(--font-heading) !important; }
.font-redhat { font-family: var(--font-body) !important; }
.site-header nav a { font-family: var(--font-heading) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; }
a { font-family: var(--font-body); }
article, .prose { font-family: var(--font-body) !important; }

/* Line clamp utilities */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================
   Article Base
   ============================================ */
article {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.8;
}

article h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

/* ============================================
   .prose - Premium Blog Content Typography
   ============================================ */
.prose {
    font-family: var(--font-body) !important;
    font-size: 1.125rem !important;
    line-height: 1.85 !important;
    color: var(--blog-text-secondary) !important;
    letter-spacing: -0.01em;
    word-spacing: 0.02em;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* --- Paragraphs --- */
.prose p {
    margin-bottom: var(--blog-spacing-base) !important;
    line-height: 1.85 !important;
    text-wrap: pretty;
}

.prose p:last-child {
    margin-bottom: 0 !important;
}

/* --- Headers - Visual Hierarchy with stylish underlines --- */
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    color: var(--blog-text-primary) !important;
    letter-spacing: -0.025em;
    text-wrap: balance;
    clear: none;
}

.prose h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 3rem 0 1.25rem;
}

.prose h1:first-child {
    margin-top: 0;
}

.prose h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--blog-border);
    position: relative;
    width: fit-content;
}

/* Accent underline for h2 — short colored segment at left */
.prose h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 3rem;
    height: 2px;
    background: var(--blog-accent);
}

.prose h3 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 2rem 0 0.75rem;
    color: var(--blog-text-primary) !important;
}

.prose h4 {
    font-weight: 600;
    line-height: 1.5;
    margin: 1.5rem 0 0.5rem;
    color: var(--blog-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

/* Extra spacing when heading follows content */
.prose p + h2,
.prose ul + h2,
.prose ol + h2,
.prose blockquote + h2 {
    margin-top: 3rem;
}

.prose p + h3,
.prose ul + h3,
.prose ol + h3 {
    margin-top: 2.5rem;
}

/* --- Text Formatting --- */
.prose strong,
.prose b {
    font-weight: 600;
    color: var(--blog-text-primary);
}

.prose em,
.prose i {
    font-style: italic;
}

.prose u {
    text-decoration: underline;
    text-decoration-color: var(--blog-accent);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.prose s,
.prose strike {
    text-decoration: line-through;
    text-decoration-color: var(--blog-text-muted);
}

.prose mark {
    background: var(--blog-accent-light);
    padding: 0.125em 0.25em;
    border-radius: 0.25em;
}

.prose span[style*="background-color"] {
    padding: 0.1em 0.25em;
    border-radius: 0.25em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.prose small {
    font-size: 0.875em;
    color: var(--blog-text-muted);
}

/* --- Links - Interactive & Accessible --- */
.prose a {
    color: var(--blog-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--blog-accent) 40%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: all 0.2s ease;
    border-bottom: none;
}

.prose a:hover {
    text-decoration-color: var(--blog-accent);
    text-decoration-thickness: 2px;
}

.prose a:focus-visible {
    outline: 2px solid var(--blog-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* External link indicator */
.prose a[href^="http"]::after {
    content: ' \2197';
    font-size: 0.75em;
    vertical-align: super;
    opacity: 0.6;
}

/* Don't show external icon for internal links */
.prose a[href*="{{ request.url.hostname if request is defined else '' }}"]::after {
    content: none;
}

/* --- Lists --- */
.prose ol,
.prose ul {
    margin: var(--blog-spacing-base) 0;
    padding-left: 1.75em;
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    position: relative;
    margin: 0.5rem 0;
    padding-left: 0.25em;
    line-height: 1.7;
}

.prose li > p {
    margin-bottom: 0.5rem;
}

/* --- Blockquotes - Elegant Citations --- */
.prose blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--blog-bg-subtle) 0%, transparent 100%);
    border-left: 4px solid var(--blog-accent);
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic;
    color: var(--blog-text-secondary);
}

.prose blockquote::before {
    content: '\201C';
    position: absolute;
    top: -0.25rem;
    left: 1rem;
    font-family: Georgia, serif;
    font-size: 4rem;
    color: var(--blog-accent);
    opacity: 0.15;
    line-height: 1;
}

.prose blockquote p {
    margin-bottom: 0.75rem !important;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.prose blockquote p:last-child {
    margin-bottom: 0 !important;
}

.prose blockquote footer,
.prose blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    color: var(--blog-text-muted);
}

.prose blockquote footer::before,
.prose blockquote cite::before {
    content: '\2014 ';
}

/* --- Images - Gallery Quality --- */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 2rem 0;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: zoom-in;
}

.prose img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Centered images (non-floated) */
.prose img:not([style*="float"]):not([data-float]) {
    margin-left: auto;
    margin-right: auto;
}

/* Floated image styling (legacy class-based) */
.prose img.note-float-left {
    float: left;
    margin: 0.5rem 2rem 1.5rem 0;
    max-width: 50%;
    shape-margin: 1rem;
}

.prose img.note-float-right {
    float: right;
    margin: 0.5rem 0 1.5rem 2rem;
    max-width: 50%;
    shape-margin: 1rem;
}

/* data-float attribute (from TipTap editor) */
.prose img[data-float="left"] {
    float: left;
    display: block;
    margin: 0.5rem 2rem 1.5rem 0;
    max-width: none;
    shape-margin: 1rem;
}

.prose img[data-float="right"] {
    float: right;
    display: block;
    margin: 0.5rem 0 1.5rem 2rem;
    max-width: none;
    shape-margin: 1rem;
}

/* Respect inline width from editor */
.prose img[style*="width"] {
    max-width: none;
}

/* Image caption (figure) */
.prose figure {
    margin: 2rem 0;
}

/* Floated figures (WordPress block images imported with data-float) */
.prose figure[data-float="left"] {
    float: left;
    margin: 0.5rem 2rem 1.5rem 0;
    max-width: 50%;
    shape-margin: 1rem;
}

.prose figure[data-float="right"] {
    float: right;
    margin: 0.5rem 0 1.5rem 2rem;
    max-width: 50%;
    shape-margin: 1rem;
}

.prose figure[data-float] img {
    margin-bottom: 0.75rem;
    width: 100%;
    height: auto;
}

.prose figure img {
    margin-bottom: 0.75rem;
}

.prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: var(--blog-text-muted);
    font-style: italic;
}

/* Clearfix for floated images */
.prose::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Code - Developer Friendly --- */
.prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--blog-bg-subtle);
    padding: 0.2em 0.4em;
    border-radius: 0.375rem;
    border: 1px solid var(--blog-border);
    color: var(--blog-text-primary);
}

.prose pre {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: #0f172a;
    border-radius: 0.75rem;
    overflow-x: auto;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.prose pre code {
    display: block;
    background: none;
    border: none;
    padding: 0;
    color: #e2e8f0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Horizontal Rules --- */
.prose hr {
    border: none;
    margin: 3rem auto;
    width: 80%;
    max-width: 200px;
    height: 0;
    position: relative;
}

.prose hr::before {
    content: '\2022 \2022 \2022';
    display: block;
    text-align: center;
    color: var(--blog-text-muted);
    font-size: 1rem;
    letter-spacing: 0.5em;
}

/* --- Tables - Modern clean look --- */
.prose table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.prose th,
.prose td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--blog-border);
}

.prose th {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--blog-text-primary);
    background: var(--blog-bg-subtle);
}

.prose tr:hover td {
    background: var(--blog-bg-subtle);
}

/* --- Selection Styling --- */
.prose ::selection {
    background: var(--blog-accent-light);
    color: var(--blog-text-primary);
}

/* --- Print Styles --- */
@media print {
    .prose {
        font-size: 12pt !important;
        line-height: 1.6 !important;
        color: #000 !important;
    }

    .prose h2::after {
        display: none;
    }

    .prose img {
        box-shadow: none;
    }

    .prose a {
        color: inherit;
        text-decoration: underline;
    }

    .prose a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
    }
}

/* Post and Page styling - Enhanced for better visibility */
article.max-w-4xl {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    transition: box-shadow 0.3s ease !important;
}

article.max-w-4xl:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

article header {
    padding-bottom: 1.5rem !important;
    margin-bottom: 2rem !important;
    border-bottom: 2px solid rgba(79, 70, 229, 0.1) !important;
}

article h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.5rem !important;
    color: #1e293b !important;
    font-weight: 700 !important;
}

article header .flex.items-center {
    margin-bottom: 1.5rem !important;
}

/* Comments styling - Enhanced for both templates */
.comment,
article .p-6.bg-white.rounded-lg.border.border-gray-100.shadow-sm {
    transition: all 0.2s ease;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 1.5rem;
}

.comment:hover,
article .p-6.bg-white.rounded-lg.border.border-gray-100.shadow-sm:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Enhanced comment styling for Minimalist V2 template */
article.max-w-4xl .space-y-6 > div {
    background-color: #fafbfc;
    border-radius: 0.5rem;
    border-left: 2px solid #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    transition: all 0.2s ease;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

article.max-w-4xl .space-y-6 > div:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

article.max-w-4xl .space-y-6 > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.01) 0%, transparent 50%);
    pointer-events: none;
}

/* Comment author and date styling for Minimalist V2 */
article.max-w-4xl .space-y-6 .flex.items-center {
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

article.max-w-4xl .space-y-6 .flex.items-center h4 {
    color: #334155;
    font-weight: 500;
    position: relative;
    padding-left: 0.5rem;
}

article.max-w-4xl .space-y-6 .flex.items-center h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60%;
    background-color: #d1d5db;
    border-radius: 2px;
}

article.max-w-4xl .space-y-6 .flex.items-center .text-sm {
    color: #64748b;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

article.max-w-4xl .space-y-6 .flex.items-center .text-sm::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'/%3E%3Cpath d='M13 7h-2v5.414l3.293 3.293 1.414-1.414L13 11.586z'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.7;
}

/* Comment content styling for Minimalist V2 */
article.max-w-4xl .space-y-6 > div p.text-gray-700 {
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

/* Nested replies styling for Minimalist V2 */
article.max-w-4xl .space-y-6 .pl-6 > div {
    border-left: 2px solid #e5e7eb;
    padding-left: 1rem;
    background-color: transparent;
    box-shadow: none;
}

article.max-w-4xl .space-y-6 .pl-6 > div:hover {
    transform: none;
    box-shadow: none;
}

article.max-w-4xl .space-y-6 .pl-6 > div::before {
    display: none;
}

/* Enhanced comment styling for Magazine template */
article.max-w-5xl .space-y-6 > div {
    background-color: #fafbfc;
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

article.max-w-5xl .space-y-6 > div:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

article.max-w-5xl .space-y-6 > div::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, transparent 60%, rgba(79, 70, 229, 0.01) 100%);
    border-radius: 0 0.5rem 0 50%;
    pointer-events: none;
}

/* Comment author and date styling for Magazine */
article.max-w-5xl .space-y-6 .flex.items-center {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

article.max-w-5xl .space-y-6 .flex.items-center h4 {
    color: #334155;
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

article.max-w-5xl .space-y-6 .flex.items-center h4::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm7.931 9h-3.032A5.013 5.013 0 0016 9.016 5.007 5.007 0 0014 5.016V1.969C17.279 2.926 19.988 5.637 19.931 11zm-1.099 2a6.983 6.983 0 01-1.828 3.415c-.346.386-.752.715-1.191.991-.439.273-.906.491-1.395.649-.486.156-.995.25-1.514.28a6.91 6.91 0 01-1.55-.123 6.989 6.989 0 01-1.436-.425 6.915 6.915 0 01-1.272-.716 7.042 7.042 0 01-1.054-.95 6.978 6.978 0 01-1.512-3.127H9.93a5.01 5.01 0 004 1.988 5.014 5.014 0 003.979-2.012h1.923zM10 2.181V5a5.006 5.006 0 00-4 2c-1.786 0-3.13.044-4 1.011.05-5.381 2.748-8.059 6-8.059 0 .001 1.954.062 2 2.229z'/%3E%3C/svg%3E");
    background-size: contain;
}

article.max-w-5xl .space-y-6 .flex.items-center .text-sm {
    color: #64748b;
    font-size: 0.8rem;
    font-style: normal;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
}

/* Comment content styling for Magazine */
article.max-w-5xl .space-y-6 > div p.text-gray-700 {
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

/* Nested replies styling for Magazine */
article.max-w-5xl .space-y-6 .border-l-2 > div {
    background-color: rgba(248, 250, 252, 0.5);
    border: none;
    box-shadow: none;
}

article.max-w-5xl .space-y-6 .border-l-2 > div:hover {
    transform: none;
    box-shadow: none;
}

article.max-w-5xl .space-y-6 .border-l-2 > div::after {
    display: none;
}

/* Homepage styling improvements */
.home-featured-title {
    font-size: 1.75rem !important;
}

.home-section-title {
    font-size: 1.5rem !important;
}

.home-post-title {
    font-size: 1.1rem !important;
}

.home-post-excerpt {
    font-size: 0.95rem !important;
}

.home-sidebar-title {
    font-size: 1.25rem !important;
}

.home-category-tag {
    font-size: 0.75rem !important;
}

/* Improve spacing on homepage */
.home-article-spacing {
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Enhance visual hierarchy */
.home-featured-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%) !important;
}

/* ============================================
   Comment Section Component
   ============================================ */

/* Section title */
.comment-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blog-text-primary);
    margin-bottom: 1.5rem;
}

.comment-count {
    font-size: 1rem;
    font-weight: 400;
    color: var(--blog-text-muted);
}

/* Comment list */
.comment-list {
    margin-bottom: 2rem;
}

/* Comment card */
.comment-card {
    padding: 0.5rem 0;
}

.comment-card--root {
    padding: 1.25rem;
    background-color: var(--blog-bg-subtle);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
}

.comment-card--root:hover {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Avatar */
.comment-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #eef2ff;
    color: var(--blog-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    user-select: none;
    letter-spacing: 0;
}

/* Author & date */
.comment-author {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--blog-text-primary);
    line-height: 1.3;
}

.comment-date {
    font-size: 0.75rem;
    color: var(--blog-text-muted);
    white-space: nowrap;
}

/* Content */
.comment-content {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--blog-text-secondary);
}

/* Pending badge */
.comment-pending-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #92400e;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 1rem;
}

/* Reply button */
.comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--blog-accent);
    padding: 0.25rem 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    opacity: 0.7;
}

.comment-reply-btn:hover {
    opacity: 1;
}

/* Reply form wrapper */
.comment-reply-form-wrapper {
    margin-top: 0.75rem;
    margin-left: 3rem;
    padding: 1rem 1.25rem;
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid var(--blog-border);
}

/* Nested replies */
.comment-replies {
    margin-top: 0.75rem;
    margin-left: 1.125rem;
    padding-left: 1.25rem;
    border-left: 2px solid #e5e7eb;
}

/* Empty state */
.comment-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--blog-text-muted);
    background-color: var(--blog-bg-subtle);
    border-radius: 0.75rem;
    border: 1px dashed var(--blog-border);
    margin-bottom: 2rem;
}

.comment-empty-icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.75rem;
    color: #cbd5e1;
}

.comment-empty p {
    font-size: 0.9375rem;
}

/* ACF insert content between comments & after comments */
.acf-insert-content,
.strona-acf-content {
    text-align: center;
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
}

.acf-insert-content a,
.strona-acf-content a {
    color: #dc2626;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.acf-insert-content a:hover,
.strona-acf-content a:hover {
    color: #991b1b;
}

/* Comment form wrapper */
.comment-form-wrapper {
    padding: 1.5rem;
    background: linear-gradient(to bottom right, var(--blog-bg-subtle), #f5f6f8);
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.comment-form-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--blog-text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Form inputs */
.comment-input {
    border-radius: 0.5rem;
    border: 1px solid var(--blog-border);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: white;
}

.comment-input:focus {
    border-color: var(--blog-accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    outline: none;
}

/* Buttons */
.comment-btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--blog-text-secondary);
    background-color: #f1f5f9;
    border: 1px solid var(--blog-border);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.comment-btn-secondary:hover {
    background-color: #e2e8f0;
    color: var(--blog-text-primary);
}

.comment-btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: white;
    background-color: var(--blog-accent);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.comment-btn-primary:hover {
    background-color: #4338ca;
}

.comment-btn-primary--lg {
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
}

/* Comment section wrapper */
.comment-section {
    position: relative;
}

/* Responsive */
@media (max-width: 640px) {
    .comment-card--root {
        padding: 1rem;
    }

    .comment-reply-form-wrapper {
        margin-left: 0;
    }

    .comment-avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    .comment-replies {
        margin-left: 0.5rem;
        padding-left: 0.75rem;
    }
}

/* Table of Contents styling */
article aside.mb-10.mx-8.md.mx-16.p-6.bg-gradient-to-br.from-gray-50.to-blue-50.rounded-lg.border.border-gray-200.shadow-sm {
    background: linear-gradient(135deg, #f8fafc, #eff6ff) !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(79, 70, 229, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    padding: 1.5rem !important;
    margin: 2rem auto !important;
}

/* Post footer styling */
article footer.mt-12.pt-8.border-t.border-gray-200 {
    margin-top: 3rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Language translations section */
article .mb-8.py-4.px-6.bg-gray-50.rounded-lg {
    background: linear-gradient(to bottom right, #f9fafb, #f3f4f6) !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* Form styling */
input, textarea {
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
}

input:focus, textarea:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

button {
    transition: all 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
}

/* Category cards */
.category-card {
    transition: all 0.2s ease;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Language dropdown styling - Improved for better UX */
.language-dropdown {
    position: relative;
}

.language-dropdown button {
    position: relative;
    z-index: 51;
}

#languageDropdownMenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    padding-top: 5px; /* Add padding to create space for mouse movement */
}

#languageDropdownMenu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Add a pseudo-element to create a larger hover area */
.language-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px; /* Height of the invisible bridge */
    z-index: 50;
}

/* Modern Hero Section Styling */
.hero-section {
    position: relative;
    background-color: #1E293B; /* Dark background color */
    background-image: linear-gradient(to bottom, #1E293B, #1E293B); /* Consistent color with header */
}

/* Background pattern for hero section */
.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* Ensure the hero section title stands out */
.hero-section h1 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

/* Improve the appearance of the article when it overlaps with the hero section */
article.max-w-4xl.relative.z-20 {
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

article.max-w-4xl.relative.z-20:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12), 0 18px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 0 !important;
        padding-bottom: 24px !important;
        margin-top: 0 !important;
    }

    .hero-section h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-section .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .hero-section .mb-6 {
        margin-bottom: 1rem !important;
    }

    article.max-w-4xl.relative.z-20 {
        margin-top: -8px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    article .mb-10.rounded-xl.overflow-hidden.-mt-8 {
        margin-top: -4px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .prose {
        font-size: 1.0625rem !important;
        line-height: 1.75 !important;
    }

    .prose > p:first-of-type {
        font-size: 1.125rem;
    }

    .prose h1 {
        font-size: 1.75rem;
    }

    .prose h2 {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .prose h3 {
        font-size: 1.25rem;
        margin-top: 1.5rem;
    }

    .prose blockquote {
        padding: 1rem 1.25rem;
        margin: 1.5rem 0;
    }

    .prose blockquote::before {
        font-size: 3rem;
    }

    .prose img[style*="float: left"],
    .prose img[style*="float: right"],
    .prose img[data-float="left"],
    .prose img[data-float="right"],
    .prose figure[data-float="left"],
    .prose figure[data-float="right"] {
        float: none !important;
        margin: 1.5rem auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .prose img {
        margin: 1.5rem auto;
    }

    .prose pre {
        padding: 1rem;
        border-radius: 0.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
    }
}


/* link niebieski aff */

a.one:link {
	color:#0000FF;
	text-decoration: underline;
	font-weight: bold;
	font-size: 21px !important;
}
a.one:visited {
	color:#800080;
	text-decoration: underline;
	font-weight: bold;
	font-size: 21px !important;
}
a.one:hover {
	color:#800080;
	text-decoration: underline;
	font-weight: bold;
	font-size: 21px !important;
}


/* akapit z linkiem czerwonym aff */

p.red {
    text-align: center;
		padding:20px 100px 20px 100px;
}


/* akapit z linkiem niebieskim aff (kom) */

p.blue {
    text-align: center;
		padding:30px 0 15px 0;
}


/* link czerwony aff */

a.two:link {
	color:#FF0000;
	text-decoration: underline;
	font-weight: bold;
	font-size: 26px !important;
}
a.two:visited {
	color:#D70201;
	text-decoration: underline;
	font-weight: bold;
	font-size: 26px !important;
}
a.two:hover {
	color:#D70201;
	text-decoration: underline;
	font-weight: bold;
	font-size: 26px !important;
}


/* Style popup close buttons to be simple X without background */
.popup-close-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #374151 !important; /* gray-700 - ciemniejszy szary jako domyślny kolor */
    font-size: 0.85rem !important; /* Mniejszy rozmiar fontu dla x */
    font-weight: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    z-index: 60 !important;
    position: absolute !important; /* Zachowujemy position: absolute dla pozycjonowania */
}

.popup-close-btn:hover {
    color: #1f2937 !important; /* gray-800 - jeszcze ciemniejszy na hover */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Rozjaśnienie tła overlay dla popupa */
.popup-container {
    background-color: rgba(0, 0, 0, 0.3) !important; /* Rozjaśnione czarne tło z przezroczystością */
}


/* Unified responsive page container for consistent alignment */
.page-container {
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
    width: 100%;
}
@media (min-width: 768px) {
    .page-container {
        padding-left: var(--container-padding-x-md);
        padding-right: var(--container-padding-x-md);
    }
}

/* When a full-bleed colored section is the first or last content block,
   shift the vertical spacing from the outer container to the section itself
   so spacing remains equal and filled with the section's background color. */
.page-container:has(.theme-newsroom > .section-full-bleed:first-child),
.page-container:has(> .section-full-bleed:first-child) {
    padding-top: 0;
}
.page-container:has(.theme-newsroom > .section-full-bleed:last-child),
.page-container:has(> .section-full-bleed:last-child) {
    padding-bottom: 0;
}
/* Avoid extra white gap below the very last full-bleed section */
.section-full-bleed:last-child { margin-bottom: 0; }


/* Newsroom – Bold theme (scoped) */
.theme-newsroom .nr-kicker { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 0.72rem; }
.theme-newsroom .nr-headline { line-height: 1.1; }
.theme-newsroom .nr-section-title { font-weight: 800; font-family: var(--font-heading); font-size: 1.125rem; padding-bottom: 0.25rem; border-bottom: 3px solid #111827; display: inline-block; }
.theme-newsroom .nr-pill { display: inline-block; padding: 0.25rem 0.5rem; background: #111827; color: #fff; border-radius: 9999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.theme-newsroom .nr-card { background: #fff; border: 1px solid #E5E7EB; }

/* Round all cards in Newsroom – Bold same as Boxed (rounded-lg => 0.5rem) */
/* Apply to generic white bordered cards and nr-card components */
.theme-newsroom .nr-card,
.theme-newsroom .bg-white.border,
.theme-newsroom .bg-white.border-gray-200 {
  border-radius: 0.5rem; /* Tailwind rounded-lg */
  overflow: hidden; /* clip images/content to rounded corners */
}
/*.theme-newsroom .nr-divider { border-color: #111827; }*/
.theme-newsroom a { text-decoration: none; }
.theme-newsroom a:hover { text-decoration: none; }
/*.theme-newsroom a:focus { outline: 2px solid #111827; outline-offset: 2px; }*/
.theme-newsroom .nr-card h3 a { color: #111827; }
/*.theme-newsroom .nr-card h3 a:hover { text-decoration: underline; }*/
/*.theme-newsroom .nr-headline a:hover { text-decoration: underline; }*/


/* Contact form rectangular grid styling to match "Zostaw komentarz" */
.prose form.contact-form,
.prose form#contact-form,
.prose form[action*="/contact"],
.prose form:not(.comment-form) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* ~gap-4 */
}

/* Inputs and textarea: rectangular, bordered, consistent padding */
.prose form.contact-form input[type="text"],
.prose form.contact-form input[type="email"],
.prose form.contact-form input[type="tel"],
.prose form.contact-form input[type="url"],
.prose form.contact-form input[type="search"],
.prose form.contact-form input[type="password"],
.prose form.contact-form textarea,
.prose form#contact-form input[type="text"],
.prose form#contact-form input[type="email"],
.prose form#contact-form input[type="tel"],
.prose form#contact-form input[type="url"],
.prose form#contact-form input[type="search"],
.prose form#contact-form input[type="password"],
.prose form#contact-form textarea,
.prose form[action*="/contact"] input,
.prose form[action*="/contact"] textarea,
.prose form:not(.comment-form) input[type="text"],
.prose form:not(.comment-form) input[type="email"],
.prose form:not(.comment-form) input[type="tel"],
.prose form:not(.comment-form) input[type="url"],
.prose form:not(.comment-form) input[type="search"],
.prose form:not(.comment-form) input[type="password"],
.prose form:not(.comment-form) textarea {
  width: 100%;
  padding: 0.5rem 0.75rem; /* ~py-2 px-3 */
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 0; /* rectangular */
  outline: none;
  background: #fff;
  color: #111827; /* gray-900 */
  box-shadow: none;
}

/* Focus state similar to Tailwind focus:ring-primary */
.prose form:not(.comment-form) input:focus,
.prose form:not(.comment-form) textarea:focus {
  border-color: #4F46E5; /* primary */
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
}

/* Labels spacing */
.prose form:not(.comment-form) label {
  display: block;
  font-size: 0.875rem; /* text-sm */
  color: #374151; /* gray-700 */
  margin-bottom: 0.25rem; /* mb-1 */
}

/* Submit button: rectangular; remove animations */
.prose form:not(.comment-form) button[type="submit"],
.prose form:not(.comment-form) input[type="submit"] {
  background-color: #4F46E5; /* primary */
  color: #fff;
  border: none;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  font-weight: 500;
  border-radius: 0; /* rectangular */
  cursor: pointer;
  transition: none; /* no animation */
}

.prose form:not(.comment-form) button[type="submit"]:hover,
.prose form:not(.comment-form) input[type="submit"]:hover {
  background-color: #3B82F6; /* blue-500, immediate change without transition */
}

/* Group fields in two columns on larger screens if contact form uses grouped rows */
@media (min-width: 768px) {
  .prose form.contact-form.grid-2,
  .prose form#contact-form.grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
  }
}


/* Newsroom – Bold Alt theme (scoped) */
.theme-newsroom-alt .nr-kicker { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 0.72rem; }
.theme-newsroom-alt .nr-headline { line-height: 1.1; }
.theme-newsroom-alt .nr-section-title { font-weight: 900; font-family: var(--font-heading); font-size: 1.125rem; padding-bottom: 0.25rem; border-bottom: 4px solid #111827; display: inline-block; }
.theme-newsroom-alt .nr-pill { display: inline-block; padding: 0.25rem 0.5rem; background: #111827; color: #fff; border-radius: 0.125rem; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.theme-newsroom-alt .nr-card { background: #fff; border: 1px solid #E5E7EB; }
.theme-newsroom-alt .nr-divider { border-color: #0f172a; }
.theme-newsroom-alt a { text-decoration: none; }
.theme-newsroom-alt a:hover { text-decoration: underline; text-underline-offset: 2px; }
.theme-newsroom-alt a:focus { outline: 2px solid #111827; outline-offset: 2px; }

/* Full-bleed section background helpers */
.section-full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  margin-bottom: 3rem; /* ensure spacing between sections with background and following sections */
}
/* Remove margin-bottom from full-bleed section when followed by another full-bleed section to avoid white gaps */
.section-full-bleed:has(+ .section-full-bleed) {
  margin-bottom: 0;
}
.section-full-bleed .section-full-bleed-inner {
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  padding-top: 2rem; /* ensure visible top spacing inside colored background */
  padding-bottom: 2rem; /* ensure visible bottom spacing inside colored background */
}
@media (min-width: 768px) {
  .section-full-bleed .section-full-bleed-inner {
    padding-left: var(--container-padding-x-md);
    padding-right: var(--container-padding-x-md);
    padding-top: 3rem; /* larger vertical spacing on medium+ screens */
    padding-bottom: 3rem; /* larger vertical spacing on medium+ screens */
  }
}



/* Magazine-style thumbnail cards with gradient overlay and larger titles */
.theme-newsroom .nr-card-mag {
  position: relative;
  border-radius: 0.5rem; /* rounded-lg */
  overflow: hidden;
  background: #000; /* fallback when image missing */
}
.theme-newsroom .nr-card-mag__gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%; /* cover only bottom portion more fully */
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0.78) 35%,
    rgba(0,0,0,0.52) 65%,
    rgba(0,0,0,0.28) 85%,
    rgba(0,0,0,0.00) 100%);
  transition: opacity 0.2s ease;
}
.theme-newsroom .nr-card-mag:hover .nr-card-mag__gradient { opacity: 0.95; }
.theme-newsroom .nr-card-mag__title {
  font-size: clamp(1.1rem, 1.2vw + 0.7rem, 1.6rem);
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
  .theme-newsroom .nr-card-mag__title { font-size: clamp(1.25rem, 0.9vw + 0.9rem, 1.8rem); }
}


/* MAG grid responsive typography and spacing per column count */
.theme-newsroom .nr-card-mag__content {
  padding: 1rem 1rem 1rem 1rem; /* p-4 */
  box-shadow: 0 -12px 24px rgba(0,0,0,0.35) inset, 0 -1px 0 rgba(255,255,255,0.06) inset; /* subtle separation */
}
@media (min-width: 768px) {
  .theme-newsroom .nr-card-mag__content { padding: 1.25rem 1.25rem 1.25rem; /* md:p-5 */ }
}

/* Title sizes by column count */
.theme-newsroom .nr-mag-grid[data-cols="2"] .nr-card-mag__title {
  /* keep existing base (from earlier rules) */
}
.theme-newsroom .nr-mag-grid[data-cols="3"] .nr-card-mag__title {
  font-size: clamp(1.0rem, 0.75vw + 0.70rem, 1.4rem);
  line-height: 1.2;
}
.theme-newsroom .nr-mag-grid[data-cols="4"] .nr-card-mag__title {
  font-size: clamp(0.95rem, 0.6vw + 0.65rem, 1.2rem);
  line-height: 1.18;
}
/* Limit lines in denser grids to keep cards even */
.theme-newsroom .nr-mag-grid[data-cols="3"] .nr-card-mag__title,
.theme-newsroom .nr-mag-grid[data-cols="4"] .nr-card-mag__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Slightly tighter content spacing for 4-col */
.theme-newsroom .nr-mag-grid[data-cols="4"] .nr-card-mag__content { padding: 0.75rem 0.75rem 0.85rem; }
/* Category text tweaks inside content area for 4-col (target the first meta line) */
.theme-newsroom .nr-mag-grid[data-cols="4"] .nr-card-mag__content .mb-2 { margin-bottom: 0.35rem; font-size: 10px; letter-spacing: 0.08em; }


/* Stronger gradient and typography tweaks per column density */
.theme-newsroom .nr-mag-grid[data-cols="3"] .nr-card-mag__gradient { height: 85%; }
.theme-newsroom .nr-mag-grid[data-cols="4"] .nr-card-mag__gradient { height: 90%; }
.theme-newsroom .nr-mag-grid[data-cols="4"] .nr-card-mag__title { text-shadow: 0 2px 8px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.6); }
.theme-newsroom .nr-mag-grid[data-cols="3"] .nr-card-mag__title { text-shadow: 0 2px 7px rgba(0,0,0,0.6); }
/* Slight border/separator at top of content for clearer separation from image */
.theme-newsroom .nr-card-mag__content { border-top: 1px solid rgba(255,255,255,0.08); }
/* On hover for dense grids, increase overlay a bit to keep titles readable when image scales */
.theme-newsroom .nr-mag-grid[data-cols="3"] .nr-card-mag:hover .nr-card-mag__gradient { opacity: 1; }
.theme-newsroom .nr-mag-grid[data-cols="4"] .nr-card-mag:hover .nr-card-mag__gradient { opacity: 1; }

/* Variant modifiers */
.theme-newsroom .nr-card-mag--landscape .nr-card-mag__title { font-size: clamp(1.05rem, 1.1vw + 0.75rem, 1.55rem); }
.theme-newsroom .nr-card-mag--portrait .nr-card-mag__title { font-size: clamp(1.0rem, 0.95vw + 0.7rem, 1.45rem); }
.theme-newsroom .nr-card-mag--compact .nr-card-mag__title { font-size: clamp(0.9rem, 0.7vw + 0.6rem, 1.15rem); line-height: 1.15; }
.theme-newsroom .nr-card-mag--compact .nr-card-mag__content { padding: 0.6rem 0.6rem 0.7rem; }
.theme-newsroom .nr-card-mag--compact .nr-card-mag__content .mb-2 { display: none; }
.theme-newsroom .nr-card-mag--excerpt .nr-card-mag__excerpt { margin-top: 0.4rem; font-size: 0.875rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Variant-specific gradient tuning by density */
.theme-newsroom .nr-mag-grid[data-variant="landscape"][data-cols="2"] .nr-card-mag__gradient { height: 75%; }
.theme-newsroom .nr-mag-grid[data-variant="landscape"][data-cols="3"] .nr-card-mag__gradient { height: 82%; }
.theme-newsroom .nr-mag-grid[data-variant="landscape"][data-cols="4"] .nr-card-mag__gradient { height: 88%; }
.theme-newsroom .nr-mag-grid[data-variant="portrait"] .nr-card-mag__gradient { height: 92%; }
.theme-newsroom .nr-mag-grid[data-variant="excerpt"] .nr-card-mag__gradient { height: 88%; }
.theme-newsroom .nr-mag-grid[data-variant="compact"] .nr-card-mag__gradient { height: 94%; }

/* Excerpt variant tweaks for title to keep balance */
.theme-newsroom .nr-mag-grid[data-variant="excerpt"] .nr-card-mag__title { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* Feature + list layout helpers */
.theme-newsroom .nr-mag-feature-grid { align-items: stretch; }
/* Ensure side columns fill equal height and right list can scroll if taller */
.theme-newsroom .nr-mag-feature-left { height: 100%; display: flex; flex-direction: column; gap: 1.5rem; }
.theme-newsroom .nr-mag-feature-right { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.theme-newsroom .nr-mag-feature-right > .p-6 { flex: 1 1 auto; min-height: 0; overflow: auto; }

.theme-newsroom .nr-card-mag-list h5 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.theme-newsroom .nr-card-mag-list a:hover { color: var(--color-primary, #2563eb); }

/* Hover: change MAG title color to primary (consistent with other panels) */
.theme-newsroom .nr-card-mag.group:hover .nr-card-mag__title { color: var(--color-primary, #2563eb); }

/* Scoped tweaks for the two small MAG cards under the lead in mag_feature_plus_list */
.theme-newsroom .nr-mag-subgrid-smalls .nr-card-mag__title {
  font-size: clamp(0.98rem, 0.55vw + 0.72rem, 1.25rem);
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-newsroom .nr-mag-subgrid-smalls .nr-card-mag__content {
  padding: 0.75rem 0.75rem 0.9rem; /* slightly tighter than default */
}
/* Keep overlay strong for readability on the small cards */
.theme-newsroom .nr-mag-subgrid-smalls .nr-card-mag__gradient { height: 88%; }

.theme-newsroom { --color-primary: #4F46E5; }


/* ============================================
   Image Lightbox
   ============================================ */
.blog-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior: contain;
}

.blog-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.blog-lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem;
    touch-action: pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
}

.blog-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 1;
}

.blog-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.blog-lightbox-hint {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    pointer-events: none;
    transition: opacity 0.3s ease;
}