/* ================= BLOG POST ================= */

.blog-post-hero{

min-height:70vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

padding:180px 5vw 120px;

background:
linear-gradient(
135deg,
#181818,
#242424
);

color:white;

position:relative;

overflow:hidden;
}

.blog-post-overlay{

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(184,134,70,0.15),
transparent 40%
);
}

.blog-post-content{

max-width:1100px;

position:relative;

z-index:2;
}

.blog-post-meta{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:30px;

flex-wrap:wrap;
}

.blog-post-meta span{

padding:10px 18px;

border-radius:999px;

background:
rgba(255,255,255,0.08);

font-size:14px;

letter-spacing:1px;

text-transform:uppercase;
}

.blog-post-hero h1{

font-size:
clamp(48px,7vw,90px);

line-height:1;

margin-bottom:30px;

font-family:
'Playfair Display',serif;
}

.blog-post-hero p{

font-size:
clamp(18px,2vw,22px);

line-height:1.9;

color:
rgba(255,255,255,0.72);
}

/* CONTENT */

.blog-post-section{

padding:80px 3vw;
}

.blog-post-container{

width:min(1250px,100%);

margin:auto;
}

.blog-post-container h2{

font-size:
clamp(34px,4vw,56px);
text-align: center;
margin:
50px 0 30px;

line-height:1.15;

font-family:
'Playfair Display',serif;
}

.blog-post-container p{

font-size:
clamp(15px,1.3vw,18px);
text-indent: 1rem;
line-height:1.8;

color:var(--text-light);

margin-bottom:20px;
}

.blog-post-container ul{

padding-left:24px;

margin-bottom:35px;
}

.blog-post-container li{

margin-bottom:4px;

line-height:1.9;

color:var(--text-light);
}

/* CTA */

.blog-post-cta{

margin-top:100px;
margin-bottom: 50px;

padding:70px 50px;

border-radius:40px;

background:
linear-gradient(
135deg,
#181818,
#242424
);

text-align:center;

color:white;
}

.blog-post-cta h2{

margin-top:0;
}

.blog-post-cta p{

color:
rgba(255,255,255,0.72);

margin-bottom:35px;
}

/* FAQ */

.blog-faq{

margin-top:20px;
}

.faq-item{

padding:35px;
margin: auto;

border-radius:30px;

background:white;

margin-bottom:25px;

box-shadow:
0 10px 40px
rgba(0,0,0,0.05);
}

/* MOBILE */

@media(max-width:768px){

.blog-post-section{

padding:90px 5vw;
}

.blog-post-hero{

padding:
160px 5vw 100px;
}

.blog-post-cta{

padding:50px 30px;
}

}

/* ================= BLOG LIST ================= */

.blog-post-container ul{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:18px;

padding-left:0;

margin:
35px 0 45px;

list-style:none;
}

.blog-post-container li{

position:relative;

padding:
18px 22px 18px 58px;

border-radius:22px;

background:
rgba(184,134,70,0.06);

line-height:1.8;

font-size:
clamp(14px,2vw,18px);

color:var(--text);

transition:0.3s;
}

.blog-post-container li::before{

content:"✓";

position:absolute;

left:22px;
top:18px;

width:24px;
height:24px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:var(--accent);

color:white;

font-size:13px;

font-weight:700;
}

.blog-post-container li:hover{

transform:
translateY(-4px);

background:
rgba(184,134,70,0.12);

box-shadow:
0 12px 35px
rgba(0,0,0,0.06);
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.blog-post-container ul{

grid-template-columns:1fr;
}

.blog-post-container li{

padding:
16px 18px 16px 52px;

border-radius:18px;
}

.blog-post-container li::before{

left:18px;
top:16px;

width:22px;
height:22px;
}

}


.line{

width:min(1200px,100%);

margin:
0 auto 1rem;

padding:1rem;

border-bottom:
1px solid var(--accent);

text-align:center;
}

/* ================= BLOG H3 ================= */

.blog-post-container h3{

font-size:
clamp(24px,3vw,36px);

line-height:1.25;

margin:
55px 0 22px;

font-family:
'Playfair Display',serif;

color:var(--text);

position:relative;

padding-left:22px;
}

