@import "../style.less";


@paper-width: @page-width * 2 + @crop * 2;

@page {
    size: @paper-width (@paper-height + 5);
    margin: 0;
}

.paper {
    background-image:
        -webkit-linear-gradient(90deg, black 0, black 100%),
        -webkit-linear-gradient(0deg, black 0, black 100%),
        -webkit-linear-gradient(90deg, black 0, black 100%),
        -webkit-linear-gradient(0deg, black 0, black 100%),
        -webkit-linear-gradient(90deg, black 0, black 100%),
        -webkit-linear-gradient(0deg, black 0, black 100%),
        -webkit-linear-gradient(90deg, black 0, black 100%),
        -webkit-linear-gradient(0deg, black 0, black 100%),
        -webkit-linear-gradient(0deg, black 0, black 100%),
        -webkit-linear-gradient(0deg, black 0, black 100%),
        -webkit-linear-gradient(90deg, black 0, black 100%),
        -webkit-linear-gradient(90deg, black 0, black 100%),
        -webkit-linear-gradient(90deg, black 0, black 100%),
        -webkit-linear-gradient(90deg, black 0, black 100%)
    ;
    background-size:
        @crop-size @crop-line-width,
        @crop-line-width @crop-size,
        @crop-size @crop-line-width,
        @crop-line-width @crop-size,
        @crop-size @crop-line-width,
        @crop-line-width @crop-size,
        @crop-size @crop-line-width,
        @crop-line-width @crop-size,
        @crop-line-width @crop-size, // vertical middle, top
        @crop-line-width @crop-size, // vertical middle, bottom
        @crop-size @crop-line-width, // horizontal middle left top
        @crop-size @crop-line-width, // horizontal middle right top
        @crop-size @crop-line-width, // horizontal middle left bottom
        @crop-size @crop-line-width // horizontal middle right bottom
    ;
    background-position:
        left @crop,
        @crop top,
        right @crop,
        (@paper-width - @crop) top,
        right (@paper-height - @crop),
        (@paper-width - @crop) bottom,
        left (@paper-height - @crop),
        @crop bottom,
        ((@paper-width / 2) - (@crop-line-width / 2)) top, // vertical middle, top
        ((@paper-width / 2) - (@crop-line-width / 2)) bottom, // vertical middle, bottom
        (((@paper-width / 2) - (@crop-line-width / 2)) - @crop) @crop, // horizontal middle left top
        (((@paper-width / 2) - (@crop-line-width / 2))+@bleed) @crop, // horizontal middle right top
        (((@paper-width / 2) - (@crop-line-width / 2)) - @crop) (@paper-height - @crop), // horizontal middle left bottom
        (((@paper-width / 2) - (@crop-line-width / 2))+@bleed) (@paper-height - @crop) // horizontal middle right bottom
    ;
    background-repeat: no-repeat;
}

//Disable cropmarks;
.paper {
    background-image: none;
}

.pull {
    letter-spacing: -.1mm;
}

.break-before {
    -webkit-region-break-before: always;
    region-break-before: always;
    break-before: always;
}

.header {
    &:before {
        position: absolute;
        left: (@page-width)/18 !important;
        content: "The City In-Formed by Speed";
    }

    &:after {
        position: absolute;
        right: (@page-width)/18 !important;
    }
}

body {
    &#II-1 .header:after {
        content: "The Image of the City and the Process of Planning";
    }

    &#II-2 .header:after {
        content: "City Frontiers and Their Disappearance";
    }
    
    &#II-3 .header:after {
        content: "Passion for the Hiatus and the Liquidisation of Architecture";
    }

    &#II-4 .header:after {
        content: "Information Cloud and the Rise of the Omnipolis";
    }

    &#II-5 .header:after {
        content: "Solidification of History";
    }

    &#II-6 .header:after {
        content: "Compulsion to Sit";
    }
}


#pages {
    counter-reset: page-counter-left -1 page-counter-right;

    .paper {
        counter-increment: page-counter-left 2 page-counter-right 2;
    }
}

.page {
    position: relative;
    width: 100%;
    height: 100%;
}

