/* =============================================
   MRD Technology Page
   ============================================= */

.intro-section {
    padding-bottom: 0!important;
}

/* --- Grid Section --- */

.technology-grid-section {
    padding: 0 0 64px 0;
}

.technology-grid-section .row {

}

.technology-grid__col {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

.technology-grid__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 24px 16px;
    width: 100%;
    transition: opacity 0.2s ease;
}

.technology-grid__item:hover {
    opacity: 0.75;
}

.technology-grid__icon {
    width: 168px;
    height: auto;
    object-fit: contain;
    margin-bottom: 16px;
}

.technology-grid__title {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 28px;
    line-height: 32px;
    color: #272635;
    margin: 0;
    max-width: 260px;
}

.technology-grid__chevron {
    display: inline;
    vertical-align: middle;
    margin-left: 10px;
    width: 11px;
    height: auto;
}

/* --- Modal --- */

.tech-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.tech-modal.is-open {
    display: flex;
}

.tech-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(39, 38, 53, 0.6);
    cursor: pointer;
}

.tech-modal__box {
    position: relative;
    z-index: 1;
    background: #2B4D78;
    max-width: 990px;
    width: 90%;
    padding: 13px;
}

.tech-modal__inner {
    border: 1px solid #EDE7D9;
    padding: 40px;
    overflow-y: auto;
    max-height: 75vh;
}


.tech-modal__close {
    position: absolute;
    top: 35px;
    right: 35px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.tech-modal__close svg line {
    transition: stroke 0.2s ease;
}

.tech-modal__close:hover svg line {
    stroke: #C5B358;
}

/* Modal layout: icon column left, body right */

.tech-modal__layout {
    display: flex;
    align-items: flex-start;
    gap: 56px;
}

.tech-modal__icon-col {
    flex-shrink: 0;
}

.tech-modal__icon {
    display: block;
    width: 80px;
    height: auto;
    object-fit: contain;
}

.tech-modal__body {
    flex: 1;
    min-width: 0;
}

.tech-modal__heading {
    font-family: 'Tenor Sans', sans-serif;
    color: #EDE7D9;
    margin-bottom: 10px;
}

.tech-modal__heading h1,
.tech-modal__heading h2 {
    color: #C5B358;
    margin-top: 0;
    margin-bottom: 4px;
}

.tech-modal__heading h2 {
    margin-bottom: 20px;
}

.tech-modal .tech-modal__heading h3 {
    color: #C5B358;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 4px;
    font-weight: 700;
}

.tech-modal .tech-modal__heading h4 {
    color: #C5B358;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 4px;
}

.tech-modal__heading p {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #EDE7D9;
}

/* 3-column body */

.tech-modal__columns {
    display: flex;
    gap: 32px;
}

.tech-modal__col {
    flex: 1;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #EDE7D9;
    line-height: 1.7;
}

.tech-modal__col p:first-child {
    margin-top: 0;
}

.tech-modal__col h2 {
    color: #C5B358;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 20px;
}

.tech-modal .tech-modal__col h3 {
    color: #C5B358;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

.tech-modal .tech-modal__col h4 {
    color: #C5B358;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

/* Lists */

.tech-modal__col ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.tech-modal__col ul li {
    padding-left: 22px;
    position: relative;
    color: #EDE7D9;
    margin-bottom: 8px;
    font-size: 14px;
}

.tech-modal__col ul li::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 4px;
    width: 11px;
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17' viewBox='0 0 11.2775 16.857' fill='none'%3E%3Cpath d='M11.2775 8.42852L5.63877 0L0 8.42852L5.63877 16.857L11.2775 8.42852Z' fill='%23C5B358'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width: 640px) {
    .tech-modal {
        align-items: flex-start;
        padding-top: 120px;
    }

    .tech-modal__box {
        padding: 8px;
    }

    .tech-modal__inner {
        padding: 40px 20px 24px;
        max-height: calc(100vh - 160px);
    }

    /* Stack layout vertically */
    .tech-modal__layout {
        flex-direction: column;
        gap: 16px;
    }

    .tech-modal__icon {
        width: 48px;
    }

    .tech-modal__columns {
        flex-direction: column;
        gap: 16px;
    }

    .tech-modal__close {
        top: 20px;
        right: 20px;
    }
}

/* Prevent body scroll when modal open */
body.tech-modal-open {
    overflow: hidden;
}