/* css Document */
/**
 * This file is part of AKB - ARLENE MODULE
 * @package     AKB Arlene Photogallery
 * @version		3.0.1
 * @author		AKB srlcr - Andrea Bini
 * @copyright 	Copyright (C) 2024 Andrea Kozul Bini s.r.l.c.r.
 * @license     GNU/GPLv2 http://www.gnu.org/licenses/gpl-2.0.html 
 * @link        http://www.akbproject.com
 * Email:       info@akbproject.com
*/


.AKBarlene-grid {
    display: flex;
    flex-wrap: wrap;
}

.AKBarlene-cell {
    padding: 0px;
    box-sizing: border-box;
}

.AKBarlene-image {
    width: 100%;
    height: auto;
}

.AKBarlene_module_container {
    --akbarlene-overlay-bg: #336699;
    --akbarlene-overlay-text: #fff;
    --akbarlene-top-text: #000;
    --akbarlene-bottom-text: #000;
    --akbarlene-top-bg: #fff;
    --akbarlene-bottom-bg: #fff;
    --akbarlene-image-height: 300px;
}

.AKBarlene_module_container .AKBarlene-caption,
.AKBarlene_module_container .AKBarlene-caption-AKBlayoutstyle01,
.AKBarlene_module_container .AKBarlene-caption-AKBlayoutstyle02,
.AKBarlene_module_container .AKBarlene-cell-AKBlayoutstyle03 {
    background-color: var(--akbarlene-overlay-bg);
}

.AKBarlene_module_container .AKBarlene-caption,
.AKBarlene_module_container .AKBarlene-caption-AKBlayoutstyle01,
.AKBarlene_module_container .AKBarlene-caption-AKBlayoutstyle02,
.AKBarlene_module_container .AKBarlene-caption-AKBlayoutstyle03,
.AKBarlene_module_container .AKBarlene-caption-default-AKBlayoutstyle03,
.AKBarlene_module_container .AKBarlene-text_container_title h5,
.AKBarlene_module_container .AKBarlene-text_container_title-AKBlayoutstyle01 h5,
.AKBarlene_module_container .AKBarlene-text_container_title-AKBlayoutstyle02 h5,
.AKBarlene_module_container .AKBarlene-text_container_title-AKBlayoutstyle03 h5 {
    color: var(--akbarlene-overlay-text);
}

.AKBarlene_module_description_top,
.AKBarlene_module_description_bottom {
    padding: 8px;
}

.AKBarlene_module_description_top {
    color: var(--akbarlene-top-text);
    margin-bottom: 15px;
}

.AKBarlene_module_description_bottom {
    color: var(--akbarlene-bottom-text);
    margin-top: 15px;
}

.AKBarlene_module_description_top :where(h1, h2, h3, h4, h5, h6) {
    color: var(--akbarlene-top-text);
}

.AKBarlene_module_description_bottom :where(h1, h2, h3, h4, h5, h6) {
    color: var(--akbarlene-bottom-text);
}

.AKBarlene_module_description_top.AKBarlene-background-color {
    background-color: var(--akbarlene-top-bg);
}

.AKBarlene_module_description_bottom.AKBarlene-background-color {
    background-color: var(--akbarlene-bottom-bg);
}

.AKBarlene_module_description_top.AKBarlene-background-image {
    background-image: var(--akbarlene-top-image);
}

.AKBarlene_module_description_bottom.AKBarlene-background-image {
    background-image: var(--akbarlene-bottom-image);
}

.AKBarlene_module_description_top.AKBarlene-background-image,
.AKBarlene_module_description_bottom.AKBarlene-background-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.AKBarlene-equal-height .AKBarlene-image-container,
.AKBarlene-equal-height .AKBarlene-image-container-AKBlayoutstyle01,
.AKBarlene-equal-height .AKBarlene-image-container-AKBlayoutstyle02,
.AKBarlene-equal-height .AKBarlene-image-container-AKBlayoutstyle03 {
    height: var(--akbarlene-image-height);
}

.AKBarlene-equal-height .AKBarlene-image {
    height: 100%;
    object-fit: cover;
}

.AKBarlene-caption {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    width: 101%;
    height: 101%;
    transition: transform 0.3s ease-in-out;
    bottom: 0;
    justify-content: center;
    align-items: center;
}