#main {
    position: relative;
    font-family: "Dauphine";
    // overflow: hidden;

    .figcaption, .figcaption_break {
        -webkit-flow-into: figcaptions;
        flow-into: figcaptions;
    }

    .img, .img_break {
        -webkit-flow-into: images;
        flow-into: images;
    }

    h1.cover, h2.cover, h3.cover {
        -webkit-flow-into: titles;
        flow-into: titles;
    }

    -webkit-flow-into: main;
    flow-into: main;


    figure.expanded {
        display: inline-block;
        float: left;
        width: 43%;
        margin: 3pt 9pt 3pt 1pt;
    }

    figure.expanded figcaption {
        display: block;
        float: left;
        font-size: 9pt;
        width: 100%;
        line-height: 13pt;
        padding-top: 3pt;
        padding-right: 1pt;
    }

    figure.expanded figcaption + p {
        margin-top: @line-height*2;
    }

    h1, h2, h3, h4 {
        text-transform: uppercase;
        font-size: 18pt;
        line-height: 35pt !important;
        margin-bottom: 12pt;

        &.cover {
            break-after: region;
            -webkit-break-after: region;
        }
    }
    h2 {
      line-height: 20pt !important;
    }
    h4  {
      text-align: center;
      font-size: 12pt;
      margin-bottom: 12pt;
      line-height: 15pt !important;
    }
    h4 + p {
      margin-top: 0pt;
    }
    blockquote {
      margin-right: 0pt !important;
      padding-right: 0pt !important;
    }
    blockquote p {
      font-size: 12pt;
      margin-right: 0pt !important;
      padding-right: 0pt !important;
      text-indent: 0;
      text-align: left;
    }
    figure {
        width: 200%;
        margin: 10pt -46pt ;
    }

    .figcaption {
        line-height: 12pt;
        margin-top: @line-height - 12pt;
        margin-bottom: 12pt;
        font-family: @body-font;
        font-size: 9pt;
        display: block;
        text-indent: 0pt;
    }

    .img.full + .figcaption {
        color: white;
        font-family: 'garamond8';
    }

    .img.full.black-caption + .figcaption {
        color: black;
        font-family: 'garamond12';
    }

    p:first-of-type {
        margin-top: 0;
    }

    p {
        font-size: 12pt;
        line-height: 13.5pt;
        hyphens: auto;
        -webkit-hyphens: auto;
        // text-align: justify;
        // text-rendering: inherit;
        margin-bottom: 0pt;
    }

    p + p {
      text-indent: @line-height * 2;
      margin-top: 0pt;
    }
    p.big-break {
      margin-top: @line-height;
      text-indent: 0pt;
    }

    figure + p {
        margin-top: @line-height;
    }

    p .img.full {
        left: -@line-height;
    }


    .img {
        text-indent: 0;
        max-width: @page-width * .75;
        max-height: @page-height * .75;

        img {
            -webkit-region-break-inside: avoid;
            region-break-inside: avoid;
            break-inside: avoid;
        }
        
        &.full, &.cover {

            max-width: initial;
            max-height: initial;
            min-width: 410mm;
            max-height: 310mm;

            position: relative;
            top: 0mm;
            left: 0mm;

            -webkit-region-break-before: always;
            region-break-before: always;
            -webkit-region-break-after: always;
            region-break-after: always;

            img {
                max-width: initial;
                max-height: initial;
                min-width: 410mm;
                max-height: 310mm;
            }
        }

        &.full-double {
            width: (@page-width/18)*12;
            max-width: (@page-width/18)*12;
            display: block;
            -webkit-region-break-before: always;
            region-break-before: always;
            break-before: always;

            img {
               max-width: ((@page-width/18)*15)-1.5mm;
               max-height: (@body-height * .5)-1.5mm;
            }
        }

        &.half {
            width: (@page-width/18)*15;
            height: @body-height * .5;
            max-width: (@page-width/18)*15;
            max-height: @body-height * .5;
            // display: inline-block;

            -webkit-region-break-before: always;
            region-break-before: always;
            break-before: always;

            img {
                max-width: ((@page-width/18)*15)-1.5mm;
                max-height: (@body-height * .5)-1.5mm;
            }

            &.break-after {
                -webkit-region-break-after: always;
                region-break-after: always;
                break-after: always;
            }
        }
        
        &.medium {
          height: auto;
          max-height: @body-height * .75;
          max-width: (@page-width/18)*11;
          display: inline-block;
          margin-right: 6px;

          img {
              max-width: 100%;
              max-height: 100%;
          }

          &.block {
              display: block;
          }
        }

        &.small {
          height: auto;
          max-height: @body-height * .4;
          max-width: 78mm;
          display: inline-block;
          margin-right: 6px;

          img {
              max-width: 100%;
              max-height: 100%;
          }

          &.block {
              display: block;
          }
        }
        
        &.wrapped_images {
            div {
                margin-right: 1mm;
            }

            &.half {
                display: block;
            }

            .half {
                max-width: (@page-width/18)*15;
                max-height: @body-height * .5;
                display: inline-block;

                img {
                    max-width: ((@page-width/18)*15)-1.5mm;
                    max-height: (@body-height * .5)-1.5mm;
                }
            }
            
            .small {
                height: auto;
                max-height: @body-height * .4;
                max-width: ( @page-width / 18 ) * 16 * .45;
                display: inline-block;
                margin-right: 6px;

                img {
                    max-width: 100%;
                    max-height: @body-height * .4;
                }

                &.block {
                    display: block;
                }
            }
        }
    }

    .img_break.break-before {
        display: block;
        -webkit-region-break-before: always;
        region-break-before: always;
        break-before: always;
    }

    .force-float.img {
        display: inline-block;
        width: initial;
    }

    h1.cover {
        break-after: region;
        -webkit-break-after: always;
        -webkit-region-break-after: always;
        color: black;
        font-size: 300%;
        text-transform: uppercase;
        text-align: center;
        border-top: 2px solid black;
        border-bottom: 2px solid black;
        padding-top: 5mm;
        padding-bottom: 3mm;
        margin-top: 0mm;
    }

    h3.cover{
        font-size: 200%;
        text-align: center;
        margin-bottom: 3mm;
    }

    .img_ref {
        float: left;
        clear: left;
        margin-left: -(@page-width)/18 * 1.5;
        font-family: @body-font;
        font-size: 9pt;
        line-height: @line-height;
        display: block;
        text-indent: 0pt;

        &:before {
            content: "Fig. ";
        }

    }

    .break-after {
        display: block;
        height: 1px;

        -webkit-break-after: always;
        break-after: always;
        region-break-after: always;
        -webkit-region-break-after: always;
    }
}


