/* Wick Hockey case page: bold vertical-video showcase */

.wk2-numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.wk2-numbers > div { padding: 28px 20px 24px 0; border-right: 1px solid var(--line); }
.wk2-numbers > div + div { padding-left: 20px; }
.wk2-numbers > div:last-child { border-right: 0; }
.wk2-num { margin: 0; font: 900 clamp(40px, 5.4vw, 80px)/1 Helvetica, Arial, sans-serif; letter-spacing: -0.03em; }
.wk2-lab { margin: 10px 0 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.wk-tbd .wk2-num { color: var(--dim); }

.wk2-section { margin-top: 88px; }
.wk2-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.wk2-head h2 { margin: 0; font: 900 clamp(34px, 4.4vw, 64px)/0.95 Helvetica, Arial, sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.wk2-head p { margin: 0; max-width: 42ch; color: var(--soft); font-family: Georgia, serif; font-size: 16px; text-align: right; }

.wk-carousel { position: relative; margin-top: 28px; }
.wk2-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3.6); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.wk2-strip::-webkit-scrollbar { display: none; }
.wk2-reel { margin: 0; scroll-snap-align: start; }
.wk2-phone { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,0.14); }
.wk2-phone video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk2-phone::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.85)); pointer-events: none; }
.wk2-rank { position: absolute; top: 12px; left: 14px; z-index: 1; font: 900 44px/1 Helvetica, Arial, sans-serif; letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.wk2-views { position: absolute; left: 14px; bottom: 14px; z-index: 1; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.wk2-views b { display: block; font: 900 40px/1 Helvetica, Arial, sans-serif; letter-spacing: -0.02em; text-transform: none; color: #fff; }
.wk2-reel figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-family: Georgia, serif; font-size: 15px; color: var(--soft); }
.wk2-reel figcaption a { flex: none; font: 12px/1.6 Helvetica, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.wk-carousel .bn-nav { top: 40%; }
.wk-prev { left: -8px; } .wk-next { right: -8px; }

.wk2-igpost { width: min(440px, 100%); margin: 28px auto 0; }
.wk2-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wk2-slides::-webkit-scrollbar { display: none; }
.wk2-slides img { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; display: block; }
.wk2-dots { display: flex; justify-content: center; gap: 4px; padding: 10px 0 0; }
.wk2-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.wk2-dots i.on { background: #0095f6; }

.wk2-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.wk2-thumbs figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #111; }
.wk2-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  .wk2-numbers { grid-template-columns: 1fr 1fr; }
  .wk2-numbers > div { padding: 20px 12px 18px 0; }
  .wk2-numbers > div:nth-child(2n) { border-right: 0; padding-left: 12px; }
  .wk2-numbers > div:nth-child(3) { padding-left: 0; }
  .wk2-numbers > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .wk2-section { margin-top: 56px; }
  .wk2-head { flex-direction: column; align-items: start; gap: 10px; }
  .wk2-head p { text-align: left; }
  .wk2-strip { grid-auto-columns: 74%; gap: 14px; }
  .wk-carousel .bn-nav { display: none; }
  .wk2-thumbs { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* v3: reels grid */
.wk2-reelgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.wk2-reelgrid .wk2-reel { scroll-snap-align: none; }

/* v3: Ambassador panorama + device */
.wk2-pano { display: flex; margin-top: 28px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #444 transparent; border: 1px solid rgba(255,255,255,0.12); }
.wk2-pano img { flex: 1 0 calc(100% / 3); min-width: 0; width: calc(100% / 3); height: auto; display: block; }
.wk2-amb-row { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.wk2-device { width: 380px; padding: 14px 10px 22px; background: #111; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.wk2-device .wk2-igpost { width: 100%; margin: 0; }
.wk2-slides-wrap { position: relative; }
.wk2-count { position: absolute; top: 10px; right: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,0.65); color: #fff; font: 600 12px/1 -apple-system, Helvetica, Arial, sans-serif; }
.wk2-specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.wk2-specs div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wk2-specs dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.wk2-specs dd { margin: 0; font-family: Georgia, serif; font-size: 17px; color: var(--soft); }

/* v3: campaigns */
.wk2-camp { padding: 36px 0; border-bottom: 1px solid var(--line); }
.wk2-camp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 20px; }
.wk2-camp-head h3 { margin: 0; font: 900 28px/1 Helvetica, Arial, sans-serif; letter-spacing: -0.01em; text-transform: uppercase; }
.wk2-camp-head p { margin: 0; color: var(--soft); font-family: Georgia, serif; font-size: 15px; }
.wk2-fmts { display: grid; grid-template-columns: 1fr 0.7fr 1.6fr 1.3fr; gap: 14px; align-items: end; }
.wk2-fmt { margin: 0; }
.wk2-fmt > img, .wk2-fmt > span { display: block; width: 100%; object-fit: cover; border: 1px solid rgba(255,255,255,0.12); }
.wk2-fmt-feed > img, .wk2-fmt-feed > span { aspect-ratio: 4 / 5; }
.wk2-fmt-story > img, .wk2-fmt-story > span { aspect-ratio: 9 / 16; }
.wk2-fmt-banner > img, .wk2-fmt-banner > span { aspect-ratio: 3 / 1; }
.wk2-fmt-email > img, .wk2-fmt-email > span { aspect-ratio: 2 / 1; }
.wk2-fmt.is-ph > span { display: grid; place-content: center; text-align: center; gap: 6px; background: repeating-linear-gradient(135deg, #111 0 10px, #141414 10px 20px); border-style: dashed; border-color: rgba(255,255,255,0.18); color: var(--dim); font: 700 12px/1.2 Helvetica, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.wk2-fmt.is-ph small { display: block; font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 11px; }
.wk2-fmt figcaption { margin-top: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.wk2-camp-stats { margin-top: 22px; }
.wk2-camp-stats .stat-value { color: var(--dim); }

/* v3: thumbnails in a browser frame */
.wk2-browser { aspect-ratio: 16 / 9; }
.wk2-browser .case-browser-view { background: #fff; }
.wk2-site-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 22px; padding: 12px 20px; background: #fff; border-bottom: 1px solid #eee; color: #111; font: 500 13px/1 Helvetica, Arial, sans-serif; }
.wk2-site-bar img { width: 26px; height: 26px; }
.wk2-site-bar b { margin-right: auto; font-weight: 900; letter-spacing: 0.02em; }
.wk2-site-bar .on { color: #d0021b; }
.wk2-browser .wk2-thumbs { margin: 0; padding: 20px; gap: 14px; background: #fff; grid-template-columns: repeat(4, 1fr); }
.wk2-browser .wk2-thumbs figure { border: 0; border-radius: 0; }

@media (max-width: 760px) {
  .wk2-reelgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wk2-rank { font-size: 28px; top: 8px; left: 10px; }
  .wk2-views { left: 10px; bottom: 10px; font-size: 10px; }
  .wk2-views b { font-size: 26px; }
  .wk2-reel figcaption { font-size: 13px; flex-direction: column; gap: 2px; }
  .wk2-pano img { flex-basis: 78%; width: 78%; }
  .wk2-amb-row { grid-template-columns: 1fr; gap: 28px; }
  .wk2-device { width: 100%; max-width: 340px; margin: 0 auto; }
  .wk2-specs div { grid-template-columns: 110px 1fr; }
  .wk2-camp-head { flex-direction: column; gap: 6px; }
  .wk2-fmts { grid-template-columns: 1fr 1fr; }
  .wk2-fmt-banner, .wk2-fmt-email { grid-column: span 2; }
  .wk2-browser { aspect-ratio: 3 / 4; }
  .wk2-site-bar span { display: none; }
  .wk2-browser .wk2-thumbs { grid-template-columns: 1fr 1fr; padding: 12px; gap: 8px; }
}
.wk2-fmt.is-ph figcaption { visibility: hidden; }

/* v4: real wickhockey.com screens row */
.wk2-shots { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.wk2-shots::-webkit-scrollbar { display: none; }
.wk2-shot { margin: 0; aspect-ratio: auto; scroll-snap-align: start; }
.wk2-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
@media (max-width: 760px) { .wk2-shots { grid-auto-columns: 92%; gap: 12px; } }

/* Campaign rows (real creative) */
.wk2-crow { display: flex; align-items: flex-start; gap: 20px; margin-top: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #444 transparent; padding-bottom: 12px; overscroll-behavior-x: contain; }
.wk2-tile { flex: none; scroll-snap-align: start; }
.wk2-t-feed { width: 300px; }
.wk2-t-story { width: 250px; }
.wk2-t-land { width: 520px; }
.wk2-tile figure { margin: 0; }
.wk2-tile img { display: block; width: 100%; height: auto; }
.wk2-plain { border: 1px solid rgba(255,255,255,0.12); }
.wk2-t-land .wk2-plain img[height="956"] { width: 320px; }
.wk2-tile:has(img[height="956"]) { width: 320px; }
.wk2-cap { margin: 10px 0 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.wk2-ph-note { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.wk2-bannershot { margin: 24px 0 0; }
.wk2-emails { margin-top: 24px; }
.wk2-pano-wide img { flex: none; width: 100%; min-width: 900px; }
.wk2-slides-sq img { aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .wk2-t-feed { width: 240px; } .wk2-t-story { width: 200px; } .wk2-t-land { width: 300px; }
  .wk2-tile:has(img[height="956"]) { width: 240px; }
  .wk2-crow { gap: 14px; }
}
.wk2-emails { align-items: start; }
.bn-strip.wk2-emails figure { height: auto; }
.bn-strip.wk2-emails figure::after, .wk2-emails .bn-full { display: none; }
.bn-strip.wk2-emails > figure:nth-of-type(n+3) { display: block; }

/* Off-season carousel: all four slides as IG posts */
.wk2-igrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.wk2-igrow .wk2-igpost { width: 100%; margin: 0; }
.wk2-slide { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.wk2-specs-wide { margin-top: 40px; max-width: 760px; }
@media (max-width: 760px) {
  .wk2-igrow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .wk2-igrow::-webkit-scrollbar { display: none; }
  .wk2-igrow .wk2-igpost { flex: 0 0 78%; scroll-snap-align: start; }
}