/* CASTING LAB v126.212 — Mobile Main Type/Heart Fine Tune
   Scope: HOME page only, mobile <= 767px.
   PC/tablet, admin, data/auth/routing logic intentionally untouched. */

@media (max-width:767px){
  /* Header — remove mobile MY and use the existing language selector inline. */
  body.cl-v1-home-active .mobile-header-actions #mobileMy{
    display:none!important;
  }
  body.cl-v1-home-active .mobile-header-actions{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  body.cl-v1-home-active .cl-language-switcher.cl-language-mobile{
    display:inline-flex!important;
    align-items:center!important;
    margin-left:auto!important;
  }
  body.cl-v1-home-active .cl-language-switcher.cl-language-mobile .cl-lang-trigger{
    min-width:0!important;
    width:auto!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 2px!important;
    gap:8px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--cl-v1-ink)!important;
    font-size:15px!important;
    font-weight:650!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }
  body.cl-v1-home-active .cl-language-switcher.cl-language-mobile .cl-lang-globe{
    display:inline-block!important;
    width:19px!important;
    height:19px!important;
    flex:0 0 19px!important;
    font-size:0!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:19px 19px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.3 2.5 3.5 5.5 3.5 9S14.3 18.5 12 21M12 3C9.7 5.5 8.5 8.5 8.5 12S9.7 18.5 12 21'/%3E%3C/svg%3E")!important;
  }
  body.cl-v1-home-active .cl-language-switcher.cl-language-mobile .cl-lang-chevron{
    display:none!important;
  }
  body.cl-v1-home-active .cl-language-switcher.cl-language-mobile .cl-lang-current{
    white-space:nowrap!important;
  }

  /* Hero — one compact industry line, no secondary description. */
  body.cl-v1-home-active .cl-v1-hero-card{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.cl-v1-home-active .cl-v1-hero [data-cl-v1-i18n="heroDesc"],
  body.cl-v1-home-active .cl-v1-hero p br{
    display:none!important;
  }
  html[lang="ko"] body.cl-v1-home-active .cl-v1-hero [data-cl-v1-i18n="heroIndustries"]{
    display:block!important;
    white-space:nowrap!important;
    font-size:13px!important;
    line-height:1.40!important;
    letter-spacing:-.055em!important;
    font-weight:650!important;
  }
  body.cl-v1-home-active .cl-v1-hero p{
    margin:0!important;
  }

  /* Kicker + MORE share the same first row. Existing hrefs remain unchanged. */
  body.cl-v1-home-active #clV1Projects .cl-v1-section-head,
  body.cl-v1-home-active #clV1Talents .cl-v1-section-head{
    align-items:flex-start!important;
  }
  body.cl-v1-home-active #clV1Projects .cl-v1-more,
  body.cl-v1-home-active #clV1Talents .cl-v1-more{
    align-self:flex-start!important;
    margin-top:0!important;
    padding:0!important;
    font-size:0!important;
    line-height:var(--cl-line-sm)!important;
    color:var(--cl-v1-blue)!important;
    text-decoration:none!important;
  }
  body.cl-v1-home-active #clV1Projects .cl-v1-more::after,
  body.cl-v1-home-active #clV1Talents .cl-v1-more::after{
    content:"MORE";
    font-size:13px!important;
    line-height:var(--cl-line-sm)!important;
    letter-spacing:.08em!important;
    font-weight:800!important;
    color:var(--cl-v1-blue)!important;
  }

  /* Project / talent thumbnails stay true 1:1 squares. */
  body.cl-v1-home-active .cl-v1-project-card{
    aspect-ratio:auto!important;
  }
  body.cl-v1-home-active .cl-v1-project-image,
  body.cl-v1-home-active .cl-v1-talent-photo{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1 / 1!important;
    flex:0 0 auto!important;
  }

  /* Bottom navigation — five equal columns, equal icon slot, equal baselines. */
  html.cl-v1-home-boot .bottom,
  body.cl-v1-home-active .bottom{
    height:94px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    padding:8px 8px max(10px,env(safe-area-inset-bottom))!important;
  }
  html.cl-v1-home-boot .bottom .nav,
  body.cl-v1-home-active .bottom .nav{
    height:74px!important;
    min-width:0!important;
    display:grid!important;
    grid-template-rows:44px 18px!important;
    row-gap:6px!important;
    align-items:center!important;
    justify-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:600!important;
  }
  html.cl-v1-home-boot .bottom .nav > svg,
  body.cl-v1-home-active .bottom .nav > svg,
  html.cl-v1-home-boot .bottom .chat-nav-icon,
  body.cl-v1-home-active .bottom .chat-nav-icon,
  html.cl-v1-home-boot .bottom .plus,
  body.cl-v1-home-active .bottom .plus,
  html.cl-v1-home-boot .bottom .cl-v210-bottom-profile,
  body.cl-v1-home-active .bottom .cl-v210-bottom-profile{
    grid-row:1!important;
    align-self:center!important;
    justify-self:center!important;
  }
  html.cl-v1-home-boot .bottom .nav > svg,
  body.cl-v1-home-active .bottom .nav > svg{
    width:38px!important;
    height:38px!important;
    margin:0!important;
  }
  html.cl-v1-home-boot .bottom .chat-nav-icon,
  body.cl-v1-home-active .bottom .chat-nav-icon{
    width:44px!important;
    height:44px!important;
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    margin:0!important;
  }
  html.cl-v1-home-boot .bottom .chat-nav-icon svg,
  body.cl-v1-home-active .bottom .chat-nav-icon svg{
    width:36px!important;
    height:36px!important;
    margin:0!important;
  }
  html.cl-v1-home-boot .bottom .plus,
  body.cl-v1-home-active .bottom .plus{
    width:40px!important;
    height:40px!important;
    border-radius:13px!important;
    margin:0!important;
    box-shadow:0 4px 10px rgba(49,88,230,.18)!important;
  }
  html.cl-v1-home-boot .bottom .plus svg,
  body.cl-v1-home-active .bottom .plus svg{
    width:28px!important;
    height:28px!important;
    margin:0!important;
  }
  html.cl-v1-home-boot .bottom .nav .nav-language-label,
  body.cl-v1-home-active .bottom .nav .nav-language-label{
    grid-row:2!important;
    height:18px!important;
    line-height:18px!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    align-self:center!important;
  }

  /* Korean visual labels only; existing button IDs/events remain untouched. */
  html[lang="ko"] body.cl-v1-home-active #bottomChat .nav-language-label,
  html[lang="ko"].cl-v1-home-boot #bottomChat .nav-language-label,
  html[lang="ko"] body.cl-v1-home-active #bottomMy .nav-language-label,
  html[lang="ko"].cl-v1-home-boot #bottomMy .nav-language-label{
    font-size:0!important;
  }
  html[lang="ko"] body.cl-v1-home-active #bottomChat .nav-language-label::after,
  html[lang="ko"].cl-v1-home-boot #bottomChat .nav-language-label::after{
    content:"메세지";
    font-size:13px!important;
  }
  html[lang="ko"] body.cl-v1-home-active #bottomMy .nav-language-label::after,
  html[lang="ko"].cl-v1-home-boot #bottomMy .nav-language-label::after{
    content:"MY";
    font-size:13px!important;
  }

  /* Profile photo is presentation-only; fallback SVG stays in DOM when no image exists. */
  .cl-v210-bottom-profile{
    width:38px!important;
    height:38px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    border:2px solid #fff!important;
    box-shadow:0 0 0 1.5px #a8aaa5!important;
    background:#ecece8!important;
  }
  #bottomMy.cl-v210-has-profile > svg{
    display:none!important;
  }

  /* v126.211 — align full-width top HOME blocks with the content text grid. */
  body.cl-v1-home-active .cl-v1-livebar{
    margin-left:-15px!important;
    margin-right:-15px!important;
    padding-left:15px!important;
    padding-right:15px!important;
  }
  body.cl-v1-home-active .cl-v1-hero{
    margin-left:-15px!important;
    margin-right:-15px!important;
  }
  body.cl-v1-home-active .cl-v1-hero-card{
    padding-left:15px!important;
    padding-right:15px!important;
  }

  /* v126.212 — restore the original mobile brand size. */
  html.cl-v1-home-boot .header .brand .brand-mobile,
  body.cl-v1-home-active .header .brand .brand-mobile{
    font-size:22px!important;
    line-height:1!important;
    letter-spacing:-1px!important;
  }

  /* Restore the light transparent / glass HOME bottom bar instead of a solid white slab. */
  html.cl-v1-home-boot .bottom,
  body.cl-v1-home-active .bottom{
    background:rgba(245,244,240,.74)!important;
    border-top:1px solid rgba(216,216,210,.76)!important;
    box-shadow:0 -6px 20px rgba(20,23,30,.035)!important;
    backdrop-filter:blur(16px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.08)!important;
  }

  /* Expert profile image should never leave a broken-image glyph behind. */
  #bottomMy.cl-v211-has-profile > svg{
    display:none!important;
  }
  .cl-v211-bottom-profile{
    width:38px!important;
    height:38px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    border:2px solid #fff!important;
    box-shadow:0 0 0 1.5px #a8aaa5!important;
    background:#ecece8!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:center!important;
  }


  /* v126.212 — LIVE PROJECTS typography fine tune (KO mobile only). */
  html[lang="ko"] body.cl-v1-home-active #clV1Projects .cl-v1-section-head{
    position:relative!important;
    display:block!important;
  }
  html[lang="ko"] body.cl-v1-home-active #clV1Projects .cl-v1-section-title{
    width:100%!important;
    min-width:0!important;
  }
  html[lang="ko"] body.cl-v1-home-active #clV1Projects .cl-v1-more{
    position:absolute!important;
    top:0!important;
    right:0!important;
  }
  html[lang="ko"] body.cl-v1-home-active #clV1Projects .cl-v1-section-title h2{
    font-size:var(--cl-type-xl)!important;
    line-height:var(--cl-line-lg)!important;
    letter-spacing:-.03em!important;
  }
  html[lang="ko"] body.cl-v1-home-active #clV1Projects .cl-v1-section-title p{
    width:100%!important;
    max-width:none!important;
    white-space:nowrap!important;
    font-size:var(--cl-type-sm)!important;
    line-height:var(--cl-line-sm)!important;
    letter-spacing:-.035em!important;
  }

  /* Restore the original project/talent favorite-heart visual size. */
  body.cl-v1-home-active .cl-v1-heart{
    width:34px!important;
    height:34px!important;
    font-size:23px!important;
    line-height:1!important;
  }

}

