/* UGCHost V107 — mobile-only presentation authority.
   Centers the homepage affiliate area, guarantees creator-card media visibility,
   and turns the global footer into a compact two-column mobile composition.
   Desktop/tablet layouts above 700px are intentionally untouched. */

@media (max-width:700px){
  /* Affiliate Marketing — centered on phones. */
  html body.ugc-home-v19 .ugc-affiliate-platform-strip,
  html body.ugc-home-v19 .ugc-affiliate-platforms,
  html body.ugc-home-v19 .ugc-affiliate-platform-row{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    justify-content:center!important;
    align-items:center!important;
  }
  html body.ugc-home-v19 .ugc-affiliate-platform-title{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
  html body.ugc-home-v19 .ugc-affiliate-platform-title span,
  html body.ugc-home-v19 .ugc-affiliate-platform-title b,
  html body.ugc-home-v19 .ugc-affiliate-platform-title strong{
    width:100%!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body.ugc-home-v19 .ugc-affiliate-platform-row,
  html body.ugc-home-v19 .ugc-affiliate-platforms{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:12px!important;
  }
  html body.ugc-home-v19 .ugc-affiliate-platform{
    flex:0 0 auto!important;
    margin:0!important;
  }

  /* Creator hero cards — never allow mobile rules to blank the media panel. */
  html body.ugc-home-v19 .ugc19-visual .ugc26-card-media{
    position:relative!important;
    display:block!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#101a20!important;
  }
  html body.ugc-home-v19 .ugc19-visual .ugc26-card-media>img,
  html body.ugc-home-v19 .ugc19-visual .ugc26-card-media>video,
  html body.ugc-home-v19 .ugc19-visual .ugc26-card img,
  html body.ugc-home-v19 .ugc19-visual .ugc26-card video{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    min-width:0!important;
    object-fit:cover!important;
    object-position:center 30%!important;
    transform:none!important;
    filter:none!important;
    background:#101a20!important;
  }
  html body.ugc-home-v19 .ugc19-visual .ugc26-card-main video,
  html body.ugc-home-v19 .ugc19-visual .ugc26-card-main img{object-position:center 34%!important}
}

@media (max-width:560px){
  /* Compact mobile footer: balanced rather than one very long vertical list. */
  html body #ugcGlobalFooter.ugcf .ugcf-inner{
    width:calc(100% - 20px)!important;
    max-width:100%!important;
    padding:28px 0 14px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-command{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:4px 0 24px!important;
    text-align:center!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-brand-lockup{
    justify-items:center!important;
    align-items:center!important;
    gap:9px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-brand-lockup .ugcf-logo,
  html body #ugcGlobalFooter.ugcf .ugcf-brand-lockup .ugcf-logo.ugcf-lion-logo{
    width:118px!important;
    height:118px!important;
    margin:0 auto!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-brand-line{
    width:118px!important;
    margin:0 auto!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-brand-note{
    max-width:280px!important;
    margin:0 auto!important;
    text-align:center!important;
    line-height:1.5!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-hero-copy{
    text-align:center!important;
    max-width:360px!important;
    margin:0 auto!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-hero-copy h2{
    max-width:340px!important;
    margin:7px auto 10px!important;
    font-size:clamp(29px,8.7vw,36px)!important;
    line-height:.98!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-hero-copy p{
    max-width:340px!important;
    margin:0 auto!important;
    font-size:11px!important;
    line-height:1.6!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:8px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-actions a{
    min-width:0!important;
    min-height:44px!important;
    padding:0 11px!important;
    font-size:10px!important;
    gap:8px!important;
  }

  html body #ugcGlobalFooter.ugcf .ugcf-capabilities{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-capabilities>div{
    min-height:82px!important;
    padding:15px 12px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-capabilities>div:nth-child(odd){border-right:1px solid var(--ugcf-line)!important}
  html body #ugcGlobalFooter.ugcf .ugcf-capabilities>div:nth-child(even){border-right:0!important}
  html body #ugcGlobalFooter.ugcf .ugcf-capabilities strong{font-size:9px!important}
  html body #ugcGlobalFooter.ugcf .ugcf-capabilities small{font-size:8.5px!important}

  html body #ugcGlobalFooter.ugcf .ugcf-directory{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    padding:22px 0 24px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-links,
  html body #ugcGlobalFooter.ugcf .ugcf-links:nth-child(4){
    min-width:0!important;
    margin:0!important;
    padding:14px 12px!important;
    border:1px solid rgba(255,255,255,.075)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.025)!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-workspace{
    grid-column:1/-1!important;
    padding:16px 14px!important;
    border-color:rgba(230,180,42,.22)!important;
    background:linear-gradient(145deg,rgba(230,180,42,.075),rgba(255,255,255,.025))!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-links:last-child{
    grid-column:1/-1!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-links:last-child nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:14px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-links h3{
    margin:5px 0 10px!important;
    font-size:11px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-mini{font-size:7.5px!important}
  html body #ugcGlobalFooter.ugcf .ugcf-links nav{gap:7px!important}
  html body #ugcGlobalFooter.ugcf .ugcf-links nav a{
    min-width:0!important;
    font-size:8.8px!important;
    line-height:1.35!important;
  }

  html body #ugcGlobalFooter.ugcf .ugcf-bottom{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:11px!important;
    padding:18px 0 10px!important;
    text-align:center!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-bottom-brand{
    justify-content:center!important;
    text-align:center!important;
    font-size:8.5px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-bottom-links{
    display:flex!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px 13px!important;
  }
  html body #ugcGlobalFooter.ugcf .ugcf-bottom-links a,
  html body #ugcGlobalFooter.ugcf .ugcf-top{font-size:8.5px!important}
  html body #ugcGlobalFooter.ugcf .ugcf-bottom>small{font-size:8px!important}
  html body #ugcGlobalFooter.ugcf .ugcf-watermark{font-size:160px!important;top:82px!important}
}

@media (max-width:360px){
  html body #ugcGlobalFooter.ugcf .ugcf-actions{grid-template-columns:1fr!important}
  html body #ugcGlobalFooter.ugcf .ugcf-directory{gap:9px!important}
  html body #ugcGlobalFooter.ugcf .ugcf-links,
  html body #ugcGlobalFooter.ugcf .ugcf-links:nth-child(4){padding:12px 9px!important}
  html body #ugcGlobalFooter.ugcf .ugcf-links nav a{font-size:8.2px!important}
}