/* =========================================================
   HipkaHai detail pages
   Mobile first

   Masterpage requirement:
   <main class="detail-grid">
       @RenderBody()
   </main>

   CMS blocks:
   .content-block.full
   .content-block.half
   .content-block.half

   Optional:
   .content-block.hero
   .content-block.footer
   ========================================================= */


/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.woff2') format('woff2'), url('/fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background: #000;
    color: #fff;
    font-family: Inter, Arial, Helvetica, sans-serif;
}


/* =========================================
   TYPOGRAPHY
========================================= */

.text-small {
    font-size: 14px;
}

.text-medium {
    font-size: 17px;
}

.text-large {
    font-size: 23px;
}

.text-extralarge {
    font-size: 32px;
}

.text-extraextralarge {
    font-size: 64px;
}


/* =========================================
   MOBILE FIRST
========================================= */
@media (max-width:768px) {

    .hipka-nav.container {
        padding-left: 0;
        padding-right: 0;
    }

    .mobile-menu-wrapper {
        width: 100%;
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .nav-left,
    .nav-right {
        position: static;
        transform: none;
    }

    .nav-left {
        display: flex;
        align-items: center;
    }

    .nav-right {
        display: flex;
        align-items: center;
    }

    .navbar-brand {
        margin: 0;
    }

    
}


/* =========================================
   DETAIL GRID
   MOBILE FIRST
========================================= */

.detail-grid {
    width: calc(100% - 40px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    margin-top:80px;
}


    

    /* =========================================
   CONTENT BLOCKS
========================================= */

    .detail-grid > .content-block {
        width: 100%;
        min-width: 0;
        margin: 0;
        grid-column: 1;
    }

        .detail-grid > .content-block.full,
        .detail-grid > .content-block.half {
            grid-column: 1;
        }


/* =========================================
   MEDIA
========================================= */

.content-block img,
.content-block video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 40px;
}


/* =========================================
   HERO + FOOTER
========================================= */

.detail-grid > .content-block.hero,
.detail-grid > .content-block.footer {
    width: 100%;
}


/* =========================================
   DETAIL PAGE FOOTER
   Zelfde HTML structuur behouden
========================================= */

/* MOBILE */

.detail-grid > .content-block.footer {
    width: 96vw;
    max-width: none;
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    margin: 0;
}


/*
   Reset de normale content-block layout
   voor blocks BINNEN de footer.
*/

.content-block.footer > .content-block {
    width: 100%;
    min-width: 0;
    margin: 0;
    grid-column: 1;
}


/* Pijl bovenaan */

.content-block.footer > center {
    grid-column: 1;
    display: block;
    width: 100%;
    text-align: center;
}


/* Beide half blocks onder elkaar op mobiel */

.content-block.footer > .content-block.half {
    grid-column: 1;
}


/* Logo onderaan */

.content-block.footer > .content-block.full {
    grid-column: 1;
}


/* Footer media */

.content-block.footer img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* Zorg dat een gecentreerde afbeelding echt centreert */

.content-block.footer center img {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   FULL WIDTH TEXT
========================================= */

.text-fw-wrapper {
    width: 100%;
}

    .text-fw-wrapper.align-left {
        margin-left: 0;
        margin-right: auto;
    }

    .text-fw-wrapper.align-right {
        margin-left: auto;
        margin-right: 0;
    }


/* =========================================
   BUTTON
========================================= */

.btn-yellow {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 20px;
    background: #F8F552;
    color: #000;
    border: 1px solid #000;
    border-radius: 30px;
    text-decoration: none;
}

    .btn-yellow:hover {
        background: #fff;
        color: #000;
    }




/* =========================================
   DESKTOP
========================================= */

@media (min-width: 992px) {


    .detail-grid > .content-block.footer {
        /*
           Footer zelf blijft 96% viewportbreedte
        */

        width: 96vw;
        /*
           Intern twee gelijke kolommen.
           Zelfde 40px als detailpagina.
        */

        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 40px;
        /*
           Interne footer content begrenzen.
           Padding bepaalt de ruimte aan de buitenkant.
        */

        padding-left: max( 40px, calc((96vw - 1100px) / 2) );
        padding-right: max( 40px, calc((96vw - 1100px) / 2) );
    }


    /* Pijl gebruikt volledige footerbreedte */

    .content-block.footer > center {
        grid-column: 1 / -1;
    }


    /*
       Eerste half automatisch links,
       tweede half automatisch rechts.
    */

    .content-block.footer >
    .content-block.half {
        grid-column: span 1;
        width: 100%;
        margin: 0;
    }


    /*
       Logo over beide kolommen
    */

    .content-block.footer >
    .content-block.full {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }

    /*
       2 equal columns
       40px column gap
       40px row gap

       Total max width:
       530 + 40 + 530 = 1100px
    */
    .detail-grid {
        width: min(1100px, calc(100% - 80px));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 40px;
    }


        /* Full block spans both columns */
        .detail-grid > .content-block.full {
            grid-column: 1 / -1;
        }


        /*
       Half blocks are auto-placed:
       first half  -> left
       second half -> right

       Both start on exactly the same row.
    */
        .detail-grid > .content-block.half {
            grid-column: span 1;
        }


        /*
       Hero + footer break out of the 1100px grid
       and use 96% of the viewport.
    */
        .detail-grid > .content-block.hero,
        .detail-grid > .content-block.footer {
            grid-column: 1 / -1;
            width: 96vw;
            max-width: none;
            justify-self: center;
        }


        /*
       Optional narrower text inside full-width blocks.
    */
        .detail-grid >
        .content-block.full:not(.hero):not(.footer)
        .text-fw-wrapper {
           /* width: 75%;
            max-width: 75%;*/
        }
}