/*

  Project Name: EyeZen Wearable Sensor: static/css/mission.css
  Team Members: Akshat Tewari, Rohan Arni, Harry Fan, Medhansh Puri
  Date: 6/1/25
  Task Description: Styling for the mission page of the EyeZen Wearable Sensor project.

*/

.image-element-grid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    padding: 20px 0px;
    
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 30px;
    grid-row-gap: 0px;
}

.pane-container {
    padding: 20px 20px;
}

.pane-container, .subpane-container {
    display: flex;
    background-color: color-mix(in srgb, var(--c4), var(--c5));
    border-radius: 6px;
    box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3), 0 0 18px 3px rgba(0, 0, 0, .3), 0 0 18px 3px rgba(0, 0, 0, .3), 0 0 18px 3px rgba(0, 0, 0, .3); /* Use many shadows as a border */
}

.pane-text {
    margin-bottom: 5px;
}

.text-container-pane {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.padding-left {
    padding-left: 20px;
}

.padding-right {
    padding-right: 20px;
}

.subpane-container {
    padding: 20px;
}

.center-container {
    display: flex;
}

.small-bmargin {
    margin-bottom: 20px !important;
}

.procedure-btn {
    background-color: var(--c3);
    color: var(--c1);
    font-size: 1.5rem;
    padding: 3px 15px 8px 15px;
    margin: 4px 4px 4px 4px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease !important;
    margin: 0 !important;
  }

  .procedure-btn:hover {
    background-color: var(--c1);
    color: var(--c4);
  }

  /* Media queries for dynamic panes and grid */

  @media screen and (max-width: 1055px) {
    /* Dynamic title */

    .pane-container {
        flex-direction: column-reverse;
    }

    .pane-title, .pane-text {
        text-align: center;
    }

    .row-reverse {
        flex-direction: column !important;
    }

    .image-element {
        margin-top: 30px;
    }

    .pane-text {
        margin-bottom: 10px;
    }

    /* Remove directional padding and margin between image and text */
    .padding-left, .padding-right {
        padding-right: 0;
        margin-top: 10px;
    }
  }

  @media screen and (max-width: 840px) {
    /* Dynamic grid */

    .above-1 { grid-area: above-1; }
    .above-2 { grid-area: above-2; }
    .below-1 { grid-area: below-1; }
    .below-2 { grid-area: below-2; }

    .above-1, .above-2 {
        margin-bottom: -5px;
    }

    .below-1 {
        margin-bottom: 25px;
    }

    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: " above-1 "
                             " below-1 "
                             " above-2 "
                             " below-2 ";
    }
  }