/*
 * Design Collection Stage-1 landing — mobile clarity pass.
 * Fixes oversized texture-only cards and adds always-visible direction labels.
 */

.bolix-facade-design-card__mobile-label{display:none}

/* More truthful abstract previews for the three active directions. */
body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card--wood .bolix-facade-design-card__texture{
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),rgba(0,0,0,.05) 45%,rgba(255,255,255,.03)),
    repeating-linear-gradient(0deg,#ad7040 0 30px,#91542d 30px 33px,#bd8050 33px 65px,#7f4728 65px 68px)!important;
}
body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card--ribbed .bolix-facade-design-card__texture{
  background:repeating-linear-gradient(90deg,#eee8df 0 13px,#c6baad 13px 18px,#f7f3ed 18px 31px,#aca094 31px 36px)!important;
}
body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card--concrete .bolix-facade-design-card__texture{
  background:
    radial-gradient(circle at 22% 28%,rgba(255,255,255,.38) 0 1px,transparent 2px),
    radial-gradient(circle at 68% 62%,rgba(42,47,50,.13) 0 2px,transparent 3px),
    radial-gradient(circle at 44% 78%,rgba(255,255,255,.24) 0 1px,transparent 2px),
    linear-gradient(145deg,#d3d4d1,#a8aaa7)!important;
  background-size:auto,auto,auto,auto!important;
}

@media(max-width:620px){
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design__grid{
    gap:18px!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__visual{
    position:relative!important;
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__texture{
    position:absolute!important;
    inset:0!important;
    min-height:0!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__visual:after{
    background:linear-gradient(180deg,rgba(0,0,0,.02) 20%,rgba(0,0,0,.58) 100%)!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__number{
    left:14px!important;
    top:14px!important;
    width:42px!important;
    height:42px!important;
    border-radius:14px!important;
    font-size:12px!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__mobile-label{
    position:absolute;
    z-index:4;
    left:16px;
    right:16px;
    bottom:14px;
    display:flex!important;
    flex-direction:column;
    gap:3px;
    color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.28);
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__mobile-label small{
    font-size:11px!important;
    line-height:1.2!important;
    font-weight:900!important;
    letter-spacing:.07em!important;
    text-transform:uppercase;
    opacity:.92;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__mobile-label strong{
    font-size:22px!important;
    line-height:1.15!important;
    font-weight:850!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__content{
    display:flex!important;
    flex-direction:column!important;
    padding:18px 18px 17px!important;
  }

  /* Title is already visible on the preview on mobile; avoid duplicate heading. */
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__content>.bolix-facade-design-card__eyebrow,
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__content>h3{
    display:none!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__description{
    display:block!important;
    margin:0!important;
    color:#4f5964!important;
    font-size:15.5px!important;
    line-height:1.5!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__best{
    display:block!important;
    margin-top:14px!important;
    padding:12px 13px!important;
    border-radius:14px!important;
  }
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__best small{
    margin-bottom:5px!important;
    font-size:10.5px!important;
    line-height:1.2!important;
  }
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__best p{
    font-size:14px!important;
    line-height:1.45!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__systems{
    display:block!important;
    margin-top:13px!important;
  }
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__systems>small{
    margin-bottom:6px!important;
    font-size:10.5px!important;
    line-height:1.2!important;
  }
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__systems>div{
    gap:6px!important;
  }
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__systems span{
    padding:6px 8px!important;
    font-size:11px!important;
    line-height:1.2!important;
  }

  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__next{
    display:flex!important;
    margin-top:15px!important;
    padding-top:14px!important;
  }
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__next strong{
    font-size:15px!important;
    line-height:1.35!important;
  }
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card__next span{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    border-radius:13px!important;
    font-size:19px!important;
  }

  /* Planned directions stay readable but visually secondary. */
  body.bolix-child-site.bolix-facade-design-route .bolix-facade-design-card.is-planned{
    opacity:.86;
  }
}