/* Base comune: variabili + card/figure/caption/placeholder */
.catgrid {
    --catgrid-radius: 16px;
    --catgrid-text: #fff;
    --catgrid-figure-bg: #f4f4f4;

    --catgrid-shadow-blur: 18px;
    --catgrid-shadow-alpha: 0.50;
    --catgrid-shadow-hover-blur: 24px;
    --catgrid-shadow-hover-alpha: 0.90;

    --catgrid-hover-ty: -2px;
    --catgrid-hover-scale: 1.05;

    --catgrid-cap-pad-v: 10px;
    --catgrid-cap-pad-h: 12px;
    --catgrid-cap-grad-bot: 0.55;
    --catgrid-cap-grad-mid: 0.30;

    --catgrid-ph-light: #f1f1f1;
    --catgrid-ph-dark: #e9e9e9;
}

/* Card base */
.catgrid .catgrid-card {
    display: block;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Figure base */
.catgrid .catgrid-figure {
    position: relative;
    margin: 0;
    border-radius: var(--catgrid-radius);
    overflow: hidden;
    background: var(--catgrid-figure-bg);
    box-shadow: 5px 5px var(--catgrid-shadow-blur) rgba(0, 0, 0, var(--catgrid-shadow-alpha));
    transition: box-shadow 200ms ease, transform 200ms ease, filter 200ms ease;
}

.catgrid .catgrid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 250ms ease;
}

.catgrid .catgrid-img.is-loaded {
    opacity: 1;
}

/* Hover (solo se l’elemento è “cliccabile”: grid card o centrale carousel) */
.catgrid .catgrid-card:hover .catgrid-figure {
    box-shadow: 5px 5px var(--catgrid-shadow-hover-blur) rgba(0, 0, 0, var(--catgrid-shadow-hover-alpha));
    transform: translateY(var(--catgrid-hover-ty)) scale(var(--catgrid-hover-scale));
}

/* Caption base (poi grid mostra sempre, carousel solo su .is-active) */
.catgrid .catgrid-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--catgrid-cap-pad-v) var(--catgrid-cap-pad-h);
    background: linear-gradient(to top,
            rgba(0, 0, 0, var(--catgrid-cap-grad-bot)) 0%,
            rgba(0, 0, 0, var(--catgrid-cap-grad-mid)) 60%,
            rgba(0, 0, 0, 0) 100%);
    color: var(--catgrid-text);
    z-index: 2;
}

.catgrid .catgrid-caption>span {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    display: inline-block;
    line-height: 1.2;
    font-size: .95rem;
}

.catgrid .catgrid-count {
    font-weight: 400;
    opacity: .95;
    font-size: 1.2em;
}

/* Placeholder */
.catgrid .catgrid-figure--placeholder {
    background: repeating-linear-gradient(45deg,
            var(--catgrid-ph-light),
            var(--catgrid-ph-light) 10px,
            var(--catgrid-ph-dark) 10px,
            var(--catgrid-ph-dark) 20px);
}

.catgrid .catgrid-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    text-align: center;
}

.catgrid .catgrid-ph__inner {
    max-width: 90%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .85rem;
    line-height: 1.25;
    word-break: break-word;
}

/* Overlay caption: robusto contro CSS esterni */
.catgrid .catgrid-figure{
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.catgrid .catgrid-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.catgrid .catgrid-img{
  position: relative;
  z-index: 0;
}

.catgrid{
  width: 100%;
}

.catgrid--grid{
  margin-left: auto;
  margin-right: auto;
}