/* HOMEPAGE V3 — Component CSS, Mobile-First */
:root{--hp-grn:#1a472a;--hp-gld:#c4a76f;--hp-org:#d4764f;--hp-lit:#f5f5f5;--hp-gry:#999;--hp-drk:#333}
.hp-hero{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a472a,#2d6a41);overflow:hidden;margin-bottom:2rem}
.hp-hero__bg{position:absolute;inset:0;background:url('/images/hero-panorama.jpg') center/cover;opacity:.4}
.hp-hero__content{position:relative;z-index:3;text-align:center;color:#fff;padding:2rem;max-width:700px}
.hp-hero h1{font-size:2.5rem;line-height:1.2;margin:0 0 1.5rem}
.hp-hero p{font-size:1.125rem;opacity:.9;margin:0 0 2rem}
.hp-hero a,.hp-hero button{display:inline-block;padding:1rem 2rem;background:#d4764f;color:#fff;text-decoration:none;border-radius:12px;font-weight:600;border:none;cursor:pointer}

.hp-filter{background:#f5f5f5;padding:1.5rem;border-radius:12px;margin-bottom:2rem}
.hp-filter h2{font-size:1.5rem;font-weight:600;margin:0 0 1rem}
.hp-filter__btns{display:flex;flex-wrap:wrap;gap:.5rem}
.hp-filter__btn{padding:.5rem 1rem;background:#fff;border:2px solid #999;border-radius:8px;cursor:pointer;font-size:.875rem;transition:all .15s}
.hp-filter__btn.active{background:#1a472a;color:#fff;border-color:#1a472a}

.hp-routes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}
.hp-route-card{border-radius:12px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.1);background:#fff;transition:transform .3s}
.hp-route-card:hover{transform:translateY(-4px)}
.hp-route-card img{width:100%;height:200px;object-fit:cover}
.hp-route-card__body{padding:1.5rem}
.hp-route-card__diff{display:inline-block;padding:.25rem .5rem;color:#fff;font-size:.75rem;border-radius:4px;margin-bottom:.5rem;text-transform:uppercase}
.hp-route-card__diff.easy{background:#2ecc71}
.hp-route-card__diff.medium{background:#f39c12}
.hp-route-card__diff.hard{background:#e74c3c}
.hp-route-card h3{font-size:1.125rem;margin:0 0 .5rem}
.hp-route-card__meta{display:flex;gap:1rem;font-size:.875rem;color:#999;margin-bottom:.75rem}
.hp-route-card p{font-size:.875rem;color:#666;line-height:1.5;margin-bottom:1rem}
.hp-route-card a{display:inline-block;padding:.5rem 1rem;background:#1a472a;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:.875rem}

.hp-affiliate{background:rgba(196,167,111,.05);border-left:4px solid #c4a76f;padding:1.5rem;border-radius:8px;margin-top:2rem;font-size:.875rem;color:#666}
.hp-container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
@media(max-width:768px){.hp-hero h1{font-size:1.75rem}.hp-routes__grid{grid-template-columns:1fr}.hp-hero{min-height:50vh}}