/*
Theme Name: Consollusso Child
Theme URI: http://www.favethemes.com/
Author: Nikos
Author URI: http://www.favethemes.com/
Description: Consollusso Child is a customisation of the premium WordPress theme Houzez v. 4.2.7 for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. 
Version: 1.1
Tags: What Consollusso Say, Property Features, Property Image Gallery, Agent Contact Information, homepage heatured properties and small bug fixes
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/

@import url("../houzez/style.css");

/* Your CSS code goes here
-------------------------------------- */

/* FEATURES AND WHAT CONSOLLUSSO SAY FIELDS */


/* Target the features list to fit in full page */
 .fw-property-features-left .block-content-wrap ul {
    display: grid !important;
    /* This line is the magic: it fits as many 150px columns as possible */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 40px 30px; /* 15px vertical gap, 10px horizontal gap */
    padding: 0 !important;
    list-style: none !important;
}

/* Force the left side to full width if no text in right sides */
.fw-property-features-wrap.no-remark .d-flex .fw-property-features-left {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Force the side-by-side blocks to be 50/50 when there is text in right side*/
.fw-property-features-wrap.has-remark .d-flex .fw-property-features-left, 
.fw-property-features-wrap.has-remark .d-flex .fw-property-features-right {
    flex: 0 0 50% !important; /* Ensures equal width distribution */
    max-width: 50% !important; /* Prevents overflow */
    box-sizing: border-box; /* Ensures padding/borders are included in the 50% width */
}

/* Responsive adjustment for mobile screens, forcing them to stack vertically */
@media (max-width: 768px) {
    /* 1. Tell the parent container to allow items to wrap */
    .fw-property-features-wrap.has-remark .d-flex {
        flex-wrap: wrap !important;
    }

    /* 2. Set children to full width so they stack vertically */
    .fw-property-features-wrap.has-remark .d-flex .fw-property-features-left, 
    .fw-property-features-wrap.has-remark .d-flex .fw-property-features-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* Ensure list items handle long text gracefully */
.fw-property-features-left .block-content-wrap ul li {
    font-size: 18px; /* Slightly smaller font to help fit 3 columns */
    display: flex;
    align-items: center;
    line-height: 1.2;
}

/* Fix for icons to ensure they don't shrink */
.fw-property-features-left .block-content-wrap ul li i,
.fw-property-features-left .block-content-wrap ul li img {
    flex-shrink: 0;
    margin-right: 8px;
}

/* Adjust size and style of font in text What Consollusso Say */
.fw-property-features-right .block-content-wrap p{
    font-size: 28px !important; /* Adjust this number to your preference */
    line-height: 1.6 !important; /* Improves readability for longer text */	
    font-style: italic !important; /* This makes the text italic */
    color: #555; /* Optional: ensures text color is sharp */
}

/*---------------------------------------------------------------------------------*/
/* IMAGE GALLERY */

/* Add a 2px gap between property gallery items */
#property-gallery-wrap .row {
    margin-right: -1px;
    margin-left: -1px;
}
#property-gallery-wrap .col-md-3 {
    padding: 1px; /* Creates 10px total gap between images */
}

/*---------------------------------------------------------------------------------*/

/* 1. Reset the Gallery Item to act as a proper container */
.gallery-grid-item.houzez-trigger-popup-slider-js {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
}

/* 2. Create the tint layer inside the link, in front of the image */
.gallery-grid-item.houzez-trigger-popup-slider-js::after {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Luxury Black Gradient - starts at bottom and fades out exactly half-way */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%) !important;
    
    opacity: 1 !important;
    transition: opacity 0.4s ease-in-out !important;
    z-index: 99 !important; /* Force it to the very front */
    pointer-events: none; /* Crucial: clicks go through to the image */
}

/* 3. Hide tint when hovering over the container */
.gallery-grid-item.houzez-trigger-popup-slider-js:hover::after {
    opacity: 0 !important;
}

/* 4. Ensure the image is visible behind the tint */
.gallery-grid-item.houzez-trigger-popup-slider-js img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    z-index: 1 !important;
}

