/* Drills home (drills-home.js). Classes start with dh-. Uses the brand tokens from styles.css and the film band
   classes from drills.css / drills-stt.css / drills-shell.css (dr-ta, dr-film, st-ch, dk-ch). */

/* the home shows only while #drills[data-guide="home"]; the guides hide while it shows */
#drills:not([data-guide="home"]) #drills-home-root { display: none; }
#drills[data-guide="home"] #drills-root > section,
#drills[data-guide="home"] #drills-root > section.dr-hero,
#drills[data-guide="home"] #drills-root > .dk-pager,
#drills[data-guide="home"] #drills-stt-root,
#drills[data-guide="home"] #drills-omc-root,
#drills[data-guide="home"] #drills-shp-root,
#drills[data-guide="home"] #drills-sp-root { display: none !important; }

/* top: title and one line, a quiet film button on the right */
.dh-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; padding-block: 26px 0; }
.dh-top .dr-h1 { font-size: clamp(30px, 3.4vw, 42px); margin: 0; }
.dh-top .dr-lead { margin: 6px 0 0; font-size: 16px; }
.dh-watch { flex: none; padding: 9px 16px; font-size: 14.5px; }
.dh-watch svg { width: 16px; height: 16px; }
.dh-dur { font: 600 12.5px/1 var(--f-mono); opacity: .65; margin-inline-start: 2px; }

/* spotlight: Target areas, new and asked for by clubs and coaches */
.dh-spot-w { padding-top: 18px; }
.dh-spot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 24px; min-height: 300px; padding: clamp(22px, 3vw, 40px); border-radius: 26px; overflow: hidden; color: #fff; text-decoration: none;
  background: radial-gradient(520px 340px at 85% 20%, rgba(54,126,240,.45), rgba(54,126,240,0) 70%), radial-gradient(420px 300px at 0% 100%, rgba(0,227,132,.12), rgba(0,227,132,0) 70%), linear-gradient(155deg, #00296a 0%, #001e48 55%, #001634 100%);
  box-shadow: var(--shadow-lg); }
