/**
 * Personalization Service - 12-Column Responsive Grid System
 *
 * Flexbox-based responsive grid for layout assembly.
 * CSS Isolation: ALL classes use .saly-ps- prefix to prevent conflicts.
 *
 * Breakpoints:
 * - Mobile (base): < 768px
 * - Tablet (md): 768px - 1023px
 * - Desktop (lg): >= 1024px
 * - XL Desktop: >= 1200px
 *
 * @see PHASE_6_LAYOUT_ASSEMBLY.md Task 6.2
 * @see CSS_JS_ISOLATION_STRATEGY.md
 */

/* ===========================
   LAYOUT CONTAINER
   =========================== */

.saly-ps-personalized-layout {
    width: 100%;
    max-width: 1400px;
    margin: 0;
    padding: 0 15px;
}

/* ===========================
   ROW
   =========================== */

.saly-ps-layout-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Negative margin for column gutters */
}

/* Row modifiers */
.saly-ps-layout-row.saly-ps-no-gutters {
    margin: 0;
}

.saly-ps-layout-row.saly-ps-no-gutters > .saly-ps-layout-col {
    padding: 0;
}

/* ===========================
   COLUMNS (BASE - MOBILE)
   =========================== */

.saly-ps-layout-col {
    position: relative;
    width: 100%;
    padding: 0 15px;
    margin-bottom: 30px;
}

/* 12-column grid - Mobile (base, no prefix) */
.saly-ps-col-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
.saly-ps-col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.saly-ps-col-3  { flex: 0 0 25%; max-width: 25%; }
.saly-ps-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.saly-ps-col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.saly-ps-col-6  { flex: 0 0 50%; max-width: 50%; }
.saly-ps-col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.saly-ps-col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.saly-ps-col-9  { flex: 0 0 75%; max-width: 75%; }
.saly-ps-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.saly-ps-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.saly-ps-col-12 { flex: 0 0 100%; max-width: 100%; }

/* ===========================
   TABLET (MD) - >= 768px
   =========================== */

@media (min-width: 768px) {
    .saly-ps-col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .saly-ps-col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .saly-ps-col-md-3  { flex: 0 0 25%; max-width: 25%; }
    .saly-ps-col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .saly-ps-col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .saly-ps-col-md-6  { flex: 0 0 50%; max-width: 50%; }
    .saly-ps-col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .saly-ps-col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .saly-ps-col-md-9  { flex: 0 0 75%; max-width: 75%; }
    .saly-ps-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .saly-ps-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .saly-ps-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ===========================
   DESKTOP (LG) - >= 1024px
   =========================== */

@media (min-width: 1024px) {
    .saly-ps-col-lg-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .saly-ps-col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .saly-ps-col-lg-3  { flex: 0 0 25%; max-width: 25%; }
    .saly-ps-col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .saly-ps-col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .saly-ps-col-lg-6  { flex: 0 0 50%; max-width: 50%; }
    .saly-ps-col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .saly-ps-col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .saly-ps-col-lg-9  { flex: 0 0 75%; max-width: 75%; }
    .saly-ps-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .saly-ps-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .saly-ps-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ===========================
   XL DESKTOP - >= 1200px
   =========================== */

@media (min-width: 1200px) {
    .saly-ps-personalized-layout {
        max-width: 1400px;
    }
}

/* ===========================
   ERROR STATES (DEVELOPMENT)
   =========================== */

.saly-ps-block-error {
    background: #fee;
    border: 2px dashed #c00;
    padding: 20px;
    margin: 10px 0;
}

.saly-ps-error-message {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #c00;
    line-height: 1.6;
}

.saly-ps-error-message strong {
    display: block;
    font-size: 16px;
    margin-bottom: 10px;
}

/* ===========================
   EMPTY LAYOUT (DEVELOPMENT)
   =========================== */

.saly-ps-layout-empty {
    padding: 60px 20px;
    text-align: center;
    color: #718096;
    font-style: italic;
    background: #f7fafc;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    margin: 20px 0;
}

.saly-ps-layout-empty p {
    font-size: 18px;
    margin-bottom: 10px;
}

.saly-ps-layout-empty small {
    font-size: 14px;
    color: #a0aec0;
}

/* ===========================
   RESPONSIVE UTILITIES
   =========================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .saly-ps-hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .saly-ps-hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .saly-ps-hide-desktop {
        display: none !important;
    }
}

/* ===========================
   PRINT STYLES
   =========================== */

@media print {
    .saly-ps-personalized-layout {
        max-width: 100%;
        padding: 0;
    }

    .saly-ps-layout-row {
        margin: 0;
        page-break-inside: avoid;
    }

    .saly-ps-layout-col {
        padding: 0;
        margin-bottom: 20px;
    }

    .saly-ps-block-error,
    .saly-ps-layout-empty {
        display: none;
    }
}

/* ===========================
   ACCESSIBILITY
   =========================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .saly-ps-block-error {
        border-width: 3px;
    }

    .saly-ps-layout-empty {
        border-width: 3px;
    }
}

/* ===========================
   FLEXBOX FALLBACK
   =========================== */

/* For older browsers that don't support flexbox */
@supports not (display: flex) {
    .saly-ps-layout-row {
        display: block;
    }

    .saly-ps-layout-col {
        display: block;
        float: left;
    }

    .saly-ps-layout-row::after {
        content: "";
        display: table;
        clear: both;
    }
}