/* =========================================================


   TOBYLEX – STRANICA BRENDOVI


   Datoteka: assets/css/brands-page.css


   ========================================================= */





/* Glavna svijetla pozadina područja s brendovima */


body.page-template-template-brand .brands-section {


    position: relative;


    overflow: hidden;


    margin-top: 2.5rem;


    margin-bottom: 4rem;


    padding: 2.8rem;


    background: #f4f7f8;


    border: 1px solid #e7ebed;


    border-radius: 1.6rem;


}





/* Velika diskretna šapa u gornjem desnom kutu */


body.page-template-template-brand .brands-section::before {


    content: "";


    position: absolute;


    top: 1.8rem;


    right: 3.5rem;


    width: 11rem;


    height: 11rem;


    background-image: url("../images/paw-orange.svg");


    background-repeat: no-repeat;


    background-position: center;


    background-size: contain;


    opacity: 0.045;


    transform: rotate(-8deg);


    pointer-events: none;


}





/* Uvodni dio */


body.page-template-template-brand .brands-intro {


    position: relative;


    z-index: 1;


    display: flex;


    align-items: flex-start;


    gap: 1.6rem;


    margin-bottom: 2.8rem;


}





/* Okrugla narančasta šapa uz naslov


   Postojeći emoji u HTML-u skriva se pomoću font-size: 0. */


body.page-template-template-brand .brands-intro-icon {


    flex: 0 0 5.8rem;


    width: 5.8rem;


    height: 5.8rem;


    box-sizing: border-box;


    display: flex;


    align-items: center;


    justify-content: center;


    background-color: #ffffff;


    background-image: url("../images/paw-orange.svg");


    background-repeat: no-repeat;


    background-position: center;


    background-size: 4.8rem 4.8rem;


    border-radius: 50%;


    font-size: 0;


    line-height: 0;


    box-shadow: 0 0.45rem 1.4rem rgba(0, 0, 0, 0.10);


}





/* Ako je u predložak naknadno dodan IMG element */


body.page-template-template-brand .brands-intro-icon img {


    display: block;


    width: 4.8rem;


    height: 4.8rem;


    object-fit: contain;


}





/* Naslov i opis */


body.page-template-template-brand .brands-intro-text {


    position: relative;


    z-index: 1;


    min-width: 0;


}





body.page-template-template-brand .brands-intro-text h2 {


    margin: 0 0 0.6rem !important;


    color: #303030;


    font-size: 2.6rem;


    font-weight: 700;


    line-height: 1.2;


}





body.page-template-template-brand .brands-intro-text p {


    max-width: 78rem;


    margin: 0 !important;


    color: #545b60;


    font-size: 1.6rem;


    line-height: 1.55;


}





/* Mreža brendova */


body.page-template-template-brand .brands-wrapper {


    position: relative;


    z-index: 1;


    display: grid !important;


    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;


    gap: 1.6rem !important;


    width: 100% !important;


    margin: 0 !important;


    padding: 0 !important;


}





/* Kartica pojedinog brenda */


body.page-template-template-brand .brands-wrapper > a.brand-card {


    box-sizing: border-box;


    width: 100% !important;


    min-width: 0;


    min-height: 20rem;


    margin: 0 !important;


    padding: 2rem !important;


    display: flex !important;


    flex-direction: column;


    align-items: center;


    justify-content: space-between;


    gap: 1.4rem;


    background: #ffffff;


    border: 1px solid #e1e5e7;


    border-radius: 1.2rem;


    color: #1c1d1f;


    text-decoration: none !important;


    box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.055);


    transition:


        transform 0.18s ease,


        box-shadow 0.18s ease,


        border-color 0.18s ease;


}





body.page-template-template-brand .brands-wrapper > a.brand-card:hover,


body.page-template-template-brand .brands-wrapper > a.brand-card:focus {


    transform: translateY(-0.3rem);


    border-color: #f68902;


    color: #1c1d1f;


    text-decoration: none !important;


    box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.09);


}





/* Područje logotipa */


body.page-template-template-brand .brand-logo {


    flex: 1 1 auto;


    width: 100%;


    min-height: 11rem;


    display: flex;


    align-items: center;


    justify-content: center;


}





/* Logotipi */


body.page-template-template-brand .brand-logo img {


    display: block;


    width: auto !important;


    max-width: 82% !important;


    max-height: 10rem !important;


    height: auto !important;


    margin: 0 auto !important;


    object-fit: contain;


}





/* Naziv brenda ispod logotipa */


body.page-template-template-brand .brand-name {


    display: block;


    width: 100%;


    margin: 0;


    color: #1c1d1f;


    font-size: 1.7rem;


    font-weight: 700;


    line-height: 1.25;


    text-align: center;


    overflow-wrap: anywhere;


}





/* Zamjenski prikaz ako brend nema logotip */


body.page-template-template-brand .brand-placeholder {


    width: 8rem;


    height: 8rem;


    display: flex;


    align-items: center;


    justify-content: center;


    background: #f4f6f7;


    border-radius: 50%;


    color: #f68902;


    font-size: 3.6rem;


    font-weight: 700;


}





/* Tablet */


@media (max-width: 900px) {


    body.page-template-template-brand .brands-wrapper {


        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;


    }


}





/* Mobitel */


@media (max-width: 640px) {


    body.page-template-template-brand .brands-section {


        margin-top: 1.8rem;


        margin-bottom: 3rem;


        padding: 1.8rem;


        border-radius: 1.2rem;


    }





    body.page-template-template-brand .brands-section::before {


        top: 1rem;


        right: 1rem;


        width: 7rem;


        height: 7rem;


    }





    body.page-template-template-brand .brands-intro {


        gap: 1.2rem;


        margin-bottom: 2rem;


    }





    body.page-template-template-brand .brands-intro-icon {


        flex-basis: 5rem;


        width: 5rem;


        height: 5rem;


        background-size: 4.1rem 4.1rem;


    }





    body.page-template-template-brand .brands-intro-icon img {


        width: 4.1rem;


        height: 4.1rem;


    }





    body.page-template-template-brand .brands-intro-text h2 {


        font-size: 2.2rem;


    }





    body.page-template-template-brand .brands-intro-text p {


        font-size: 1.45rem;


    }





    body.page-template-template-brand .brands-wrapper {


        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;


        gap: 1.2rem !important;


    }





    body.page-template-template-brand .brands-wrapper > a.brand-card {


        min-height: 16rem;


        padding: 1.5rem !important;


    }





    body.page-template-template-brand .brand-logo {


        min-height: 8rem;


    }





    body.page-template-template-brand .brand-logo img {


        max-height: 7.5rem !important;


    }





    body.page-template-template-brand .brand-name {


        font-size: 1.5rem;


    }


}





/* Vrlo uski zasloni */


@media (max-width: 420px) {


    body.page-template-template-brand .brands-section {


        padding: 1.4rem;


    }





    body.page-template-template-brand .brands-intro {


        align-items: center;


    }





    body.page-template-template-brand .brands-intro-icon {


        flex-basis: 4.6rem;


        width: 4.6rem;


        height: 4.6rem;


        background-size: 3.8rem 3.8rem;


    }





    body.page-template-template-brand .brands-intro-icon img {


        width: 3.8rem;


        height: 3.8rem;


    }





    body.page-template-template-brand .brands-wrapper {


        grid-template-columns: 1fr !important;


    }





    body.page-template-template-brand .brands-wrapper > a.brand-card {


        min-height: 15rem;


    }


}