/* =========================================================
   BLOG PAGE
   /public_html/assets/css/blog.css
   ========================================================= */

.blog-page{
position:relative;
background:
radial-gradient(circle at top left, rgba(236,72,153,.10), transparent 30%),
radial-gradient(circle at top right, rgba(139,92,246,.08), transparent 28%),
var(--bg);
}

.blog-page .site-container{
max-width:1180px;
}

.blog-shell{
padding:36px 0 44px;
}

/* ---------------------------------------------------------
   Shared Cards
--------------------------------------------------------- */
.blog-hero__main,
.blog-hero__side,
.blog-feature-strip article,
.blog-card,
.blog-empty-card,
.blog-cta{
background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border:1px solid var(--line);
border-radius:28px;
box-shadow:var(--shadow-md);
}

.blog-kicker,
.blog-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:6px 12px;
border-radius:999px;
background:rgba(236,72,153,.12);
border:1px solid rgba(236,72,153,.20);
color:#db2777;
font-size:.78rem;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.blog-hero{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
gap:20px;
margin-bottom:18px;
}

.blog-hero__main{
position:relative;
overflow:hidden;
padding:30px;
background:
radial-gradient(circle at 10% 10%, rgba(236,72,153,.18), transparent 34%),
radial-gradient(circle at 90% 90%, rgba(139,92,246,.13), transparent 34%),
linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}

.blog-hero__main::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%);
pointer-events:none;
}

.blog-hero__main > *{
position:relative;
z-index:1;
}

.blog-hero h1{
margin:14px 0 10px;
color:var(--heading);
font-size:clamp(2.05rem,4vw,3.65rem);
line-height:.98;
letter-spacing:-.05em;
}

.blog-hero p{
margin:0;
max-width:70ch;
color:var(--text);
font-size:1.02rem;
line-height:1.75;
}

.blog-hero__chips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}

.blog-hero__chips span{
display:inline-flex;
align-items:center;
gap:7px;
min-height:38px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid var(--line);
color:var(--text);
font-weight:850;
font-size:.92rem;
}

.blog-hero__side{
padding:18px;
display:flex;
align-items:stretch;
}

.blog-count-card{
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
padding:22px;
border-radius:22px;
background:rgba(255,255,255,.065);
border:1px solid var(--line);
box-shadow:var(--shadow-sm);
text-align:center;
}

.blog-count-card span{
display:block;
color:var(--muted);
font-size:.78rem;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:8px;
}

.blog-count-card strong{
display:block;
color:var(--heading);
font-size:clamp(2.6rem,4vw,3.6rem);
line-height:1;
letter-spacing:-.04em;
}

.blog-count-card small{
display:block;
color:var(--muted);
margin-top:9px;
}

/* ---------------------------------------------------------
   Feature Strip
--------------------------------------------------------- */
.blog-feature-strip{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:18px;
margin-bottom:18px;
}

.blog-feature-strip article{
padding:22px;
}

.blog-feature-strip div{
width:52px;
height:52px;
display:grid;
place-items:center;
margin-bottom:14px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid var(--line);
box-shadow:var(--shadow-sm);
font-size:1.35rem;
}

.blog-feature-strip h2{
margin:0 0 8px;
color:var(--heading);
font-size:1.08rem;
}

.blog-feature-strip p{
margin:0;
color:var(--muted);
line-height:1.65;
}

/* ---------------------------------------------------------
   Section Head
--------------------------------------------------------- */
.blog-list-section{
margin-bottom:18px;
}

.blog-section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}

.blog-section-head h2{
margin:10px 0;
color:var(--heading);
font-size:clamp(1.65rem,3vw,2.4rem);
line-height:1.08;
letter-spacing:-.03em;
}

.blog-section-head p{
margin:0;
color:var(--muted);
line-height:1.75;
}

/* ---------------------------------------------------------
   Blog Grid / Cards
--------------------------------------------------------- */
.blog-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:18px;
}

.blog-card{
overflow:hidden;
display:flex;
flex-direction:column;
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.blog-card:hover{
transform:translateY(-2px);
border-color:rgba(236,72,153,.28);
box-shadow:var(--shadow-md);
}

.blog-card__image-link{
display:block;
width:100%;
aspect-ratio:16 / 9;
height:auto !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
overflow:hidden;
background:#f8fafc;
border-bottom:1px solid #f1f5f9;
text-decoration:none;
}

.blog-card__image-link img{
display:block;
width:100%;
height:100%;
object-fit:contain;
object-position:center center;
transform:none !important;
transition:none !important;
}

.blog-card__image-placeholder{
display:flex;
align-items:center;
justify-content:center;
}

.blog-card__placeholder-inner{
text-align:center;
color:#64748b;
}

.blog-card__placeholder-inner span{
display:block;
font-size:42px;
margin-bottom:12px;
}

.blog-card__placeholder-inner strong{
font-size:16px;
font-weight:800;
color:#0f172a;
}

.blog-card__body{
padding:20px;
}

.blog-card__meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:12px;
}

