/* AI Challenge public page. Loaded after base.css. */

/* Hero: the About text, led by its first paragraph, with the other two side by side on wide screens. */
.hero__inner{display:grid;gap:var(--space-4);padding-block:var(--space-8)}
.hero h1{margin-block-end:0}
.hero h1 span{color:var(--yellow)}
.hero p{margin:0;color:var(--lavender)}
.hero h1+p{color:var(--white);font-size:clamp(1.125rem,1rem + .6vw,1.375rem);font-weight:var(--weight-label)}
.hero__cta{margin-block-start:var(--space-2)}
@media (min-width:56rem){
  .hero__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-7)}
  .hero h1,.hero h1+p,.hero__cta{grid-column:1/-1}
  .hero h1+p{max-inline-size:56rem}
}

/* Video. YouTube requires at least 200 by 200 pixels, which a 16:9 player misses on narrow phones. */
.video{display:block;inline-size:100%;max-inline-size:56rem;block-size:auto;min-block-size:204px;aspect-ratio:16/9;margin-inline:auto;border:.125rem solid var(--navy);border-radius:var(--radius);background:var(--navy);box-shadow:var(--shadow-paper)}

/* Tracks */
.tracks{margin-block-start:var(--space-6)}
.track{display:flex;flex-direction:column;overflow:hidden;padding:0}
.track__art{display:flex;align-items:flex-end;justify-content:center;block-size:13rem;padding:var(--space-5) var(--space-4) 0}
.track--individuals .track__art{background:var(--yellow)}
.track--government .track__art{background:var(--teal)}
.track__art img{inline-size:100%;block-size:100%;object-fit:contain;object-position:bottom}
.track__body{padding:var(--space-5)}
.track__body p:last-child{margin-block-end:0}

/* Journey: a road on wide screens, a vertical line on phones. */
.journey{position:relative;display:grid;gap:var(--space-5);margin:var(--space-6) 0 0;padding:0;list-style:none}
.journey::before{content:"";position:absolute;inset-block:1rem;inset-inline-start:2.25rem;border-inline-start:.25rem dashed var(--purple)}
.journey__stop{position:relative;display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:var(--space-4);align-items:start}
.journey__stop h3{margin-block-end:var(--space-1)}
.journey__stop p{margin:0;color:var(--text-soft);font-size:var(--size-small)}
.journey__mark{display:grid;place-items:center;inline-size:4.75rem;block-size:4.75rem;border:.125rem solid var(--navy);border-radius:50%;background:var(--white);box-shadow:var(--shadow-paper-soft)}
.journey__mark img{inline-size:62%;block-size:62%;object-fit:contain}
@media (min-width:60rem){
  .journey{--stop:7rem;--drop:3rem;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4)}
  .journey::before{inset-block:calc(var(--stop) / 2) auto;inset-inline:calc((100% - 4 * var(--space-4)) / 10);block-size:var(--drop);border:0;background:url("art/journey-road.svg") center/100% 100% no-repeat}
  .journey__stop{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .journey__stop:nth-child(even){margin-block-start:var(--drop)}
  .journey__mark{inline-size:var(--stop);block-size:var(--stop)}
}

/* Prepare */
.needs{margin-block-start:var(--space-6)}
.need__art{block-size:6rem;inline-size:auto;margin-block-end:var(--space-4)}
.need p:last-child{margin-block-end:0}

/* Evaluation: four equal cards. Equal rows keep them the same size when they wrap to two lines. */
.criteria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--space-4);margin:var(--space-6) 0 0;padding:0;list-style:none}
.criterion{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-3);border-radius:var(--radius);background:var(--white);color:var(--navy);font-weight:var(--weight-label);line-height:1.5;text-align:center}
.criterion img{flex:none;inline-size:4.5rem;block-size:4.5rem;object-fit:contain}
@media (min-width:56rem){.criteria{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Prizes: a dashed placeholder, so it reads as unfinished on purpose. */
.prizes{padding-block-end:calc(var(--space-8) + var(--space-6))}
.prizes__soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);min-block-size:17rem;margin-block-start:var(--space-5);padding:var(--space-6);border:.1875rem dashed var(--purple);border-radius:var(--radius);background:var(--yellow-pale);text-align:center}
.prizes__soon img{block-size:5.5rem;inline-size:auto}
.prizes__soon p{margin:0;color:var(--navy);font-size:var(--size-h2);font-weight:var(--weight-display);line-height:var(--leading-title)}

/* Apply */
.apply{text-align:center}
.apply__btn{min-inline-size:14rem;font-size:var(--size-lead)}

/* Partners */
.partners{padding-block:var(--space-6);border-block-start:.0625rem solid var(--line);text-align:center}
.partners__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4) var(--space-7)}
.partners__logos img{inline-size:auto;max-inline-size:100%}
.partners__cmc{block-size:4.5rem}
.partners__zain{block-size:2.5rem}