/* v126.213 — Mobile HOME compact header/hero vertical tune only. */
@media (max-width:767px){
  /* Keep CASTING and LAB at exactly the same visual type size/weight. */
  html.cl-v1-home-boot .header .brand .brand-mobile em,
  body.cl-v1-home-active .header .brand .brand-mobile em{
    font-size:1em!important;
    font-style:normal!important;
    font-weight:inherit!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
    vertical-align:baseline!important;
  }

  /* Remove the mobile hero eyebrow and reclaim exactly that vertical space. */
  body.cl-v1-home-active .cl-v1-eyebrow{
    display:none!important;
  }
  body.cl-v1-home-active .cl-v1-hero h1{
    margin-top:0!important;
  }

  /* Raise LIVE bar slightly; normal flow lifts every following HOME block equally. */
  body.cl-v1-home-active .cl-v1-livebar{
    margin-top:6px!important;
  }
}

/* v126.214 — Mobile HOME project card title one typography step smaller. */
@media (max-width:767px){
  body.cl-v1-home-active #clV1Projects .cl-v1-project-card h3{
    font-size:var(--cl-type-md)!important;
    line-height:var(--cl-line-md)!important;
    letter-spacing:var(--cl-track-md)!important;
    min-height:43.5px!important;
    max-height:43.5px!important;
  }
}

