/* /advertising: title + the Wix Video gallery ("Work" channel).
   Desktop = Wix "strip" layout: full-bleed main player (41.82% of the width) above a strip of
   16:9 thumbnails, four per page. Mobile = Wix mobile slider, one 320x250 slide per video. */

.adv { display: block; padding-bottom: 226.7px; }

/* ---------- Title ---------- */
.adv-head .stage { height: 194px; }
.adv-title {
  position: absolute; top: 100px; left: 20px; right: 20px;
  font: 400 24px/27px var(--font-body); color: #000;
}

/* ---------- Desktop gallery ---------- */
.adv-mob { display: none; }
.adv-desk { position: relative; margin-top: 3px; }

.adv-player { position: relative; aspect-ratio: 1280 / 535.3; background: #000; overflow: hidden; }
.adv-main { position: absolute; inset: 0; color: #fff; }
.adv-main .adv-main-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adv-main-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .35);
}
.adv-play { display: flex; align-items: center; height: 40px; transition: opacity .2s; }
.adv-main:hover .adv-play { opacity: .7; }
.adv-play-icon { width: 37px; height: 37px; margin-right: 11px; flex: none; }
.adv-play-label {
  font: 400 18px/20px var(--font-ui); white-space: nowrap;
  border-bottom: 2px solid #fff; margin-bottom: -4px;
}
.adv-main[data-loaded] .adv-main-overlay { display: none; }
.adv-main[data-loaded] { cursor: default; }
.adv-arrow:focus-visible, .adv-page:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Previous / next video arrows on the main player: hidden until the player is hovered, like Wix. */
.adv-arrow {
  position: absolute; z-index: 3; top: 50%; margin-top: -25px;
  width: 38px; height: 50px; padding: 10px; border: 0; background: none; color: #fff;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.adv-arrow svg { width: 18px; height: 35px; display: block; overflow: visible; }
.adv-arrow-next { right: 54px; }
.adv-arrow-prev { left: 54px; }
.adv-arrow-prev svg { transform: scaleX(-1); }
.adv-player:hover .adv-arrow, .adv-arrow:focus-visible { opacity: 1; pointer-events: auto; }
.adv-player:hover .adv-arrow:hover { opacity: .7; }
.adv-arrow[hidden] { display: none; }

/* Strip of thumbnails */
.adv-strip { position: relative; }
.adv-strip-view { overflow: hidden; }
.adv-strip-track { display: flex; transition: transform .5s; }
.adv-cell { flex: 0 0 25%; min-width: 0; }
.adv-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  background: #a8a8a7; color: #fff; cursor: pointer; overflow: hidden; text-align: center;
}
.adv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adv-thumb-shade { position: absolute; inset: 0; background: transparent; transition: background-color .45s ease-in-out; }
.adv-thumb-info {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .45s, transform .65s;
}
.adv-thumb:hover .adv-thumb-shade, .adv-thumb:focus-visible .adv-thumb-shade { background-color: rgba(0, 0, 0, .5); }
.adv-thumb:hover .adv-thumb-info, .adv-thumb:focus-visible .adv-thumb-info { opacity: 1; transform: translateZ(0); }
.adv-thumb:focus-visible, .adv-main:focus-visible { outline: none; }
/* Focus ring drawn above the poster layers (an outline would sit underneath them). */
.adv-thumb::after, .adv-main::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.adv-thumb:focus-visible::after, .adv-main:focus-visible::after { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000; }
.adv-thumb-title {
  display: block; width: calc(100% - 32px); margin: 0 16px 14px; overflow: hidden;
  font: 400 20px/25px var(--font-ui); letter-spacing: -0.015em; color: #fff;
}
.adv-t1 { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.adv-t2 { display: flex; width: 100%; justify-content: center; }
.adv-t2-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 1ch; margin-right: -1ch; }
.adv-t2-dur { flex: 0 0 auto; white-space: pre; }
.adv-thumb-play { display: flex; align-items: center; height: 30px; font: 700 14px/28px var(--font-ui); letter-spacing: -0.025em; }
.adv-thumb-icon { width: 28px; height: 28px; margin-right: 11px; flex: none; }
.adv-thumb-label { border-bottom: 2px solid #fff; line-height: normal; margin-bottom: -4px; }

/* Strip paging arrows (Wix "Next videos" / "Previous videos") */
.adv-page {
  position: absolute; z-index: 2; top: 50%; margin-top: -33px;
  width: 50px; height: 66px; padding: 10px; border: 0;
  background: rgba(0, 0, 0, .8); color: #fff; opacity: .5; cursor: pointer;
}
.adv-page:hover, .adv-page:focus-visible { opacity: 1; transition: opacity .2s ease-in-out; }
.adv-page svg { width: 12px; height: 24px; margin: 0 auto; }
.adv-page-next { right: 0; }
.adv-page-prev { left: 0; }
.adv-page-prev svg { transform: scaleX(-1); }
.adv-page[hidden] { display: none; }

/* ---------- Mobile: Wix mobile layout, 1 Wix px = 1 --u ---------- */
@media (max-width: 767px) {
  .adv { padding-bottom: 0; }
  /* The 320-unit column (centred once --u stops growing at 480px), so the title lines up with the header. */
  .adv-head .stage { width: calc(320 * var(--u)); height: calc(96.5 * var(--u)); }
  .adv-title { top: calc(56 * var(--u)); left: calc(10 * var(--u)); right: calc(10 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(22.5 * var(--u)); }

  .adv-desk { display: none; }
  .adv-mob { display: block; position: relative; height: calc(250 * var(--u)); background: #000; overflow: hidden; }
  .adv-slider {
    display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .adv-slider::-webkit-scrollbar { display: none; }
  .adv-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .adv-slide-facade { position: absolute; inset: 0; color: #fff; background: #000; }
  .adv-slide-facade img {
    position: absolute; left: 0; top: calc(35 * var(--u)); width: 100%; height: calc(180 * var(--u)); object-fit: contain;
  }
  .adv-slide-facade iframe { top: calc(35 * var(--u)); bottom: auto; height: calc(180 * var(--u)); }
  .adv-slide-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .4);
  }
  .adv-slide-facade[data-loaded] .adv-slide-overlay { display: none; }
  .adv-slide-facade:focus-visible { outline: none; }
  .adv-slide-facade::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .adv-slide-facade:focus-visible::after { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000; }
  .adv-slide-play {
    display: flex; align-items: center; height: calc(30 * var(--u));
    font: 400 calc(14 * var(--u)) / 1.15 Arial, Helvetica, sans-serif; color: #fff;
  }
  .adv-slide-facade:active .adv-slide-play { opacity: .6; }
  .adv-slide-icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-right: calc(6 * var(--u)); flex: none; }

  .adv-slide-menu {
    position: absolute; z-index: 3; top: calc(-1 * var(--u)); right: 0;
    width: calc(42 * var(--u)); height: calc(42 * var(--u)); padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  }
  .adv-slide-menu svg { position: absolute; top: calc(13 * var(--u)); right: calc(13 * var(--u)); width: calc(4 * var(--u)); height: calc(16 * var(--u)); }
  .adv-slide-menu:focus-visible { outline: 2px solid #fff; outline-offset: calc(-4 * var(--u)); }
  .adv-info {
    position: absolute; z-index: 2; inset: 0; padding: calc(44 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
    background: #000; color: #fff; overflow-y: auto;
    font: 400 calc(14 * var(--u)) / 1.4 var(--font-ui);
  }
  .adv-info[hidden] { display: none; }
  .adv-info-title { font-size: calc(18 * var(--u)); line-height: 1.3; }
  .adv-info-dur { margin-top: calc(4 * var(--u)); opacity: .7; }
  .adv-info-desc { margin-top: calc(12 * var(--u)); text-align: justify; hyphens: auto; }
  /* Brand and composer names are never split by automatic hyphenation ("Min-sait"). */
  .adv-name { hyphens: manual; white-space: nowrap; }

  .adv-dots {
    position: absolute; z-index: 1; left: 50%; bottom: calc(10 * var(--u));
    width: calc(84 * var(--u)); height: calc(6 * var(--u)); margin-left: calc(-42 * var(--u));
    overflow: hidden; pointer-events: none;
  }
  .adv-dots-row { position: absolute; top: 0; left: calc(24 * var(--u)); display: flex; align-items: center; height: 100%; transition: transform .5s; }
  .adv-dot {
    display: block; flex: none; margin: 0 calc(4 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u));
    border-radius: 50%; background: transparent;
  }
  .adv-dot.is-near { margin: 0 calc(3 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); background: rgba(255, 255, 255, .7); }
  .adv-dot.is-edge { background: rgba(255, 255, 255, .7); }
  .adv-dot.is-active { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .adv-strip-track, .adv-dots-row, .adv-thumb-info, .adv-thumb-shade { transition: none; }
}