/* ----- .container-wrapper (matches my-element.ts) ----- */
.container-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  border: 0 solid transparent;
  background-color: transparent;
  transition: all 0.3s ease;
  outline: none;
  outline-offset: 0;
}

.container-wrapper {
  max-width: var(--max-width, 100%);
  margin: 0 auto;
  padding: 0 var(--site-padding, 0px);
}

/* ----- Row / content (matches my-element.ts) ----- */
.container-content {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.container-row {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.container-wrapper .container-row {
  display: flex;
  min-height: var(--min-height);
  padding: 0;
  flex: 1;
  flex-direction: column;
}

.container-wrapper .container-row.has-content {
  min-height: auto;
}

.container-row--multicolumn {
  display: grid;
  align-items: stretch;
}

.container-wrapper .container-row.container-row--multicolumn {
  display: grid;
  flex-direction: unset;
}

/* ----- Responsive column counts (container-row--cols-1 … --cols-12) ----- */
/* Desktop: default rules below. Tablet: max-width 1024px. Mobile: max-width 768px. */

.container-row--multicolumn.container-row--cols-1:not(.container-row--grid-rows) {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-1.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(1, auto);
}

.container-row--multicolumn.container-row--cols-2:not(.container-row--grid-rows) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-2.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
}

.container-row--multicolumn.container-row--cols-3:not(.container-row--grid-rows) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-3.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
}

.container-row--multicolumn.container-row--cols-4:not(.container-row--grid-rows) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-4.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
}

.container-row--multicolumn.container-row--cols-5:not(.container-row--grid-rows) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-5.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
}

.container-row--multicolumn.container-row--cols-6:not(.container-row--grid-rows) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-6.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(6, auto);
}

.container-row--multicolumn.container-row--cols-7:not(.container-row--grid-rows) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-7.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(7, auto);
}

.container-row--multicolumn.container-row--cols-8:not(.container-row--grid-rows) {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-8.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(8, auto);
}

.container-row--multicolumn.container-row--cols-9:not(.container-row--grid-rows) {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-9.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(9, auto);
}

.container-row--multicolumn.container-row--cols-10:not(.container-row--grid-rows) {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-10.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(10, auto);
}

.container-row--multicolumn.container-row--cols-11:not(.container-row--grid-rows) {
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-11.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(11, auto);
}

.container-row--multicolumn.container-row--cols-12:not(.container-row--grid-rows) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: none;
}

.container-row--multicolumn.container-row--cols-12.container-row--grid-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(12, auto);
}

@media (max-width: 1024px) {
  .container-row--multicolumn.container-row--cols-1:not(.container-row--grid-rows) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-2:not(.container-row--grid-rows) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-3:not(.container-row--grid-rows) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-4:not(.container-row--grid-rows) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-5:not(.container-row--grid-rows) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-6:not(.container-row--grid-rows) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-7:not(.container-row--grid-rows) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-8:not(.container-row--grid-rows) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-9:not(.container-row--grid-rows) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-10:not(.container-row--grid-rows) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-11:not(.container-row--grid-rows) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .container-row--multicolumn.container-row--cols-12:not(.container-row--grid-rows) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (max-width: 768px) {
  .container-row--multicolumn.container-row--cols-1:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-2:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-3:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-4:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-5:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-6:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-7:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-8:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-9:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-10:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-11:not(.container-row--grid-rows),
  .container-row--multicolumn.container-row--cols-12:not(.container-row--grid-rows) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

.container-row--grid-rtl {
  direction: rtl;
}

.container-row--grid-rtl .container-slot-area {
  direction: ltr;
}

/* ----- Slot area ----- */
.container-slot-area {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.container-slot-area .drop-zone {
  display: flex;
  min-height: var(--min-height);
  flex: 1;
  flex-direction: column;
}

.container-slot-area .drop-zone.has-content {
  min-height: auto;
}

.container-slot-area .slot-stack {
  display: flex;
  min-height: 0;
  flex: 1;
  gap: 10px;
}

.slot-stack {
  display: flex;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Horizontal main axis: children sizing (Lit used ::slotted(*)) */
.slot-stack--row > * {
  max-width: 100%;
  flex: 0 1 auto;
  align-self: flex-start;
}

/* ----- Drop zone & placeholder (base + container-one tweaks) ----- */
.drop-zone {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.drop-zone.has-content {
  min-height: auto !important;
  padding: 0;
  border: 0 solid #e2e8f0;
  background: transparent;
}

.drop-zone.has-content .placeholder-text {
  display: none;
}

.placeholder-text {
  display: flex;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  text-align: center;
  color: #757575;
  background-color: transparent;
  transition: none;
  pointer-events: none;
}

/* Empty slot: centre placeholder like base-layout drop-zone */
.drop-zone:not(.has-content) .placeholder-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  margin: 0;
  border: 1px dashed rgb(226, 232, 240);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.06px;
  background: #f9fafc;
}

/* Matches container-one my-element.ts: hover clears placeholder border */
.drop-zone:hover .placeholder-text {
  border: none !important;
}

.placeholder-icon {
  display: block;
  margin-bottom: 8px;
  font-size: 32px;
  line-height: 1;
}

/* ----- Demo cards inside slot-stack ----- */
.preview-slot-card {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  font-size: 14px;
  color: #0f172a;
  background: #fff;
}

.preview-slot-card--muted {
  color: #475569;
  background: #f8fafc;
}

/* ----- Wrapper with classic background (same stacking as render()) ----- */
.container-wrapper--with-background {
  min-height: 280px;
  color: #fff;
}

.container-wrapper--with-background .container-row {
  position: relative;
  z-index: 2;
  min-height: 220px;
}

.container-wrapper--with-background .preview-slot-card {
  color: #0f172a;
}