/* ONCE Sport (/sport/): the European equestrian programmes. Built on home.css, original.css and motion.css. */
/* the stable's film is busy: the hero darkens a little more toward the words */
.sp-hero .wh-film::after { background: linear-gradient(90deg, rgba(14, 13, 12, .78) 0%, rgba(14, 13, 12, .45) 55%, rgba(14, 13, 12, .2) 100%), linear-gradient(0deg, rgba(14, 13, 12, .7) 0%, transparent 45%); }

/* the idea: a portrait of the stable beside the words */
.sp-idea { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); align-items: center; padding-top: var(--section); padding-bottom: var(--section); }
.sp-idea-ph { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 200px 200px 2px 2px; }
.sp-idea-ph img, .sp-inc-ph img, .sp-gf img { width: 100%; height: 112%; object-fit: cover; }
.sp-idea .lede { max-width: 34em; margin: 22px 0 0; }

/* three rounds in competition, played in view */
.sp-reels { background: #0b0a09; padding: clamp(56px, 8vw, 110px) 0; }
.sp-reels-l { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.sp-reel figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; }
.sp-reel figure img { width: 100%; height: 100%; object-fit: cover; }
.sp-reel .mono { margin: 14px 0 0; color: var(--amber); }

/* the season: what is included */
.sp-inc { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); padding-top: var(--section); padding-bottom: var(--section); }
.sp-inc-ph { margin: 40px 0 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.sp-inc-l { list-style: none; margin: 0; padding: 0; align-self: center; }
.sp-inc-l li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--hair); font: 400 clamp(19px, 1.6vw, 23px)/1.45 var(--serif); }
.sp-inc-l li:last-child { border-bottom: 1px solid var(--hair); }
.sp-inc-l .mono { color: var(--amber); padding-top: 6px; }

/* the path: three steps across a light band */
.sp-path { background: var(--sand); color: var(--ink); padding: var(--section) 0; }
.sp-path .wd-n { color: var(--ink); } .sp-path .wd-n span { color: var(--amber-deep); }
.sp-path-l { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); }
.sp-pn { display: block; font: 300 clamp(56px, 6vw, 96px)/1 var(--serif); color: var(--amber-deep); margin-bottom: 18px; }
.sp-path-l .d3 { margin: 0 0 10px; }
.sp-path-l p { margin: 0; color: #5d554c; font-size: 15.5px; line-height: 1.6; }
.sp-path :focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 4px; }

/* the stable in pictures: an uneven wall */
.sp-gal { padding-top: var(--section); }
.sp-gal-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(140px, 13vw, 210px); gap: var(--gap); }
.sp-gf { position: relative; margin: 0; height: 100%; overflow: hidden; border-radius: 2px; }
.sp-g1 { grid-column: 1 / 6; grid-row: span 3; } .sp-g2 { grid-column: 6 / 13; grid-row: span 2; }
.sp-g3 { grid-column: 6 / 9; grid-row: span 2; } .sp-g4 { grid-column: 9 / 13; grid-row: span 2; }
.sp-g5 { grid-column: 1 / 6; grid-row: span 2; } .sp-g6 { grid-column: 6 / 13; grid-row: span 1; }

/* good to know, then the desk */
.sp-terms { padding-top: var(--section); padding-bottom: var(--section); max-width: 860px; }
.sp-terms ul { margin: 18px 0 40px; padding: 0; list-style: none; }
.sp-terms li { padding: 16px 0; border-top: 1px solid var(--hair); color: rgba(243, 238, 228, .8); font-size: 16px; line-height: 1.6; }
.sp-credit { margin: 40px 0 0; font-size: 12.5px; color: rgba(243, 238, 228, .55); }

@media (max-width: 860px) {
  .sp-idea, .sp-inc { grid-template-columns: none; }
  .sp-idea-ph { aspect-ratio: 4 / 3; border-radius: 160px 160px 2px 2px; }
  .sp-reels-l, .sp-path-l { grid-template-columns: none; }
  .sp-gal-l { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .sp-gal-l li { grid-column: auto; grid-row: auto; } .sp-g1, .sp-g6 { grid-column: 1 / -1; }
}