Theme Name: Obistyle official theme V32.12
 Author: Obistyle
 Description: My theme
 Version: 32.12
*/

/* FONTS & RESETS ============================================================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Ubuntu:wght@300;400;500;700&display=swap');

* { 
 margin:0;
 padding:0;
 box-sizing:border-box;
}

html, body {
 background:#E5E7E9;
 font-family:"Ubuntu", sans-serif;
 font-size:13pt;
 font-weight:400;
 color:#111;
 display:flex;
 justify-content:center;
}

/* HEADER */
.site-header {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:60px;
 background:#ffffff;
 border-bottom:1px solid #eaeaea;
 z-index:1000;
}

.header-container {
 display:flex;
 justify-content:space-between;
 align-items:center;
 height:100%;
 padding:0 20px;
}

.header-left, .header-middle, .header-right {
 flex:1;
 display:flex;
 align-items:center;
}

.header-middle { justify-content:center; }
.header-right { justify-content:flex-end; }

.nav-menu {
 list-style:none;
 display:flex;
 gap:10px;
 margin:0;
 padding:0;
}

.nav-menu button {
 background:none;
 border:none;
 cursor:pointer;
 font-weight:500;
}

/* The Container */
.card-grid {
 display:grid;
 gap:15px;
 padding:5px;
 margin:60px 0 0 0;
 grid-template-columns:repeat( auto-fill, minmax(200px, 1fr) );
}

.card {
 background:#fff;
 aspect-ratio:1 / 1; /* altijd vierkant */
 display:flex;
 flex-direction:column;
 padding:10px;
 box-sizing:border-box;
}

.card-media {
 flex:1; /* vult alle ruimte bovenin */
 overflow:hidden;
}

.card-media img {
 width:100%;
 height:100%;
 object-fit:cover; /* crop + centreren */
}

.card-text {
 margin-top:10px;
 flex-shrink:0;
}

.read-more {
 float:right;
 text-decoration:underline;
 font-size:0.9em;
}


/* Single */
.single-content {
 margin-top:60px; /* offset fixed header */
 display:flex;
 justify-content:center;
 padding:20px;
}

.post-single {
 width:calc(2 * 200px + 20px); /* 2 kaarten breed + gap */
 max-width:800px; /* optioneel, voorkomt te brede layout */
 background:#fff;
 padding:20px;
 box-sizing:border-box;
}

.single-media {
 width:100%;
 overflow:hidden;
 margin-bottom:20px;
}

.single-media img {
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.single-text {
  line-height:1.5;
}

/* Kaarten */
.card-text-only, 
.card-image-only, 
.card-image-text, 
.card-gallery, 
.card-video-only, 
.card-video-text {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
}

.card-media {
  flex:1;
  overflow:hidden;
}

.card-media img, 
.card-media video, 
.card-media iframe {
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-text {
  margin-top:10px;
  flex-shrink:0;
}

.read-more {
  float:right;
  text-decoration:underline;
  font-size:0.9em;
}

/* Grid container */
.card-grid {
  display:grid;
  gap:10px; /* ruimte tussen kaarten */
  padding:10px;
  margin-top:60px; /* offset voor fixed header */
  width:100%;
}

/* Desktop ≥1920px → 5 kolommen */
@media (min-width:1920px) {
  .card-grid {
    grid-template-columns:repeat(5, 1fr);
  }
}

/* 1024px – 1919px → 4 kolommen */
@media (min-width:1024px) and (max-width:1919px) {
  .card-grid {
    grid-template-columns:repeat(4, 1fr);
  }
}

/* 600px – 1023px → 3 kolommen */
@media (min-width:600px) and (max-width:1023px) {
  .card-grid {
    grid-template-columns:repeat(3, 1fr);
  }
}

/* <600px → 1 kolom */
@media (max-width:599px) {
  .card-grid {
    grid-template-columns:1fr;
  }
}

/* Kaarten */
.card {
  aspect-ratio:1 / 1; /* vierkant */
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  padding:10px;
  box-sizing:border-box;
}

/* KLEUREN

#121212;
#444444;
#888888;
#B0B0B0;
#E0E0E0;
#1E90FF;

*/