@import url('font.css');

/* =========================================
   ISAB — Index page (filtres + curseur)
   ========================================= */
section#headerContainer{
  font-size: 0.8em;
}


.site-header section{
  display: flex;
  justify-content: flex-start;
  grid-row: 2;
  grid-column: span 3;
}

.isab-index { 
padding: 0 var(--gap);
}

.isab-filters {
  display: flex;
  cursor: pointer;
  flex-wrap: wrap;
}


.isab-filter header{
  padding:4px 8px;
  background: var(--second);
  border-radius: 100em;
  color: rgba(0,0,0,0.5);
}

.isab-filter__body{

}


.isab-filter:hover {
}

.isab-filter:hover .isab-filter__body{
  display: flex;
  justify-self: center;
}

.isab-filter__body{
   display: flex;
   flex-wrap: wrap;
}
.isab-filters{
  display: flex;
  gap: 0.5em;
}

.isab-filter{
  display: flex;
}

.isab-filter__list {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.isab-project__meta{
  display: flex;
  flex-wrap: wrap;
}

.isab-cursor-preview {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  display: none;
}

.isab-cursor-preview.is-open { display: block; }

.isab-cursor-preview img {
  max-width: 260px;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.isab-cursor-preview video{
  max-width: 260px;
  max-height: 180px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  object-fit: cover;
  display:block;
}

.isab-project__header h2 {
    font-size: 5vw;
    line-height: 0.9em;
    margin-left: -0.08em;
    padding: 0 0 0.1em;
      transition: text-shadow 0.2s ease-in-out;
}

.isab-index__list ul li:hover .isab-project__header h2{
  transition: text-shadow 0.2s ease-in-out;
  text-shadow: 0 0 10px yellow;
}

.isab-index__list ul {
  display: grid;
  gap: var(--gap);
}

.isab-index__list ul li{
	border-bottom: 1px solid;
	display: grid;
}


.isab-selected.has-selection{
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.isab-selected__list{
  display: none;
}



#goFilter{
  display: none;
}

#goFilter.open{
  display: block;
}


/* Responsive */
@media (max-width: 640px) {


  .isab-selected__list{
    display: flex; gap: 1em; 
  }
  .isab-project__header h2 { font-size: 8vw; margin-left: 0;}
  .isab-filter__body{ position:relative; }
  .isab-filter:hover .isab-filter__body{ justify-self:inherit; }
}