@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;500;600;700&display=swap');

:root{
--km-dark:#3f455f;
--km-main:#4b526f;
--km-soft:#949bb7;
--km-bg1:#d8dceb;
--km-bg2:#c7ccdf;
}

*{
box-sizing:border-box;
}

html{
min-height:100%;
}

body{
margin:0;
min-height:100vh;
padding:34px 18px 50px;

font-family:'Jura',sans-serif;
color:var(--km-dark);

background:
linear-gradient(
rgba(62,65,71,.47),
rgba(62,65,71,.47)
),
url("https://api.krakkemat.be/media/algemeen/krakkemat-achtergrond.jpg")
center center / cover fixed no-repeat;

background-color:#3e4147;
}

.km-page{
width:100%;
max-width:1200px;
margin:0 auto;
}


/* =========================================
   HOOFDPAGINA
========================================= */

.km-changelog-page{
position:relative;
overflow:hidden;
width:100%;
margin:0 auto;
padding:48px 30px 54px;
border-radius:24px;
color:var(--km-dark);
background:
radial-gradient(
circle at 50% 0%,
rgba(255,255,255,.34),
transparent 38%
),
linear-gradient(
135deg,
var(--km-bg1),
var(--km-bg2)
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.42),
0 18px 40px rgba(63,69,95,.12);
}


/* =========================================
   LOGO
========================================= */

.km-changelog-logo-link{
display:flex;
justify-content:center;
width:max-content;
margin:0 auto 14px;
text-decoration:none;
}

.km-changelog-logo{
display:block;
width:105px;
height:105px;
object-fit:contain;
opacity:.92;
transition:
transform .18s ease,
opacity .18s ease;
}

.km-changelog-logo-link:hover .km-changelog-logo{
transform:translateY(-1px);
opacity:1;
}


/* =========================================
   TITEL
========================================= */

.km-changelog-title{
margin:0;
text-align:center;
font-size:clamp(28px,3.6vw,46px);
line-height:1.1;
letter-spacing:.08em;
font-weight:700;
color:var(--km-dark);
}

.km-changelog-sub{
max-width:680px;
margin:14px auto 0;
text-align:center;
font-size:16px;
line-height:1.55;
font-weight:500;
color:var(--km-main);
}

.km-changelog-divider{
width:180px;
height:1px;
margin:30px auto 34px;
background:
linear-gradient(
90deg,
transparent,
rgba(75,82,111,.28),
transparent
);
}


/* =========================================
   STATISTIEKEN
========================================= */

.km-changelog-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin:0 auto 42px;
}

.km-changelog-stat{
min-height:104px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:16px;
text-align:center;
border-radius:18px;
background:rgba(255,255,255,.24);
border:1px solid rgba(75,82,111,.14);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.45),
0 8px 18px rgba(63,69,95,.09);
}

.km-changelog-stat span{
font-size:13px;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--km-main);
}

.km-changelog-stat strong{
margin-top:8px;
font-size:28px;
line-height:1;
font-weight:700;
color:var(--km-dark);
}


/* =========================================
   LADEN
========================================= */

.km-changelog-loading{
max-width:920px;
margin:0 auto;
padding:30px;
text-align:center;
font-size:15px;
font-weight:600;
color:var(--km-main);
}


/* =========================================
   TIJDLIJN
========================================= */

.km-changelog-timeline{
position:relative;
max-width:920px;
margin:0 auto;
padding:4px 0;
}

.km-changelog-timeline::before{
content:"";
position:absolute;
left:24px;
top:0;
bottom:0;
width:2px;
border-radius:999px;
background:
linear-gradient(
180deg,
rgba(75,82,111,.10),
rgba(75,82,111,.34),
rgba(75,82,111,.10)
);
}


/* =========================================
   ENTRY
========================================= */

.km-changelog-entry{
position:relative;
display:grid;
grid-template-columns:50px 1fr;
gap:18px;
margin:0 0 20px;
}

.km-changelog-entry:last-child{
margin-bottom:0;
}


/* =========================================
   PUNT OP TIJDLIJN
========================================= */

.km-changelog-dot{
position:relative;
width:50px;
height:50px;
}

.km-changelog-dot::before{
content:"";
position:absolute;
left:14px;
top:18px;
width:20px;
height:20px;
border-radius:50%;
background:var(--km-main);
border:4px solid rgba(255,255,255,.72);
box-shadow:
0 4px 10px rgba(63,69,95,.22),
inset 0 1px 1px rgba(255,255,255,.35);
}

.km-changelog-entry.current .km-changelog-dot::before{
background:var(--km-soft);
}