/* 5. Keep the '20+' text sharp and properly layered */
.gallery-grid-item.more-images span {
    z-index: 100 !important; /* Higher than our new tint overlay */
    transition: transform 0.4s ease, opacity 0.4s ease;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Adds legibility even when the tint disappears */
}

/* 6. Optional: Slight zoom on the text when hovering */
.gallery-grid-item.more-images:hover span {
    transform: translate(-50%, -50%) scale(1.1);
}

/*---------------------------------------------------------------------------------*/
/* AGENT CONTACT */

/* Increase side padding for the entire block */
#property-contact-agent-wrap .block-wrap {
    padding-left: 130px;  /* Adjust these values to your liking */
    padding-right: 130px;
    padding-top: 100px;
    padding-bottom: 50px;
}

/* Ensure the form rows stay centered after padding */
#property-contact-agent-wrap .row {
    justify-content: left;
}

/* Mobile responsiveness: reduce padding on small screens so it doesn't look too thin */
@media (max-width: 768px) {
    #property-contact-agent-wrap .block-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/*---------------------------------------------------------------------------------*/

/* Center only the main section title */
#property-contact-agent-wrap .block-title-wrap h2 {
    text-align: center !important;
    width: 100%;
    margin-bottom: 20px;
}

/* Ensure the sub-title 'Enquire About This Property' stays left-aligned */
#property-contact-agent-wrap .block-content-wrap h3 {
    text-align: left !important;
    margin-top: 20px;
}

/* Force the specific Bootstrap flex container to stack vertically */
#property-contact-agent-wrap .d-flex.align-items-center.gap-3 {
    flex-direction: column !important;
    text-align: center !important;
}

/* Center the list items inside the info block */
#property-contact-agent-wrap .agent-information {
    align-items: center !important; /* Centers the name and phone lines */
    padding: 0 !important;
}

/* Ensure the phone/skype wrapper also centers its contents */
.agent-phone-wrap.d-flex {
    justify-content: center !important;
}

/* Remove the right margin on the image to keep it perfectly centered */
.agent-image {
    margin: 0 auto !important;
}

/*---------------------------------------------------------------------------------*/

/* Shrink the button to fit the text size */
.houzez_agent_property_form {
    display: inline-block !important; /* Forces the button to only take up necessary space */
    width: auto !important;           /* Overrides any full-width settings */
    padding: 5px 30px;                /* Adjust horizontal padding for 'breathability' */
    margin-left: 0 !important;        /* Pulls it to the left */
    margin-right: auto !important;

}

/* Ensure the container doesn't force it to stretch */
.col-sm-12.col-xs-12 {
    text-align: left !important;      /* Centers the inline-block button */
}

/*---------------------------------------------------------------------------------*/

/* MOBILE OPTIMIZATIONS (Devices < 768px) */
@media (max-width: 768px) {
    /* 1. Reduce padding so the form has room to breathe */
    #property-contact-agent-wrap .block-wrap {
        padding: 30px 20px !important; /* Top/Bottom 30px, Sides 20px */
    }

    /* 2. Increase font size for inputs to prevent iOS auto-zoom */
    #property-contact-agent-wrap .form-control,
    #property-contact-agent-wrap select,
    #property-contact-agent-wrap textarea {
        font-size: 16px !important; 
        height: auto !important;
        padding: 12px !important;
    }

    /* 3. Make the Agent Profile photo slightly smaller for mobile */
    #property-contact-agent-wrap .agent-image img {
        width: 100px !important;
        height: 100px !important;
    }

    /* 4. Ensure buttons are easy to tap (Apple recommends 44px height) */
    .houzez_agent_property_form,
    .btn-primary.btn-slim {
        width: 100% !important; /* Full width buttons are easier for thumbs */
        padding: 15px !important;
        font-size: 16px !important;
        margin-top: 10px !important;
    }

    /* 5. Center-align the section headers for a balanced look */
    #property-contact-agent-wrap .block-title-wrap h2,
    #property-contact-agent-wrap .block-title-wrap h3 {
        text-align: center !important;
        font-size: 22px !important;
    }
}

/*---------------------------------------------------------------------------------*/