/**
 * mod_menutiles 2.x – Stylesheet (Joomla 5.4 / 6)
 * Instellingen komen als CSS custom properties en modifier-klassen uit de module;
 * er is geen inline <style>-blok meer.
 */

/* ===========================
   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;
    width:           100%;
    box-sizing:      border-box;
}

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

/* Tekstpositie per tegel via modifier-klassen */
.mt-tile__body {
    padding:        1.25rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.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 --mt-icon-width/-height */
.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:           var(--mt-icon-width, 80px);
    height:          var(--mt-icon-height, 80px);
    max-width:       100%;
    object-fit:      contain;
    object-position: var(--mt-img-position, center center);
    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);
}

/* ===========================
   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
   Alle varianten renderen als responsive grid (zoals in 1.x):
   1 kolom < 576px, max. 2 kolommen < 992px, daarboven het ingestelde aantal.
   "Masonry" voegt via JavaScript rij-spanning toe.
   =========================== */
.mod-menutiles {
    display:               grid;
    gap:                   var(--mt-gap);
    grid-template-columns: 1fr;
    align-items:           stretch;
    width:                 100%;
}

@media (min-width: 576px) {
    .mod-menutiles { grid-template-columns: repeat(var(--mt-cols-tablet, 2), 1fr); }
}

@media (min-width: 992px) {
    .mod-menutiles { grid-template-columns: repeat(var(--mt-cols, 3), 1fr); }
}

.mod-menutiles .mt-tile {
    min-width:   0;
    align-self:  stretch;
}

.mod-menutiles--masonry .mt-tile {
    margin-bottom: var(--mt-gap);
}

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

/* ===========================
   TEKSTPOSITIE PER TEGEL
   =========================== */
.mt-tile__body--align-left   { text-align: left;   align-items: flex-start; }
.mt-tile__body--align-center { text-align: center; align-items: center; }
.mt-tile__body--align-right  { text-align: right;  align-items: flex-end; }
.mt-tile__body--valign-start  { justify-content: start; }
.mt-tile__body--valign-center { justify-content: center; }
.mt-tile__body--valign-end    { justify-content: end; }

/* ===========================
   OPTIONELE MATEN (alleen actief als ingevuld)
   =========================== */
.mod-menutiles--min-height .mt-tile     { min-height: var(--mt-tile-min-height) !important; }
.mod-menutiles--max-width .mt-tile      { max-width: var(--mt-tile-max-width) !important; margin-inline: auto; }
.mod-menutiles--img-padding .mt-tile__image { padding: var(--mt-img-padding) !important; box-sizing: border-box; }
.mod-menutiles--title-size .mt-tile__title    { font-size: var(--mt-title-size) !important; }
.mod-menutiles--title-padding .mt-tile__title { padding: var(--mt-title-padding) !important; }
.mod-menutiles--title-margin .mt-tile__title  { margin: var(--mt-title-margin) !important; }

/* ===========================
   HOVER-LINT (als de titel verborgen is)
   =========================== */
.mod-menutiles--ribbon .mt-tile__ribbon {
    position:       absolute;
    left:           0;
    right:          0;
    padding:        .5rem .75rem;
    background:     var(--mt-ribbon-bg, rgba(0, 0, 0, .75));
    color:          #fff;
    font-size:      var(--mt-ribbon-size, .9rem);
    font-weight:    600;
    text-align:     center;
    white-space:    normal;
    word-break:     break-word;
    pointer-events: none;
    transition:     transform .25s ease;
}

.mod-menutiles--ribbon-bottom .mt-tile__ribbon { bottom: 0; transform: translateY(100%); }
.mod-menutiles--ribbon-top .mt-tile__ribbon    { top: 0;    transform: translateY(-100%); }

.mod-menutiles--ribbon .mt-tile:hover .mt-tile__ribbon,
.mod-menutiles--ribbon .mt-tile:focus-visible .mt-tile__ribbon,
.mod-menutiles--ribbon .mt-tile--touch-active .mt-tile__ribbon {
    transform: translateY(0);
}

/* ===========================
   KLIK-EFFECT (ripple)
   =========================== */
.mt-ripple {
    position:       absolute;
    width:          100px;
    height:         100px;
    border-radius:  50%;
    background:     rgba(255, 255, 255, .4);
    pointer-events: none;
    transform:      scale(0);
    animation:      mt-ripple .5s linear;
}

@keyframes mt-ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ===========================
   VERBERG MODULE ONDER BREEKPUNT
   =========================== */
@media (max-width: 575px)  { .mod-menutiles--hide-below-sm { display: none !important; } }
@media (max-width: 767px)  { .mod-menutiles--hide-below-md { display: none !important; } }
@media (max-width: 991px)  { .mod-menutiles--hide-below-lg { display: none !important; } }
@media (max-width: 1199px) { .mod-menutiles--hide-below-xl { display: none !important; } }

/* ===========================
   MOBIEL KEUZEMENU (vervangt de tegels onder het breekpunt)
   =========================== */
.mt-mobile-dropdown {
    display: block;
    width:   100%;
}

.mt-mobile-dropdown__select {
    display:            block;
    box-sizing:         border-box;
    width:              100%;
    margin:             0;
    padding:            .5rem 2.5rem .5rem .75rem;
    font:               inherit;
    font-size:          1rem;
    line-height:        1.5;
    color:              var(--mt-dd-color, #212529);
    background-color:   var(--mt-dd-bg, #fff);
    border:             1px solid #ced4da;
    border-radius:      .375rem;
    -webkit-appearance: none;
    appearance:         none;
    cursor:             pointer;
}

@media (min-width: 576px)  { .mt-mobile-dropdown--hide-from-sm { display: none !important; } }
@media (min-width: 768px)  { .mt-mobile-dropdown--hide-from-md { display: none !important; } }
@media (min-width: 992px)  { .mt-mobile-dropdown--hide-from-lg { display: none !important; } }
@media (min-width: 1200px) { .mt-mobile-dropdown--hide-from-xl { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    .mt-tile,
    .mt-tile__icon,
    .mt-tile__ribbon,
    .mod-menutiles--hover-zoom .mt-tile__image img {
        transition: none;
    }

    .mt-ripple {
        display: none;
    }
}