.gibi-mora-card-image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Il placeholder è un logo: va mostrato intero, non ritagliato */
.gibi-mora-image-placeholder {
    object-fit: contain;
}

/* Titoli di lunghezza diversa: lo spazio in più va al titolo, così immagini e bottoni restano allineati sulla riga */
.gibi-mora-catalog-grid .el-item,
.gibi-mora-catalog-carousel .el-item,
.gibi-mora-references-grid .el-item {
    display: flex;
    flex-direction: column;
}

.gibi-mora-catalog-grid .gibi-mora-card-name,
.gibi-mora-catalog-carousel .gibi-mora-card-name,
.gibi-mora-references-grid .gibi-mora-card-name {
    flex-grow: 1;
}

.gibi-mora-card-name {
    text-align: center;
}

/*
 * Separatore tra le righe della griglia, come <hr class="uk-margin-medium">.
 * UIkit assegna uk-grid-margin agli elementi non in prima riga e uk-first-column a quelli
 * a inizio riga, ricalcolati a ogni breakpoint: funziona con 4, 2 o 1 colonna.
 */
.gibi-mora-catalog-grid.uk-grid-divider > .uk-grid-margin,
.gibi-mora-references-grid.uk-grid-divider > .uk-grid-margin {
    position: relative;
    margin-top: 80px;
}

.gibi-mora-catalog-grid > .uk-grid-margin::after,
.gibi-mora-references-grid > .uk-grid-margin::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    border-top: 1px solid #e5e5e5;
}

/* A inizio riga la linea parte dopo il gutter, allineata al contenuto */
.gibi-mora-catalog-grid > .uk-grid-margin.uk-first-column::after,
.gibi-mora-references-grid > .uk-grid-margin.uk-first-column::after {
    left: 30px;
}

/* Su una colonna uk-grid-divider disegna già una linea orizzontale: la sostituisce la nostra */
.gibi-mora-catalog-grid.uk-grid-stack > .uk-grid-margin::before,
.gibi-mora-references-grid.uk-grid-stack > .uk-grid-margin::before {
    display: none;
}

/* Separatore tra le sottocategorie del dettaglio, con la stessa spaziatura della griglia */
.gibi-mora-subcategory + .gibi-mora-subcategory {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e5e5e5;
}

.gibi-mora-back-link {
    display: inline-block;
    margin-bottom: 1rem;
    text-decoration: none;
}

/* uk-inline-clip è inline-block: a blocco, così l'immagine occupa tutta la colonna */
.gibi-mora-image-link {
    display: block;
}

.gibi-mora-image-thumb {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

.gibi-mora-image-thumb.gibi-mora-image-placeholder {
    cursor: auto;
}

/* Catalogo e Referenze (Simona) */

a.gibi-mora-image-link.uk-inline-clip.uk-transition-toggle.uk-link-toggle {width: 100%;}

h3.el-title.gibi-mora-card-name.uk-margin-top.uk-margin-remove-bottom {font-size:15px;text-transform:uppercase}

/* Card catalogo: effetto hover su immagine e titolo */
.gibi-mora-card-media .gibi-mora-card-image {
  transition: transform 0.4s ease;
  will-change: transform;
}
.gibi-mora-card-name {
  transition: color 0.2s ease;
}

.gibi-mora-card-link:hover .gibi-mora-card-image,
.gibi-mora-card-link:focus-visible .gibi-mora-card-image {
  transform: scale(1.08);
}
.gibi-mora-card-link:hover .gibi-mora-card-name,
.gibi-mora-card-link:focus-visible .gibi-mora-card-name {
  color: #65453a;
  text-decoration: underline;
}

.gibi-mora-card-media.uk-inline-clip {border-radius: 15px;}

/* Rispetta chi ha disattivato le animazioni nel sistema */
@media (prefers-reduced-motion: reduce) {
  .gibi-mora-card-media .gibi-mora-card-image,
  .gibi-mora-card-name {
    transition: none;
  }
  .gibi-mora-card-link:hover .gibi-mora-card-image,
  .gibi-mora-card-link:focus-visible .gibi-mora-card-image {
    transform: none;
  }
}