/* v126.215 — Mobile HOME natural card spacing + talent wrapping + collab MORE. */
@media (max-width:767px){
  /* Project titles keep the smaller size, but use normal title leading and no forced 2-line height. */
  body.cl-v1-home-active #clV1Projects .cl-v1-project-card h3{
    line-height:1.32!important;
    min-height:0!important;
    max-height:none!important;
    margin-bottom:8px!important;
  }
  body.cl-v1-home-active #clV1Projects .cl-v1-project-card .cl-v1-card-bottom{
    margin-top:0!important;
  }

  /* NEW TALENT: let the description use the full content width and wrap only where the viewport requires. */
  body.cl-v1-home-active #clV1Talents .cl-v1-section-head{
    position:relative!important;
    display:block!important;
  }
  body.cl-v1-home-active #clV1Talents .cl-v1-section-title{
    width:100%!important;
    min-width:0!important;
  }
  body.cl-v1-home-active #clV1Talents .cl-v1-more{
    position:absolute!important;
    top:0!important;
    right:0!important;
  }
  body.cl-v1-home-active #clV1Talents .cl-v1-section-title p{
    width:100%!important;
    max-width:none!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }

  /* OPEN COLLAB: same top-row pattern as LIVE PROJECTS / NEW TALENT. */
  body.cl-v1-home-active #clV1Collab .cl-v1-section-head{
    position:relative!important;
    display:block!important;
    align-items:flex-start!important;
  }
  body.cl-v1-home-active #clV1Collab .cl-v1-section-title{
    width:100%!important;
    min-width:0!important;
  }
  body.cl-v1-home-active #clV1Collab .cl-v1-more{
    position:absolute!important;
    top:0!important;
    right:0!important;
    margin:0!important;
    padding:0!important;
    font-size:0!important;
    line-height:var(--cl-line-sm)!important;
    color:var(--cl-v1-blue)!important;
    text-decoration:none!important;
  }
  body.cl-v1-home-active #clV1Collab .cl-v1-more::after{
    content:"MORE";
    font-size:13px!important;
    line-height:var(--cl-line-sm)!important;
    letter-spacing:.08em!important;
    font-weight:800!important;
    color:var(--cl-v1-blue)!important;
  }
}