/*
 * Shared content layout for frontend pages after the hero/header area.
 *
 * Scope:
 * - main + sidebar layout for category, search and detail pages
 * - stable left/right/no-sidebar behavior
 * - no ordering hacks; placement is controlled by grid-template-areas
 * - shared listing flow for category/search result cards
 *
 * Do not put module-specific UI here. Timelines, booking boxes, galleries,
 * cabin cards, hotel room cards, TOC, etc. should stay in their module CSS.
 */

:root {
    --site-content-sidebar-width: 360px;
    --site-content-layout-gap: 24px;
    --site-content-layout-breakpoint: 1199px;
    --site-listing-gap: 18px;
    --site-listing-grid-min: 260px;
    --site-listing-slider-width: 360px;
}

.site-content-layout,
.site-content-layout * {
    box-sizing: border-box;
}

.site-content-layout {
    --site-layout-sidebar: var(--site-content-sidebar-width);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--site-content-sidebar-width);
    grid-template-areas: "main sidebar";
    gap: var(--site-content-layout-gap);
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.site-content-layout--sidebar-right {
    grid-template-columns: minmax(0, 1fr) var(--site-content-sidebar-width);
    grid-template-areas: "main sidebar";
}

.site-content-layout--sidebar-left {
    grid-template-columns: var(--site-content-sidebar-width) minmax(0, 1fr);
    grid-template-areas: "sidebar main";
}

.site-content-layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
}

.site-content-layout__main {
    grid-area: main;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.site-content-layout--no-sidebar .site-content-layout__main {
    width: 100%;
}

.site-content-layout__sidebar {
    grid-area: sidebar;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.site-content-layout__sidebar.site-sidebar,
.site-content-layout__sidebar .site-sidebar {
    width: 100%;
    max-width: 100%;
}

.site-detail-hero__grid {
    grid-template-areas: "media summary";
}

.site-detail-hero__media {
    grid-area: media;
}

.site-detail-hero__summary {
    grid-area: summary;
}

.site-detail-hero--sidebar-left.site-detail-hero__grid {
    grid-template-areas: "summary media";
}

.site-detail-hero--sidebar-right.site-detail-hero__grid {
    grid-template-areas: "media summary";
}

.site-detail-hero--no-sidebar.site-detail-hero__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "media";
}

@media (max-width: 1199px) {
    .site-content-layout,
    .site-content-layout--sidebar-left,
    .site-content-layout--sidebar-right {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "sidebar";
    }

    .site-content-layout--no-sidebar {
        grid-template-areas: "main";
    }

    /*
     * Every detail hero becomes one real column on narrow screens. Without
     * resetting the two-area desktop map, CSS Grid creates an implicit second
     * column: the media column can collapse while the summary remains visible.
     */
    .site-detail-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "media"
            "summary";
    }

    .site-detail-hero--sidebar-left.site-detail-hero__grid,
    .site-detail-hero--sidebar-right.site-detail-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "media"
            "summary";
    }

    .site-detail-hero--no-sidebar.site-detail-hero__grid {
        grid-template-areas: "media";
    }
}

@media (max-width: 767px) {
    .site-content-layout {
        gap: 18px;
    }
}

/*
 * Shared listing layouts.
 *
 * These classes only control item flow and spacing. Card visuals stay in
 * module-specific CSS, so tour/hotel/bus/news/cruise cards can keep their
 * own media, typography, badge and booking styles.
 */

.site-listing-layout,
.site-listing-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.site-listing-card__media,
.site-listing-card__body,
.site-listing-card__footer {
    min-width: 0;
}

.site-listing-card__media img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}