/* ===================================================================
   METIS Addons - Frontend Styles
   Shared styles for all METIS Divi modules
   =================================================================== */

/* --- Post Gallery Styles --- */
.mpg-gallery {
    width: 100%;
}

.mpg-grid {
    display: grid;
    grid-template-columns: repeat(var(--mpg-cols-desktop, 3), 1fr);
    gap: var(--mpg-gap-v, 20px) var(--mpg-gap-h, 20px);
}

@media (max-width: 980px) {
    .mpg-grid {
        grid-template-columns: repeat(var(--mpg-cols-tablet, 2), 1fr);
    }
}

@media (max-width: 767px) {
    .mpg-grid {
        grid-template-columns: repeat(var(--mpg-cols-mobile, 1), 1fr);
    }
}

.mpg-item {
    overflow: hidden;
}

.mpg-item-inner {
    position: relative;
    overflow: hidden;
    /* border-radius removed to allow control from module settings */
}

/* === IMAGE WRAPPER WITH ASPECT RATIO === */
.mpg-item-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
}

/* Force aspect ratio using both modern property and padding-bottom fallback */
.mpg-item-image-wrapper.mpg-has-aspect-ratio {
    aspect-ratio: var(--mpg-aspect-ratio) !important;
    min-height: 1px;
}

/* Always use padding-bottom trick as a reliable multiplier in all browsers */
.mpg-item-image-wrapper.mpg-has-aspect-ratio::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / var(--mpg-aspect-ratio));
}

/* Base children styles */
.mpg-item-image-wrapper a,
.mpg-item-image-wrapper .mpg-item-image {
    display: block;
    width: 100%;
    height: 100%;
}

/* The inner image container and link when aspect ratio is present */
.mpg-item-image-wrapper.mpg-has-aspect-ratio a,
.mpg-item-image-wrapper.mpg-has-aspect-ratio .mpg-item-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.mpg-item-image-wrapper.mpg-has-aspect-ratio a {
    z-index: 2;
}

/* Ensure overlay is positioned correctly on top of the image */
.mpg-item-image-wrapper.mpg-has-aspect-ratio .mpg-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    pointer-events: none;
}

/* Image inside the wrapper - Force it to fill everything */
.mpg-item-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.4s ease, filter 0.4s ease;
    display: block !important;
}

/* Hover Effects */
.mpg-hover-zoom .mpg-item:hover .mpg-item-image img {
    transform: scale(1.05);
}

.mpg-hover-grayscale .mpg-item-image img {
    filter: grayscale(100%);
}

.mpg-hover-grayscale .mpg-item:hover .mpg-item-image img {
    filter: grayscale(0%);
}

/* === OVERLAY STYLES === */
.mpg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    box-sizing: border-box;
    overflow: hidden;
}

.mpg-overlay a {
    pointer-events: auto;
}

/* Overlay background */
.mpg-overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--mpg-overlay-duration, 0.3s) ease var(--mpg-overlay-delay, 0s);
}

/* Always visible overlay */
.mpg-overlay.mpg-always-visible .mpg-overlay-bg {
    opacity: 1;
}

/* Hover visible overlay */
.mpg-overlay.mpg-hover-visible .mpg-overlay-bg {
    opacity: 0;
}

.mpg-item:hover .mpg-overlay.mpg-hover-visible .mpg-overlay-bg {
    opacity: 1;
}

/* Overlay content */
.mpg-overlay-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px 13px;
    opacity: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity var(--mpg-text-duration, 0.3s) ease var(--mpg-text-delay, 0s),
        transform var(--mpg-text-duration, 0.3s) ease var(--mpg-text-delay, 0s);
}

.mpg-overlay.mpg-always-visible .mpg-overlay-content {
    opacity: 1;
}

.mpg-item:hover .mpg-overlay.mpg-hover-visible .mpg-overlay-content {
    opacity: 1;
}

/* Overlay title */
.mpg-overlay .mpg-item-title {
    color: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.mpg-overlay .mpg-item-title a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
}

