/* ==========================================================================
   SEHAM LATINO — Video wall page
   ========================================================================== */

/* A white room. The header on this page is the light variant, the cards are
   white players floating in it, and everything recedes into the same warm
   off-white rather than into black. */
.video-wall{
  --wall-bg:#F7F3EE;
  background:var(--wall-bg);color:var(--ink);
  padding-block:0 clamp(4rem,8vw,7rem);
}

/* The runway. The stage sticks to the top of it and fills the screen, so
   scrolling flies the camera forward for three screens and then simply carries
   on to the list — a full-page canvas that never swallows the scroll. */
.video-wall-flight{position:relative;block-size:320vh}

.video-wall-copy{
  position:absolute;z-index:3;
  inset-inline:0;
  inset-block-start:calc(var(--nav-h) + 38px + clamp(1.2rem,4vw,2.6rem));
  padding-inline:var(--gutter);
  text-align:center;
  pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.video-wall-copy.is-static{position:static;padding-block-start:calc(var(--nav-h) + 38px + 3rem);margin-block-end:2rem}
/* Once the flight is under way the words have said their piece. */
.video-wall.is-flying .video-wall-copy{opacity:0;transform:translateY(-14px)}
/* The words sit on top of a busy, moving picture, so they get their own pool
   of light rather than relying on a text shadow to carry them. */
.video-wall-copy::before{
  content:"";position:absolute;z-index:-1;
  inset:-2.5rem -1rem -3.5rem;
  background:radial-gradient(58% 100% at 50% 42%,rgba(251,247,242,.94),rgba(251,247,242,.6) 55%,rgba(251,247,242,0) 78%);
  pointer-events:none;
}
.video-wall-copy .t-eyebrow{color:var(--wine-600)}
.video-wall-copy .t-display{margin-block:.7rem .9rem;color:var(--ink);text-shadow:0 2px 22px rgba(251,247,242,.9)}
.video-wall-copy .t-lead{color:var(--ink-2);max-inline-size:52ch;margin-inline:auto;text-shadow:0 2px 18px rgba(251,247,242,.95)}

/* --------------------------------------------------------------------------
   The canvas
   -------------------------------------------------------------------------- */
.video-wall-stage{
  position:sticky;
  inset-block-start:0;
  inline-size:100%;
  block-size:100vh;
  block-size:100dvh;
  overflow:hidden;
  background:radial-gradient(120% 95% at 50% 36%,#FBF7F2,#EBE3D8 82%);
  border-block:1px solid rgba(22,16,17,.07);
  cursor:grab;
  /* pan-y, not none: a thumb dragged up or down still scrolls the page, so a
     full-width canvas can never trap the reader. Sideways is ours. */
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
  outline-offset:-3px;
}
.video-wall-stage:focus-visible{outline:2px solid var(--gold-400)}
.video-wall.is-dragging .video-wall-stage{cursor:grabbing}
.video-wall.is-over-card .video-wall-stage{cursor:pointer}
.video-wall-stage canvas{
  display:block;inline-size:100%;block-size:100%;
  opacity:0;transition:opacity .9s var(--ease-out);
}
.video-wall.is-ready .video-wall-stage canvas{opacity:1}

/* A single line naming whatever card the pointer is over. */
.video-wall-caption{
  position:absolute;z-index:2;inset-block-end:clamp(4rem,7vw,5.2rem);inset-inline:0;
  text-align:center;padding-inline:1rem;
  color:var(--wine-600);font-size:.85rem;font-weight:600;letter-spacing:.01em;
  pointer-events:none;
  min-block-size:1.4em;
}

.video-wall-hint{
  position:absolute;z-index:2;inset-block-end:clamp(1rem,2.5vw,1.6rem);inset-inline:0;
  display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;
  padding-inline:1rem;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease-out) .5s;
}
.video-wall.is-ready .video-wall-hint{opacity:1}
/* Once the flight is under way the instructions have done their job. */
.video-wall.is-ready.is-flying .video-wall-hint{opacity:0}
.video-wall-hint span{
  padding:.34rem .8rem;border-radius:999px;
  border:1px solid rgba(22,16,17,.1);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--ink-3);font-size:.7rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(22,16,17,.07);
}

/* --------------------------------------------------------------------------
   The list underneath — the accessible route to every video, and the whole
   page when WebGL is unavailable.
   -------------------------------------------------------------------------- */
.video-wall-list{margin-block-start:clamp(3rem,7vw,5rem)}
.video-wall-list>h2{margin-block-end:clamp(1.2rem,3vw,2rem);color:var(--ink)}
.video-wall-list ul{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(.7rem,1.6vw,1.1rem);padding:0;list-style:none;
}
.video-wall-list li{list-style:none}