.running {
    font-family: "dauphine";
    font-style:italic;
    padding-top: 32px;
}

.footer {
    width: 49.5%;
    display: inline-block;
    height: 10mm;

    position: absolute;
    padding: 0;
    left: (@page-width / 18) * 3.5;
    width: (@page-width/18) * 8;

    &.left {
        position: absolute;
        padding: 0 3mm 0 0 !important;
        left: (@page-width / 18) * 3.5;
        width: (@page-width/18) * 8;
        text-align: center;
        &:after {
            content: counter(page-counter-left);
        }
    }

    &.right {
        padding: 0 3mm 0 0 !important;
        left: @page-width + (@page-width / 18) * 3.5;
        width: (@page-width/18) * 8;
        text-align: center;
        &:after {
            content: counter(page-counter-right);
        }
    }
}

.pagination {
    font-family:"dauphine";
    margin-top: 40pt;
}

.main {
    -webkit-flow-from: main;
    flow-from: main;

    // max-height: 100%;
    position: absolute;
    top: @page-height/18;
    bottom: 0;
    left: (@page-width / 18) * 3.5;
    width: (@page-width/18) * 8;
    // height: (@page-height/18)*16;

    .collapsed {
        display: none;
    }

    &.secondary {
        display: none;
        left: @page-width + (@page-width / 18) * 3.5;
    }
}


.captions {
    -webkit-flow-from: figcaptions;
    flow-from: figcaptions;

    position: absolute;
    left: ((@page-width/18)*12) - 2mm;
    top: @page-height/18;
    width: 47mm;
    bottom: 0;

    .collapsed {
        height: 0;
    }

    &.secondary {
        display: none;
        left: initial;
        right: ((@page-width/18)*12) - 2mm;
    }
}

.images {
    -webkit-flow-from: images;
    flow-from: images;
    position: absolute;
    top: @page-height/36;
    right: @page-width/18;
    bottom: 0;
    left: (@page-width/18)*20;

    &.secondary {
        display: none;
    }
}

.titles {
    -webkit-flow-from: titles;
    flow-from: titles;
    position: absolute;
    left: @page-width * 1.30;
    right: @page-width * .30;
    width: auto;
    z-index: 1;
    top: 50mm;
    height: 150mm;
    text-align: center;
    display: none;
}

.paper.reveal_secondary_main {
    .main.secondary {
        display: block;
    }

    .images {
        display: none;
    }

    .captions {
        display: block;
    }
}

.paper.half.reveal_secondary_main {
    .main.secondary {
        top: @page-height/18;
        bottom: 0;
        max-height: initial;
    }

    .images {
        display: block;
    }

    .images.secondary {
        display: none;
    }

    .captions {
        display: block;
    }
}

.paper.half.reveal_secondary_images_half {
    .images.secondary {
        display: block;
        left: @page-width + (@page-width/9);
        right: (@page-width/18);
        bottom: @body-height * .5 - @page-height/36;
    }
}

.paper.half.reveal_secondary_images {
    .images.secondary {
        display: block;
        right: (@page-height/18);
        bottom: 0;
        top: @page-height/36;
        left: @page-width + (@page-width/9);
    }

    .main.secondary {
        display: none;
    }
}

.paper.half.no-reveal {
    .main.secondary { display: none; }
    .captions.secondary { display: block; }
}

