/*
Theme Name: adiv_portfolio
Theme URI: https://demoswp.auladiv.com
Author: AulaDiv
Author URI: https://auladiv.com
Description: Wordpress FSE Theme for an animated portfolio. It contains hero patterns nd cards patterns for posts. You can choose two animated heros and two animated show posts. Every post has a url for any link: external or internal in your site.
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adiv_portfolio
Tags: 

.has-border-color,
.editor-styles-wrapper .has-border-color {
    border-color: var(--wp--preset--color--border) !important;
    color: inherit !important;
}


/***/

.has-border-color,
.editor-styles-wrapper .has-border-color {
    border-color: var(--wp--preset--color--border) !important;
    color: inherit !important;
}
.display_none{
    display: none !important;
}

/***/
/*Card texts*/
.wp-block-post .wp-block-buttons {
    margin: 0 auto !important;
    margin-top: auto !important;
}

.wp-block-post .wp-block-button {
    transition: background 0.3s ease;
}

.wp-block-post .wp-block-button:hover {
    color: black;
    background-color: var(--wp--preset--color--warning);
    box-shadow: 5px 6px 6px 0px #e1dad2;
    transform: translate(2px, -2px);
}
/* Animación de overlay*/
.anim_overlay_card {
    .ad_post_card .ad_post_body {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.7);
        width: 80%;
        height: 0;
        overflow: hidden;
        backdrop-filter: blur(2px) saturate(148%);
        opacity: 0;
        transition: opacity 0.3s ease, backdrop-filter 0.3s ease, height 0.3s ease 0.1s;
        z-index: 2;
    }

    .ad_post_card .ad_post_body .wp-block-post-title a {
        color: white
    }

    .wp-block-post:hover .ad_post_body {
        opacity: 1;
        height: 80%;
        border: 1px solid var(--wp--preset--color--border);
        color: white;
    }

    .wp-block-post .ad_post_img {
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    .wp-block-post:hover .ad_post_img {
        opacity: 0.5;
    }
}
/*Giro cards*/
.anim_rotate_card{
    .ad_card_wrapper {
        perspective: 800px;
        width: 100%;
    }

    .ad_post_card {
        position: relative;
        width: 100%;
        transition: transform 0.6s ease;
        transform-style: preserve-3d;
    }

    .ad_card_wrapper:hover .ad_post_card{
        transition-delay: 0.3s;
        transform: rotateY(180deg);
    }


    .ad_post_img {
        position: relative;
        backface-visibility: hidden;
        top: 0;
        left: 0;

    }
    .ad_post_body {
        position: absolute;
        backface-visibility: hidden;
        top: 50%;
        left: 50%;
        transform: rotateY(180deg) translate(50%, -50%);
        margin: 0 !important;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: black;
        width: 100%;
        height: 100%;
        overflow: hidden;
        opacity: 1;
    }
}

/*Hero area effects*/
.hero_card{
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: max-content;
    max-width: 100vw;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1
}

.hero_card.show{
  opacity : 1
}

.anim_letters_in{
    position: relative;
    overflow: hidden;
    opacity: 0;
}
.anim_letters_in:has(span) {
    opacity: 1;
}

.anim_letters_in >span{
    position: relative;
    display: inline-block;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}
.anim_letters_in .show{
    transform: translateY(0);
}

.anim_right_left{
    transform: translateX(130%);
    opacity:0;
    transition: transform 0.4s ease, opacity 0.1s ease;
}
.anim_right_left.show{
    transform: translateX(0);
    opacity:1;
    display: inline-block;
}

/* Contenedor principal */

.ad_hero_bg {
    position: relative;
    --difdelay: 0.5s;
    --delay: 0s;
    .panel-izq, .panel-centro, .panel-der {
        position: absolute !important;
        width: 33%;
        height: 100%;
        min-height: unset;
        top: 0;
        opacity:1;
        transition: opacity 1s ease;
        z-index:5;
    }

    .panel-izq {
        left: 0;
        transition-delay: calc( var(--delay) + var(--difdelay) * 1) ;
    }

    .panel-centro {
        left: 33%;
        transition-delay: calc( var(--delay) + var(--difdelay) * 0) ;
    }

    .panel-der {
        left: 66%;
        transition-delay: calc( var(--delay) + var(--difdelay) * 2) ;
    }

    &.hidebg :is(.panel-centro,.panel-izq, .panel-der) {
        opacity: 0;
    }

}

/*iconos para pie*/

.ad_social_links a::before {
    margin-right: 8px;
    display: inline-block;
    color: #ffffff;
}

/* Home */
.ad_social_links a[href*="auladiv.com"]::before {
    content: '\f015';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Contact */
.ad_social_links a[href*="contactar"]::before {
    content: '\f0e0';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Twitter/X  */
.ad_social_links a[href*="twitter.com"]::before,
.ad_social_links a[href*="x.com"]::before {
    content: '\f099';
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;  /* Los iconos de brands usan peso normal */
}

/* Facebook  */
.ad_social_links a[href*="facebook.com"]::before,
.ad_social_links a[href*="fb.com"]::before {
    content: '\f09a';
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;
}

/* Bluesky  */
.ad_social_links a[href*="bsky.app"]::before {
    content: '\e671';
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;
}

.ad_social_links a {
    text-decoration: none;
    color: var(--wp--preset--color--light);
}
.ad_social_links a:hover {
    color: #21f8f8;
    text-decoration: underline;
}


@media (max-width: 360px) {
    :root{
        --wp--preset--spacing--60: 1.2rem;
        --wp--preset--spacing--80: 1rem;
    }

    .ad_social_links a::before{
        margin-right: 4px;
    }
    .ad_hero_bg{
        min-height: 16rem !important;
    }
    .hero_card{
        width: 90% ;
        padding: 10px 0 !important;
    }
    h1 span{
        font-size: 1.8rem;
    }
    h2{
        font-size: 1.1rem
    }

    .ad_post_body{
        width: 90% !important
    }

    footer p{
        text-align: left !important;
        padding: 0.5rem 2rem !important;
    }

}

/*para edicion*/
.block-editor-block-list__block{
    &.hero_card{
        opacity: 1;
    }

    &.anim_letters_in{
        position: relative;
        opacity: 1;
    }
    &.anim_right_left{
        opacity:1;
        transform: translateX(0%);
    }

    /* Contenedor principal */

    &.ad_hero_bg {
        .panel-izq, .panel-centro, .panel-der {
            z-index: -1
        }


    }
}
.gallery-filter {
    position: relative;

    .wp-block-button a {
        transition: all 0.4s ease;
        position: relative;
        background-color: transparent !important;
        z-index: 2
    }

    .wp-block-button a.active {
        color: var(--wp--preset--color--white);
    }

    .slide-bg {
        position: absolute;
        top: 6px;
        left: 6px;
        height: calc(100% - 12px); /* Descuenta el padding del contenedor */
        background-color: var(--wp--preset--color--info) !important;
        border-radius: 10px 10px 0 0;
        z-index: 1;
        transition: transform 0.3s ease, width 0.3s ease;
    }
}


.wp-block-group .wp-block-button a{
    background-color: transparent;
}

.page-numbers{
    margin: 0.5rem 0.5rem !important;
    font-size: 1.25rem !important;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    font-size: 0;
    text-decoration: none
}

.wp-block-query-pagination-previous::before {
    content: '<';
    font-size: 1.5rem;
}

.wp-block-query-pagination-next::after {
    content: '>';
    font-size: 1.5rem;
}


.wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 6 !important; /* número de líneas visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
}