/* Home page widgets (index.php). New .hp-* blocks replace the old placeholder markup;
   the few .home-page overrides fix grid/legacy conflicts from home.css + design.css. */
.home-page .home-hero-inner{grid-template-columns:minmax(0,1.3fr) minmax(320px,.8fr)}
.home-page .lesson-image{display:block}
.home-page .hero-actions .btn svg.lucide,.home-page .section-icon svg.lucide,.home-page .practice-icon svg.lucide,.home-page .journey-icon svg.lucide{width:18px;height:18px}
.home-page .journey-items div svg.lucide{width:15px;height:15px;color:#2563eb;flex:none}

/* Progress ring */
.hp-ring{position:relative;flex:none;width:104px;height:104px;display:grid;place-items:center}
.hp-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hp-ring-track{fill:none;stroke:#d8f4e9;stroke-width:10}
.hp-ring-value{fill:none;stroke:#14b380;stroke-width:10;stroke-linecap:round}
.hp-ring span{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.hp-ring b{font-size:22px;color:#10234c}
.hp-ring small{font-size:11px;color:#58708e;margin-top:2px}

/* 3D simulation teaser */
.hp-sim{display:grid;gap:14px}
.hp-sim-art{display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#061c33}
.hp-sim-art img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.hp-sim-art:hover img{transform:scale(1.04)}
.hp-sim-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:#33465f}
.hp-sim-list li{display:flex;align-items:center;gap:10px}
.hp-sim-list svg.lucide{width:18px;height:18px;color:#2563eb;flex:none}
.hp-sim-cta{width:100%}

/* Applications teaser */
.hp-apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hp-apps a{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#e2e8f0;color:#fff}
.hp-apps img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.hp-apps a:hover img{transform:scale(1.05)}
.hp-apps span{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:2px;padding:28px 10px 10px;background:linear-gradient(180deg,#0000,#0b1730d9)}
.hp-apps small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fde68a}
.hp-apps strong{font-size:13px;line-height:1.3}

/* Games teaser */
.hp-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hp-games a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:14px;background:#fff;border:1px solid #f3dce6;text-align:center;color:#10234c;transition:transform .15s,box-shadow .15s}
.hp-games a:hover{transform:translateY(-2px);box-shadow:0 8px 18px #be185d1a}
.hp-game-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff}
.hp-game-icon svg.lucide{width:26px;height:26px}
.hp-games .is-blue .hp-game-icon{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.hp-games .is-violet .hp-game-icon{background:linear-gradient(135deg,#a855f7,#6d28d9)}
.hp-games .is-green .hp-game-icon{background:linear-gradient(135deg,#34d399,#059669)}
.hp-games strong{font-size:14px}
.hp-games small{font-size:12px;color:#64748b}

/* AI + explore */
.home-page .hp-robot{width:72px;height:72px;border-radius:20px;object-fit:cover;flex:none}
.hp-explore{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #edf0f7;color:#10234c}
.hp-explore:last-child{border-bottom:0}
.hp-explore img{width:52px;height:42px;border-radius:10px;object-fit:cover;flex:none}
.hp-explore span{display:flex;flex-direction:column;flex:1;min-width:0}
.hp-explore strong{font-size:14px}
.hp-explore small{font-size:12px;color:#64748b}
.hp-explore b{color:#94a3b8;font-size:20px}

@media (max-width:1100px){.home-page .home-hero-inner{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)}}
@media (max-width:767px){
  .home-page .home-hero-inner{display:block}
  .hp-ring{width:88px;height:88px}
  .hp-ring b{font-size:19px}
}
@media (max-width:359px){
  .hp-games{grid-template-columns:minmax(0,1fr)}
  .hp-games a{flex-direction:row;justify-content:flex-start;text-align:left}
  .hp-apps{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1101px){
  .hp-apps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hp-apps a{aspect-ratio:3/4}
}