/**
 * ActivGate Container Queries
 * Phase 1.4 - Container query patterns for component-level responsive design.
 * Allows components to adapt based on their container size, not the viewport.
 */

/* ---------------------------------------------------------------------------
   Container Definitions
   --------------------------------------------------------------------------- */

.ag-container-inline {
    container-type: inline-size;
    container-name: ag-inline;
}

.ag-container-card {
    container-type: inline-size;
    container-name: ag-card;
}

.ag-container-sidebar {
    container-type: inline-size;
    container-name: ag-sidebar;
}

.ag-container-main {
    container-type: inline-size;
    container-name: ag-main;
}

.ag-container-widget {
    container-type: inline-size;
    container-name: ag-widget;
}

/* ---------------------------------------------------------------------------
   Card Component - adapts layout at container breakpoints
   --------------------------------------------------------------------------- */

@container ag-card (max-width: 300px) {
    .ag-card--responsive .ag-card__image {
        height: 120px;
    }
    .ag-card--responsive .ag-card__body {
        padding: 12px;
    }
    .ag-card--responsive .ag-card__title {
        font-size: 14px;
    }
    .ag-card--responsive .ag-card__meta {
        flex-direction: column;
        gap: 4px;
    }
    .ag-card--responsive .ag-card__actions {
        flex-direction: column;
    }
}

@container ag-card (min-width: 301px) and (max-width: 500px) {
    .ag-card--responsive .ag-card__image {
        height: 160px;
    }
    .ag-card--responsive .ag-card__body {
        padding: 16px;
    }
}

@container ag-card (min-width: 501px) {
    .ag-card--responsive {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
    .ag-card--responsive .ag-card__image {
        height: 100%;
        border-radius: 12px 0 0 12px;
    }
    .ag-card--responsive .ag-card__body {
        padding: 20px;
    }
}

/* ---------------------------------------------------------------------------
   Grid Component - auto-adjusts columns based on container width
   --------------------------------------------------------------------------- */

@container ag-main (max-width: 500px) {
    .ag-grid--responsive {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

@container ag-main (min-width: 501px) and (max-width: 768px) {
    .ag-grid--responsive {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }
}

@container ag-main (min-width: 769px) {
    .ag-grid--responsive {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
}

@container ag-main (min-width: 1024px) {
    .ag-grid--responsive {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ---------------------------------------------------------------------------
   Sidebar Widget - compact at narrow widths
   --------------------------------------------------------------------------- */

@container ag-sidebar (max-width: 250px) {
    .ag-widget--responsive {
        padding: 12px;
    }
    .ag-widget--responsive .ag-widget__title {
        font-size: 14px;
    }
    .ag-widget--responsive .ag-widget__list {
        gap: 8px;
    }
    .ag-widget--responsive .ag-widget__action {
        width: 100%;
        text-align: center;
    }
}

@container ag-sidebar (min-width: 251px) {
    .ag-widget--responsive {
        padding: 16px;
    }
    .ag-widget--responsive .ag-widget__title {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Navigation/Tabs - stack vertically in narrow containers
   --------------------------------------------------------------------------- */

@container ag-inline (max-width: 400px) {
    .ag-tabs--responsive {
        flex-direction: column;
    }
    .ag-tabs--responsive .ag-tab {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   Search Results - toggle between list and grid based on container
   --------------------------------------------------------------------------- */

@container ag-main (max-width: 600px) {
    .ag-results--responsive {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .ag-results--responsive .ag-result-card {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 12px;
    }
    .ag-results--responsive .ag-result-card__image {
        height: 80px;
        border-radius: 8px;
    }
}

@container ag-main (min-width: 601px) {
    .ag-results--responsive {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }
    .ag-results--responsive .ag-result-card {
        display: flex;
        flex-direction: column;
    }
    .ag-results--responsive .ag-result-card__image {
        height: 180px;
        border-radius: 12px 12px 0 0;
    }
}

/* ---------------------------------------------------------------------------
   Stats/Metric Cards - responsive grid
   --------------------------------------------------------------------------- */

@container ag-widget (max-width: 300px) {
    .ag-stats--responsive {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ag-stats--responsive .ag-stat {
        padding: 12px;
    }
    .ag-stats--responsive .ag-stat__value {
        font-size: 20px;
    }
}

@container ag-widget (min-width: 301px) and (max-width: 500px) {
    .ag-stats--responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@container ag-widget (min-width: 501px) {
    .ag-stats--responsive {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Form Layout - single column in narrow containers
   --------------------------------------------------------------------------- */

@container ag-inline (max-width: 500px) {
    .ag-form--responsive {
        grid-template-columns: 1fr !important;
    }
    .ag-form--responsive .ag-form__row--2col {
        grid-template-columns: 1fr;
    }
}

@container ag-inline (min-width: 501px) {
    .ag-form--responsive .ag-form__row--2col {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Price Display - compact vs expanded
   --------------------------------------------------------------------------- */

@container ag-card (max-width: 200px) {
    .ag-price--responsive .ag-price__original {
        display: none;
    }
    .ag-price--responsive .ag-price__per-night {
        font-size: 11px;
    }
}

/* ---------------------------------------------------------------------------
   Booking Widget - stack at narrow widths
   --------------------------------------------------------------------------- */

@container ag-inline (max-width: 380px) {
    .ag-booking-bar--responsive {
        flex-direction: column;
        gap: 8px;
    }
    .ag-booking-bar--responsive .ag-booking-bar__btn {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Fallback for browsers without container query support
   Uses @supports to provide graceful degradation
   --------------------------------------------------------------------------- */

@supports not (container-type: inline-size) {
    /* Fall back to viewport-based media queries */
    @media (max-width: 640px) {
        .ag-card--responsive .ag-card__image { height: 120px; }
        .ag-grid--responsive { grid-template-columns: 1fr !important; }
        .ag-widget--responsive { padding: 12px; }
        .ag-tabs--responsive { flex-direction: column; }
        .ag-form--responsive { grid-template-columns: 1fr !important; }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
        .ag-grid--responsive { grid-template-columns: repeat(2, 1fr) !important; }
    }

    @media (min-width: 1025px) {
        .ag-card--responsive { display: grid; grid-template-columns: 200px 1fr; }
        .ag-grid--responsive { grid-template-columns: repeat(3, 1fr) !important; }
    }
}