/* copyright 2025 Unlost GmbH. All rights reserved. */

/***** layout types *****/

/* preseed canvas with 14 cells */

.ps-canvas {
    min-height: 500px;
    grid:
        "a b b d d e e g" minmax(150px, auto)
        "a c c d d f f g" minmax(30px, auto) 
        "j c c k k f f l" minmax(120px, auto)
        "h h m m i i n n" minmax(150px, auto) /
        2fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
}

.ps-canvas > div:nth-child(1),
.ps-canvas > div:nth-child(4),
.ps-canvas > div:nth-child(7) { border-bottom: 0; }
.ps-canvas > div:nth-child(8),
.ps-canvas > div:nth-child(9) { border-right: 0; }
.ps-canvas > div:nth-child(10),
.ps-canvas > div:nth-child(11),
.ps-canvas > div:nth-child(12) { border-top: 1px dashed; }
.ps-canvas > div:nth-child(13),
.ps-canvas > div:nth-child(14) { border-left: 1px dashed; }

/* simple preseed canvas with 12 cells = lean canvas */

/* lean canvas with 12 cells */

.lean-canvas {
    min-height: 500px;
    grid:
        "a b d d e g" minmax(150px, auto)
        "a c d d f g" minmax(30px, auto) 
        "j c k k f l" minmax(120px, auto)
        "h h h i i i" minmax(150px, auto) /
        2fr 2fr 1fr 1fr 2fr 2fr;
}

.lean-canvas > div:nth-child(1),
.lean-canvas > div:nth-child(4),
.lean-canvas > div:nth-child(7) { border-bottom: 0; }
.lean-canvas > div:nth-child(10),
.lean-canvas > div:nth-child(11),
.lean-canvas > div:nth-child(12) { border-top: 1px dashed; }

.lean-canvas > div:nth-child(8) > .cell-card-container,
.lean-canvas > div:nth-child(9) > .cell-card-container { 
    display: flex; 
    flex-wrap: wrap;
    align-items: flex-start;
}
.lean-canvas > div:nth-child(8) .card,
.lean-canvas > div:nth-child(9) .card {
    max-width: 45%;
    min-width: 35%;
    flex: 1;
}
.lean-canvas>div:nth-child(n+13) {display: none; }

/* quick preseed canvas with 12 cells */

.quick-canvas {
    min-height: 500px;
    grid:
        "g a d d i j" minmax(180px, auto)
        "c b k k e f" minmax(180px, auto)
        "h h h l l l" minmax(60px, auto) /
        2fr 2fr 1fr 1fr 2fr 2fr;
}

.quick-canvas > div:nth-child(8) > .cell-card-container,
.quick-canvas > div:nth-child(12) > .cell-card-container { 
    display: flex; 
    flex-wrap: wrap;
    align-items: flex-start;
}
.quick-canvas > div:nth-child(8) .card,
.quick-canvas > div:nth-child(12) .card {
    max-width: 45%;
    min-width: 35%;
    flex: 1;
}
.quick-canvas>div:nth-child(n+13) {display: none; }

/* business model canvas with 9 cells */

.bm-canvas {
    min-height: 500px;
    grid:
        "a b d d e g" minmax(150px, auto)
        "a c d d f g" minmax(150px, auto)
        "h h h i i i" minmax(150px, auto) /
        2fr 2fr 1fr 1fr 2fr 2fr;
}

.bm-canvas > div:nth-child(8) > .cell-card-container,
.bm-canvas > div:nth-child(9) > .cell-card-container { 
    display: flex; 
    flex-wrap: wrap;
    align-items: flex-start;
}
.bm-canvas > div:nth-child(8) .card,
.bm-canvas > div:nth-child(9) .card {
    max-width: 45%;
    min-width: 35%;
    flex: 1;
}
.bm-canvas > div:nth-child(n+10) { display: none; }

/* product vision board with 5 cells */

.productvision {
    min-height: 480px;
    grid:
        "a a a a" minmax(160px, auto) 
        "b c d e" minmax(320px, auto) /
        1fr 1fr 1fr 1fr;
}

.productvision > div:nth-child(1) > .cell-card-container { 
    display: flex; 
    flex-wrap: wrap;
    align-items: flex-start;
}
.productvision > div:nth-child(1) .card {
    max-width: 100%;
    min-width: 45%;
    flex: 1;
}
.productvision > div:nth-child(n+6) { display: none; }

/* swot matrix with 4 cells */

