/* Grid Layout  on computer screen */
.cp-info-label-container {
    display: grid;
    grid-template-columns: [info] 500px [image] 300px [col-end];
    grid-template-rows: [product] auto [frame] auto [glass] auto [window] auto [energy] auto [row-end];
    grid-column-gap: 0.2rem;
    grid-row-gap: 0.4rem;
}

.cp-info-label-product {
    grid-column: info;
    grid-row-start: product;
}

.cp-info-label-frame {
    grid-column: info;
    grid-row-start: frame;
}

.cp-info-label-glass {
    grid-column: info;
    grid-row: glass;
}

.cp-info-label-window {
    grid-column: info;
    grid-row: window;
}

.cp-info-label-energy {
    grid-column: info;
    grid-row: energy;
}

.cp-info-label-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.cp-info-label-item-label {
    width: 300px;
}
.cp-info-label-item-value {
    width: 200px;
}

.cp-info-label-item-image {
    grid-column: image;
    grid-row: product / energy;
    place-self: start center;
}

* {
    box-sizing: border-box;
}

/* Visual presentation */
.cp-info-label-product,
.cp-info-label-frame,
.cp-info-label-glass,
.cp-info-label-window,
.cp-info-label-energy {
    font-size: 1rem;
    color: #7a7a7a;
}

.cp-info-label-item {
    margin: 0.2rem;
    background-color: #ffffff;
    color: #7a7a7a;
}

.cp-info-label-title {
    margin: 0.1rem;
    padding: 0.1rem 0.2rem;
    font-size: 1rem;
}

.cp-info-label-text {
    margin: 0.1rem;
    padding: 0.1rem 0.2rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.cp-info-label-item-image,
.cp-info-label-item-image img {
    margin: 0;
    padding: 0;
    width: 226px;
    align-self: flex-start;
}

.cp-info-label-item-image img {
    -webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.5) !important;
    -moz-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.5) !important;
    box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.5) !important;
}

/* 
 * [BUG] Tooltip não estão a surgir quando o rato passa por cima
 * https://gitlab.adene.pt/opensource/classemais-informacao/issues/2
 */
.tippy-box[data-theme~='classemais'] {
    background-color: #00974b;
    color: white;
}

.tippy-content h4 {
    font-size: 0.9rem;
    font-weight: 600;
}

.tippy-content p {
    font-size: 0.7rem;
    font-weight: 400;
}

.tippy-box[data-theme~='classemais'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: #00974b;
    transform: scale(1.5);
}

/* rule for mobile */
/* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
@media screen 
and (min-device-width: 375px)
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {

    /* Flexbox Layout */
    .cp-info-label-container {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .cp-info-label-item {
        flex-direction: column;
    }

    .cp-info-label-item-label {
        width: 100%;
    }
    .cp-info-label-item-value {
        width: 100%;
    }

    .cp-info-label-product {
        order: 1;
    }

    .cp-info-label-frame {
        order: 2;
    }

    .cp-info-label-glass {
        order: 3;
    }

    .cp-info-label-window {
        order: 4;
    }

    .cp-info-label-energy {
        order: 5;
    }

    .cp-info-label-item-image {
        order: 6;
    }

    .cp-info-label-item-image,
    .cp-info-label-item-image img {
        width: 100%;
    }

    .tooltip {
        width: 100%;
    }
}