/**
 * mod_menutiles - Stylesheet
 * Ondersteunt: CSS Grid, Bootstrap cards, Flexbox, Masonry
 */

/* ===========================
   CSS CUSTOM PROPERTIES
   =========================== */
.mod-menutiles {
    --mt-accent:        #0d6efd;
    --mt-radius:        0.75rem;
    --mt-gap:           1.25rem;
    --mt-transition:    0.25s ease;
    --mt-shadow-sm:     0 2px 8px rgba(0,0,0,.08);
    --mt-shadow-md:     0 8px 24px rgba(0,0,0,.14);
    --mt-shadow-lg:     0 16px 40px rgba(0,0,0,.18);
    --mt-icon-size:     2rem;
    --mt-height-sm:     120px;
    --mt-height-md:     180px;
    --mt-height-lg:     260px;
    --mt-img-height:    160px;
    --mt-img-position:  center center;
}

/* ===========================
   BASE TILE STYLES
   =========================== */
.mt-tile {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    position:        relative;
    overflow:        hidden;
    border-radius:   var(--mt-radius);
    text-decoration: none;
    color:           var(--mt-tile-text, inherit);
    background:      var(--mt-tile-bg, #fff);
    transition:      transform var(--mt-transition),
                     box-shadow var(--mt-transition),
                     background var(--mt-transition);
    cursor:          pointer;
    outline-offset:  3px;
}

.mt-tile:focus-visible {
    outline: 3px solid var(--mt-accent);
}

/* Tekstpositie per tile via CSS variabelen */
.mt-tile__body {
    padding:         1.25rem;
    flex:            1;
    text-align:      var(--mt-text-align, left);
    display:         flex;
    flex-direction:  column;
    justify-content: var(--mt-text-valign, start);
}

.mt-tile__title {
    font-size:   1.05rem;
    font-weight: 600;
    margin:      0 0 0.4rem;
    color:       var(--mt-tile-text, #1a1a2e);
    line-height: 1.3;
}

.mt-tile__description {
    font-size:   0.85rem;
    color:       #6c757d;
    margin:      0;
    line-height: 1.5;
}

.mt-tile__icon {
    font-size:     var(--mt-icon-size);
    margin-bottom: 0.75rem;
    color:         var(--mt-accent);
    transition:    transform var(--mt-transition);
}

.mt-tile__image {
    width:      100%;
    overflow:   hidden;
    height:     var(--mt-img-height, 160px);
    max-height: var(--mt-img-height, 160px);
    flex-shrink: 0;
}

.mt-tile__image img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  var(--mt-img-position, center center);
    display:          block;
    /* geen transform transition — voorkomt ongewenst schuiven bij hover */
}

/* Icoon-modus: afbeelding als vrij zwevend icoon, formaat via inline style */
.mt-tile__image--icon {
    width:           auto;
    height:          auto;
    max-height:      none;
    overflow:        visible;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem 1rem 0;
}

.mt-tile__image--icon img {
    width:       auto;
    height:      auto;
    max-width:   100%;
    object-fit:  contain;
    display:     block;
}

/* ===========================
   KLEUR-ACCENTEN PER TILE
   =========================== */
.mt-tile--primary   { --mt-accent: #0d6efd; }
.mt-tile--success   { --mt-accent: #198754; }
.mt-tile--info      { --mt-accent: #0dcaf0; }
.mt-tile--warning   { --mt-accent: #ffc107; }
.mt-tile--danger    { --mt-accent: #dc3545; }
.mt-tile--secondary { --mt-accent: #6c757d; }

/* Kleurlijn bovenaan elke tile */
.mt-tile::before {
    content:    '';
    display:    block;
    height:     4px;
    background: var(--mt-accent);
    transition: height var(--mt-transition);
}

/* ===========================
   CARD STIJLEN
   =========================== */

/* Shadow (default) */
.mod-menutiles--card-shadow .mt-tile {
    box-shadow: var(--mt-shadow-sm);
}

/* Border */
.mod-menutiles--card-border .mt-tile {
    border:     2px solid #dee2e6;
    box-shadow: none;
}
.mod-menutiles--card-border .mt-tile::before {
    display: none;
}
.mod-menutiles--card-border .mt-tile {
    border-top: 4px solid var(--mt-accent);
}

/* Flat */
.mod-menutiles--card-flat .mt-tile {
    box-shadow: none;
    border:     1px solid #f0f0f0;
    background: #fafafa;
}

/* Gradient */
.mod-menutiles--card-gradient .mt-tile {
    background: linear-gradient(135deg, #fff 60%, color-mix(in srgb, var(--mt-accent) 8%, white));
    box-shadow: var(--mt-shadow-sm);
}

/* ===========================
   HOOGTE-VARIANTEN
   =========================== */
.mod-menutiles--height-sm .mt-tile { min-height: var(--mt-height-sm); }
.mod-menutiles--height-md .mt-tile { min-height: var(--mt-height-md); }
.mod-menutiles--height-lg .mt-tile { min-height: var(--mt-height-lg); }

/* ===========================
   HOVER-EFFECTEN
   =========================== */

/* Lift */
.mod-menutiles--hover-lift .mt-tile:hover,
.mod-menutiles--hover-lift .mt-tile:focus-visible {
    transform:  translateY(-6px);
    box-shadow: var(--mt-shadow-md);
}

/* Glow */
.mod-menutiles--hover-glow .mt-tile:hover,
.mod-menutiles--hover-glow .mt-tile:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-accent) 30%, transparent),
                var(--mt-shadow-md);
}

/* Zoom (afbeelding inzoomen, geen translateX) */
.mod-menutiles--hover-zoom .mt-tile:hover .mt-tile__image img,
.mod-menutiles--hover-zoom .mt-tile:focus-visible .mt-tile__image img {
    transform: scale(1.08);
}
/* Zoom img heeft wél een transition nodig, maar alleen voor scale */
.mod-menutiles--hover-zoom .mt-tile__image img {
    transition: transform var(--mt-transition);
}

/* Icoon: alleen pulse/scale bij hover, geen horizontaal schuiven */
.mt-tile:hover .mt-tile__icon,
.mt-tile:focus-visible .mt-tile__icon {
    transform: scale(1.15);
}

/* Kleurlijn groter bij hover */
.mt-tile:hover::before,
.mt-tile:focus-visible::before {
    height: 6px;
}

/* ===========================
   ACTIEF MENU-ITEM
   =========================== */
.mt-tile--active {
    background: color-mix(in srgb, var(--mt-accent) 8%, white);
}
.mt-tile--active::before {
    height: 6px;
}
.mt-tile--active .mt-tile__title {
    color: var(--mt-accent);
}

/* ===========================
   LAYOUT: CSS GRID
   =========================== */
.mod-menutiles--grid {
    display:               grid;
    grid-template-columns: repeat(var(--mt-cols, 3), 1fr);
    gap:                   var(--mt-gap);
}

.mod-menutiles--grid.mod-menutiles--cols-2 { --mt-cols: 2; }
.mod-menutiles--grid.mod-menutiles--cols-3 { --mt-cols: 3; }
.mod-menutiles--grid.mod-menutiles--cols-4 { --mt-cols: 4; }
.mod-menutiles--grid.mod-menutiles--cols-6 { --mt-cols: 6; }

/* ===========================
   LAYOUT: FLEXBOX
   =========================== */
.mod-menutiles--flex {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--mt-gap);
}

.mod-menutiles--flex .mt-tile {
    flex:      1 1 calc((100% - (var(--mt-cols, 3) - 1) * var(--mt-gap)) / var(--mt-cols, 3));
    min-width: 180px;
}

.mod-menutiles--flex.mod-menutiles--cols-2 { --mt-cols: 2; }
.mod-menutiles--flex.mod-menutiles--cols-3 { --mt-cols: 3; }
.mod-menutiles--flex.mod-menutiles--cols-4 { --mt-cols: 4; }
.mod-menutiles--flex.mod-menutiles--cols-6 { --mt-cols: 6; }

/* ===========================
   LAYOUT: MASONRY
   =========================== */
.mod-menutiles--masonry {
    columns:    3;
    column-gap: var(--mt-gap);
}

.mod-menutiles--masonry.mod-menutiles--cols-2 { columns: 2; }
.mod-menutiles--masonry.mod-menutiles--cols-3 { columns: 3; }
.mod-menutiles--masonry.mod-menutiles--cols-4 { columns: 4; }
.mod-menutiles--masonry.mod-menutiles--cols-6 { columns: 6; }

.mod-menutiles--masonry .mt-tile {
    break-inside:  avoid;
    margin-bottom: var(--mt-gap);
    display:       block;
}

.mod-menutiles--masonry .mt-tile__body {
    display: block;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 991px) {
    .mod-menutiles--grid,
    .mod-menutiles--flex {
        --mt-cols: 2 !important;
    }
    .mod-menutiles--masonry { columns: 2 !important; }
}

@media (max-width: 575px) {
    .mod-menutiles--grid    { grid-template-columns: 1fr; }
    .mod-menutiles--flex .mt-tile { flex: 1 1 100%; }
    .mod-menutiles--masonry { columns: 1 !important; }
}