.video-wall-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  inline-size:100%;aspect-ratio:9/16;
  padding:.9rem;border:1px solid rgba(22,16,17,.1);border-radius:20px;
  background:var(--card-poster,linear-gradient(165deg,#5C1225,#180611)) center/cover no-repeat;
  color:#fff;text-align:start;cursor:pointer;
  transition:transform .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.video-wall-card::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(transparent 38%,rgba(12,3,7,.86));
}
.video-wall-card-play{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;inline-size:44px;block-size:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.72rem;
  transition:background .3s var(--ease-out),transform .3s var(--ease-out);
}
html[dir="rtl"] .video-wall-card-play{transform:translate(50%,-50%)}
.video-wall-card-title{position:relative;font-size:.78rem;font-weight:600;line-height:1.4}
.video-wall-card:hover,.video-wall-card:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(92,18,37,.4);
  box-shadow:0 16px 34px rgba(22,16,17,.16);
}
.video-wall-card:hover .video-wall-card-play{background:rgba(117,17,43,.85);transform:translate(-50%,-50%) scale(1.08)}
html[dir="rtl"] .video-wall-card:hover .video-wall-card-play{transform:translate(50%,-50%) scale(1.08)}
.video-wall-card:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}

/* Without WebGL the list becomes the page, so it gets more room per card. */
.video-wall.is-fallback .video-wall-flight{display:none}
.video-wall.is-fallback{padding-block-start:calc(var(--nav-h) + 38px + 3rem)}
.video-wall.is-fallback .video-wall-list{margin-block-start:0}
.video-wall.is-fallback .video-wall-list ul{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

/* --------------------------------------------------------------------------
   The player
   -------------------------------------------------------------------------- */
.video-wall-dialog{
  position:fixed;inset:0;z-index:1400;
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(8,2,5,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.video-wall-dialog[hidden]{display:none}
.video-wall-dialog-inner{
  inline-size:min(440px,100%);
  display:grid;gap:.75rem;
}
.video-wall-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.video-wall-dialog-head h2{
  font-family:var(--display);font-size:1.05rem;font-weight:500;line-height:1.35;
  color:#F8F5F1;margin:0;min-inline-size:0;
}
.video-wall-dialog-close{
  flex:none;inline-size:40px;block-size:40px;border-radius:50%;
  border:1px solid rgba(248,245,241,.28);background:rgba(248,245,241,.1);
  color:#fff;font-size:1.6rem;line-height:1;
  transition:background .25s var(--ease-out),transform .25s var(--ease-out);
}
.video-wall-dialog-close:hover{background:var(--wine-600);transform:scale(1.06)}

.video-wall-dialog-body{
  position:relative;overflow:hidden;
  inline-size:100%;aspect-ratio:9/16;max-block-size:76vh;
  border-radius:22px;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.video-wall-dialog-body video{inline-size:100%;block-size:100%;object-fit:contain;background:#000}
/* The Instagram player is cross-origin, so its chrome is cropped the same way
   the homepage carousel crops it. */
.video-wall-dialog-body.is-embed{--reel-embed-top:54px;--reel-embed-zoom:1.09}
.video-wall-dialog-body.is-embed iframe{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:100%;block-size:1100px;border:0;background:#000;
  transform-origin:top center;
  transform:scale(var(--reel-embed-zoom)) translateY(calc(var(--reel-embed-top) * -1));
}
.video-wall-dialog-link{
  justify-self:center;
  padding:.5rem 1.1rem;border-radius:999px;
  border:1px solid rgba(201,171,114,.5);
  color:var(--gold-300);font-size:.78rem;font-weight:600;
  transition:background .25s var(--ease-out),color .25s var(--ease-out);
}
.video-wall-dialog-link:hover{background:var(--gold-400);color:var(--wine-900)}
.video-wall-dialog-link[hidden]{display:none}

@media(max-width:760px){
  .video-wall-flight{block-size:280vh}
  .video-wall-list ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The three hint pills collided with the "See all videos" link and looked
     like broken buttons on a phone. One line of plain text says the same
     thing and cannot be mistaken for something to press. */
  /* On a phone the stage is the whole screen, and the paragraph above already
     says drag, scroll and tap in plain words. A second row of the same three
     instructions had nowhere to sit that did not collide with either the
     heading or the "See all videos" pill, and said nothing new. */
  .video-wall-hint{display:none}
  .video-wall-caption{inset-block-end:4.2rem}
  /* A pill, not a bar. Stretched edge to edge across a full-screen canvas it
     read as a stuck toolbar; the tap target is kept at 44px all the same. */
  .video-wall-skip{
    inset-inline-start:auto;inset-inline-end:1rem;inset-block-end:1rem;
    display:inline-flex;align-items:center;justify-content:center;
    min-block-size:44px;padding-inline:1.1rem;font-size:.78rem;
    background:var(--wine-600);color:#fff;border-color:var(--wine-600);
  }
  .video-wall-skip:hover{background:var(--wine-500);color:#fff;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .video-wall-card:hover,.video-wall-card:focus-visible{transform:none}
  .video-wall-stage canvas{transition:none}
}

/* The deliberate way past the canvas, for anyone whose cursor is parked on it. */
.video-wall-skip{
  position:absolute;z-index:3;inset-block-end:clamp(1rem,2.5vw,1.6rem);inset-inline-end:clamp(1rem,3vw,2rem);
  padding:.44rem 1rem;border-radius:999px;
  border:1px solid rgba(92,18,37,.24);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--wine-600);font-size:.72rem;font-weight:600;white-space:nowrap;
  box-shadow:0 4px 14px rgba(22,16,17,.08);
  transition:background .25s var(--ease-out),color .25s var(--ease-out),transform .25s var(--ease-out);
}
.video-wall-skip:hover{background:var(--wine-600);color:#fff;transform:translateY(-2px)}
.video-wall-skip:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px}