.AKBarlene-caption > p {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    font-size: 0.8rem;
    opacity:1 !important;
}

.AKBarlene-image-container {
    display: flex;
    position: relative;
    overflow: hidden;
}

.AKBarlene-image-container:hover .AKBarlene-hover-layer {
    display: block;
}

.AKBarlene-image-container:hover .AKBarlene-caption {
    transform: translateX(-50%) translateY(0%);
}

.AKBarlene-popup-link:focus-visible .AKBarlene-image-container .AKBarlene-caption {
    transform: translateX(-50%) translateY(0%);
}

.AKBarlene-image-container:hover .AKBarlene-caption.AKBarlene-out {
    transform: translateX(-50%) translateY(-100%);
}


/* 
CSS per il layout 01 
*/

.AKBarlene-grid-AKBlayoutstyle01 {
    display: flex;
    flex-wrap: wrap;
    
}

.AKBarlene-image-container-AKBlayoutstyle01 {
    display: flex;
    position: relative;
    overflow: hidden;
}

.AKBarlene-cell-AKBlayoutstyle01 {
    padding: 0px;
    box-sizing: border-box;
}

.AKBarlene-hover-layer-AKBlayoutstyle01 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
    opacity: 0.8;
    height: auto;
    overflow: hidden;
}

.AKBarlene-caption-AKBlayoutstyle01 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: transparent;
    transition: transform 0.3s ease-in-out;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    transform: translateX(0%) translateY(100%); /* Entra dal basso */
    height: auto; /* Altezza automatica in base al contenuto */
}

/* Regola per far apparire il layer in hover */
.AKBarlene-image-container-AKBlayoutstyle01:hover .AKBarlene-hover-layer-AKBlayoutstyle01 {
    transform: translateY(0);
    height: auto;
    overflow: visible;
}

/* Regola per far apparire il caption in hover */
.AKBarlene-image-container-AKBlayoutstyle01:hover .AKBarlene-caption-AKBlayoutstyle01 {
    transform: translateX(0%) translateY(0); /* Entra dal basso */
}

.AKBarlene-popup-link:focus-visible .AKBarlene-image-container-AKBlayoutstyle01 .AKBarlene-caption-AKBlayoutstyle01 {
    transform: translateX(0%) translateY(0);
}

.AKBarlene-image-container-AKBlayoutstyle01 .AKBarlene-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out; /* Effetto di transizione per l'immagine */
}

.AKBarlene-image-container-AKBlayoutstyle01:hover .AKBarlene-image {
    transform: scale(1.1); /* rotate(5deg); /* Ingrandisce e ruota l'immagine in hover */
}

/* 
CSS per il layout 02 
*/

.AKBarlene-grid-AKBlayoutstyle02 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}

.AKBarlene-image-container-AKBlayoutstyle02 {
    display: flex;
    position: relative;
    overflow: hidden;
}

.AKBarlene-cell-AKBlayoutstyle02 {
    padding: 0px;
    box-sizing: border-box;
}

.AKBarlene-hover-layer-AKBlayoutstyle02 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 0.8;
    height: auto;
    overflow: hidden;
}

.AKBarlene-caption-AKBlayoutstyle02 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: transparent;
    transition: opacity 0.5s ease-in-out; /* Aggiunge una transizione fluida */
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 100%;
}

.AKBarlene-caption-AKBlayoutstyle02:hover {
    opacity: 0; 
}

.AKBarlene-image-container-AKBlayoutstyle02 .AKBarlene-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out; /* Effetto di transizione per l'immagine */
}

.AKBarlene-image-container-AKBlayoutstyle02:hover .AKBarlene-image {
    transform: scale(1.1); /* rotate(5deg); /* Ingrandisce e ruota l'immagine in hover */
}

.AKBarlene-popup-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* 
CSS per il layout 03 
*/

.AKBarlene-grid-AKBlayoutstyle03 {
    display: flex;
    flex-wrap: wrap;
}

.AKBarlene-image-container-AKBlayoutstyle03 {
    display: flex;
    position: relative;
    overflow: hidden;
    flex-flow: column;
    align-items: stretch;
}

