/* ==========================================================================
   ubc Video Player Page – Responsive Layer
   Version: V1
   Works together with /Content/style.css?Ver8.2
   ========================================================================== */

/* ---------------------------------------
   Container widths per breakpoint
---------------------------------------- */
@media (min-width: 1280px) {
    .container__inner { max-width: 1240px; }
  }
  @media (min-width: 1440px) {
    .container__inner { max-width: 1360px; }
  }
  
  /* ---------------------------------------
     Visibility helpers (xs/sm/md/lg)
     Usage found in HTML:
     - hidden-md hidden-lg (mobile-only block)
     - hidden-xs hidden-sm (desktop-only block)
  ---------------------------------------- */
  
  /* default = visible; rules below hide per range */
  .hidden-xs,
  .hidden-sm,
  .hidden-md,
  .hidden-lg { display: initial !important; }
  
  /* xs: <480px */
  @media (max-width: 479.98px) {
    .hidden-xs { display: none !important; }
  }
  
  /* sm: 480–767.98px */
  @media (min-width: 480px) and (max-width: 767.98px) {
    .hidden-sm { display: none !important; }
  }
  
  /* md: 768–1023.98px */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .hidden-md { display: none !important; }
  }
  
  /* lg: ≥1024px */
  @media (min-width: 1024px) {
    .hidden-lg { display: none !important; }
  }
  
  /* ---------------------------------------
     Header / Navigation
  ---------------------------------------- */
  @media (max-width: 1023.98px) {
    .page-header { flex-wrap: wrap; padding: 8px 0; }
    .page-header__brand { order: 1; }
    .page-header__buttons { order: 2; margin-left: auto; }
    .page-header__nav-items--wrapper {
      order: 3;
      position: fixed;
      inset: 0 0 0 auto;
      width: min(88vw, 420px);
      background: var(--color-surface);
      color: var(--color-text);
      transform: translateX(100%);
      transition: transform .25s ease;
      box-shadow: -24px 0 48px rgba(0,0,0,.25);
      z-index: 50;
      padding: 16px;
      overflow-y: auto;
    }
    /* state class you can toggle via JS */
    .page-header__nav-items--wrapper.is-open { transform: translateX(0); }
  
    .page-header__nav-items {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }
    .nav-item__link { color: var(--color-text); padding: 12px 8px; border-radius: 10px; }
    .dropdown {
      position: static;
      display: none;
      width: 100%;
      margin-top: 6px;
      box-shadow: none;
      border-color: var(--color-border);
    }
    .nav-item:hover > .dropdown { display: none; } /* hover disabled on touch */
    .nav-item.is-expanded > .dropdown { display: block; } /* optional JS toggle */
  
    /* search input compact */
    .nav-item--search .header-search { width: 100%; }
    .nav-item--search__form {
      position: static;
      display: block !important;
      box-shadow: none;
      padding: 0;
      border: 0;
      background: transparent;
    }
  
    /* appearance blocks */
    .appearance-toggle--desktop { display: none !important; }
    .appearance-toggle--mobile { display: block !important; }
  }
  
  @media (min-width: 1024px) {
    .appearance-toggle--desktop { display: block !important; }
    .appearance-toggle--mobile { display: none !important; }
  }
  
  /* Compact header on very small screens */
  @media (max-width: 399.98px) {
    .page-header__buttons button { width: 36px; height: 36px; }
    .nav-item__link { padding: 10px 6px; }
  }
  
  /* ---------------------------------------
     Video Player Layout & Typography
  ---------------------------------------- */
  @media (max-width: 1024px) {
    .video-player__inner { gap: 16px; padding: 16px; }
    .video-player__title { font-size: clamp(1.1rem, 4.5vw, 1.6rem); }
    .video-player__description { font-size: .98rem; }
    .video-player__metrics { gap: 10px; }
  }
  
  @media (max-width: 599.98px) {
    .video-player__summary { flex-wrap: wrap; }
    .video-player__info__watch-buttons { gap: 6px; }
    .social-share__links { gap: 6px; }
  }
  
  /* Optional floating mini-player when a JS class is added */
  @media (min-width: 768px) {
    .floating-player-container.is-floating .floating-player {
      position: fixed;
      right: 16px; bottom: 16px;
      width: min(420px, 46vw);
      z-index: 40;
      border-radius: 12px; overflow: hidden;
      box-shadow: var(--shadow-2);
    }
    .floating-player-container.is-floating .video-player__iframe { aspect-ratio: 16/9; }
    .floating-player-container.is-floating .floating-player__control { display: inline-flex !important; }
  }
  
  /* ---------------------------------------
     Related Content Grid
  ---------------------------------------- */
  @media (max-width: 767.98px) {
    .related-content__learn-more__items { grid-template-columns: 1fr; }
  }
  
  @media (min-width: 768px) and (max-width: 1199.98px) {
    .related-content__learn-more__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  
  /* "Show more" button spacing on phones */
  @media (max-width: 575.98px) {
    .related-content__mobile-toggle { width: 100%; justify-content: center; }
  }
  
  /* ---------------------------------------
     Web Promo Block
  ---------------------------------------- */
  @media (max-width: 1023.98px) {
    .web-promo { padding: 12px; }
    .web-promo__details { order: 2; }
    .web-promo__image-section { order: 1; }
  }
  
  @media (max-width: 479.98px) {
    .web-promo__title { font-size: 1.05rem; }
    .web-promo__description { font-size: .98rem; }
  }
  
  /* ---------------------------------------
     Social Share
  ---------------------------------------- */
  @media (max-width: 479.98px) {
    .social-share__wrapper { flex-wrap: wrap; }
    .social-share__title { width: 100%; }
  }
  
  /* ---------------------------------------
     Continue Watching (inside user dropdown)
  ---------------------------------------- */
  @media (max-width: 1023.98px) {
    .continue-watching__videos { gap: 10px; }
    .continue-watching__video { width: 100%; }
    .continue-watching__video-image { border-radius: 12px; }
  }
  
  /* ---------------------------------------
     Forms & Modals
  ---------------------------------------- */
  @media (max-width: 639.98px) {
    .embed-modal__info { grid-template-columns: 80px 1fr; }
    .embed-modal__edit-dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .report-problem__form-button-container { display: flex; gap: 8px; flex-wrap: wrap; }
  }
  
  /* Make modal use full height on tiny screens */
  @media (max-width: 399.98px) {
    .modal-window__dialog { width: 94vw; max-height: 92vh; }
  }
  
  /* ---------------------------------------
     Footer
  ---------------------------------------- */
  @media (min-width: 900px) {
    .footer--inner { grid-template-columns: 220px 1fr 1fr 1fr; }
  }
  @media (max-width: 899.98px) {
    .footer--inner { grid-template-columns: 1fr; }
  }
  @media (max-width: 599.98px) {
    .footer__legal { gap: 8px; }
    .footer__legal-links { flex-wrap: wrap; gap: 8px; }
  }
  
  /* ---------------------------------------
     Header search (desktop vs mobile blocks)
     - Desktop: .nav-item--desktop (hidden on xs/sm)
     - Mobile : .nav-item--search--mobile (hidden on md/lg)
  ---------------------------------------- */
  @media (max-width: 767.98px) {
    .nav-item--search--mobile { display: list-item !important; }
    .nav-item--desktop { display: none !important; }
  }
  @media (min-width: 768px) {
    .nav-item--search--mobile { display: none !important; }
    .nav-item--desktop { display: list-item !important; }
  }
  
  /* ---------------------------------------
     Off-canvas backdrop helper (optional)
     Add .nav-overlay--open to body via JS
  ---------------------------------------- */
  @media (max-width: 1023.98px) {
    body.nav-overlay--open::after {
      content: "";
      position: fixed; inset: 0;
      background: rgba(2,6,23,.55);
      z-index: 40;
    }
  }
  
  /* ---------------------------------------
     Minor type tweaks for ultra-wide
  ---------------------------------------- */
  @media (min-width: 1600px) {
    .video-player__title { font-size: 2.15rem; }
    .content-section-title { font-size: 1.35rem; }
  }
  
  /* ---------------------------------------
     Print responsiveness (inherits from base)
  ---------------------------------------- */
  @media print {
    .dropdown,
    .page-header__buttons__main-nav-trigger,
    .page-header__buttons__search-nav-trigger { display: none !important; }
  }
  
  /* === NAV: dropdown jangan kepotong & tetap di atas konten === */
.page-header--ubcorg,
.page-header__nav-items--wrapper{
  overflow: visible !important;
}
.nav-item .dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-width: min(92vw, 560px);
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  z-index: 1000; /* hanya di dropdown */
}

