/*
 * H2MIRI Responsive Utilities CSS
 * Mobile-first breakpoint system and layout utilities
 * Breakpoints: 640px (tablet), 1024px (desktop), 1400px (large desktop)
 */

/* ==============================
   RESPONSIVE BREAKPOINTS
   Mobile-First Approach
   ============================== */

/* Base/Mobile (0px - 639px) */
@media (max-width: 639px) {
    .container {
        padding: 0 10px;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .modal-content,
    .case-modal-content,
    .modal-content-training {
        width: 100%;
        max-height: unset;
    }

    .modal-content-container {
        padding: 10px;
        flex-direction: column-reverse;
        align-items: center;
        max-height: 90vh;
        overflow: hidden;
    }

    .modal-title-container {
        text-align: center;
        flex-direction: unset;
        align-items: unset;
        justify-content: unset;
    }

    .modal-title-container h2 {
        font-size: 1.25rem;
    }

    .modal-description {
        max-width: 95%;
        width: 80%;
    }

    .contact-info {
        max-width: 95%;
        width: 80%;
        padding: 10px;
        margin: 0;
        margin-top: 10px;
    }

    .partner-match-cards {
        max-height: auto;
    }

    .sidebar-toggle-button {
        display: block;
    }

    .right-sidebar-wrapper,
    .left-sidebar-wrapper {
        display: none;
    }
}

/* Tablet (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .container {
        padding: 0 20px;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-content,
    .case-modal-content {
        width: 90%;
        max-height: 80vh;
    }

    .contact-info {
        width: 80%;
        max-width: 80%;
    }
}

/* Desktop (1024px - 1399px) */
@media (min-width: 1024px) and (max-width: 1399px) {
    .container {
        padding: 0 40px;
        max-width: 1200px;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .modal-content,
    .case-modal-content {
        width: 85%;
        max-height: 85vh;
    }

    .contact-info {
        width: 50%;
        max-width: 50%;
    }

    .sidebar-toggle-button {
        display: none;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .container {
        padding: 0 60px;
        max-width: 1400px;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .modal-content,
    .case-modal-content {
        width: 80%;
        max-height: 90vh;
    }

    .contact-info {
        width: 45%;
        max-width: 45%;
    }

    .sidebar-toggle-button {
        display: none;
    }

    .partner-match-cards-grid {
        /* defined in original responsive styles */
    }
}

/* ==============================
   LAYOUT UTILITIES
   ============================== */

.container {
    width: 100%;
    box-sizing: border-box;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid {
    display: grid;
    gap: var(--spacing-md, 20px);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md, 20px);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md, 20px);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md, 20px);
}

/* ==============================
   SPACING UTILITIES
   ============================== */

.mt-sm { margin-top: var(--spacing-sm, 10px); }
.mt-md { margin-top: var(--spacing-md, 20px); }
.mt-lg { margin-top: var(--spacing-lg, 30px); }
.mt-xl { margin-top: var(--spacing-xl, 40px); }

.mb-sm { margin-bottom: var(--spacing-sm, 10px); }
.mb-md { margin-bottom: var(--spacing-md, 20px); }
.mb-lg { margin-bottom: var(--spacing-lg, 30px); }
.mb-xl { margin-bottom: var(--spacing-xl, 40px); }

.p-sm { padding: var(--spacing-sm, 10px); }
.p-md { padding: var(--spacing-md, 20px); }
.p-lg { padding: var(--spacing-lg, 30px); }
.p-xl { padding: var(--spacing-xl, 40px); }

/* ==============================
   VISIBILITY UTILITIES
   ============================== */

.hidden-mobile {
    display: none;
}

.hidden-tablet {
    display: block;
}

.hidden-desktop {
    display: block;
}

@media (min-width: 640px) {
    .hidden-mobile {
        display: block;
    }

    .hidden-tablet {
        display: none;
    }
}

@media (min-width: 1024px) {
    .hidden-tablet {
        display: block;
    }

    .hidden-desktop {
        display: none;
    }
}

/* ==============================
   TEXT UTILITIES
   ============================== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-sm {
    font-size: var(--font-size-sm, 0.875rem);
}

.text-md {
    font-size: var(--font-size-md, 1rem);
}

.text-lg {
    font-size: var(--font-size-lg, 1.25rem);
}

.text-xl {
    font-size: var(--font-size-xl, 1.5rem);
}

.font-weight-light {
    font-weight: 300;
}

.font-weight-normal {
    font-weight: 400;
}

.font-weight-bold {
    font-weight: 700;
}

/* ==============================
   DISPLAY & OVERFLOW
   ============================== */

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==============================
   BORDER UTILITIES
   ============================== */

.border-top {
    border-top: 1px solid #ccc;
}

.border-bottom {
    border-bottom: 1px solid #ccc;
}

.border-all {
    border: 1px solid #ccc;
}

.rounded {
    border-radius: var(--card-radius, 9px);
}

.rounded-sm {
    border-radius: 4px;
}

.rounded-lg {
    border-radius: 12px;
}

/* ==============================
   SHADOW UTILITIES
   ============================== */

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}