.blog-card__meta span{
display:inline-flex;
align-items:center;
min-height:28px;
padding:5px 9px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid var(--line);
color:var(--muted);
font-size:.74rem;
font-weight:900;
letter-spacing:.03em;
text-transform:uppercase;
}

.blog-card h3{
margin:0 0 10px;
color:var(--heading);
font-size:1.18rem;
line-height:1.25;
letter-spacing:-.02em;
}

.blog-card h3 a{
color:inherit;
text-decoration:none;
}

.blog-card h3 a:hover{
color:#db2777;
}

.blog-card p{
margin:0;
color:var(--text);
line-height:1.65;
}

.blog-card__read{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:16px;
color:#db2777;
font-weight:900;
text-decoration:none;
}

.blog-card__read:hover{
text-decoration:underline;
}

/* ---------------------------------------------------------
   Empty State
--------------------------------------------------------- */
.blog-empty-card{
padding:34px;
text-align:center;
}

.blog-empty-card__icon{
width:64px;
height:64px;
display:grid;
place-items:center;
margin:0 auto 14px;
border-radius:22px;
background:rgba(236,72,153,.12);
border:1px solid rgba(236,72,153,.22);
font-size:1.7rem;
}

.blog-empty-card h2{
margin:0 0 10px;
color:var(--heading);
}

.blog-empty-card p{
max-width:620px;
margin:0 auto 18px;
color:var(--muted);
line-height:1.7;
}

/* ---------------------------------------------------------
   Blog Article Page
--------------------------------------------------------- */
.blog-article-content{
max-width:760px;
margin:0 auto;
text-align:left;
color:#475569;
line-height:1.9;
font-size:17px;
}

.blog-article-content p{
margin:0 0 22px;
}

.blog-article-content h2{
font-size:34px;
line-height:1.15;
margin:48px 0 18px;
color:#0f172a;
font-weight:800;
}

.blog-article-content h3{
font-size:26px;
line-height:1.2;
margin:36px 0 16px;
color:#0f172a;
font-weight:700;
}

.blog-article-content ul,
.blog-article-content ol{
padding-left:24px;
margin:18px 0 24px;
}

.blog-article-content li{
margin-bottom:10px;
}

.blog-article-content blockquote{
border-left:4px solid #ec4899;
background:rgba(236,72,153,.05);
padding:18px 22px;
border-radius:14px;
margin:24px 0;
}

.blog-article-content img{
width:100%;
height:auto;
border-radius:22px;
margin:28px 0;
}

.blog-article-content a{
color:#db2777;
font-weight:600;
}

.blog-article-content strong{
color:#111827;
}

.blog-article-cover{
width:100%;
max-width:960px;
margin:22px auto 34px;
border-radius:24px;
overflow:hidden;
background:#f8fafc;
border:1px solid var(--line);
}

.blog-article-cover img{
display:block;
width:100%;
aspect-ratio:16 / 9;
height:auto;
object-fit:contain;
object-position:center center;
}

/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */
.blog-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:26px;
background:
radial-gradient(circle at top left, rgba(236,72,153,.12), transparent 34%),
radial-gradient(circle at bottom right, rgba(139,92,246,.10), transparent 32%),
linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}

.blog-cta h2{
margin:10px 0;
color:var(--heading);
font-size:clamp(1.5rem,3vw,2.2rem);
line-height:1.1;
letter-spacing:-.03em;
}

.blog-cta p{
margin:0;
color:var(--muted);
line-height:1.7;
}

.blog-cta__actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

/* ---------------------------------------------------------
   Light Theme
--------------------------------------------------------- */
html[data-theme="light"] .blog-page{
background:
radial-gradient(circle at top left, rgba(236,72,153,.08), transparent 30%),
radial-gradient(circle at top right, rgba(139,92,246,.06), transparent 28%),
#f6f7fb;
}

html[data-theme="light"] .blog-hero__chips span,
html[data-theme="light"] .blog-count-card,
html[data-theme="light"] .blog-feature-strip div,
html[data-theme="light"] .blog-card__meta span{
background:rgba(255,255,255,.82);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:1100px){
.blog-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.blog-feature-strip{
grid-template-columns:1fr;
}
}

@media (max-width:900px){
.blog-hero{
grid-template-columns:1fr;
}

.blog-cta{
align-items:flex-start;
flex-direction:column;
}
}

@media (max-width:720px){
.blog-shell{
padding:24px 0 34px;
}

.blog-hero,
.blog-grid{
grid-template-columns:1fr;
}

.blog-hero__main,
.blog-hero__side,
.blog-feature-strip article,
.blog-card,
.blog-empty-card,
.blog-cta{
border-radius:22px;
}

.blog-hero__main,
.blog-hero__side,
.blog-feature-strip article,
.blog-empty-card,
.blog-cta{
padding:20px;
}

.blog-card{
padding:0;
}

.blog-hero h1{
font-size:clamp(2rem,10vw,3rem);
}

.blog-card__body{
padding:18px;
}

.blog-article-content{
font-size:16px;
}

.blog-article-content h2{
font-size:28px;
}

.blog-article-content h3{
font-size:22px;
}

.blog-cta__actions,
.blog-cta__actions .btn{
width:100%;
}
}