/* =============================================================================
   two-x-one.css — Two-column layout block
   Renders two child blocks side by side in a responsive row
   ============================================================================= */

.two-x-one-block {
  position: relative;
}

.two-x-one-block__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.two-x-one-block__col {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 100%;
  display: flex;
}

/* Column widths — applied as flex-basis percentages */
.two-x-one-block__col--50 {
  flex: 0 0 calc(50% - var(--two-x-one-gap, 0px) / 2);
  max-width: calc(50% - var(--two-x-one-gap, 0px) / 2);
}

.two-x-one-block__col--67 {
  flex: 0 0 calc(66.666% - var(--two-x-one-gap, 0px) / 3);
  max-width: calc(66.666% - var(--two-x-one-gap, 0px) / 3);
}

.two-x-one-block__col--33 {
  flex: 0 0 calc(33.333% - var(--two-x-one-gap, 0px) * 2 / 3);
  max-width: calc(33.333% - var(--two-x-one-gap, 0px) * 2 / 3);
}

.two-x-one-block__col--75 {
  flex: 0 0 calc(75% - var(--two-x-one-gap, 0px) / 4);
  max-width: calc(75% - var(--two-x-one-gap, 0px) / 4);
}

.two-x-one-block__col--25 {
  flex: 0 0 calc(25% - var(--two-x-one-gap, 0px) * 3 / 4);
  max-width: calc(25% - var(--two-x-one-gap, 0px) * 3 / 4);
}

/* Column content wrapper fills height for alignment */
.two-x-one-block__col-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 80px;
}

/* Wrapper for block content inside a column */
.txo-block-wrapper {
  position: relative;
}

.txo-block-wrapper:hover .txo-block-controls {
  opacity: 1;
}

.txo-block-controls {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Drop target placeholder */
.txo-drop-target {
  border: 2px dashed #adb5bd !important;
  background: #f8f9fa;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.txo-drop-target:hover {
  border-color: #6c757d;
  background: #e9ecef;
}

/* Drag-over highlight */
.txo-drag-over,
.two-x-one-block__col-inner.txo-drag-over {
  outline: 3px dashed #0d6efd;
  outline-offset: -3px;
  background: rgba(13, 110, 253, 0.05);
}

/* Alignment variants */
.two-x-one-block--align-stretch .two-x-one-block__col-inner > * {
  flex: 1 1 auto;
}

.two-x-one-block--align-top .two-x-one-block__col {
  align-items: flex-start;
}

.two-x-one-block--align-center .two-x-one-block__col {
  align-items: center;
}

.two-x-one-block--align-bottom .two-x-one-block__col {
  align-items: flex-end;
}

/* Mobile: stack columns on small screens */
@media (max-width: 767.98px) {
  .two-x-one-block__row {
    flex-direction: column;
  }

  .two-x-one-block__col--50,
  .two-x-one-block__col--67,
  .two-x-one-block__col--33,
  .two-x-one-block__col--75,
  .two-x-one-block__col--25 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .two-x-one-block__col + .two-x-one-block__col {
    margin-top: var(--two-x-one-gap, 24px);
  }
}