.AKBarlene-cell-AKBlayoutstyle03 {
    padding: 0px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

a.AKBarlene-popup-link {
    text-decoration: none;
}

a.AKBarlene-popup-link {
    color: inherit;
    text-decoration: none;
}

.AKBarlene-caption-default-AKBlayoutstyle03 {
    width: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
}


.AKBarlene-caption-AKBlayoutstyle03 {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    display: flex;
    font-size: 18px;
    font-weight: 500;
  }
  
  .AKBarlene-caption-AKBlayoutstyle03 > div {
    width: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  


.AKBarlene-image-container-AKBlayoutstyle03 .AKBarlene-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.AKBarlene-image-container-AKBlayoutstyle03:hover .AKBarlene-image {
    transform: scale(1.05); /* rotate(5deg); /* Ingrandisce e ruota l'immagine in hover */
}

/********* selected image text *******/

.AKBarlene-text_container_title-AKBlayoutstyle01, .AKBarlene-text_container_title-AKBlayoutstyle02 {
    text-align: center;
}

.AKBarlene-text_container_desc, .AKBarlene-text_container_desc-AKBlayoutstyle01, .AKBarlene-text_container_desc-AKBlayoutstyle02, .AKBarlene-text_container_desc-AKBlayoutstyle03 {
    text-align: center;
    font-size: 0.9rem;
}

.AKBarlene-text_container_title-AKBlayoutstyle03, .AKBarlene-text_container_desc-AKBlayoutstyle03 {
    text-align: left;
    line-height: 1.3;
}


/* css gallery **/

.mfp-bg {
    opacity: 1 !important;
  }


.mfp-close {
    font-size: 44px !important;
  }

/*
.mfp-content {
    width: 100%;
}
*/
.mfp-title {
    text-align: center !important;
    padding-right: 1px !important;
    display: block;
}

.mfp-figure::after {
    box-shadow:none !important;
    background: none !important;
}

.mfp-counter {
    position: initial !important;
    text-align: center !important;
  }


/********* column ***********/

/***** 1fr *******/
.AKBarlene-grid-1fr-AKBdefault, .AKBarlene-grid-1fr-AKBlayoutstyle01, .AKBarlene-grid-1fr-AKBlayoutstyle02, .AKBarlene-grid-1fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 1 colonne con larghezza uguale */
}

.AKBarlene-grid-1fr-AKBdefault, .AKBarlene-grid-1fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 2fr *******/
.AKBarlene-grid-2fr-AKBdefault, .AKBarlene-grid-2fr-AKBlayoutstyle01, .AKBarlene-grid-2fr-AKBlayoutstyle02, .AKBarlene-grid-2fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonne con larghezza uguale */
}

.AKBarlene-grid-2fr-AKBdefault, .AKBarlene-grid-2fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 3fr *******/
.AKBarlene-grid-3fr-AKBdefault, .AKBarlene-grid-3fr-AKBlayoutstyle01, .AKBarlene-grid-3fr-AKBlayoutstyle02, .AKBarlene-grid-3fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne con larghezza uguale */
}

.AKBarlene-grid-3fr-AKBdefault, .AKBarlene-grid-3fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 4fr *******/
.AKBarlene-grid-4fr-AKBdefault, .AKBarlene-grid-4fr-AKBlayoutstyle01, .AKBarlene-grid-4fr-AKBlayoutstyle02, .AKBarlene-grid-4fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonne con larghezza uguale */
}

.AKBarlene-grid-4fr-AKBdefault, .AKBarlene-grid-4fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

/***** 6fr *******/
.AKBarlene-grid-6fr-AKBdefault, .AKBarlene-grid-6fr-AKBlayoutstyle01, .AKBarlene-grid-6fr-AKBlayoutstyle02, .AKBarlene-grid-6fr-AKBlayoutstyle03 {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colonne con larghezza uguale */
}

.AKBarlene-grid-6fr-AKBdefault, .AKBarlene-grid-6fr-AKBlayoutstyle03 {
    grid-gap: 15px; /* Spazio tra le colonne */
}