.swot {
    min-height: 500px;
    grid:
        "a b" minmax(160px, auto) 
        "c d" minmax(160px, auto) /
        1fr 1fr
    }

.swot > div:nth-child(n+5) { display: none; }


/* tows matrix with 8 cells */

.tows {
    min-height: 500px;
    grid:
        "i a b" minmax(160px, auto) 
        "c e f" minmax(160px, auto) 
        "d g h" minmax(160px, auto) /
        1fr 1fr 1fr;
}

.tows > div:nth-child(-n+4) { background-color: #f4f4f4; }
.tows > div:nth-child(9) { background-color: #ddd; }
.tows > div:nth-child(n+10) { display: none; }

/* more to come */
.more {
    min-height: 500px;
    grid: "a" minmax(160px, auto) / 1fr; 
}

.more > div:nth-child(1) > .cell-card-container { 
    display: flex; 
    flex-wrap: wrap;
    align-items: flex-start;
}
.more > div:nth-child(1) div.cell-title-container {
    display: block;
    text-align: center;
}

.more > div:nth-child(1) h3.cell-title {
    font-size: 1.8em;
    text-align: center;
    text-transform: none;
}

.more > div:nth-child(1) div.hover-help {
    display: block;
    font-size: 1.5em;
    text-align: center;
    text-transform: none;
}
.more > div:nth-child(1) div.hover-help a { text-decoration: underline; }
.more > div:nth-child(1) .card { display: none; }
.more > div:nth-child(n+2) { display: none; }

/***** layout types mobile *****/
@media screen and (max-width: 768px) {


    /* preseed canvas with 14 cells */

    .ps-canvas {
        min-height: 500px;
        grid:
            "a a g g" minmax(160px, auto)
            "j j l l" minmax(120px, auto) 
            "b d d e" minmax(200px, auto)
            "c d d f" minmax(80px, auto)
            "c k k f" minmax(120px, auto)
            "h h i i" minmax(160px, auto)
            "m m n n" minmax(120px, auto) / 
            2fr 1fr 1fr 2fr
    }

    .ps-canvas>div:nth-child(8),
    .ps-canvas>div:nth-child(9) {
        border: 1px solid;
        border-bottom: 0;
    }

    .ps-canvas>div:nth-child(13),
    .ps-canvas>div:nth-child(14) {
        border: 1px solid;
        border-top: 1px dashed;
    }

    /* simple preseed canvas with 12 cells = lean canvas */

    /* lean canvas with 12 cells */

    .lean-canvas {
        min-height: 500px;
        grid:
            "a a g g" minmax(160px, auto)
            "j j l l" minmax(120px, auto) 
            "b d d e" minmax(200px, auto)
            "c d d f" minmax(80px, auto)
            "c k k f" minmax(120px, auto)
            "h h i i" minmax(160px, auto) / 
            2fr 1fr 1fr 2fr
    }

    /* quick preseed canvas with 12 cells */

    .quick-canvas {
        min-height: 500px;
        grid:
            "a g" minmax(160px, auto)
            "b c" minmax(160px, auto)
            "d k" minmax(160px, auto)
            "i e" minmax(160px, auto)
            "j f" minmax(160px, auto)
            "h l" minmax(160px, auto) / 
            2fr 2fr
    }


    /* business model canvas with 9 cells */

    .bm-canvas {
        min-height: 500px;
        grid:
            "a a g g" minmax(160px, auto) 
            "b d d e" minmax(120px, auto)
            "c d d f" minmax(120px, auto)
            "h h i i" minmax(160px, auto) / 
            2fr 1fr 1fr 2fr
    }

    .bm-canvas > div:nth-child(8) > .cell-card-container,
    .bm-canvas > div:nth-child(9) > .cell-card-container { display: block; }
    .bm-canvas > div:nth-child(8) .card,
    .bm-canvas > div:nth-child(9) .card { max-width: none; }

    /* product vision board with 5 cells */

    .productvision {
    min-height: 500px;
    grid:
        "a a" minmax(160px, auto) 
        "b c" minmax(160px, auto)
        "d e" minmax(160px, auto) /
        1fr 1fr
    }

    .productvision > div:nth-child(1) > .cell-card-container { display: block; }
    .productvision > div:nth-child(1) .card { max-width: none; }
    .productvision > div:nth-child(n+6) { display: none; }

    /* swot matrix with 4 cells */

    /* tows matrix with 8 cells */

    /* more to come */    
}