/* Scorpion Gallery — Diamonds template
   Visual style based on mod_Scorpion_DiamondGallery */

.ssg-tmpl-diamonds {
    --sdg-diamond-size: 200px;
    --sdg-gap:          32px;
    --sdg-hover-color:  #f68e13;
    --sdg-hover-rgb:    246, 142, 19;
    --sdg-max-width:    1200px;
}

/* Gallery flex container */
.ssg-tmpl-diamonds .sdg-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sdg-gap);
    padding: 2rem;
    max-width: var(--sdg-max-width);
    margin: 0 auto;
}

/* Diamond shape */
.sdg-diamond {
    width:      var(--sdg-diamond-size);
    height:     var(--sdg-diamond-size);
    transform:  rotate(45deg);
    overflow:   hidden;
    position:   relative;
    cursor:     pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.6s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.sdg-diamond::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border:        2px solid rgba(0, 0, 0, 0.08);
    z-index:       2;
    transition:    border-color 0.4s ease;
    pointer-events: none;
}

.sdg-diamond:hover {
    transform:  rotate(45deg) scale(1.1);
    box-shadow: 0 8px 40px rgba(var(--sdg-hover-rgb), 0.4);
    z-index:    10;
}

.sdg-diamond:hover::before {
    border-color: rgba(var(--sdg-hover-rgb), 0.6);
}

/* Inner link / span wrapper — fills the full diamond area */
.sdg-diamond a,
.sdg-diamond span.ssg-no-link {
    display:         block;
    width:           100%;
    height:          100%;
    position:        relative;
    overflow:        hidden;
    text-decoration: none;
}

/* Image — counter-rotated and scaled to fill */
.sdg-diamond img {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transform:  rotate(-45deg) scale(1.5);
    transition: transform 0.4s ease, filter 0.4s ease;
    filter:     brightness(0.85) saturate(0.9);
}

.sdg-diamond:hover img {
    transform: rotate(-45deg) scale(1.6);
    filter:    brightness(1) saturate(1.1);
}

/* Overlay — also counter-rotated to appear straight */
.sdg-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
    z-index:        1;
    transform:      rotate(-45deg) scale(1.5);
    opacity:        0;
    transition:     opacity 0.4s ease;
    display:        flex;
    align-items:    flex-end;
    justify-content: center;
    padding-bottom: 15%;
    pointer-events: none;
}

.sdg-diamond:hover .sdg-overlay {
    opacity: 1;
}

.sdg-overlay span {
    color:           #fff;
    font-size:       0.75rem;
    letter-spacing:  0.15em;
    text-transform:  uppercase;
    text-shadow:     0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Responsive */
@media (max-width: 900px) {
    .ssg-tmpl-diamonds {
        --sdg-diamond-size: 160px;
        --sdg-gap:          24px;
    }
}

@media (max-width: 600px) {
    .ssg-tmpl-diamonds {
        --sdg-diamond-size: 120px;
        --sdg-gap:          20px;
    }
    .ssg-tmpl-diamonds .sdg-gallery {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 400px) {
    .ssg-tmpl-diamonds {
        --sdg-diamond-size: 100px;
        --sdg-gap:          16px;
    }
}