/**
 * Acuo Travel Agent - Alignment Styles
 *
 * This file contains CSS rules for controlling the alignment and layout
 * of travel package cards in the Acuo Travel Agent plugin.
 *
 * @package Acuo_Travel_Agent
 * @version 1.0.0
 */

/**
 * Title Alignment
 *
 * Controls the horizontal alignment of package titles.
 */
.acuo-title-left .acuo-package-title {
    text-align: left !important;
    justify-self: start !important;
}
.acuo-title-center .acuo-package-title {
    text-align: center !important;
    justify-self: center !important;
}
.acuo-title-right .acuo-package-title {
    text-align: right !important;
    justify-self: end !important;
}

/**
 * Image Alignment
 *
 * Controls the horizontal alignment of package images.
 */
.acuo-image-left .acuo-package-image {
    justify-self: start !important;
    width: 100%;
}
.acuo-image-center .acuo-package-image {
    justify-self: center !important;
    width: 100%;
}
.acuo-image-right .acuo-package-image {
    justify-self: end !important;
    width: 100%;
}

/**
 * Excerpt Alignment
 *
 * Controls the horizontal alignment of package excerpts.
 */
.acuo-excerpt-left .acuo-package-excerpt {
    text-align: left !important;
    justify-self: start !important;
}
.acuo-excerpt-center .acuo-package-excerpt {
    text-align: center !important;
    justify-self: center !important;
}
.acuo-excerpt-right .acuo-package-excerpt {
    text-align: right !important;
    justify-self: end !important;
}

/**
 * Button Alignment
 *
 * Controls the horizontal alignment of package buttons.
 */
.acuo-button-left .acuo-package-link {
    justify-self: start !important;
}
.acuo-button-center .acuo-package-link {
    justify-self: center !important;
}
.acuo-button-right .acuo-package-link {
    justify-self: end !important;
}

/**
 * Card Layout Variations
 *
 * Different layout options for package cards using CSS Grid.
 */
.acuo-layout-flexible .acuo-package-card {
    display: grid;
    grid-template-areas: var(--acuo-grid-areas, "image image" "title title" "excerpt details");
    grid-template-columns: var(--acuo-grid-columns, 2fr 1fr);
    grid-template-rows: auto auto 1fr;
}
.acuo-layout-vertical .acuo-package-card {
    grid-template-areas: "image" "title" "excerpt" "details";
    grid-template-columns: 1fr;
}
.acuo-layout-horizontal .acuo-package-card {
    grid-template-areas: "image title" "image excerpt" "image details";
    grid-template-columns: 1fr 2fr;
}
.acuo-layout-image-left .acuo-package-card {
    grid-template-areas: "image title" "image excerpt" "image details";
    grid-template-columns: 1fr 2fr;
}
.acuo-layout-image-right .acuo-package-card {
    grid-template-areas: "title image" "excerpt image" "details image";
    grid-template-columns: 2fr 1fr;
}

/**
 * Responsive Adjustments
 *
 * Adjusts layouts for smaller screens to ensure proper display on mobile devices.
 */
@media (max-width: 768px) {
    .acuo-layout-horizontal .acuo-package-card,
    .acuo-layout-image-left .acuo-package-card,
    .acuo-layout-image-right .acuo-package-card {
        grid-template-areas: "image" "title" "excerpt" "details";
        grid-template-columns: 1fr;
    }
}