/* =============================================================================
   shared/tiles.css
   White tiles, 4 per row, under a left-aligned intro. Loaded only with the
   select_functionaliteiten and three_grid_layout blocks (.tiles_section).
   A tile with a link is clickable as a whole and shows an arrow next to its title.
============================================================================= */

/* Intro (subtitle, title, text) aligned left with the tiles */
.slider_section.tiles_section .short_intro_box {text-align:left;}
.slider_section.tiles_section .short_intro_box .wrap {margin:0;}
.slider_section.tiles_section .short_intro_box p {margin-left:0;margin-right:0;}
.slider_section.tiles_section .short_intro_box .block_title::after {margin-left:0;margin-right:0;}

.functionality_tiles {display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.functionality_tile {position:relative;display:flex;flex-direction:column;width:calc((100% - 72px) / 4);padding:26px 24px 24px;background:#fff;border:1px solid #e7e7e7;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.05);transition:box-shadow .3s ease,transform .3s ease;}
.functionality_tile:has(.functionality_tile_link):hover {box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-2px);}
.functionality_tile:has(.functionality_tile_link:focus-visible) {outline:2px solid var(--backgrondColorRed);outline-offset:3px;}
.functionality_tile_link, .functionality_tile_body {display:block;flex:1;color:inherit;text-decoration:none;}
.functionality_tile_link:focus-visible {outline:none;}
.functionality_tile_link::after {content:"";position:absolute;inset:0;z-index:0;border-radius:14px;}
.functionality_tile_title {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:17px;line-height:1.3;color:var(--textColor);transition:color .3s ease;}
.functionality_tile_arrow {display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-top:-3px;border-radius:50%;background:#FBE9E9;color:var(--backgrondColorRed);transition:background-color .25s ease,color .25s ease,transform .25s ease;}
.functionality_tile_arrow svg {display:block;}
.functionality_tile_link:hover .functionality_tile_title {color:var(--backgrondColorRed);}
.functionality_tile_link:hover .functionality_tile_arrow {background:var(--backgrondColorRed);color:#fff;transform:translateX(2px);}
.functionality_tile_text p {margin:0;font-size:14px;line-height:1.65;color:#5f5f5f;}
.functionality_tile_text p + p {margin-top:10px;}
.functionality_tile_video {position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:28px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1;color:var(--backgrondColorRed);}
.functionality_tile_video svg {display:block;flex:none;}
.functionality_tile_video .arrow {transition:transform .2s ease;}
.functionality_tile_video:hover .arrow {transform:translateX(3px);}

@media only screen and (max-width:1023px) {
    .functionality_tile {width:calc((100% - 24px) / 2);}
}

@media only screen and (max-width:600px) {
    .functionality_tiles {gap:16px;}
    .functionality_tile {width:100%;padding:22px 20px 20px;}
}