/* =========================================
   KAART
========================================= */

.km-changelog-card{
padding:22px 24px 24px;
border-radius:18px;
background:rgba(255,255,255,.22);
border:1px solid rgba(75,82,111,.14);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.45),
0 8px 18px rgba(63,69,95,.10);
}


/* =========================================
   VERSIE
========================================= */

.km-changelog-version{
display:inline-flex;
align-items:center;
justify-content:center;
margin:0 0 10px;
padding:7px 13px;
border-radius:999px;
font-size:13px;
font-weight:700;
letter-spacing:.06em;
color:#fff;
background:
linear-gradient(
135deg,
var(--km-main),
var(--km-dark)
);
box-shadow:
0 5px 12px rgba(63,69,95,.13);
}


/* =========================================
   TEKST
========================================= */

.km-changelog-card h2{
margin:0 0 8px;
font-size:22px;
line-height:1.2;
font-weight:700;
color:var(--km-dark);
}

.km-changelog-card h3{
margin:20px 0 8px;
font-size:17px;
line-height:1.35;
font-weight:700;
letter-spacing:.03em;
color:var(--km-dark);
}

.km-changelog-card h3:first-of-type{
margin-top:16px;
}

.km-changelog-card h4{
margin:12px 0 6px;
font-size:15px;
line-height:1.4;
font-weight:700;
color:var(--km-main);
}

.km-changelog-card p{
margin:0 0 12px;
font-size:15px;
line-height:1.55;
color:var(--km-main);
}

.km-changelog-date{
margin:0 0 12px !important;
font-size:14px !important;
font-weight:600;
color:var(--km-main);
}

.km-changelog-card ul{
margin:12px 0 0;
padding-left:20px;
}

.km-changelog-card h3 + ul{
margin-top:8px;
}

.km-changelog-card li{
margin:6px 0;
font-size:15px;
line-height:1.5;
color:var(--km-main);
}

.km-changelog-card hr{
border:0;
height:1px;
margin:18px 0;
background:
linear-gradient(
90deg,
transparent,
rgba(75,82,111,.28),
transparent
);
}


/* =========================================
   ONDERSTE MELDING
========================================= */

.km-changelog-note{
max-width:820px;
margin:36px auto 0;
padding:20px 24px;
border-radius:18px;
text-align:center;
font-size:16px;
line-height:1.55;
font-weight:600;
color:#f4f6fb;
background:
linear-gradient(
180deg,
rgba(75,82,111,.96),
rgba(63,69,95,.96)
);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.18),
0 10px 22px rgba(63,69,95,.14);
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width:900px){

.km-changelog-stats{
grid-template-columns:repeat(2,1fr);
}

}


/* =========================================
   MOBIEL
========================================= */

@media screen and (max-width:768px){

body{
padding:12px 10px 30px;
background-attachment:scroll;
}

.km-changelog-page{
padding:34px 18px 40px;
border-radius:20px;
}

.km-changelog-logo{
width:82px;
height:82px;
}

.km-changelog-title{
font-size:30px;
letter-spacing:.055em;
}

.km-changelog-sub{
font-size:15px;
}

.km-changelog-divider{
margin:24px auto 28px;
}

.km-changelog-stats{
grid-template-columns:1fr;
gap:12px;
margin-bottom:34px;
}

.km-changelog-stat{
min-height:88px;
}

.km-changelog-stat strong{
font-size:25px;
}

.km-changelog-entry{
grid-template-columns:38px 1fr;
gap:12px;
}

.km-changelog-timeline::before{
left:18px;
}

.km-changelog-dot{
width:38px;
height:38px;
}

.km-changelog-dot::before{
left:8px;
top:14px;
width:18px;
height:18px;
}

.km-changelog-card{
padding:20px 18px 22px;
border-radius:16px;
}

.km-changelog-card h2{
font-size:20px;
}

.km-changelog-card h3{
font-size:16px;
}

.km-changelog-card li{
font-size:14px;
}

.km-changelog-note{
margin-top:28px;
padding:18px;
font-size:14px;
}

}


/* =========================================
   ZEER KLEIN SCHERM
========================================= */

@media screen and (max-width:420px){

.km-changelog-page{
padding-left:14px;
padding-right:14px;
}

.km-changelog-entry{
grid-template-columns:30px 1fr;
gap:8px;
}

.km-changelog-timeline::before{
left:14px;
}

.km-changelog-dot{
width:30px;
}

.km-changelog-dot::before{
left:5px;
width:16px;
height:16px;
}

.km-changelog-card{
padding:18px 15px 20px;
}

}