/* ===== IOAI Home sections ===== */
.hero { padding: 72px 0 64px; background: radial-gradient(1200px 600px at 85% -10%, var(--ioai-primary-soft) 0%, rgba(232,240,249,0) 60%), #fff; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { margin: 0.4rem 0 1rem; }
.hero__lead { font-size: 1.2rem; color: var(--ioai-text-secondary); max-width: 560px; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero__badge { position: absolute; left: 18px; bottom: 18px; background: rgba(255,255,255,0.95); border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: 0.9rem; color: var(--ioai-primary-dark); box-shadow: var(--shadow-sm); }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 32px; } .hero { padding: 48px 0 40px; } }

.editions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 800px) { .editions { grid-template-columns: 1fr; } }

.pathway { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pathway img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .pathway { grid-template-columns: 1fr; } }

.roadmap-figure { background: #fff; border: 1px solid var(--ioai-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.roadmap-figure img { margin: 0 auto; }

/* IAIO: the hero graphic is square and must not be cropped; links inside the dark stats band stay readable */
.page-home .hero__media img { object-fit: contain; background: #fff; }
.section--band .stats a { color: #fff; text-decoration: underline; }