/*
 * PURECAR ROAD SIGNS V24
 * Full image containment + responsive grid + theory image matching
 */

.dt-page{
    overflow-x:hidden!important;
}

.dt-page .dt-wrap,
.dt-page .dt-card,
.dt-page .dt-section,
.dt-page .dt-sign-grid,
.dt-page .dt-sign-card,
.dt-page .dt-sign-copy,
.dt-page .tt-shell,
.dt-page .tt-main,
.dt-page .tt-side{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}


/* ---------------------------------------------------------
   ROAD SIGN LIBRARY
--------------------------------------------------------- */

.dt-page .dt-sign-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
}

.dt-page .dt-sign-card{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    padding:16px!important;
    box-sizing:border-box!important;
}

.dt-page .dt-sign-card[hidden]{
    display:none!important;
}

.dt-page .dt-sign-image{
    width:100%!important;
    height:180px!important;
    min-height:180px!important;

    display:grid!important;
    place-items:center!important;

    overflow:hidden!important;

    padding:14px!important;
    margin:0 0 14px!important;

    box-sizing:border-box!important;
}

.dt-page .dt-sign-image img{
    display:block!important;

    width:auto!important;
    height:auto!important;

    max-width:100%!important;
    max-height:150px!important;

    object-fit:contain!important;
    object-position:center!important;

    margin:auto!important;
}

.dt-page .dt-sign-copy{
    width:100%!important;
    min-width:0!important;
}

.dt-page .dt-sign-copy h3,
.dt-page .dt-sign-copy p{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
}


/* ---------------------------------------------------------
   THEORY TEST ROAD SIGN
--------------------------------------------------------- */

.dt-page #ttImage[hidden]{
    display:none!important;
}

.dt-page #ttImage:not([hidden]){
    width:100%!important;
    min-width:0!important;

    min-height:310px!important;
    height:auto!important;

    display:grid!important;
    place-items:center!important;

    overflow:hidden!important;

    padding:22px!important;

    box-sizing:border-box!important;
}

.dt-page #ttImageImg{
    display:block!important;

    width:auto!important;
    height:auto!important;

    max-width:min(100%,360px)!important;
    max-height:280px!important;

    object-fit:contain!important;
    object-position:center!important;

    margin:auto!important;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media(max-width:1100px){

    .dt-page .dt-sign-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr))!important;
    }
}


/* ---------------------------------------------------------
   SMALL TABLET
--------------------------------------------------------- */

@media(max-width:760px){

    .dt-page .dt-sign-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;
    }

    .dt-page .dt-sign-image{
        height:150px!important;
        min-height:150px!important;
    }

    .dt-page .dt-sign-image img{
        max-height:122px!important;
    }

    .dt-page #ttImage:not([hidden]){
        min-height:255px!important;
        padding:16px!important;
    }

    .dt-page #ttImageImg{
        max-width:min(100%,285px)!important;
        max-height:225px!important;
    }
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media(max-width:520px){

    .dt-page .dt-sign-grid{
        grid-template-columns:1fr!important;
    }

    .dt-page .dt-sign-card{
        display:grid!important;

        grid-template-columns:
            124px minmax(0,1fr)!important;

        gap:14px!important;
        align-items:center!important;

        min-height:0!important;
    }

    .dt-page .dt-sign-card[hidden]{
        display:none!important;
    }

    .dt-page .dt-sign-image{
        width:124px!important;
        height:124px!important;
        min-height:124px!important;

        margin:0!important;
        padding:10px!important;
    }

    .dt-page .dt-sign-image img{
        max-width:104px!important;
        max-height:104px!important;
    }

    .dt-page #ttImage:not([hidden]){
        min-height:220px!important;
    }

    .dt-page #ttImageImg{
        max-width:min(100%,240px)!important;
        max-height:195px!important;
    }
}