/**
 * Acuo Travel Agent - Result Grid Styles
 *
 * This file contains CSS rules for styling the travel package results grid.
 * It uses CSS custom properties (variables) to allow for easy customization
 * through the WordPress admin or Elementor interface.
 *
 * @package Acuo_Travel_Agent
 * @version 1.0.0
 */

/**
 * Package Title Styles
 *
 * Styling for package titles with customizable properties for
 * color, background, padding, margins, and border radius.
 */
.acuo-packages-grid .acuo-package-title {
    color: var(--title-color, inherit);
    background-color: var(--title-bg-color, transparent);
    padding: var(--title-padding, 0);
    margin: var(--title-margin, 15px 15px 10px 15px);
    border-radius: var(--title-border-radius, 0);
}

/**
 * Package Title Link Styles
 *
 * Ensures title links inherit the custom title color.
 */
.acuo-packages-grid .acuo-package-title a {
    color: var(--title-color, inherit);
}

/**
 * Package Excerpt Styles
 *
 * Styling for package excerpts with customizable properties for
 * color, background, padding, margins, and border radius.
 */
.acuo-packages-grid .acuo-package-excerpt {
    color: var(--excerpt-color, #666);
    background-color: var(--excerpt-bg-color, transparent);
    padding: var(--excerpt-padding, 0);
    margin: var(--excerpt-margin, 0 15px 15px 15px);
    border-radius: var(--excerpt-border-radius, 0);
}

/**
 * Package Link (Button) Styles
 *
 * Styling for package buttons with customizable properties for
 * colors, background, borders, padding, margins, and font properties.
 */
.acuo-packages-grid .acuo-package-link {
    color: var(--button-color, #fff);
    background-color: var(--button-bg, #0073aa);
    border: var(--button-border, none);
    border-radius: var(--button-border-radius, 4px);
    padding: var(--button-padding, 8px 12px);
    margin: var(--button-margin, 0 15px 15px 5px);
    font-size: var(--button-font-size, 14px);
    font-weight: var(--button-font-weight, 500);
    text-align: var(--button-text-align, center);
    transition: background-color 0.3s, color 0.3s;
}

/**
 * Package Link Hover State
 *
 * Hover styles for package buttons with customizable properties for
 * hover colors and background.
 */
.acuo-packages-grid .acuo-package-link:hover {
    color: var(--button-hover-color, #fff);
    background-color: var(--button-hover-bg, #005a87);
}

/**
 * Package Image Styles
 *
 * Styling for package images with customizable border radius
 * and overflow handling to ensure rounded corners work properly.
 */
.acuo-packages-grid .acuo-package-image {
    border-radius: var(--image-border-radius, 0);
    overflow: hidden;
}

.acuo-package-image img {
     height: 300px!important;
 }

/**
 * Elementor Compatibility - Title Styles
 *
 * Ensures title styles work properly within Elementor containers.
 */
.elementor-widget-container .acuo-packages-grid .acuo-package-title,
.elementor-section .acuo-packages-grid .acuo-package-title {
    color: var(--title-color, inherit);
    background-color: var(--title-bg-color, transparent);
}

/**
 * Elementor Compatibility - Excerpt Styles
 *
 * Ensures excerpt styles work properly within Elementor containers.
 */
.elementor-widget-container .acuo-packages-grid .acuo-package-excerpt,
.elementor-section .acuo-packages-grid .acuo-package-excerpt {
    color: var(--excerpt-color, #666);
    background-color: var(--excerpt-bg-color, transparent);
}

/**
 * Elementor Compatibility - Button Styles
 *
 * Ensures button styles work properly within Elementor containers.
 */
.elementor-widget-container .acuo-packages-grid .acuo-package-link,
.elementor-section .acuo-packages-grid .acuo-package-link {
    color: var(--button-color, #fff);
    background-color: var(--button-bg, #0073aa);
}

/**
 * Elementor Compatibility - Button Hover Styles
 *
 * Ensures button hover styles work properly within Elementor containers.
 */
.elementor-widget-container .acuo-packages-grid .acuo-package-link:hover,
.elementor-section .acuo-packages-grid .acuo-package-link:hover {
    color: var(--button-hover-color, #fff);
    background-color: var(--button-hover-bg, #005a87);
}