/* Overlay animations */
.mpg-overlay.mpg-overlay-fade .mpg-overlay-bg {
    opacity: 0;
    transition: opacity var(--mpg-overlay-duration, 0.3s) ease var(--mpg-overlay-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-overlay-fade .mpg-overlay-bg {
    opacity: 1;
}

/* Slide Up Overlay */
.mpg-overlay.mpg-overlay-slide-up .mpg-overlay-bg {
    transform: translateY(100%);
    opacity: 1 !important;
    transition: transform var(--mpg-overlay-duration, 0.4s) ease var(--mpg-overlay-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-overlay-slide-up .mpg-overlay-bg {
    transform: translateY(0);
}

/* Slide Down Overlay */
.mpg-overlay.mpg-overlay-slide-down .mpg-overlay-bg {
    transform: translateY(-100%);
    opacity: 1 !important;
    transition: transform var(--mpg-overlay-duration, 0.4s) ease var(--mpg-overlay-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-overlay-slide-down .mpg-overlay-bg {
    transform: translateY(0);
}

/* Slide Left Overlay */
.mpg-overlay.mpg-overlay-slide-left .mpg-overlay-bg {
    transform: translateX(100%);
    opacity: 1 !important;
    transition: transform var(--mpg-overlay-duration, 0.4s) ease var(--mpg-overlay-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-overlay-slide-left .mpg-overlay-bg {
    transform: translateX(0);
}

/* Slide Right Overlay */
.mpg-overlay.mpg-overlay-slide-right .mpg-overlay-bg {
    transform: translateX(-100%);
    opacity: 1 !important;
    transition: transform var(--mpg-overlay-duration, 0.4s) ease var(--mpg-overlay-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-overlay-slide-right .mpg-overlay-bg {
    transform: translateX(0);
}

/* --- TEXT ANIMATIONS --- */

/* Text Fade */
.mpg-overlay.mpg-text-fade .mpg-overlay-content {
    opacity: 0;
    transition: opacity var(--mpg-text-duration, 0.3s) ease var(--mpg-text-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-text-fade .mpg-overlay-content {
    opacity: 1;
}

/* Text Slide Up */
.mpg-overlay.mpg-text-slide-up .mpg-overlay-content {
    transform: translateY(30px);
    opacity: 0;
    transition: transform var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s),
        opacity var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-text-slide-up .mpg-overlay-content {
    transform: translateY(0);
    opacity: 1;
}

/* Text Slide Down */
.mpg-overlay.mpg-text-slide-down .mpg-overlay-content {
    transform: translateY(-30px);
    opacity: 0;
    transition: transform var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s),
        opacity var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-text-slide-down .mpg-overlay-content {
    transform: translateY(0);
    opacity: 1;
}

/* Text Slide Left */
.mpg-overlay.mpg-text-slide-left .mpg-overlay-content {
    transform: translateX(30px);
    opacity: 0;
    transition: transform var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s),
        opacity var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-text-slide-left .mpg-overlay-content {
    transform: translateX(0);
    opacity: 1;
}

/* Text Slide Right */
.mpg-overlay.mpg-text-slide-right .mpg-overlay-content {
    transform: translateX(-30px);
    opacity: 0;
    transition: transform var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s),
        opacity var(--mpg-text-duration, 0.4s) ease var(--mpg-text-delay, 0s);
}

.mpg-item:hover .mpg-overlay.mpg-text-slide-right .mpg-overlay-content {
    transform: translateX(0);
    opacity: 1;
}

/* Title below image */
.mpg-item-content .mpg-item-title {
    padding: 10px 0;
    font-weight: 600;
}

.mpg-no-image-placeholder {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    width: 100%;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.mpg-no-image-placeholder span {
    color: #bbb;
    font-size: 40px;
}

.mpg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
}

.mpg-filter-btn {
    padding: 8px 16px;
    border: none;
    background: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.mpg-filter-btn.active,
.mpg-filter-btn:hover {
    background: #009BBC;
    color: #fff;
}

/* --- ACF Gallery Styles --- */
.mag-gallery-container {
    display: grid;
    gap: var(--mag-gap-v, 15px) var(--mag-gap-h, 15px);
    grid-template-columns: repeat(var(--mag-col-d, 3), 1fr);
}

@media (max-width: 980px) {
    .mag-gallery-container {
        grid-template-columns: repeat(var(--mag-col-t, 2), 1fr);
    }
}

@media (max-width: 767px) {
    .mag-gallery-container {
        grid-template-columns: repeat(var(--mag-col-m, 1), 1fr);
    }
}

/* Masonry Layout Overrides */
.mag-gallery-container.mag-layout-masonry {
    display: block;
    column-count: var(--mag-col-d, 3);
    column-gap: var(--mag-gap-h, 15px);
}

.mag-gallery-container.mag-layout-masonry .mag-item {
    break-inside: avoid;
    margin-bottom: var(--mag-gap-v, 15px);
    display: inline-block;
    width: 100%;
}

@media (max-width: 980px) {
    .mag-gallery-container.mag-layout-masonry {
        column-count: var(--mag-col-t, 2);
    }
}

@media (max-width: 767px) {
    .mag-gallery-container.mag-layout-masonry {
        column-count: var(--mag-col-m, 1);
    }
}


.mag-item {
    position: relative;
    overflow: hidden;
    /* border-radius removed to allow control from module settings */
}

.mag-img-wrap {
    position: relative;
}

.mag-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.mag-hover-zoom .mag-item:hover .mag-img-wrap img {
    transform: scale(1.05);
}

.mag-item-overlay {
    position: absolute;
    inset: 0;
    background: var(--mag-overlay-color, rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mag-item:hover .mag-item-overlay {
    opacity: 1;
}

.mag-item-title {
    color: #fff;
    font-weight: 600;
    text-align: center;
}

/* --- Content Shifter Styles --- */
.mcs-container {
    width: 100%;
}

.mcs-switch-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.mcs-align-left .mcs-switch-wrapper {
    justify-content: flex-start;
}

.mcs-align-center .mcs-switch-wrapper {
    justify-content: center;
}

.mcs-align-right .mcs-switch-wrapper {
    justify-content: flex-end;
}

.mcs-switch-btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--mcs-inactive-bg, #e0e0e0);
    color: var(--mcs-inactive-text, #333);
    border-radius: 4px;
}

.mcs-switch-btn.active {
    background: var(--mcs-active-bg, #009BBC);
    color: var(--mcs-active-text, #fff);
}

.mcs-content-panel {
    display: none;
}

.mcs-content-panel.active {
    display: block;
}

/* --- Video to Image Styles --- */
.mvi-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.mvi-video {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

.mvi-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    display: block;
}

/* --- Organic Form Styles --- */
.mof-organic-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.mof-organic-shape {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    transition: border-radius 0.5s ease;
}

.mof-organic-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Shape Presets --- */
.mof-shape-blob-1 .mof-organic-shape {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.mof-shape-blob-2 .mof-organic-shape {
    border-radius: 40% 60% 70% 30% / 30% 70% 40% 60%;
}

.mof-shape-egg .mof-organic-shape {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.mof-shape-rounded-square .mof-organic-shape {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* --- Animation Types --- */
.mof-anim-morph .mof-organic-shape {
    animation: mofMorph 10s ease-in-out infinite;
}

.mof-anim-wobble .mof-organic-shape {
    animation: mofWobble 10s ease-in-out infinite;
}

.mof-anim-floating .mof-organic-shape {
    animation: mofFloating 6s ease-in-out infinite;
}

.mof-anim-rotate .mof-organic-shape {
    animation: mofRotate 20s linear infinite;
}

/* --- Dynamic Background Styles --- */
.et_pb_section.metis-db-active {
    background-image: none !important;
}

.metis-db-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Ensure section content stays on top of dynamic background layers */
.metis-db-active>div:not(.metis-db-layer) {
    position: relative;
    z-index: 1;
}

/* --- Keyframes --- */
@keyframes mofMorph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    50% {
        border-radius: 50% 60% 30% 60% / 40% 30% 70% 70%;
    }

    75% {
        border-radius: 40% 50% 60% 40% / 70% 40% 50% 60%;
    }
}

@keyframes mofWobble {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    33% {
        transform: rotate(2deg) scale(1.02);
    }

    66% {
        transform: rotate(-2deg) scale(0.98);
    }
}

@keyframes mofFloating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes mofRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- Video Player Styles --- */
.mvp-container {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.mvp-align-left {
    margin-right: auto;
    margin-left: 0;
}

.mvp-align-center {
    margin-left: auto;
    margin-right: auto;
}

.mvp-align-right {
    margin-left: auto;
    margin-right: 0;
}

.mvp-video {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Image Shuffle (Sorteo) Styles --- */
.mis-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 100%;
}

.mis-display {
    width: var(--mis-width, 300px);
    max-width: var(--mis-max-width, 100%);
    height: var(--mis-height, 300px);
    max-height: var(--mis-max-height, none);
    border-radius: var(--mis-radius, 8px);
    overflow: hidden;
    position: relative;
    background: transparent;
    transition: transform 0.4s ease;
    /* Ensure max-height is always respected over height */
    min-height: 0;
}

.mis-display.mis-winner {
    animation: misReveal 0.6s ease forwards;
}

.mis-current-image {
    width: 100%;
    height: 100%;
    object-fit: var(--mis-object-fit, contain);
    display: block;
    transition: opacity 0.05s ease;
}

.mis-display.mis-shuffling .mis-current-image {
    transition: none;
}

/* Fade-in transition applied by JS after preload */
.mis-container.mis-fade-ready {
    transition: opacity var(--mis-fade-duration, 0.8s) ease;
}

.mis-shuffle-btn {
    display: inline-block;
    padding: 12px 36px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #009bbc 0%, #007087 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 155, 188, 0.3);
    letter-spacing: 0.5px;
}

.mis-shuffle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 155, 188, 0.45);
}

.mis-shuffle-btn:active {
    transform: translateY(0);
}

.mis-shuffle-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@keyframes misReveal {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}