.paper.full, .paper.cover {
    padding: 0;

    .main {
        height: 0;
    }

    .page {
        height: 100%;
        width: 100%;
    }

    .header {
        visibility: hidden;
    }

    .body {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        overflow: hidden;
        height: initial;
        width: initial;
    }
}

.paper.full {
    .main {
        display: none;
    }

    .images {
        position: absolute;
        top: 5mm;
        right: 5mm;
        bottom: 5mm;
        left: 5mm;
        width: initial;
        height: initial;
        overflow: hidden;
        margin-left: 0;
    }

    .captions {
        position: absolute;
        left: (@page-width)/18 + 10mm;
        bottom: 6mm + (@page-width)/18 + 10mm;
        z-index: 1;
    }

    .pagination {
        visibility: hidden;
    }
}

.paper.half {
    .main, .captions {
        position: absolute;
        top: calc(~"24 * "@line-height + ~" + "@page-height/18);
    }

    .main.secondary {
        display: block;
    }

    .images {
        position: absolute;
        top: @page-height/36;
        right: (@page-width) / 18 * 2;
        bottom: @body-height * .5 - @page-height/36;
        left: (@page-width) / 18;
        width: initial;
        height: initial;
        margin-left: 0;
    }
}

.paper.cover {
    .images {
        position: absolute;
        top: 5mm;
        right: 5mm;
        bottom: 5mm;
        left: 5mm;
        width: initial;
        height: initial;
        overflow: hidden;
        margin-left: 0;
    }

    .titles {
        display: block;
    }

    .captions, .main {
       display: none;
    }

    .pagination, .header {
        visibility: hidden;
    }
}

.paper.full-double {
    .images {
        display: block;
        position: absolute;
        top: @page-height/36;
        right: @page-width + (@page-width) / 18 * 2;
        bottom: (@page-height)/6;
        left: (@page-width) / 18;
    }

    .images.secondary {
        display: block;
        position: absolute;
        top: @page-height/36;
        left: (@page-width) / 18 * 2 + @page-width;
        bottom: (@page-height)/6;
        right: (@page-width) / 18;
    }

    .main {
        display: none;
    }
}

.ref-titre {
    font-family: "garamond12";
    font-size: 12pt;
}

ol {
  list-style-type: none !important;
  display: block;
  margin-left: 0pt;
  padding-left: @page-width/18;
}

ol li {
  display: list-item;
  list-style-type: non !important;
  margin-left: 0pt;
  padding-left: 0pt;
  text-indent: -16pt ;
  &::before{
    content: "▴ ";
    padding-right: 5pt;


  }
}

ol ul, ol ol, {
  list-style-type: none !important;
  display: block;
  margin-left: 0pt;
  padding-left: (@page-width/18)*2;
}

ol ul li, ol ol li, {
  display: list-item;
  list-style-type: none !important;
  margin-left: 12pt;
  padding-left: 0pt;
  text-indent: -18pt;
  &::before{
    // content: "↳";
    content: "▵";


    //content: "\23e3 "
    margin-right: 7.25pt;
    //padding-left: 14.5pt;
  }
}


li p {
  margin: 0px;
  font-size: @font-size;
  line-height: @line-height;
  text-align: left;
  font-weight: normal !important;
  display: inline;
}

li p::first-line{
  padding-left: 0pt !important;
}

// Specific sizes
// img[src="img/Figure%20II.2.31.jpg"] {
//     max-height: 90mm !important;
// }

body#II-4 {
    h3.cover {
        color: white;
    }

    h1.cover {
        border-color: white;
        color: white;
    }

    .img.cover {
        height: 310mm;

        img {
            height: 310mm;
        }
    }
}

// body#II-5 {
//     #main img[src="img/Figure%20II.5.1.jpg"] {
//         min-width: initial !important;
//         min-height: initial !important;
//         max-width: 1418px !important;
//         width: 1418px !important;
//         position: relative;
//         top: 7mm + (@page-width) / 18;
//         left: 17mm + (@page-width) / 18;
//     }

//     #main img[src="img/Figure%20II.5.2.jpg"] {d
//         min-width: initial !important;
//         min-height: initial !important;
//         max-width: 1418px !important;
//         width: 1418px !important;
//         position: relative;
//         top: 7mm + (@page-width) / 18;
//         left: 17mm + (@page-width) / 18;
//     }
// }

body#II-6 {
    #main img[src="img/II.6.5.jpg"] {
        min-width: initial !important;
        min-height: initial !important;
        max-width: 1418px !important;
        width: 1418px !important;
        position: relative;
        top: 2mm + (@page-width) / 18;
        left: 12mm + (@page-width) / 18;
    }

    .paper.full {
        .captions {
            left: 17mm + ((@page-width) / 18) + 2mm;
            top: calc(~"44 * "@line-height + ~" + "@page-height/18);
        }
    }
}