/* Huuguu UI Blocks — Responsive Layout Core v2 */
.huu-uib-layout,
.huu-uib-layout * {
  box-sizing: border-box;
}

.huu-uib-layout--split,
.huu-uib-layout-split {
  display: flex;
  width: 100%;
  gap: var(--huu-uib-layout-gap, 32px);
  align-items: var(--huu-uib-layout-align, stretch);
}

.huu-uib-layout__content,
.huu-uib-layout-split__content {
  flex: 1 1 auto;
  min-width: 0;
}

.huu-uib-layout__media,
.huu-uib-layout-split__media {
  flex: 0 0 var(--huu-uib-layout-media-width, 50%);
  width: var(--huu-uib-layout-media-width, 50%);
  min-width: 0;
  max-width: 100%;
}

.huu-uib-layout--media-left .huu-uib-layout__media,
.huu-uib-layout-split--media-left .huu-uib-layout-split__media { order: 1; }
.huu-uib-layout--media-left .huu-uib-layout__content,
.huu-uib-layout-split--media-left .huu-uib-layout-split__content { order: 2; }
.huu-uib-layout--media-right .huu-uib-layout__content,
.huu-uib-layout-split--media-right .huu-uib-layout-split__content { order: 1; }
.huu-uib-layout--media-right .huu-uib-layout__media,
.huu-uib-layout-split--media-right .huu-uib-layout-split__media { order: 2; }
.huu-uib-layout--media-top,
.huu-uib-layout--media-bottom { flex-direction: column; }
.huu-uib-layout--media-top .huu-uib-layout__media { order: 1; flex-basis: auto; }
.huu-uib-layout--media-top .huu-uib-layout__content { order: 2; }
.huu-uib-layout--media-bottom .huu-uib-layout__content { order: 1; }
.huu-uib-layout--media-bottom .huu-uib-layout__media { order: 2; flex-basis: auto; }

@media (max-width: 1024px) {
  .huu-uib-layout--split,
  .huu-uib-layout-split {
    gap: var(--huu-uib-layout-gap, 28px);
  }

  .huu-uib-layout--tablet-media-left,
  .huu-uib-layout--tablet-media-right { flex-direction: row; }
  .huu-uib-layout--tablet-media-left .huu-uib-layout__media { order: 1; flex-basis: var(--huu-uib-layout-media-width, 50%); width: var(--huu-uib-layout-media-width, 50%); }
  .huu-uib-layout--tablet-media-left .huu-uib-layout__content { order: 2; }
  .huu-uib-layout--tablet-media-right .huu-uib-layout__content { order: 1; }
  .huu-uib-layout--tablet-media-right .huu-uib-layout__media { order: 2; flex-basis: var(--huu-uib-layout-media-width, 50%); width: var(--huu-uib-layout-media-width, 50%); }
  .huu-uib-layout--tablet-media-top,
  .huu-uib-layout--tablet-media-bottom { flex-direction: column; }
  .huu-uib-layout--tablet-media-top .huu-uib-layout__media { order: 1; flex-basis: auto; }
  .huu-uib-layout--tablet-media-top .huu-uib-layout__content { order: 2; }
  .huu-uib-layout--tablet-media-bottom .huu-uib-layout__content { order: 1; }
  .huu-uib-layout--tablet-media-bottom .huu-uib-layout__media { order: 2; flex-basis: auto; }
}

@media (max-width: 767px) {
  .huu-uib-layout--split,
  .huu-uib-layout-split {
    flex-direction: column;
    gap: var(--huu-uib-layout-gap, 24px);
  }

  .huu-uib-layout__content,
  .huu-uib-layout__media,
  .huu-uib-layout-split__content,
  .huu-uib-layout-split__media {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
  }

  .huu-uib-layout--mobile-media-top .huu-uib-layout__media,
  .huu-uib-layout-split--mobile-media-top .huu-uib-layout-split__media { order: 1; }
  .huu-uib-layout--mobile-media-top .huu-uib-layout__content,
  .huu-uib-layout-split--mobile-media-top .huu-uib-layout-split__content { order: 2; }
  .huu-uib-layout--mobile-media-bottom .huu-uib-layout__content,
  .huu-uib-layout-split--mobile-media-bottom .huu-uib-layout-split__content { order: 1; }
  .huu-uib-layout--mobile-media-bottom .huu-uib-layout__media,
  .huu-uib-layout-split--mobile-media-bottom .huu-uib-layout-split__media { order: 2; }
}


/* v2.0-alpha.74.1 — Layout Core media width conflict fix.
 * Keep a single source of truth for split media width.
 * Responsive controls now print --huu-uib-layout-media-width directly as a percentage.
 * Stacked tablet/mobile layouts still force the media column to 100% below.
 */

/* v2.0-alpha.71.6 — Stacked media width fix.
 * When a responsive split layout is stacked, the media slot must occupy the
 * full available width. Percentage split widths only apply to row layouts.
 */
@media (max-width: 1024px) {
  .huu-uib-layout--tablet-media-top .huu-uib-layout__media,
  .huu-uib-layout--tablet-media-bottom .huu-uib-layout__media,
  .huu-uib-layout-split--tablet-media-top .huu-uib-layout-split__media,
  .huu-uib-layout-split--tablet-media-bottom .huu-uib-layout-split__media {
    flex: 0 0 auto;
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .huu-uib-layout__media,
  .huu-uib-layout-split__media {
    flex: 0 0 auto;
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
}