/* Teks di dalam dropdown (supaya gak “invisible” di dark/nav bg) */
.nav-item .dropdown a,
.nav-item .dropdown p,
.nav-item .dropdown .shows-dropdown__section-body,
.nav-item .dropdown .related-content__learn-more__text__title{
  color:#111827 !important;
}
.nav-item .dropdown a:hover{ color:#1e3a8a !important; }

/* === SEARCH: pakai form header yang sudah ada, tanpa flyout === */
.page-header--ubcorg .nav-item--search .dropdown{
  position: static; /* gak jadi popover */
  display: block !important;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Style input-nya, responsif & tidak terlalu panjang */
.page-header--ubcorg .nav-item--search .nav-item--search__form{
  position: relative;
  margin: 8px 0 0 0;
}
.page-header--ubcorg .nav-item--search .header-search{
  width: clamp(320px, 38vw, 560px);
  height: 38px;
  line-height: 38px;
  border-radius: 20px;
  border: 1px solid rgba(17,24,39,.12);
  padding: 0 42px 0 40px;
  background: #fff;
  color: #0b1e34;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.page-header--ubcorg .nav-item--search .header-search::placeholder{
  color:#6b7280;
}

/* Ikon kaca pembesar existing (btn) diposisikan di kiri input */
.page-header--ubcorg .nav-item--search .btn--search{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  opacity: .65;
  background: none;
  border: 0;
  padding: 0;
}

/* Pastikan “Share:” icon terlihat di semua tema */
.social-share__title{ color:#111827; }
.page-header--ubcorg ~ * .social-share__title{ color:inherit; } /* fallback */
.social-share__links{ display:flex; gap:.5rem; }
.social-share__link{
  width: 36px; height: 36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.10);
}
.social-share__link svg,
.social-share__link i{ width:18px; height:18px; fill:currentColor; color:#0b1e34; }