@media screen and (max-width:768px){

/* ==========================================
GLOBAL
========================================== */

html,
body{
overflow-x:hidden;
}

.container{
width:92%;
}

/* ==========================================
HERO
========================================== */

.article-hero{


min-height:auto;

padding-top:10vh;
padding-bottom:8vh;

background-position:center;


}
.hero-grid{

    grid-template-columns:1fr;

    gap:2rem;
}

.hero-image{
    order:2;
}

.hero-content{
    order:1;
}

.hero-image img{

    height:300px;

    border-radius:20px;
}
.back-link{


font-size:0.9rem;

margin-bottom:1.5rem;


}

.article-hero h1{


font-size:clamp(2.2rem,9vw,3.5rem);

line-height:1.1;

margin-bottom:1rem;


}

.hero-text{


font-size:1rem;

line-height:1.8;


}

/* ==========================================
ARTICLE CONTENT
========================================== */

.article-content{
padding-top:4vh;
padding-bottom:4vh;
}

.article-content section{


padding:1.5rem;

border-radius:20px;

margin-bottom:1.25rem;


}

.article-content h2{


font-size:clamp(1.8rem,7vw,2.3rem);

line-height:1.15;

margin-bottom:1rem;


}

.article-content p{


font-size:0.95rem;

line-height:1.85;

margin-bottom:1rem;


}

.article-content ul{


margin-left:1.25rem;

margin-top:0.75rem;

margin-bottom:1rem;


}

.article-content li{


font-size:0.95rem;

line-height:1.7;

margin-bottom:0.5rem;


}

/* ==========================================
CTA
========================================== */

.article-cta{


padding-top:1rem;


}

.article-cta h2{


font-size:clamp(1.8rem,7vw,2.5rem);


}

.cta-buttons{


flex-direction:column;

gap:0.8rem;


}

.cta-btn{


width:100%;

padding:1rem;

font-size:0.95rem;


}

/* ==========================================
IMAGES
========================================== */

.article-image{


border-radius:18px;

margin:1.5rem 0;


}

.article-image img{


width:100%;

height:auto;


}

/* ==========================================
HIGHLIGHT BOX
========================================== */

.highlight-box{


padding:1.25rem;

border-radius:18px;

margin:1.5rem 0;


}

.highlight-box h3{


font-size:1.2rem;


}

/* ==========================================
BLOCKQUOTE
========================================== */

blockquote{


padding-left:1rem;

margin:1.5rem 0;

font-size:0.95rem;


}

/* ==========================================
TABLES
========================================== */

table{
display:block;


overflow-x:auto;

white-space:nowrap;


}

table td,
table th{


font-size:0.9rem;

padding:0.75rem;


}

/* ==========================================
FOOTER
========================================== */

.article-footer{


padding:2rem 1rem;

font-size:0.85rem;


}

}