@media screen and (max-width: 969px) {
    .AKBarlene-grid-1fr-AKBdefault, 
    .AKBarlene-grid-1fr-AKBlayoutstyle01, 
    .AKBarlene-grid-1fr-AKBlayoutstyle02, 
    .AKBarlene-grid-1fr-AKBlayoutstyle03,
    .AKBarlene-grid-2fr-AKBdefault,
    .AKBarlene-grid-2fr-AKBlayoutstyle01, 
    .AKBarlene-grid-2fr-AKBlayoutstyle02, 
    .AKBarlene-grid-2fr-AKBlayoutstyle03,
    .AKBarlene-grid-3fr-AKBdefault,
    .AKBarlene-grid-3fr-AKBlayoutstyle01, 
    .AKBarlene-grid-3fr-AKBlayoutstyle02, 
    .AKBarlene-grid-3fr-AKBlayoutstyle03,
    .AKBarlene-grid-4fr-AKBdefault,
    .AKBarlene-grid-4fr-AKBlayoutstyle01, 
    .AKBarlene-grid-4fr-AKBlayoutstyle02, 
    .AKBarlene-grid-4fr-AKBlayoutstyle03,
    .AKBarlene-grid-6fr-AKBdefault,
    .AKBarlene-grid-6fr-AKBlayoutstyle01, 
    .AKBarlene-grid-6fr-AKBlayoutstyle02, 
    .AKBarlene-grid-6fr-AKBlayoutstyle03
    {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 1 colonna con larghezza uguale */
    }
}

/* Fixed height must size the photo itself in the caption-below layout. */
.AKBarlene-equal-height .AKBarlene-image-container-AKBlayoutstyle03 .AKBarlene-image { height:100%; min-height:0; object-fit:cover; flex:0 0 100%; }

/* Arrangement is independent from the caption effect. */
[data-arlene-arrangement] > [id] { min-width: 0; box-sizing: border-box; }
[data-arlene-arrangement] .AKBarlene-popup-link { display: flex; flex-direction: column; height: 100%; }
[data-arlene-arrangement] [class^="AKBarlene-caption"] { overflow-wrap: anywhere; }
[data-arlene-arrangement="mosaic"] [class^="AKBarlene-image-container"] {
    flex: 1 1 0; min-height: 80px; width: 100%;
}
[data-arlene-arrangement="mosaic"] .AKBarlene-image {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
[data-arlene-arrangement="mosaic"] [class*="AKBarlene-caption"][class$="AKBlayoutstyle03"] { flex-shrink: 0; }
[data-arlene-arrangement="justified"].arlene-justified-ready { display: flex; flex-wrap: wrap; align-items: stretch; }
[data-arlene-arrangement="justified"].arlene-justified-ready > [id] { flex-grow: 0; flex-shrink: 0; }
[data-arlene-arrangement="justified"].arlene-justified-ready [class^="AKBarlene-image-container"] { width: 100%; flex-shrink: 0; }
[data-arlene-arrangement="justified"].arlene-justified-ready .AKBarlene-image { width: 100%; height: 100%; object-fit: contain; min-height: 0; }

[data-arlene-arrangement="masonry"].arlene-masonry-ready { display: block; position: relative; }
[data-arlene-arrangement="masonry"].arlene-masonry-ready > [id] { position: absolute; top: 0; left: 0; }
[data-arlene-arrangement="masonry"] .AKBarlene-popup-link { height: auto; }
[data-arlene-arrangement="scroll"] {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 12px; margin: -12px; cursor: grab;
}
[data-arlene-arrangement="scroll"]::-webkit-scrollbar { display: none; }
[data-arlene-arrangement="scroll"] > [id] {
    flex: 0 0 calc((100% - (var(--arlene-columns) - 1) * var(--arlene-scroll-gap, 0px)) / var(--arlene-columns));
    scroll-snap-align: start; scroll-margin-inline-start: 12px;
}
[data-arlene-arrangement="scroll"] [class^="AKBarlene-image-container"] { flex-shrink: 0; }
[data-arlene-arrangement="scroll"].is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.arlene-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 20px 0 12px; }
.arlene-pagination[hidden] { display: none; }
.arlene-pagination button { display: grid; place-items: center; width: 26px; height: 30px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; }
.arlene-pagination button::before { content: ''; width: 12px; height: 12px; border-radius: 20px; background: currentColor; opacity: .35; transition: width .2s, opacity .2s; }
.arlene-pagination button.is-active { width: 48px; }
.arlene-pagination button.is-active::before { width: 44px; opacity: 1; }
.arlene-pagination button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .arlene-pagination button::before { transition: none; } }