/* ==========================
   Manual grid cards (CPT)
   ========================== */

.ttg-grid{
  display:grid !important;
  gap:16px !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Lock 3 columns at and below 1024 (so it never collapses to 1 col) */
@media (max-width:1024px){
  .ttg-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* button reset + card styling */
.ttg-card{
  appearance:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  text-align:inherit !important;
  cursor:pointer !important;

  position:relative !important;
  display:block !important;
  width:100% !important;

  border-radius:14px !important;
  overflow:hidden !important;
  background:#000 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.14) !important;
}

/* subtle (lighter) overlay to help play icon readability */
.ttg-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.10) 45%,
    rgba(0,0,0,0) 75%
  );
  z-index:1;
}

.ttg-card:focus-visible{
  outline: 3px solid rgba(255,255,255,.55) !important;
  outline-offset: 3px !important;
}

.ttg-frame{
  width:100% !important;
  aspect-ratio: 9 / 16 !important;
  background:#000 !important;
  display:block !important;
}

.ttg-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.ttg-fallback{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:rgba(255,255,255,.85) !important;
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial !important;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.12), rgba(0,0,0,0) 60%),
    radial-gradient(120% 90% at 70% 80%, rgba(255,255,255,.08), rgba(0,0,0,0) 60%),
    #000 !important;
}

/* ==========================
   Play icon (Smash-like)
   - arrow only, bottom-left
   - no circle
   ========================== */

.ttg-card .ttg-play{
  position:absolute !important;
  left:12px !important;
  bottom:12px !important;
  top:auto !important;
  transform:none !important;

  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;

  display:block !important;
  z-index:2 !important; /* above ::after */
  pointer-events:none !important;
}

.ttg-card .ttg-play svg{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  flex:0 0 auto !important;
  display:block !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.ttg-card:hover .ttg-play svg{
  transform: scale(1.06);
  transition: transform .15s ease;
}

/* ==========================
   Modal Lightbox (Smash-like)
   ========================== */

.ttm-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.40);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999999;
}

.ttm-overlay.is-open{ display:flex; }

.ttm-dialog{
  width:min(540px, 92vw);
  padding:14px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.30);
  position:relative;
}

.ttm-player{
  width:100%;
  aspect-ratio:9/16;
  border:0;
  display:block;
  border-radius:14px;
  background:#000;
  overflow:hidden;
}

.ttm-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.08);
  color:#111;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ttm-close:hover{
  background:rgba(0,0,0,.14);
}

/* ==========================
   Hybrid layout: two blocks side-by-side
   ========================== */

.tt-hybrid-2col{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:16px !important;
  align-items:start !important;
}

@media (max-width:1024px){
  .tt-hybrid-2col{ grid-template-columns: 1fr !important; }
}

/* ==========================
   Smash Balloon overrides (right side only)
   ========================== */

.tt-hybrid-right .sb-feed-header,
.tt-hybrid-right .sb-feed-header-ctn,
.tt-hybrid-right .sb-load-button-ctn,
.tt-hybrid-right .sb-post-item-details,
.tt-hybrid-right .sb-post-item-caption{
  display:none !important;
}

.tt-hybrid-right [id^="sb-tiktok-feeds-container-"]{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  column-count: unset !important;
}

.tt-hybrid-right .sb-grid-wrapper{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:16px !important;
}

/* Lock Smash Balloon grid to 3 columns at and below 1024 too */
@media (max-width:1024px){
  .tt-hybrid-right .sb-grid-wrapper{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* limit to first 3 items */
.tt-hybrid-right .sb-post-item-wrap:nth-child(n+4){
  display:none !important;
}

.tt-hybrid-right .sb-post-item{
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 10px 24px rgba(0,0,0,.14) !important;
  background:#000 !important;
}

.tt-hybrid-right .sb-post-item-image-wrap{
  height:auto !important;
  aspect-ratio: 9 / 16 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  margin:0 !important;
  background:#000 !important;
}

.tt-hybrid-right .sb-post-item-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

@media (max-width:768px){
  .ttg-grid,
  .tt-hybrid-right .sb-grid-wrapper{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* ==========================
   Hover zoom (Smash-like)
   ========================== */

/* smooth transition */
.ttg-frame img,
.tt-hybrid-right .sb-post-item-image{
  transition: transform .35s ease !important;
  transform: scale(1) !important;
  will-change: transform;
}

/* zoom on hover */
.ttg-card:hover .ttg-frame img,
.tt-hybrid-right .sb-post-item:hover .sb-post-item-image{
  transform: scale(1.06) !important;
}