body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#f7f5f2;
  color:#111;
}



/* HEADER */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:22px 34px;
  background:white;
  border-bottom:1px solid #e2e2e2;
}

.title h1{
  margin:0;
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.5px;
}

.title p{
  margin-top:4px;
  font-size:12px;
  color:#777;
}

.menu{
  display:flex;
  gap:20px;
  font-size:13px;
  color:#666;
}


/* MAIN */

.hero-europeana{
  padding:34px;
}

.europeana-title small{
  font-size:11px;
  color:#888;
  letter-spacing:1px;
}

.europeana-title h2{
  margin-top:8px;
  margin-bottom:28px;
  font-size:42px;
  font-weight:500;
  letter-spacing:-1px;
}



/* SEARCH */

.search-container{
  display:flex;
  gap:10px;
  margin-bottom:24px;
}

.search-container input{
  flex:1;
  height:52px;
  border:1px solid #d8d8d8;
  background:white;
  padding:0 18px;
  font-size:15px;
}

.search-container button{
  border:none;
  background:#111;
  color:white;
  padding:0 22px;
  font-size:14px;
  cursor:pointer;
}



/* FILTERS */

.filter-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:34px;
}

.filter-row span{
  border:1px solid #d9d9d9;
  padding:8px 12px;
  font-size:12px;
  background:white;
}



/* GRID */

.archive-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}



/* CARD */

.result-card{
  background:white;
  border:1px solid #e3e3e3;
  cursor:pointer;
  transition:0.2s ease;
}

.result-image{
  width:100%;
  height:190px;
  background-size:cover;
  background-position:center;
}

.result-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  
.result-image img.contain-image{
  object-fit:contain;
  padding:12px;

}
}

.result-content{
  padding:16px;
}

.result-content small{
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#888;
}

.result-content h4{
  margin-top:10px;
  margin-bottom:10px;
  font-size:20px;
  font-weight:500;
}

.result-content p{
  margin:0;
  color:#555;
  line-height:1.5;
  font-size:14px;
}



/* POPUPS */

.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.72);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:999;
  padding:30px;
}

.popup-window{
  width:100%;
  max-width:1200px;
  background:white;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
}

.popup-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
}

.popup-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.popup-content{
  padding:42px;
}

.popup-content small{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#777;
}

.popup-content h2{
  margin-top:10px;
  margin-bottom:26px;
  font-size:38px;
  font-weight:500;
  line-height:1.1;
}

.popup-meta{
  display:flex;
  gap:34px;
  margin-bottom:26px;
}

.popup-meta span{
  display:block;
  font-size:11px;
  color:#777;
  margin-bottom:4px;
}

.popup-meta strong{
  font-size:13px;
  font-weight:600;
}

.popup-content p{
  font-size:15px;
  line-height:1.75;
  color:#444;
  margin-bottom:20px;
}



/* CLOSE */

.close-popup{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border:none;
  background:#111;
  color:white;
  cursor:pointer;
  font-size:20px;
}

.conflict-layout{
  padding:34px;
}

.conflict-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:28px;
}

.case-sidebar{
  background:white;
  border:1px solid #e3e3e3;
  padding:20px;
}

.sidebar-title{
  font-size:12px;
  text-transform:uppercase;
  color:#777;
  margin-bottom:18px;
}

.case-item{
  padding:14px 0;
  border-bottom:1px solid #ececec;
}

.case-item strong{
  display:block;
  margin-bottom:4px;
}

.case-item p{
  margin:0;
  font-size:14px;
  color:#555;
}

.conflict-main{
  background:white;
  border:1px solid #e3e3e3;
  padding:28px;
}

.positions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:24px;
}

.position-card{
  border:1px solid #ececec;
  padding:18px;
  background:#fafafa;
}

.voice-role{
  font-size:11px;
  text-transform:uppercase;
  color:#777;
  margin-bottom:10px;
}
.section-title{
  margin-bottom:28px;
}

.section-title h3{
  margin:0;
  font-size:34px;
  font-weight:500;
  letter-spacing:-0.5px;
}

.section-title span{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:#777;
}


.result-image{
  width:100%;
  height:190px;
  background-color:#333738; /* change this color */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* FULLSCREEN IMAGE VIEW */
.image-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  cursor: zoom-out;
}

.image-fullscreen img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.site-footer{
  padding:40px 34px;
  text-align:center;
  font-size:12px;
  color:#777;
  background:#f7f5f2;
  border-top:1px solid #e2e2e2;
  margin-top:60px;
}

.site-footer a{
  color:#6e0f1f;
  text-decoration:none;
  border-bottom:1px solid #ccc;
  transition:0.2s ease;
}

.site-footer a:hover{
  color:#6e0f1f;
  border-bottom:1px solid #111;
}
/* MOBILE */

@media(max-width:900px){

  .topbar{
    flex-direction:column;
    gap:18px;
  }

  .popup-grid{
    grid-template-columns:1fr;
  }

  .popup-content{
    padding:28px;
  }

  /* TWO COLUMNS ON MOBILE */
  .archive-results-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  /* FIX CARD WIDTH */
  .result-card{
    min-width:0;
  }

  .result-content h4{
    font-size:16px;
  }

  .result-content p{
    font-size:12px;
    line-height:1.4;
  }

  /* FIX CASE FILE SECTION */
  .conflict-grid{
    grid-template-columns:1fr;
  }

  .case-sidebar{
    width:100%;
    box-sizing:border-box;
  }

  .conflict-main{
    width:100%;
    box-sizing:border-box;
  }

    .result-image{
    height:auto;
    aspect-ratio:1/1;
 }
    .filter-row{
    display:none;

  }
  
.contain-image{
  object-fit:contain !important;
  padding:12px;
}

}