/* ---------------------------------- */
/* PORTFOLIO SECTION - FULL WIDTH     */
/* ---------------------------------- */

/* Remove width limits on parents so 3 columns fit */
.modular-row.portfolio,
.modular-row.portfolio .container,
.modular-row.portfolio .modular-content {
    width: 90% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Flex container for notebooks */
.notebooks {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start; /* align left, allows 3 columns */
}

/* Portfolio boxes - Desktop: 3 columns */
.notebooks .notebook {
    flex: 0 1 calc(33% - 40px);
    min-width: 250px;
    box-sizing: border-box;
    padding: 15px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Tablet: 2 columns */
@media (max-width: 1199px) and (min-width: 768px) {
    .notebooks .notebook {
        flex: 0 1 calc(50% - 20px);
        min-width: 300px;
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .notebooks .notebook {
        flex: 0 1 100%;
        min-width: auto;
    }
}

/* Portfolio modal styling */
.portfolio-modal .modal-content {
    width: 85%;
    max-width: 1200px;
}

.portfolio-modal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}


/* Remove width limits on parents so 3 columns fit */
.modular-row.team,
.modular-row.team .container,
.modular-row.team .modular-content {
    width: 90% !important;       /* use full width */
    max-width: 100% !important;
    padding-left: 20px !important;  /* small padding at edges */
    padding-right: 20px !important;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ---------------------------------- */
/* TEAM SECTION - FLEX GRID           */
/* ---------------------------------- */

.members {
    display: flex;
    flex-wrap: wrap;             /* allow multiple rows */
    justify-content: flex-start; /* align items to left */
    gap: 20px;                   /* horizontal & vertical spacing */
}

/* Each member */
.members .member {
    flex: 0 1 calc(32% - 40px);
    min-width: 250px;
    box-sizing: border-box;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Tablet: 2 columns */
@media (max-width: 1199px) and (min-width: 768px) {
    .members .member {
        flex: 0 1 calc(50% - 10px);
        min-width: 300px; /* adjust if needed */
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .members .member {
        flex: 0 1 100%;
        min-width: auto;
    }
}

/* Images responsive inside team boxes */
.members .member img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent text overflow */
.members .member h4,
.members .member p,
.members .member span,
.members .member ul {
    margin: 0;
    padding: 0;
    word-break: break-word;
}



/* ---------------------------------- */
/* OPTIONAL DEBUG - remove in prod    */
/* ---------------------------------- */
/*
.notebooks .notebook {
    border: 2px solid red;
}
.members .member {
    border: 2px solid blue;
}
*/

/* Ensure modals overlay sticky nav */
.modal,
.modal-backdrop,
.modal-content {
    z-index: 10000 !important;
}

.modal .close,
.modal .modal-close {
    z-index: 11000 !important;
}

/* Make anchor links jump a bit further to consider sticky menu */
h1, h2, h3, h4, h5, h6, div {
    scroll-margin-top: 96px;
}

.bg-light {
  background-color: #ffffff;
}

.bg-dark {
  background-color: #f5f5f5;
}

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

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