/*
* File: vara-projekt-archive.css
* Version: 3.1
* Description: Custom styles for vara projekt archive page.
* Author: [Cajka]
* Date: [Creation Date]
*/

/* header */
.ast-primary-header-bar {background-color:#020e33!important;}
.ast-below-header-wrap {background-color: var(--ast-global-color-0);}
#ast-hf-menu-1 .sub-menu .menu-text {color:var(--ast-global-color-8)}
#ast-hf-menu-1 .sub-menu .menu-text:hover {color:var(--ast-global-color-7)}
/* main container*/
.ast-separate-container #primary {margin:0!important;padding:0!important;}
@media (max-width: 544px) {
.ast-separate-container #content .ast-container {
    padding-left:24px;
    padding-right:24px;
}
}
/* projekt hero */
.sbs-brdcruc-vps .uagb-container-inner-blocks-wrap{max-width: var(--astra-site-content-width, 1600px)!important;margin:0 auto !important;}
@media only screen and (max-width: 767px){.sbs-brdcruc-vps .uagb-container-inner-blocks-wrap {background-color:transparent!important;padding:0!important;}.ast-breadcrumbs-inner{margin: 0 auto 20px 0 !important;}}
.sbs-proj-hero {background-color:#020e33!important;margin-left:calc(-50vw + 50%);margin-bottom:0;margin-right:calc(-50vw + 50%);max-width:100vw;width:100vw;padding:3% 3% 5% 3%;}
.sbs-proj-hero .inner-row {max-width:var(--astra-site-content-width, 1600px);margin:0 auto;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;position: relative;}
@media (max-width: 921px) {.sbs-proj-hero .inner-row {padding:0;}}
.sbs-proj-hero .col-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:5% 3% 5% 0;}
.sbs-proj-hero .col-left h1 {text-align:left;font-size:42px;line-height:1.2em;margin-bottom:20px;}
.sbs-proj-hero .col-left p {text-align:left;font-size:16px;line-height:1.5em;margin-top:0;}
.sbs-proj-hero .col-right {border-radius:15px;min-height:400px;background-image:url(https://svenskbyggstandard.se/wp-content/uploads/2024/11/tak-closeup-7-mob.webp);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-attachment:scroll;}
@media only screen and (max-width: 976px) {.sbs-proj-hero .col-left h1 {font-size:34px;}}
@media only screen and (max-width: 767px){.sbs-proj-hero{margin-bottom:0;padding:40px 0 0 0;}.sbs-proj-hero .inner-row{padding:0!important}.sbs-proj-hero .col-left{padding:0 24px;}.sbs-proj-hero .col-right{border-radius:0;}.sbs-proj-hero .col-left p{margin-bottom: 15px;}}
.projekt-filters, .projekt-grid {margin-left:calc(-50vw + 50%);margin-bottom:10px;margin-right:calc(-50vw + 50%);max-width:100vw;width:100vw;padding:0 3% 1% 3%;}
.projekt-grid .inner-row {display: -ms-grid;display: grid;-ms-grid-columns: 1fr;grid-template-columns: repeat(1, 1fr);gap: 20px;max-width:var(--astra-site-content-width, 1600px);margin:0 auto 20px auto;-webkit-box-sizing:border-box;box-sizing:border-box;position: relative;}
@media (min-width: 768px) {
.projekt-filters, .projekt-grid {margin-bottom:30px;}
.projekt-grid .inner-row {
    /* Fallback for IE 11 using -ms-grid */
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    
    /* Standard modern browsers using grid-template-columns */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
    margin-bottom: 20px;
}
}

@media (min-width: 977px) {
    .projekt-grid .inner-row {
        /* Fallback for IE 11 using -ms-grid */
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr; /* Define three equal columns for IE */
        
        /* Standard modern browsers using grid-template-columns */
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Define three equal columns */
    }
    
}

.projekt-item {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#062896;padding:0;text-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;border-radius:15px;}
.projekt-thumbnail {min-height:300px;background-size:cover;background-position:center;border-radius:15px 15px 0 0;}
.projekt-content {-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:15px;}
.projekt-title {font-size: 20px;margin: 10px 0;}
.projekt-title a {color:#fff!important;line-height:1.4em;}
.projekt-title a:hover {color:var(--ast-global-color-0)!important;}

.projekt-excerpt {
font-size: 16px;
margin-bottom: 15px;
}

.projekt-acf {
font-size: 14px;
color: #555;
}
.projekt-filters .inner-row {max-width:var(--astra-site-content-width, 1600px);margin:0 auto 20px auto;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;position: relative;}
@media (min-width: 768px) {
.projekt-filters {padding:0 3%;}  
}

.projekt-acf p {margin:5px 0;color:var(--ast-global-color-0);}
.projekt-acf p strong {color:#fff!important;}
.projekt-filters ul {list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:15px;margin-bottom:20px;margin-left:0;}
.projekt-filters li {display:-webkit-box;display:-ms-flexbox;display:flex;}

.projekt-filters a {
text-decoration: none;
padding: 10px 15px;
background-color: #235bff;
color: #fff;
border-radius: 5px;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.projekt-filters a:hover {
background-color: #062896!important;
}
.projekt-filters a.active {
background-color: #062896; /* Background color when active */
}
.pagination {padding:0 20px;margin-bottom:80px;}
@media (max-width: 921px) {.pagination {padding:0;}}
/* pagination */
.nav-links {
-webkit-box-align: center;
-ms-flex-align: center;
    align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 8px;
-webkit-box-pack: center;
-ms-flex-pack: center;
    justify-content: center;
}
.page-numbers {
background-color: #fff;
border: 1px solid #020e33;
color: #020e33;
-webkit-appearance: none;
-moz-appearance: none;
    appearance: none;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px rgba(2, 14, 51, .12), 0 2px 4px rgba(2, 14, 51, .08), 0 4px 8px rgba(2, 14, 51, .06), 0 8px 16px rgba(2, 14, 51, .04);
    box-shadow: 0 0 2px rgba(2, 14, 51, .12), 0 2px 4px rgba(2, 14, 51, .08), 0 4px 8px rgba(2, 14, 51, .06), 0 8px 16px rgba(2, 14, 51, .04);
cursor: pointer;
display: inline-block;
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
max-width: 100%;
overflow: hidden;
padding: 12px 16px;
position: relative;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
-webkit-transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
vertical-align: top;
white-space: nowrap;
}
.page-numbers.current {
background-color: #ededed;
border: 1px solid #020e33;
-webkit-box-shadow: none;
    box-shadow: none;
color: #020e33;
cursor: default;
}
.next.page-numbers, .prev.page-numbers {
color:#fff;
background-color: var(--ast-global-color-7);
border: 1px solid var(--ast-global-color-7);
-webkit-appearance: none;
-moz-appearance: none;
    appearance: none;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px rgba(2, 14, 51, .12), 0 2px 4px rgba(2, 14, 51, .08), 0 4px 8px rgba(2, 14, 51, .06), 0 8px 16px rgba(2, 14, 51, .04);
    box-shadow: 0 0 2px rgba(2, 14, 51, .12), 0 2px 4px rgba(2, 14, 51, .08), 0 4px 8px rgba(2, 14, 51, .06), 0 8px 16px rgba(2, 14, 51, .04);
cursor: pointer;
display: inline-block;
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1;
max-width: 100%;
overflow: hidden;
padding: 12px 16px;
position: relative;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
-webkit-transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
vertical-align: top;
white-space: nowrap;
}
.next.page-numbers:hover, .prev.page-numbers:hover {
background-color: var(--ast-global-color-8);
border: 1px solid var(--ast-global-color-8);
}