/* =========================================================
   LSB – HERO + GOLD STRIP + SEAL + COLOR BAND SYSTEM (V2)
   Fixes:
   - Uses actual WP output classes: wp-custom-css-*
   - Mobile stack order is forced + reliable
   ========================================================= */

/* ================================
   ROOT VARIABLES
   ================================ */
:root{
  --seal-size: clamp(260px, 22vw, 420px);
  --seal-left: 28px;
  --seal-drop: 12px;

  --lsb-harvest-oats:   #E6D6BE;
  --lsb-aurora-gold:    #C89F32;
  --lsb-rembrandt-ruby: #7A261A;
  --lsb-bungle-blue:    #2F4F6D;
  --lsb-dard-green:     #2E4A2C;

  --swatch-h: 92px;
}

/* =========================================================
   TOP GOLD STRIP + SEAL
   ========================================================= */

.lsb-color-band{
  position: relative;
  overflow: visible;
  padding: 70px 0;
  min-height: 120px;
}

.lsb-color-band .lsb-seal{
  position: absolute;
  left: var(--seal-left);
  top: 50%;
  transform: translateY(calc(-50% + var(--seal-drop)));
  z-index: 40;
  margin: 0;
}

.lsb-color-band .lsb-seal img{
  width: var(--seal-size);
  height: auto;
  display:block;
}

/* =========================================================
   SWATCH ROW – FULL BLEED, NO GAPS
   ========================================================= */

.lsb-swatch-row{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Kill all Gutenberg gaps/margins/padding inside the band */
.lsb-swatch-row,
.lsb-swatch-row .wp-block-columns,
.lsb-swatch-row .wp-block-column{
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   DESKTOP LAYOUT (3 columns: left pack / green / right pack)
   Targets actual WP class on the OUTER columns row:
   .wp-custom-css-e989cc27
   ========================================================= */

.lsb-swatch-row > .wp-custom-css-e989cc27{
  display:flex !important;
  flex-wrap: nowrap !important;
}

/* Outer 3 column structure */
.lsb-swatch-row > .wp-custom-css-e989cc27 > .wp-block-column:nth-child(1),
.lsb-swatch-row > .wp-custom-css-e989cc27 > .wp-block-column:nth-child(3){
  flex: 0 0 40.5% !important;
  max-width: 40.5% !important;
}

.lsb-swatch-row > .wp-custom-css-e989cc27 > .wp-block-column:nth-child(2){
  flex: 0 0 19% !important;
  max-width: 19% !important;
}

/* Inner pack containers (left + right) use actual WP classes */
.lsb-swatch-row .wp-custom-css-591a154b,
.lsb-swatch-row .wp-custom-css-e44e4d25{
  display:flex !important;
  flex-wrap: nowrap !important;
  height: var(--swatch-h);
}

/* Swatch base */
.lsb-swatch{
  height: var(--swatch-h);
  width: 100%;
}

.lsb-swatch-center{
  height: var(--swatch-h);
  width: 100%;
}

/* Color mapping */
.lsb-swatch.s1,
.lsb-swatch.s8{ background: var(--lsb-harvest-oats) !important; }

.lsb-swatch.s2,
.lsb-swatch.s7{ background: var(--lsb-aurora-gold) !important; }

.lsb-swatch.s3,
.lsb-swatch.s6{ background: var(--lsb-rembrandt-ruby) !important; }

.lsb-swatch.s4,
.lsb-swatch.s5{ background: var(--lsb-bungle-blue) !important; }

.lsb-swatch-center{
  background: var(--lsb-dard-green) !important;
}

/* Radiating widths (desktop) – LEFT pack (s1..s4) */
.lsb-swatch-row .wp-custom-css-591a154b > .wp-block-column:nth-child(1){ flex:2.4 !important; }
.lsb-swatch-row .wp-custom-css-591a154b > .wp-block-column:nth-child(2){ flex:1.0 !important; }
.lsb-swatch-row .wp-custom-css-591a154b > .wp-block-column:nth-child(3){ flex:0.2 !important; }
.lsb-swatch-row .wp-custom-css-591a154b > .wp-block-column:nth-child(4){ flex:0.6 !important; }

/* Radiating widths (desktop) – RIGHT pack (s5..s8) */
.lsb-swatch-row .wp-custom-css-e44e4d25 > .wp-block-column:nth-child(1){ flex:0.6 !important; }
.lsb-swatch-row .wp-custom-css-e44e4d25 > .wp-block-column:nth-child(2){ flex:0.2 !important; }
.lsb-swatch-row .wp-custom-css-e44e4d25 > .wp-block-column:nth-child(3){ flex:1.0 !important; }
.lsb-swatch-row .wp-custom-css-e44e4d25 > .wp-block-column:nth-child(4){ flex:2.4 !important; }

/* =========================================================
   MOBILE STACK – FORCED ORDER (NO SURPRISES)
   ========================================================= */

@media (max-width: 782px){

  /* Center the seal on mobile */
  .lsb-color-band{
    padding: 40px 0;
  }

  .lsb-color-band .lsb-seal{
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
  }

  /* Make the OUTER row stack vertically */
  .lsb-swatch-row > .wp-custom-css-e989cc27{
    display:flex !important;
    flex-direction: column !important;
  }

  /* Hide mirrored right pack on mobile */
  .lsb-swatch-row > .wp-custom-css-e989cc27 > .wp-block-column:nth-child(3){
    display:none !important;
  }

  /* Put the GREEN center first */
  .lsb-swatch-row > .wp-custom-css-e989cc27 > .wp-block-column:nth-child(2){
    order: 0 !important;
  }

  /* Put LEFT pack second */
  .lsb-swatch-row > .wp-custom-css-e989cc27 > .wp-block-column:nth-child(1){
    order: 1 !important;
  }

  /* Green big block */
  .lsb-swatch-center{
    height:auto !important;
    min-height:140px !important;
  }

  /* Now force the LEFT pack to stack + force the order */
  .lsb-swatch-row .wp-custom-css-591a154b{
    display:flex !important;
    flex-direction: column !important;
    height:auto !important;
  }

  /* Thin strips */
  .lsb-swatch{
    height:auto !important;
    min-height:28px !important;
  }

  /* ✅ EXPLICIT MOBILE ORDER
     Change these numbers if you want a different sequence.
     Current order:
       s1 (Oats)
       s2 (Gold)
       s3 (Ruby)
       s4 (Blue)
  */
  .lsb-swatch.s1{ order: 1 !important; }
  .lsb-swatch.s2{ order: 2 !important; }
  .lsb-swatch.s3{ order: 3 !important; }
  .lsb-swatch.s4{ order: 4 !important; }
}

/* Optional utility */
.no-underline a { text-decoration: none; }