/* Final homepage polish: featured trainer, calmer hero, semantic route icons */

/* 1. Give the hero more breathing room without removing information. */
.hero{
    grid-template-columns:minmax(0,.86fr) minmax(500px,1.14fr);
    gap:clamp(48px,6.5vw,112px);
    padding-top:clamp(68px,8vw,116px);
    padding-bottom:88px;
}
.hero-copy{max-width:700px}
.hero-stage{min-height:560px}
.hero-console{width:min(690px,94%)}

/* 2. Break the monotonous 3x2 grid while keeping the same six trainers. */
.trainer-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    align-items:stretch;
}
.trainer-card{grid-column:span 3}
.trainer-card.is-featured{grid-column:span 7}
.trainer-card.is-companion{grid-column:span 5}
.trainer-card.is-featured .trainer-visual{height:250px}
.trainer-card.is-featured .trainer-content{padding:25px 27px 27px}
.trainer-card.is-featured .trainer-content h3{
    max-width:760px;
    font-size:clamp(1.48rem,2vw,1.9rem);
}
.trainer-card.is-featured .trainer-content p{max-width:780px}
.trainer-card.is-featured::after{
    content:"PLC · LAD";
    position:absolute;
    z-index:4;
    left:18px;
    top:18px;
    padding:6px 9px;
    border:1px solid rgba(95,222,241,.25);
    border-radius:999px;
    color:#bff7ff;
    background:rgba(4,31,48,.78);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    font-size:.64rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    pointer-events:none;
}

/* 3. Route icons are real inline SVG pictograms instead of abstract glyphs. */
.route-icon svg{
    width:28px;
    height:28px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(max-width:1180px){
    .hero{
        grid-template-columns:1fr;
        gap:34px;
        padding-top:78px;
        padding-bottom:68px;
    }
    .hero-copy{max-width:900px}
    .hero-stage{min-height:500px}
    .hero-console{width:min(760px,96%)}

    .trainer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .trainer-card,
    .trainer-card.is-companion{grid-column:auto}
    .trainer-card.is-featured{grid-column:1/-1}
}

@media(max-width:760px){
    .hero{
        gap:26px;
        padding:54px 16px 50px;
    }
    .hero-stage{min-height:410px}
    .hero-console{width:100%}

    .trainer-grid{grid-template-columns:1fr}
    .trainer-card,
    .trainer-card.is-featured,
    .trainer-card.is-companion{grid-column:auto}
    .trainer-card.is-featured .trainer-visual{height:225px}
    .trainer-card.is-featured .trainer-content{padding:22px 23px 24px}
    .trainer-card.is-featured::after{left:12px;top:12px}
}

@media(max-width:430px){
    .trainer-card.is-featured .trainer-visual{height:215px}
}