/* static/css/anl_layout.css */

/* =====================================================
   BASE LAYOUT CONTAINER
   ===================================================== */

.layout {
    display: flex;
}

/* =====================================================
   COL Flow
   Controls the primary layout flow.
   ===================================================== */

.layout.flow_col {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.layout.flow_col.h_centre_aligned > .style-block {
    display: flex;
    justify-content: center;
}

.layout.flow_col.left_aligned > .style-block {
    display: flex;
    justify-content: flex-start;
}

.layout.flow_col.right_aligned > .style-block {
    display: flex;
    justify-content: flex-end;
}

.layout.flow_col.h_centre_aligned {
    align-items: center;
}

.layout.flow_col > hr {
    align-self: stretch;
    width: 100%;
    height: 3px;
    box-sizing: border-box;
}

.layout.flow_col.left_aligned {
    align-items: flex-start;
}

.layout.flow_col.right_aligned {
    align-items: flex-end;
}

.layout.flow_col.left_aligned.txt_left > * {
    align-self: flex-start;
}

.layout.flow_col.left_aligned.txt_right > * {
    align-self: stretch;
}

.layout.flow_col.left_aligned.txt_centre > * {
    align-self: stretch;
}

.layout.flow_col.left_aligned.txt_justified > * {
    align-self: stretch;
}

.layout.flow_col > .style-block:has(.layout.flow_row) {
    width: 100%;
}

/* =====================================================
   Row FLOW
   Controls the primary layout flow.
   ===================================================== */

.layout.flow_row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    aspect-ratio: var(--flow-layout-ratio);
    overflow: visible;
}

.layout.flow_row > img {
    flex: var(--flow-image-ratio) 0 0;
    width: 0;
    height: 100%;
    max-width: none;
}

.layout.flow_row > .style-block {
    flex: calc( var(--image-ratio) * var(--image-scale-x)) 0 0;
    width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.layout.flow_row > .style-block > img {
    display: block;
    width: calc(100% / var(--image-scale-x));
    height: 100%;
    max-width: none;
    transform-origin: left center;
}

/* =====================================================
   HORIZONTAL LAYOUT ALIGNMENT
   Controls horizontal positioning of layout children.
   ===================================================== */

.layout.flow_row.h_centre_aligned {
    justify-content: center;
}

.layout.flow_row.left_aligned {
    justify-content: flex-start;
}

.layout.flow_row.right_aligned {
    justify-content: flex-end;
}

.layout.flow_row.h_justified {
    justify-content: space-between;
}




/* =====================================================
   VERTICAL LAYOUT ALIGNMENT
   Controls vertical positioning of layout children.
   ===================================================== */
.layout.top_aligned {
    align-items: flex-start;
}

.layout.v_centre_aligned {
    align-items: center;
}

.layout.bottom_aligned {
    align-items: flex-end;
}

.layout.v_justified {
    align-items: stretch;
}


/*
 * Vertical justified alignment.
 *
 * For flex layouts this stretches children across
 * the cross axis.
 */
.layout.flow_row.v_justified,
.layout.flow_col.v_justified {
    align-items: stretch;
}


/* =====================================================
   TEXT ALIGNMENT
   Controls text alignment only.
   It must NOT control child sizing or layout.
   ===================================================== */

.layout.txt_left {
    text-align: left;
}


.layout.txt_centre {
    text-align: center;
}


.layout.txt_right {
    text-align: right;
}


.layout.txt_justified {
    text-align: justify;
}


/* =====================================================
   LISTS
   ===================================================== */


/*
 * Marker-free list.
 * Used when a layout container has class="list".
 */

.layout.list ul,
.layout.list ol {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}


.layout.list li {
    list-style: none;
}


li:has(> .layout.list) {
    list-style: none;
}


/* =====================================================
   STYLE-BLOCK DEFAULTS
   ===================================================== */

.style-block {
    box-sizing: border-box;
    padding: 5;
    margin: 5;
    border-width: 2;
    border-style: none;
    border-radius: 5px;
    opacity: 1;
}


.style-block img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

img.qr-code {
    width: 12rem;
    height: 12rem;
    max-width: 100%;
    object-fit: contain;
}