.dh-spot__copy { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: start; }
.dh-spot__k { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--f-body); color: var(--inv-primary); }
.dh-spot__k b, .dh-new { background: #e7f35a; color: #061a3a; font: 700 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 20px; }
.dh-spot__t { font: italic 800 clamp(34px, 4vw, 54px)/1.02 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
[dir="rtl"] .dh-spot__t { font-style: normal; }
.dh-spot__d { font-size: 17px; line-height: 1.5; color: var(--inv-text); max-width: 38ch; text-wrap: pretty; }
.dh-spot__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.dh-spot__go .pill svg { width: 16px; height: 16px; transition: transform .15s ease; }
[dir="rtl"] .dh-spot__go .pill svg { transform: scaleX(-1); }
.dh-spot:hover .dh-spot__go .pill svg { transform: translateX(3px); }
[dir="rtl"] .dh-spot:hover .dh-spot__go .pill svg { transform: scaleX(-1) translateX(3px); }
.dh-spot__ask { font-size: 13.5px; color: var(--inv-muted); }
.dh-spot__art { position: relative; height: 250px; }
.dh-spot__scr { position: absolute; inset-inline-start: 6%; top: 50%; height: 104%; aspect-ratio: 900 / 1262; transform: translateY(-50%) rotate(-3deg); border-radius: 18px; padding: 7px; background: #0a0d14; box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 1.5px #1f2633; }
.dh-spot__led { position: absolute; inset-inline-end: 0; bottom: 6%; width: 64%; aspect-ratio: 1100 / 532; border-radius: 14px; padding: 7px; background: #000; box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1.5px #1a2230; }
.dh-spot__scr > *, .dh-spot__led > * { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.dh-spot__led > * { border-radius: 8px; }
.dh-spot:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

/* the five drills: picture, name, a hook and who can play. The whole card opens the guide */
.dh-drills { padding-top: 22px; }
.dh-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.dh-cards > li { display: flex; }
.dh-card { width: 100%; display: flex; flex-direction: column; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.dh-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,30,66,.06), 0 20px 44px rgba(0,30,66,.16); }
.dh-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.dh-card__img { position: relative; display: block; aspect-ratio: 16 / 10; background: #0d2e5c; overflow: hidden; }
.dh-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity .25s ease, transform .4s ease; }
.dh-card__img .dh-card__led { opacity: 0; object-fit: contain; object-position: 50% 50%; background: #000; }
.dh-card:hover .dh-card__img img:first-child { transform: scale(1.05); }
@media (hover: hover) { .dh-card:hover .dh-card__led { opacity: 1; } }
.dh-new { position: absolute; top: 10px; inset-inline-start: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.dh-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.dh-card__body b { font: 700 17px/1.2 var(--f-display); unicode-bidi: plaintext; }
.dh-card__h { font-size: 14.5px; line-height: 1.35; color: var(--text); }
.dh-card__m { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dh-card__m svg { width: 15px; height: 15px; flex: none; color: var(--primary); }

/* every drill starts the same way: three pictures in a row */
.dh-how { padding-top: 34px; }
.dh-h2 { margin: 0 0 14px; font: italic 800 clamp(22px, 2.2vw, 28px)/1.15 var(--f-display); }
[dir="rtl"] .dh-h2 { font-style: normal; }
.dh-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.dh-flow li { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--card); border-radius: 18px; padding: 12px 16px 12px 12px; box-shadow: var(--shadow); }
.dh-flow li + li::before { content: ""; position: absolute; top: 50%; inset-inline-start: -14px; width: 14px; border-top: 2px dashed var(--primary-soft); }
.dh-flow__img { display: block; width: 74px; height: 96px; border-radius: 10px; overflow: hidden; background: #f4f6fb; box-shadow: inset 0 0 0 1px var(--line); }
.dh-flow__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dh-flow__img.is-led { background: #000; }
.dh-flow__img.is-led { display: grid; place-items: center; text-align: center; color: #fff; font: 700 13px/1.05 var(--f-body); letter-spacing: .04em; box-shadow: inset 0 0 0 2px #1a2230; }
.dh-flow__txt { display: grid; gap: 6px; justify-items: start; }
.dh-flow__txt b { display: inline-flex; align-items: center; gap: 8px; font: 700 15.5px/1.2 var(--f-display); }
.dh-flow__txt b i { font: 700 12px/1 var(--f-mono); font-style: normal; color: var(--primary); background: var(--primary-soft); border-radius: 20px; padding: 4px 7px; }
.dh-flow__or { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.dh-flow__or i { font-style: normal; }
.dh-flow__or .ui { font-size: 12.5px; unicode-bidi: isolate; }
.dh-flow__hit { font: 700 12px/1 var(--f-body); letter-spacing: .08em; color: #fff; background: #000; border-radius: 6px; padding: 6px 8px; }
.dh-flow__note { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* the overview film: same band as the guides' films */
#drills .dh-film { margin-top: 34px; }
#drills .dh-film .dr-film { margin-top: 0; }

/* the tips every drill shares, two short lines */
.dh-tips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-block: 20px 4px; }
.dh-tips__h { margin: 0; font: 700 14px/1.3 var(--f-display); color: var(--ink); }
.dh-tiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.dh-tiplist li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dh-tiplist svg { width: 17px; height: 17px; color: var(--primary); flex: none; }
.dh-tiplist .ui { font-size: 12.5px; }

#dh-how, #dh-tips, #dh-film { scroll-margin-top: 12px; }

@media (max-width: 1080px) {
  .dh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dh-watch { display: none; }
}
@media (max-width: 820px) {
  .dh-flow { grid-template-columns: minmax(0, 1fr); }
  .dh-flow li + li::before { display: none; }
}
@media (min-width: 641px) and (max-width: 820px) { .dh-spot__led { width: 72%; } }
/* phones: spotlight stacked, the drills two by two, the start as three short rows */
@media (max-width: 640px) {
  .dh-top { padding-top: 18px; align-items: center; }
  .dh-top .dr-lead { font-size: 15px; }
  .dh-spot { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px; min-height: 0; border-radius: 22px; }
  .dh-spot__art { order: -1; min-height: 0; height: 170px; }
  .dh-spot__scr { height: 100%; inset-inline-start: 2%; }
  .dh-spot__led { width: 68%; bottom: 0; }
  .dh-spot__d { font-size: 15.5px; }
  .dh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dh-card { border-radius: 16px; }
  .dh-card__body { padding: 10px 12px 12px; }
  .dh-card__body b { font-size: 15px; }
  .dh-card__h { font-size: 13.5px; }
  .dh-card__m { font-size: 12.5px; }
  .dh-flow li { grid-template-columns: 56px minmax(0, 1fr); padding: 10px 12px 10px 10px; }
  .dh-flow__img { width: 56px; height: 72px; }
  .dh-tips { gap: 8px; }
  .dh-tiplist { gap: 6px; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .dh-card, .dh-card__img img { transition: none; } }

/* the guides' picker: "All drills" goes back here */
#drills .dr-dcard--all .dr-dcard__img { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
#drills .dr-dcard--all .dr-dcard__img svg { width: 30px; height: 30px; }

/* in a guide: one line on how to start, linking to the shared steps */
#drills .dh-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding: 12px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.dh-strip__t { font: 700 14px/1.3 var(--f-display); color: var(--ink); }
.dh-strip__p { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dh-strip__p i { font-style: normal; color: var(--muted); font-weight: 700; }
.dh-strip__p .ui { font-size: 12.5px; unicode-bidi: isolate; }
.dh-strip__s { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dh-strip__s b { font-weight: 600; font-size: 13.5px; unicode-bidi: isolate; }
.dh-strip__more { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--primary); text-decoration: none; }
.dh-strip__more svg { width: 15px; height: 15px; }
[dir="rtl"] .dh-strip__more svg { transform: scaleX(-1); }
.dh-strip__more:hover { text-decoration: underline; }
@media (max-width: 640px) {
  #drills .dh-strip { padding: 10px 12px; gap: 6px 10px; }
  .dh-strip__more { margin-inline-start: 0; }
}
.dh-strip__or { font-size: 12.5px; color: var(--muted); }

/* end of a guide's "Good to know": the tips every drill shares */
#drills .dh-moretips { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
#drills .dh-moretips svg { width: 16px; height: 16px; }
[dir="rtl"] #drills .dh-moretips svg { transform: scaleX(-1); }
#drills .dh-moretips:hover { text-decoration: underline; }

/* the film tile: only where the grid has room for a sixth tile */
.dh-cards__film { display: none !important; }
@media (max-width: 1080px) { .dh-cards__film { display: flex !important; } }
.dh-card--film .dh-card__img { background: #001e48; }
.dh-card--film .dh-card__img img { object-position: 50% 88%; }
.dh-card__play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.dh-card__play svg { width: 20px; height: 20px; margin-inline-start: 3px; }

/* languages */
.dh-flow__note, .dh-card__h { text-wrap: pretty; }
[dir="rtl"] .dh-card__body b { text-align: right; }
[dir="rtl"] .dh-ch .st-ch__t { unicode-bidi: plaintext; text-align: right; }
:lang(ko) #drills-home-root { word-break: keep-all; }
:lang(ko) .dh-spot__t, :lang(ko) .dh-h2, :lang(ko) .dh-top .dr-h1 { font-style: normal; }

/* "Pick a spot. Hit it.": a compact banner, about as tall as the guide heroes */
.dh-spot { min-height: 0; padding: clamp(18px, 2vw, 24px) clamp(22px, 3.4vw, 44px); gap: 14px 32px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.dh-spot__copy { gap: 8px; }
.dh-spot__t { font-size: clamp(28px, 3vw, 40px); }
.dh-spot__d { font-size: 16px; line-height: 1.45; }
.dh-spot__go { margin-top: 4px; }
.dh-spot__go .pill { padding: 10px 18px; font-size: 14.5px; }
.dh-spot__art { height: 180px; }
@media (max-width: 640px) {
  .dh-spot { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 10px; }
  .dh-spot__art { height: 130px; }
  .dh-spot__d { font-size: 15px; }
}

/* Drills home hero: the same compact hero as the other guides (styles.css .hero__card--compact) */
.dh-hero .hero__card.hero__card--compact { min-height: 0; padding: clamp(18px, 2vw, 24px) clamp(22px, 4vw, 52px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.dh-hero .hero__card--compact .hero__sub { font-size: clamp(15px, 1.4vw, 18px); max-width: 52ch; }
.dh-hero .hero__card--compact .hero__shade { background: linear-gradient(90deg, rgba(0,30,66,.94) 0%, rgba(0,30,66,.8) 50%, rgba(0,30,66,.35) 100%); }
[dir="rtl"] .dh-hero .hero__card--compact .hero__shade { background: linear-gradient(270deg, rgba(0,30,66,.94) 0%, rgba(0,30,66,.8) 50%, rgba(0,30,66,.35) 100%); }
.dh-hero .hero__img { object-position: 50% 40%; }
.dh-hero .hero__cta svg { width: 16px; height: 16px; }
@media (min-width: 861px) {
  .dh-hero .hero__card--compact .hero__copy { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 8px; align-items: center; }
  .dh-hero .hero__card--compact .hero__copy > * { grid-column: 1; }
  .dh-hero .hero__card--compact .hero__cta { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
.dh-hero + .dh-drills { padding-top: 22px; }