/* ── Color palette (light mode, real hex values — no CSS variables) ────── */
/*
text-primary: #1a1a1a
text-secondary: #555555
text-tertiary:#888888
bg-primary: #ffffff
bg-secondary: #f5f5f3
border-light: #e8e8e4
border-mid: #d0d0ca
red-dark: #a32d2d
red-mid:#e24b4a, or #d20503
red-pale: #fcebeb
green-dark: #3b6d11
amber-dark: #854f0b
*/

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
background: #ffffff;
color: #1a1a1a;
}

#main, .main { max-width: 1200px; margin: 0 auto; padding: 0 4vw; }


/* ── Breadcrumb ──────────────────────────────────────────────── */
/*.breadcrumb { padding: 10px 1vw 0; font-size: 13px; display: flex; align-items: center; gap: 7px; background: #ffffff; }*/
.breadcrumb { max-width: 1200px; margin: calc(var(--nav_h) + 12px) auto 0; padding: 0 4vw 10px; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #777; #ffffff; }
.breadcrumb a { color: #e24b4a; text-decoration:none; }
.breadcrumb a:hover { color: #560e0e; }
.breadcrumb .sep { color: rgba(236, 6, 6, 0.6); }
.breadcrumb .current { color: #453939 }



/* Scoped variables for easy brand alignment */
.blogList {
--jl-primary: #0f172a;
--jl-accent: #2563eb;
--jl-accent-hover: #1d4ed8;
--jl-text: #334155;
--jl-text-light: #64748b;
--jl-border: #e2e8f0;
--jl-bg-card: #ffffff;
--jl-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
--jl-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.08);

display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
padding: 2rem 0;
max-width: 1200px;
margin: 0 auto;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.blog-card {
background: var(--jl-bg-card);
border: 1px solid var(--jl-border);
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--jl-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
display: flex;
flex-direction: column;
}

.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--jl-shadow-hover);
border-color: #cbd5e1;
}

.blog-card h2 {
margin: 0 0 0.75rem;
font-size: 1.25rem;
line-height: 1.35;
}

.blog-card h2 a {
color: var(--jl-primary);
text-decoration: none;
font-weight: 600;
transition: color 0.15s ease;
}

.blog-card h2 a:hover {
color: var(--jl-accent);
}

.blog-card p {
margin: 0;
color: var(--jl-text-light);
line-height: 1.6;
font-size: 0.95rem;
flex-grow: 1; /* Ensures consistent card height alignment */
}

/* Subtle interactive cue */
.blog-card h2 a::after {
content: " →";
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.blog-card h2 a:hover::after {
opacity: 1;
transform: translateX(0);
}


.circle {
display: inline-block;
width: 18px;
height: 18px;
/*background-color: #333;*/
border-radius: 50%;
margin-right: 10px;
vertical-align: center;
}







/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) { 
#main, .main { grid-template-columns: 200px 1fr; padding: 0 1vw; }
}

@media (max-width: 770px) { 
#main, .main { grid-template-columns: 1fr; padding: 0 1vw; }
}


@media (max-width: 640px) {
}

@media (max-width: 520px) {
}

@media (max-width: 480px) {
.blogList {
grid-template-columns: 1fr;
padding: 1.5rem 1rem;
gap: 1.25rem;
}
.blog-card {
padding: 1.25rem;
}
}