/* Karabass responsive ergonomics: video-first density without behavior changes. */

:root {
  --kb-ui-meta: 12px;
  --kb-ui-body: 14px;
  --kb-ui-section: 18px;
  --kb-ui-title: clamp(24px, 2.2vw, 34px);
}

/* Desktop home: stop presenting a karaoke thumbnail as a billboard. */
body.kb-home-page .kb-home-hero {
  margin-block: 18px 22px;
}

body.kb-home-page .kb-home-hero .video-player.row {
  min-height: 340px;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.75fr);
  grid-template-rows: minmax(340px, auto);
}

body.kb-home-page .kb-home-hero .video-player.row > [class*="col-"],
body.kb-home-page .kb-home-hero .img_vp_feat,
body.kb-home-page .kb-home-hero .thumbnail_holder {
  min-height: 340px;
}

body.kb-home-page .kb-home-hero .video-player .video-title {
  min-height: 340px;
  padding: 28px 32px;
}

body.kb-home-page .kb-home-eyebrow {
  margin-bottom: 12px;
}

body.kb-home-page .kb-home-hero .publisher-name {
  margin-bottom: 8px;
}

body.kb-home-page .kb-home-hero .video-big-title a {
  font-size: var(--kb-ui-title);
  line-height: 1.12;
}

body.kb-home-page .kb-home-intro {
  margin-block: 12px 18px;
  font-size: var(--kb-ui-body);
  line-height: 1.45;
}

body.kb-home-page .kb-home-hero .video-play-btn a {
  min-height: 44px;
  padding-inline: 16px;
}

.kb-footer-corporation {
  margin-right: auto;
  color: var(--kb-warm-faint);
  font-family: var(--kb-font-ui, 'Onest', sans-serif);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.01em;
}

.kb-footer-corporation strong {
  color: var(--kb-warm-muted);
  font-weight: 650;
}

/* Watch information: the player and next song are primary, guidance is secondary. */
body.kb-watch-page .kb-watch-experience .kb-watch-drive-current-panel > .vp_watch_vid_info.vp_main_watch_page {
  padding: 14px 16px 12px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .kb-watch-eyebrow {
  margin-bottom: 6px;
  font-size: var(--kb-ui-meta) !important;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .video-big-title h1 {
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .kb-karaoke-tip {
  margin-top: 8px;
  padding: 8px 10px;
  gap: 8px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .kb-karaoke-tip > svg {
  width: 18px;
  height: 18px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .kb-karaoke-tip strong {
  font-size: 12px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .kb-karaoke-tip span {
  font-size: 12px;
  line-height: 1.3;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary-panel > .vp_watch_vid_info.vp_main_watch_page {
  padding: 0 16px 16px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .video-views {
  padding-block: 8px 6px !important;
  font-size: 12px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .video-options {
  gap: 6px;
  margin-block: 6px 10px;
  padding-bottom: 10px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .video-options .btn_opts {
  min-height: 38px;
  padding: 7px 10px;
  gap: 6px;
  font-size: 12px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .video-options .btn_opts span,
body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .video-options .btn_opts span svg {
  width: 18px;
  height: 18px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .publisher-element {
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 12px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .publisher-avatar img {
  width: 38px;
  height: 38px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .publisher-name a {
  font-size: 13px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .publisher-name .time {
  font-size: 11px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .watch-video-description {
  margin-top: 10px;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .watch-video-description p {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.45;
}

body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .watch-video-show-more {
  min-height: 32px;
  line-height: 32px;
  font-size: 12px;
}

/* Search: fit above the software keyboard instead of covering the whole page. */
@media (max-width: 640px) {
  body.kb-home-page .kb-home-hero {
    margin-block: 4px 8px;
    padding-inline: 8px;
  }

  body.kb-home-page .kb-home-hero .video-player.row {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    border-radius: 16px;
  }

  body.kb-home-page .kb-home-hero .video-player.row > [class*="col-"],
  body.kb-home-page .kb-home-hero .img_vp_feat,
  body.kb-home-page .kb-home-hero .thumbnail_holder {
    min-height: 0;
  }

  body.kb-home-page .kb-home-hero .img_vp_feat,
  body.kb-home-page .kb-home-hero .thumbnail_holder {
    aspect-ratio: 2.2 / 1;
  }

  body.kb-home-page .kb-home-hero .video-player .video-title {
    width: 100%;
    min-height: 0;
    padding: 14px 12px 16px;
  }

  body.kb-home-page .kb-home-eyebrow {
    display: none;
  }

  body.kb-home-page .kb-home-hero .publisher-name {
    margin-bottom: 6px;
  }

  body.kb-home-page .kb-home-hero .video-big-title a {
    font-size: clamp(22px, 6.4vw, 26px);
    line-height: 1.14;
  }

  body.kb-home-page .kb-home-intro {
    margin-block: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
  }

  body.kb-home-page .kb-home-hero .video-play-btn a {
    width: auto;
    min-width: 156px;
    min-height: 44px;
    padding-inline: 14px;
  }

  body.kb-watch-page .kb-watch-experience .kb-watch-drive-current-panel > .vp_watch_vid_info.vp_main_watch_page {
    margin: 6px 8px;
    padding: 12px;
    border-radius: 14px;
  }

  body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .video-big-title h1 {
    font-size: 20px;
  }

  body.kb-watch-page .kb-watch-experience .kb-watch-drive-current .kb-karaoke-tip {
    display: none;
  }

  body.kb-watch-page .kb-watch-experience .kb-watch-drive-secondary .video-options .btn_opts {
    min-height: 44px;
  }

  nav.navbar-findcond .search-header {
    height: 52px;
    padding: 4px 6px;
  }

  nav.navbar-findcond .search-header > .form-group {
    height: 44px;
  }

  nav.navbar-findcond .search-header input,
  body.kb-lounge-page nav.navbar-findcond .search-header input {
    width: calc(100% - 48px) !important;
    min-height: 44px;
    height: 44px !important;
    margin-left: 48px !important;
    padding: 0 38px 0 12px !important;
    border-radius: 12px !important;
  }

  nav.navbar-findcond .kb-header-search-close {
    width: 42px;
    min-width: 42px;
    height: 44px;
  }

  nav.navbar-findcond .search-header .search-dropdown {
    top: 48px;
    left: 0;
    width: 100%;
    max-height: min(38dvh, 320px);
    border-radius: 0 0 14px 14px;
  }

  nav.navbar-findcond .search-header .kb-search-guidance {
    padding: 7px 10px 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  nav.navbar-findcond .search-header .kb-search-smart-option {
    min-height: 44px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 18px;
  }

  nav.navbar-findcond .search-header .kb-search-smart-reason {
    display: none;
  }

  .cc-window.cc-theme-classic,
  .cc-window.cc-theme-classic.cc-floating {
    right: 8px !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    border-radius: 14px !important;
  }

  .cc-window.cc-theme-classic .cc-message {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .cc-window.cc-theme-classic .cc-message img {
    display: none !important;
  }

  .cc-window.cc-theme-classic .cc-compliance {
    flex: 0 0 96px !important;
  }

  .cc-window.cc-theme-classic .cc-btn.cc-dismiss {
    width: 96px !important;
    min-width: 96px !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 8px !important;
  }

  .kb-footer-corporation {
    width: 100%;
    order: -1;
    margin: 0 0 4px;
    text-align: left;
  }
}

@media (max-width: 359px) {
  body.kb-home-page .kb-home-hero .video-big-title a {
    font-size: 21px;
  }

  nav.navbar-findcond .search-header .search-dropdown {
    max-height: 42vh;
  }
}