/* this is the custom CSS for the annual list of outputs, e.g. /pages/cedefop-outputs-2025


/files/styles/small/public/logo-stas-R.png


*/

/* icons for the tools */

td[class] {
	  width: 36px;
    height: 36px;
    top: 50%;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 50px;   /* height = 30px, width scaled proportionally */
    padding-left: 68px;           /* space so text does not overlap the icon */
}
td.stas { background-image: url("/files/styles/small/public/logo-stas-R.png"); } 

td.validation { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-validation-inventory-R.svg");} 
    
td.ovate { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-ovate-R.svg");}    
    
td.timeline { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-timeline-policy-developments-R.svg");}  
    
td.nqf { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-nqf-online-R.svg");}  
    
td.vet_policy { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-vet-policy-dashboard-R.svg"); } 
    
td.skills_intelligence { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-skills-intelligence-R.svg"); } 
    
td.skills_index { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-skills-index-R.svg");}
    
td.key_indicators { background-image: url("/themes/custom/cedefop_foundation/images/tool-logos/logo-vet-key-data-R.svg"); }
    
/* event images and text layout */
/* ===================================================== */
.listOfEvents .eventTile {
    position: relative;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;
    display: inline-block;
    /* width: 10.8rem; height: 7.2rem; */
    width: 14rem; height: 9.4rem;
    margin: 10px;
    background: white;
    border-radius: 20px;
}

/* Anchor fills the tile */
.listOfEvents .eventTile a {
    display: block;
    height: 100%;
    text-decoration: none;
}

/* IMAGE: taken out of document flow */
.listOfEvents .eventTile img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    margin: 2px;

    transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

/* Image "falls down" */
.listOfEvents .eventTile:hover img {
    transform: translate(-50%, calc(100% - 10px));
}

/* TEXT: always visible area */
.listOfEvents .eventTile div.textContent,
.listOfEvents .eventTile div.edate {
    position: relative;
    z-index: 2;
    display: block;
    padding: 4px;
}


.listOfEvents .eventTile div.textContent,
.listOfEvents .eventTile div.edate {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Reveal text only on hover */
.listOfEvents .eventTile:hover div.textContent,
.listOfEvents .eventTile:hover div.edate {
    opacity: 1;
}


.listOfEvents .eventTile a,
.listOfEvents .eventTile a:hover,
.listOfEvents .eventTile .textContent a:hover,
.listOfEvents .eventTile a:visited,
.listOfEvents .eventTile a span {
    text-decoration: none;
}

.listOfEvents .eventTile .textContent a:hover {
	background-color: #2F4798;
}

/* ---------- tools ------------------ */
.tblTools tr:first-child td{
  font-weight: 600;
  font-size: 18px;
  color: #1a2a44;
}

.tblTools td.tool {
  border-radius: 10px;
  padding: 10px 10px 10px 63px;
  vertical-align: middle;
  transition: all 0.2s ease;
  border: 1px solid #dde5ef;
}

.toolsArea { margin-top:1rem; }
.tblTools { width: 100%; border-collapse: separate; border-spacing: 17px 6px;  }

/* add horizontal scroll bar so that mobile devices can see all the table (with scrolling) */
.tblTools {  min-width:60rem;  }
div.toolsArea {  overflow-x: scroll;  } 

.body.group-main-content table.tblTools td { width:33%; vertical-align: middle; text-align:center; }
.tblTools tr:not(:first-child)  { background: #d2dce6;  }
.tblTools tr:not(:first-child) td { height: 4rem; }
.tblTools tr:first-child { background:#c9dbfd; font-weight:bold; }  
.tblTools td.emptyCell { background: #fbfaf8; }

/* ---------- pubs ------------------ */
.pubthumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 20px;
}

.pubthumbs img {width: 100px; margin:2px; border:1px solid gray; padding: 1px;}
.pubthumbs img:hover {
    transform:  scale(1.2) rotate(4deg) translateY(-10px);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1000;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---------- QR code ------------------- */
.QRcode { float:right; margin-left:1rem;  margin-right:1rem;  }