/* ==========================================
   APTIQ MOBILE RESPONSIVE
========================================== */

@media (max-width:768px){

.container{
    width:100%;
    max-width:100%;
    padding:15px;
    margin:15px auto;
    box-sizing:border-box;
}

/* HERO */

.hero,
.training-hero,
.cluster-hero{

    padding:28px 20px;
    border-radius:20px;

}

/* ROWS */

.row{

    flex-direction:column;
    gap:20px;
    text-align:center;

}

.left,
.right{

    width:100%;
    flex:none;

}

/* HEADINGS */

.hero h1,
.training-hero h1,
.cluster-hero h1{

    font-size:30px;

}

.hero .lead,
.training-hero p,
.cluster-hero p{

    font-size:17px;
    line-height:1.6;

}

/* TARGET */

.target{

    font-size:90px;

}

/* CARDS */

.cards{

    grid-template-columns:1fr;
    gap:16px;

}

.training-grid{

    grid-template-columns:1fr;

}

.result-grid{

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

}

/* BUTTONS */

.cta,
.training-btn{

    width:100%;
    justify-content:center;
    padding:18px;

}

.complete-buttons{

    grid-template-columns:1fr;

}

/* CLUSTER */

.cluster-card a{

    padding:18px;

}

.cluster-name{

    font-size:18px;

}

/* TRAINING */

.training-card{

    padding:25px;

}

.training-card h2{

    font-size:24px;

}

.training-card .icon{

    font-size:46px;

}

.hero,
.training-hero,
.cluster-hero{

min-height:auto;

}

.feature,
.training-card,
.cluster-card{

margin-bottom:8px;

}

/* ==========================================
   DASHBOARD
========================================== */

.dashboard-hero{

    padding:30px 20px;
    border-radius:22px;

}

.dashboard-title h1{

    font-size:30px;

}

.dashboard-title p{

    font-size:17px;
    line-height:1.6;

}

.dashboard-stats{

    grid-template-columns:1fr;
    gap:16px;

}

.dashboard-stat{

    padding:22px;

}

.dashboard-stat-value{

    font-size:28px;

}

.dashboard-action a{

    width:100%;
    justify-content:center;
    box-sizing:border-box;
    padding:18px;

}

.dashboard-guide{

    grid-template-columns:1fr;
    gap:16px;

}

.guide-card{

    padding:20px;

}

/* ==========================================
   TEST INTERFACE MOBILE
========================================== */

@media (max-width:768px){

.test-header{

flex-direction:column;

align-items:stretch;

gap:20px;

padding:28px 20px;

}

.test-title{

text-align:center;

}

.test-title h2{

font-size:30px;

}

.test-title p{

font-size:18px;

}

.test-hud{

display:grid;

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

gap:14px;

}

.hud-box{

min-width:auto;

padding:14px;

}

.hud-value{

font-size:24px;

}

.question-box{

padding:22px;

}

.question-box h2{

font-size:24px;

line-height:1.6;

}

.option-card{

padding:18px;

gap:14px;

}

.option-content{

font-size:17px;

}

.option-content strong{

font-size:20px;

}

.test-actions{

flex-direction:column;

gap:15px;

}

.test-actions button{

width:100%;

}

.palette{

grid-template-columns:repeat(5,54px);

padding:18px;

gap:10px;

}

.legend{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

}