/* =========================================================
     PANEL BASE & DESKTOP LAYOUT
  ========================================================= */

  .gna-video-panel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1a1a1a;
    box-sizing: border-box;
  }

  .gna-video-panel *,
  .gna-video-panel *::before,
  .gna-video-panel *::after {
    box-sizing: border-box;
  }

  .gna-credit-divider {
    width: 100%;
    height: 1px;
    background: #dedede;
    margin: 2px 0 4px;
  }

  .gna-developer-credit {
    width: 100%;
    padding: 0 0 4px;
    font-size: 7pt;
    line-height: 1.0;
    font-weight: 400;
    color: #888;
    text-align: left;
    letter-spacing: 0.06em;
  }

  .gna-feature-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
  }

  .gna-feature-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .gna-feature-content {
    padding: 8px 0 10px;
  }

  .gna-feature-title {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
  }

  .gna-meta {
    font-size: 11px;
    line-height: 1.4;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.035em;
  }

  .gna-divider {
    width: 100%;
    height: 1px;
    background: #dedede;
    margin: 8px 0 12px;
  }

  /* =========================================================
     CAROUSEL
  ========================================================= */

  .gna-shorts-section {
    position: relative;
    width: 100%;
  }

  .gna-shorts-track {
    display: flex;
    gap: 4px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 8px;
  }

  .gna-shorts-track::-webkit-scrollbar {
    display: none;
  }

  .gna-short-card {
    flex: 0 0 calc(25% - 3px);
    min-width: 0;
    scroll-snap-align: start;
  }

  .gna-video-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .gna-video-link:focus-visible {
    outline: 3px solid #b00000;
    outline-offset: 3px;
  }

  .gna-short-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #111;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
  }

  .gna-short-media img,
  .gna-short-media iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .gna-short-media img {
    object-fit: cover;
  }

  .gna-facebook-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #262626, #090909);
    color: #fff;
  }

  .gna-facebook-placeholder span {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #fff;
  }

  .gna-facebook-placeholder::after {
    content: "NEWSREEL";
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255,255,255,.65);
  }

  .gna-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,.48);
    border: 1px solid rgba(255,255,255,.55);
    pointer-events: none;
    transition: background .2s ease;
  }

  .gna-play svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    margin-left: 3px;
  }

  .gna-video-link:hover .gna-play,
  .gna-video-link:focus-visible .gna-play {
    background: rgba(190,0,0,.85);
  }

  .gna-short-content {
    padding: 6px 12px 0 6px;
  }

  .gna-short-title {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #222;
  }

  .gna-short-date {
    font-size: 10px;
    line-height: 1.4;
    color: #888;
    text-transform: uppercase;
  }

  .gna-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 36%;
    transform: translateY(-50%);
    z-index: 10;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
  }

  .gna-nav:hover,
  .gna-nav:focus-visible {
    background: rgba(180,0,0,.9);
  }

  .gna-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .gna-nav svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .gna-prev {
    left: -12px;
  }

  .gna-next {
    right: -12px;
  }

  /* =========================================================
     MOBILE PANEL
  ========================================================= */

  @media (max-width: 767px) {

    .gna-feature-title {
      font-size: 18px;
    }

    .gna-feature-content {
      padding-top: 7px;
      padding-bottom: 8px;
    }

    .gna-divider {
      margin: 8px 0 10px;
    }

    .gna-shorts-track {
      gap: 4px;
      padding-right: 12%;
      scroll-padding-left: 0;
    }

    .gna-short-card {
      flex: 0 0 88%;
    }

    .gna-short-title {
      font-size: 14px;
    }

    .gna-nav {
      display: none;
    }
  }

  @media (max-width: 380px) {

    .gna-short-card {
      flex-basis: 92%;
    }

    .gna-feature-title {
      font-size: 17px;
    }
  }

  /* =========================================================
     IMMERSIVE MOBILE VIEWER
  ========================================================= */

  .deck-viewer {
    display: none;
  }

  @media (max-width: 767px) {

    /* The viewer is moved to document.body at runtime, so it must
       carry its own box-sizing rules instead of relying on the panel. */
    .deck-viewer,
    .deck-viewer *,
    .deck-viewer *::before,
    .deck-viewer *::after {
      box-sizing: border-box;
    }

    .deck-viewer {
      position: fixed;
      left: var(--deck-vv-left, 0px);
      top: var(--deck-vv-top, 0px);
      z-index: 2147483000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: var(--deck-vv-width, 100vw);
      height: var(--deck-vv-height, 100dvh);
      transform: scale(calc(1 / var(--deck-vv-scale, 1)));
      transform-origin: top left;
      padding:
        env(safe-area-inset-top, 0px)
        env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px)
        env(safe-area-inset-left, 0px);
      background: #000;
      color: #fff;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .18s ease, visibility .18s ease;
      overflow: hidden;
      touch-action: pan-y;
    }

    .deck-viewer.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .deck-viewer-stage {
      position: relative;
      display: flex;
      /* Keep every platform's portrait video anchored to the same bottom edge. */
      align-items: flex-end;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    /* Strict 9:16 portrait constraint without stretching */

    .deck-viewer-slot {
      position: relative;
      width: min(var(--deck-vv-width, 100vw), calc(var(--deck-vv-height, 100dvh) * 0.5625));
      height: min(var(--deck-vv-height, 100dvh), calc(var(--deck-vv-width, 100vw) * 1.777778));
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 9 / 16;
      background: #000;
      overflow: hidden;
    }

    .deck-viewer-slot iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
      object-fit: contain;
    }

    /* =====================================================
       NEW SWIPE ARCHITECTURE

       Top 56px       = protected
       Bottom 56px    = protected
       Centre 40px    = protected

       The left and right zones occupy only the remaining
       middle areas.

       The Deck arrow buttons have a higher z-index than
       these zones, so their touch interaction remains intact.
    ===================================================== */

    .deck-swipe-zone {
      position: absolute;
      top: 56px;
      bottom: 56px;
      width: calc(50% - 20px);
      z-index: 7;
      background: transparent;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
    }

    .deck-swipe-left {
      left: 0;
    }

    .deck-swipe-right {
      right: 0;
    }

    .deck-viewer-status {
      position: absolute;
      z-index: 8;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 10px 14px;
      border-radius: 6px;
      background: rgba(0,0,0,.72);
      color: #fff;
      font-size: 13px;
      pointer-events: none;
    }

    .deck-viewer-status::before {
      content: "";
      display: inline-block;
      width: 13px;
      height: 13px;
      margin: 0 9px -2px 0;
      border: 2px solid rgba(255,255,255,.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: deck-spin .8s linear infinite;
    }

    .deck-viewer-error {
      position: absolute;
      z-index: 9;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: min(300px, calc(100% - 40px));
      padding: 18px;
      border-radius: 8px;
      background: rgba(20,20,20,.96);
      color: #fff;
      text-align: center;
      font-size: 14px;
    }

    .deck-viewer-error p {
      margin: 0 0 12px;
    }

    .deck-viewer-retry {
      padding: 9px 16px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 20px;
      background: #fff;
      color: #111;
      font-weight: 600;
      cursor: pointer;
    }

    .deck-viewer-progress {
      position: absolute;
      z-index: 6;
      top: max(16px, env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 3px;
      width: min(220px, 48%);
    }

    .deck-viewer-progress span {
      display: block;
      flex: 1;
      height: 3px;
      border-radius: 4px;
      background: rgba(255,255,255,.35);
    }

    .deck-viewer-progress span.is-active {
      background: #fff;
    }

    .deck-viewer-progress span.is-viewed {
      background: rgba(255,255,255,.78);
    }

    @keyframes deck-spin {
      to {
        transform: rotate(360deg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .deck-viewer,
      .deck-viewer-arrow {
        transition: none !important;
      }

      .deck-viewer-status::before {
        animation: none;
      }
    }

    /* CLOSE BUTTON */

    .deck-viewer-close {
      position: absolute;
      top: max(12px, env(safe-area-inset-top, 0px));
      right: max(14px, env(safe-area-inset-right, 0px));
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      padding: 0 0 3px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 50%;
      background: rgba(0,0,0,.55);
      color: #fff;
      font: 300 32px/1 Arial, sans-serif;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    /* DECK NAVIGATION ARROWS */

    .deck-viewer-controls {
      position: absolute;
      right: max(14px, env(safe-area-inset-right, 0px));
      top: 50%;
      transform: translateY(-50%);
      z-index: 12;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 60px;
      pointer-events: none;
    }

    .deck-viewer-arrow {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 50%;
      background: rgba(255,255,255,.20);
      color: #fff;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      pointer-events: auto;
      opacity: .72;
      transition:
        background .2s ease,
        opacity .2s ease,
        transform .2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .deck-viewer-arrow svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deck-viewer-arrow:active {
      background: rgba(255,255,255,.42);
      opacity: 1;
      transform: scale(.94);
    }

    .deck-viewer-arrow:disabled {
      opacity: .22;
      cursor: default;
    }

    /* CAPTION */

    .deck-viewer-caption {
      position: absolute;
      right: 0;
      bottom: max(40px, calc(env(safe-area-inset-bottom, 0px) + 60px));
      left: 0;
      z-index: 4;
      padding: 48px 20px 14px;
      color: #fff;
      pointer-events: none;
      background: linear-gradient(
        transparent,
        rgba(0,0,0,.56)
      );
      text-shadow: 0 1px 3px rgba(0,0,0,.7);
    }

    /* Use the standard caption position to minimize video obstruction. */

    .deck-viewer-title {
      max-width: 620px;
      margin: 0 auto 6px;
      font-size: 15px;
      font-weight: 650;
      line-height: 1.35;
    }

    .deck-viewer-date {
      max-width: 620px;
      margin: 0 auto;
      font-size: 10px;
      line-height: 1.4;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.72);
    }

    .deck-viewer-hint {
      position: absolute;
      bottom: max(8px, env(safe-area-inset-bottom, 0px));
      left: 50%;
      z-index: 5;
      transform: translateX(-50%);
      width: max-content;
      max-width: calc(100% - 24px);
      color: rgba(255,255,255,.58);
      font-size: 10px;
      letter-spacing: .04em;
      text-align: center;
      pointer-events: none;
    }

    body.deck-viewer-active {
      overflow: hidden !important;
      overscroll-behavior: none;
    }
  }

  @media (min-width: 768px) {
    .deck-viewer-controls {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gna-shorts-track {
      scroll-behavior: auto;
    }
  }

/* =========================================================
   DESKTOP IMMERSIVE LIGHTBOX
   Reuses the same viewer and iframe lifecycle as mobile.
========================================================= */
@media (min-width: 768px) {
  .deck-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 24px 24px 28px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* 95% black tint leaves approximately 5% of the page visible. */
    background: rgba(0, 0, 0, .95) !important;
    background-color: rgba(0, 0, 0, .95) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
  }

  .deck-viewer.is-open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .deck-viewer-stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .deck-viewer-slot {
    position: relative;
    /* Reserve vertical room for the caption below the player. */
    width: min(430px, 56.25dvh, calc((100dvh - 140px) * .5625));
    height: auto;
    max-height: min(766px, calc(100dvh - 140px));
    aspect-ratio: 9 / 16;
    flex: 0 1 auto;
    background: #000;
    overflow: hidden;
  }

  .deck-viewer-slot iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
  }

  .deck-viewer-close {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 0 3px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #fff;
    font: 300 32px/1 Arial, sans-serif;
    cursor: pointer;
  }

  .deck-viewer-controls {
    position: absolute;
    right: max(28px, calc((100vw - 1000px) / 2));
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .deck-viewer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
  }

  .deck-viewer-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .deck-viewer-arrow:disabled { opacity: .25; cursor: default; }
  .deck-viewer-arrow:hover:not(:disabled) { background: rgba(255,255,255,.25); }

  .deck-viewer-caption {
    /* Normal-flow caption strip below the iframe: never covers platform controls. */
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    width: min(430px, 100%);
    margin: 0 auto;
    padding: 11px 12px 0;
    color: #fff;
    text-align: center;
    pointer-events: none;
    background: transparent;
    text-shadow: 0 1px 3px rgba(0,0,0,.75);
  }

  .deck-viewer-title {
    max-width: 100%;
    margin: 0 auto 5px;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
  }

  .deck-viewer-date {
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
  }

  .deck-viewer-progress {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    width: min(260px, 35vw);
    z-index: 15;
  }

  .deck-viewer-progress span {
    display: block;
    flex: 1;
    height: 3px;
    border-radius: 4px;
    background: rgba(255,255,255,.35);
  }
  .deck-viewer-progress span.is-active { background: #fff; }
  .deck-viewer-progress span.is-viewed { background: rgba(255,255,255,.78); }

  .deck-viewer-status {
    position: absolute;
    z-index: 18;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 10px 14px;
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 13px;
    pointer-events: none;
  }

  .deck-viewer-error {
    position: absolute;
    z-index: 19;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: min(320px, calc(100% - 40px));
    padding: 18px;
    background: #171717;
    color: #fff;
    text-align: center;
  }

  .deck-viewer-error p { margin: 0 0 12px; }
  .deck-viewer-retry {
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 20px;
    background: #fff;
    color: #111;
    font-weight: 600;
    cursor: pointer;
  }

  .deck-viewer-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.5);
    font-size: 10px;
    pointer-events: none;
  }

  .deck-swipe-zone { display: none; }
  body.deck-viewer-active { overflow: hidden !important; }
}