/**
 * X.com-style 1235px layout for Betube
 */
:root {
  --navbar-height: 70px;
}

.x-layout-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr 350px;
  max-width: 1235px;
  margin: 0 auto;
  gap: 0;
  overflow-x: hidden;
}

.x-sidebar-left {
  position: sticky;
  top: var(--navbar-height);
  height: fit-content;
  max-height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  padding: 0 0.75rem 1rem 0.75rem;
  scrollbar-width: none;
  margin-top: -1.5rem;
  transform: translateY(-70px);
}

.x-sidebar-left::-webkit-scrollbar {
  display: none;
}

.x-sidebar-left .x-nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
  border-radius: 9999px;
  text-decoration: none;
  color: #0f1419;
  font-size: 1.25rem;
  font-weight: 400;
  transition: background-color 0.2s;
}

.x-sidebar-left .x-nav-item:hover {
  background-color: #e7e9ea;
}

.x-sidebar-left .x-nav-item.active {
  font-weight: 700;
}

.x-sidebar-left .x-nav-item i {
  margin-right: 1rem;
  font-size: 1.5rem;
  width: 1.5rem;
  text-align: center;
}

.x-center {
  min-width: 0;
  border-left: 1px solid #e7e9ea;
  border-right: 1px solid #e7e9ea;
}

.x-center .btp_inner_page {
  padding-top: 0;
}

.x-center .container,
.x-center .container-fluid {
  max-width: 100%;
}

.x-center .row > .col-lg-3:empty,
.x-center .row > .col-lg-4:empty,
.x-center .row > .col-xl-3:empty {
  display: none !important;
}

.x-sidebar-right {
  position: sticky;
  top: var(--navbar-height);
  height: fit-content;
  max-height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  padding: 1rem;
  scrollbar-width: none;
}

.x-sidebar-right::-webkit-scrollbar {
  display: none;
}

.x-sidebar-right .btp_sidebar {
  background: #f7f9f9;
  border-radius: 1rem;
  padding: 1rem;
}

@media (max-width: 1200px) {
  .x-layout-wrapper {
    grid-template-columns: 88px 1fr 300px;
  }
  .x-sidebar-left .x-nav-item span {
    display: none;
  }
  .x-sidebar-left .x-nav-item i {
    margin-right: 0;
  }
  .x-sidebar-left .x-nav-item {
    justify-content: center;
    padding: 0.75rem;
  }
}

@media (max-width: 992px) {
  .x-layout-wrapper {
    grid-template-columns: 1fr;
  }
  .x-sidebar-left,
  .x-sidebar-right {
    display: none;
  }
  .x-center {
    border-left: none;
    border-right: none;
  }
}

.x-center .row > .col-lg-4:empty,
.x-center .row > .col-xl-3:empty {
  display: none !important;
}

.x-center .row > .col-lg-8:not(:has(.btp_sidebar)),
.x-center .row > .col-lg-9:not(:has(.btp_sidebar)),
.x-center .row > .col-xl-9:not(:has(.btp_sidebar)) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Edge-to-edge video - no padding anywhere */
.x-center section.btp_sv,
.x-center section.btp_\.v {
  margin: 0 -1.5rem !important;
  padding: 0 !important;
  width: calc(100% + 3rem) !important;
  max-width: none !important;
}
.x-center section.btp_sv .row,
.x-center section.btp_\.v .row { margin: 0 !important; padding: 0 !important; }
.x-center section.btp_sv .col,
.x-center section.btp_\.v .col { margin: 0 !important; padding: 0 !important; }
.x-center section.btp_sv .video-wrap,
.x-center section.btp_sv .embed-responsive,
.x-center section.btp_\.v .video-wrap,
.x-center section.btp_\.v .embed-responsive { margin: 0 !important; padding: 0 !important; }
.x-center section.btp_sv iframe,
.x-center section.btp_\.v iframe { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; }

/* 9:16 vertical aspect ratio (Shorts) - Bootstrap doesn't include this */
.embed-responsive-9by16::before {
  padding-top: 177.777778%; /* 16/9 */
}

/* YouTube-style mobile video: edge-to-edge, dynamic aspect ratio */
@media (max-width: 768px) {
  /* Video section: full width, no padding, sit at top */
  .x-center section.btp_sv,
  .x-center section.btp_\.v {
    margin: 0 -1rem !important;
    width: calc(100% + 2rem) !important;
  }
  .x-center section.btp_sv .embed-responsive,
  .x-center section.btp_\.v .embed-responsive {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Vertical (9:16 Shorts): fill viewport in portrait, edge-to-edge top-to-bottom */
  .single-shorts .x-center section.btp_sv .embed-responsive,
  .post-type-shorts .x-center section.btp_sv .embed-responsive {
    aspect-ratio: 9 / 16;
    max-height: min(100vh, 100vw * 16 / 9);
  }
  /* Horizontal (16:9): full width, dark background for letterboxing */
  .x-center section.btp_sv .embed-responsive-16by9,
  .x-center section.btp_\.v .embed-responsive-16by9 {
    background: #0a0a0a;
  }
  /* Square (1:1): full width, dark background above/below */
  .x-center section.btp_sv .embed-responsive-1by1,
  .x-center section.btp_\.v .embed-responsive-1by1 {
    background: #0a0a0a;
  }
}

/* Blog post images */
.x-center .blog_single_post_head img {
  transform: scale(1.08) translateY(-4px);
}

@media (max-width: 480px) {
  .x-center .blog_single_post_head img {
    transform: scale(1.09) translateY(-5px);
  }
}

/* Avatars - circular, X.com feed size (48px) */
img.img-thumbnail,
img.avatar,
img[src*="gravatar"],
.media img.img-thumbnail,
.t_author_bio img,
.btp_recent_post_widget img {
  border-radius: 50% !important;
  object-fit: cover;
  width: 48px !important;
  height: 48px !important;
}