/**
 * KC Group Element Add-On — v1.3.0
 * Jessie Johnston | jessicajjohnston.com
 */

/* ----------------------------------------------------------------
   Base
---------------------------------------------------------------- */
.kc-group-element,
.kc-group-item {
  box-sizing:  border-box;
  /* Children respect box-sizing too */
}

.kc-group-element *,
.kc-group-item * {
  box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Group Element — always a flex container
---------------------------------------------------------------- */
.kc-group-element {
  display: flex;
}

.kc-ge--full-width {
  width: 100%;
}

/* ----------------------------------------------------------------
   Desktop flex-direction classes (applied to group element)
---------------------------------------------------------------- */
.kc-ge-d-row { flex-direction: row; }
.kc-ge-d-col { flex-direction: column; }

/* ----------------------------------------------------------------
   Desktop flex-direction classes (applied to group item in flex mode)
---------------------------------------------------------------- */
.kc-gi-d-row { flex-direction: row; }
.kc-gi-d-col { flex-direction: column; }

/* ----------------------------------------------------------------
   Tablet override  ≤ 999px
---------------------------------------------------------------- */
@media (max-width: 999px) {
  .kc-ge-t-row { flex-direction: row; }
  .kc-ge-t-col { flex-direction: column; }
  .kc-gi-t-row { flex-direction: row; }
  .kc-gi-t-col { flex-direction: column; }
}

/* ----------------------------------------------------------------
   Mobile override  ≤ 690px
---------------------------------------------------------------- */
@media (max-width: 690px) {
  .kc-ge-m-row { flex-direction: row; }
  .kc-ge-m-col { flex-direction: column; }
  .kc-gi-m-row { flex-direction: row; }
  .kc-gi-m-col { flex-direction: column; }

  /* On mobile all group items take full width by default
     so they don't overflow when direction switches to column */
  .kc-ge-m-col > .kc-group-item,
  .kc-ge-d-col > .kc-group-item {
    max-width: 100%;
  }
}

/* ----------------------------------------------------------------
   WPBakery backend editor — make containers visible & editable
---------------------------------------------------------------- */
.vc_editor .kc-group-element,
.vc_editor .kc-group-item {
  min-height:  40px;
  padding:     8px !important;
  border:      1px dashed rgba(0,0,0,0.15) !important;
  flex-wrap:   wrap !important;
}