/* GOLD LINE */

.blog-post-container h3::before{

content:"";

position:absolute;

left:0;
top:8px;

width:4px;
height:70%;

border-radius:20px;

background:var(--accent);
}

/* MOBILE */

@media(max-width:768px){

.blog-post-container h3{

padding-left:18px;

margin:
45px 0 18px;
}

}

/* ================= CONTAINER ================= */

.section-container{

width:min(1200px,100%);

margin:auto;
}


/* ================= ARTICLE COVER ================= */

.article-cover{

margin-top:120px;

padding:
0 5vw 80px;
}

.article-cover img{

width:100%;

max-width:1100px;

margin:auto;

display:block;

border-radius:40px;

box-shadow:
0 30px 80px
rgba(0,0,0,0.12);
}

/* ================= IMAGE TEXT ================= */

.image-text-section{

display:grid;

grid-template-columns:
1fr 1fr;

gap:50px;

align-items:center;

margin:
80px 0;
}

.image-text-image img{

width:100%;

border-radius:32px;

box-shadow:
0 20px 60px
rgba(0,0,0,0.08);
}

.image-text-content h3{

margin-top:0;
}

@media(max-width:900px){

.image-text-section{

grid-template-columns:1fr;
}

}

/* ================= QUOTE ================= */

.article-quote{

margin:
90px 0;

padding:
60px 50px;

border-radius:40px;

background:
linear-gradient(
135deg,
#181818,
#242424
);

color:white;

text-align:center;
}

.article-quote p{

font-size:
clamp(24px,3vw,42px);

line-height:1.5;

font-family:
'Playfair Display',serif;

color:white;
}


/* ================= ARTICLE COVER ================= */

.article-cover{

padding:
40px 2vw 80px;
}

.article-cover img{

width:100%;

max-width:1200px;

height:500px;

object-fit:cover;

display:block;

margin:auto;

border-radius:40px;

box-shadow:
0 25px 70px
rgba(0,0,0,0.12);
}

/* ================= FAQ BANNER ================= */

.faq-banner{

padding:
20px 5vw 70px;
}

.faq-banner img{

width:100%;

max-width:1100px;

height:320px;

object-fit:cover;

display:block;

margin:auto;

border-radius:36px;

box-shadow:
0 20px 60px
rgba(0,0,0,0.08);
}

/* ================= ARTICLE IMAGE ================= */

.article-image{

margin:
40px 0 60px;
}

.article-image img{

width:100%;

height:420px;

object-fit:cover;

border-radius:32px;

box-shadow:
0 20px 60px
rgba(0,0,0,0.08);
}

@media(max-width:768px){

.article-cover img{

height:260px;
}

.faq-banner img{

height:220px;
}

.article-image img{

height:240px;
}

}

/* ================= RELATED ARTICLES ================= */

.related-articles{

margin:
80px 0 40px;

padding:
35px 40px;

border-radius:32px;

background:
rgba(184,134,70,0.06);

border:
1px solid rgba(184,134,70,0.12);

box-shadow:
0 15px 45px
rgba(0,0,0,0.04);
}

.related-articles h4{

font-size:
clamp(22px,3vw,32px);

margin-bottom:24px;

font-family:
'Playfair Display',serif;

color:var(--text);
}

.related-articles a{

display:inline-flex;

align-items:center;
margin-top: 10px;
gap:12px;

padding:
16px 24px;

border-radius:18px;

background:white;

color:var(--accent);

text-decoration:none;

font-weight:600;

font-size:
clamp(14px,2vw,17px);

transition:0.3s;

box-shadow:
0 10px 30px
rgba(0,0,0,0.05);
}

.related-articles a::after{

content:"→";

transition:0.3s;
}

.related-articles a:hover{

transform:
translateY(-4px);

background:var(--accent);

color:white;

box-shadow:
0 18px 40px
rgba(184,134,70,0.22);
}

.related-articles a:hover::after{

transform:
translateX(5px);
}

/* MOBILE */

@media(max-width:768px){

.related-articles{

padding:
28px 24px;


}

.related-articles a{

width:100%;

justify-content:center;

text-align:center;

margin-top: 10px;
}

}