/* =========================================================
   LB Styles Collection – CLEAN CSS (theme-width friendly)
   ========================================================= */

.lbsc-page{
  font-family: 'Archivo', sans-serif;
  color: #3F4144;
  background: #fff;
  line-height: 1.75;
  overflow-x: hidden;

  /* Use theme content width when available (block themes), fallback if not */
  --lbsc-max: var(--wp--style--global--content-size, 1200px);
  --lbsc-pad: clamp(16px, 3vw, 30px);
}

/* Shared “container” behaviour for all main blocks */
.lbsc-page .main-explore-block,
.lbsc-page .joined-section,
.lbsc-page .breadcrumbs,
.lbsc-page .hero-cta-square{
  max-width: var(--lbsc-max);
  padding-left: var(--lbsc-pad);
  padding-right: var(--lbsc-pad);
  box-sizing: border-box;
}

/* === TOP BLOCK (EXPLORE) === */
.lbsc-page .main-explore-block{
  margin: 0 auto 40px;
}

/* === CTA BLOCK === */
.lbsc-page .hero-cta-square{
  margin: 0 auto 60px;
  background: #3F4144;
  color: #f7f5f3;
  padding-top: 22px;
  padding-bottom: 24px;

  /* inner padding uses the same side padding as the page */
  padding-left: var(--lbsc-pad);
  padding-right: var(--lbsc-pad);

  font-family: 'Stack Sans Headline', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
}
.lbsc-page .hero-cta-square a{
  color: #f7f5f3;
  text-decoration: none;
  font-weight: 800;
}
.lbsc-page .hero-cta-square a:hover{
  border-bottom: 1px solid #f7f5f3;
}

/* === JOINED SECTION === */
.lbsc-page .joined-section{
  margin: 0 auto 80px;
}
.lbsc-page .joined-box{
  background: #f7f5f3;
  margin-bottom: 60px;
}
.lbsc-page .joined-box .box-header{
  background: #3F4144;
  color: #f7f5f3;
  font-family: 'Stack Sans Headline', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 20px 26px;
  font-weight: 800;
  font-size: 22px;
}
.lbsc-page .joined-box .box-content{
  background: #f7f5f3;
  padding: 40px 26px 60px;
  font-size: 16.5px;
  color: #3F4144;
  line-height: 1.85;
}
.lbsc-page .joined-box .box-content a{
  color: #3F4144;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(63,65,68,0.2);
}
.lbsc-page .joined-box .box-content a:hover{
  color: #A3A19D;
  border-bottom-color: #A3A19D;
}

/* === BREADCRUMBS === */
.lbsc-page .breadcrumbs{
  margin: 60px auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.1);
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.lbsc-page .breadcrumbs a{
  color: #3F4144;
  text-decoration: none;
  font-weight: 600;
}
.lbsc-page .breadcrumbs a:hover{ color: #A3A19D; }
.lbsc-page .breadcrumbs i{ font-size: 12px; color: #A3A19D; }

/* === [more_styles] grid === */
.lbsc-more-styles{ margin-top: 20px; }

.lbsc-style-grid{
  display: grid;
  grid-template-columns: repeat(var(--lbsc-cols, 4), minmax(0, 1fr));
  gap: 16px;
}
.lbsc-style-card{
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  color: #3F4144;
}
.lbsc-style-card__img img{
  display: block;
  width: 100%;
  height: auto;
}
.lbsc-style-card__body{ padding: 14px; }
.lbsc-style-card__title{ font-weight: 700; }
.lbsc-style-card__excerpt{
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}

@media (max-width: 1024px){
  .lbsc-style-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .lbsc-style-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   JOINED LOOK: TOP TEXT BOX + EXPLORE DIRECTLY UNDER IT
   ========================================================= */
.lbsc-styles-collection .joined-section.lbsc-joined-top{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.lbsc-styles-collection .joined-section.lbsc-joined-top .joined-box{
  margin-bottom: 0 !important;
}
.lbsc-styles-collection .main-explore-block{
  margin-top: 0 !important;
}
.lbsc-styles-collection .main-explore-block > *:first-child{
  margin-top: 0 !important;
}