/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 7/2025
 * ===========================
 */

/* Title Block and General Styles */
.interior-layout__main.header-main {
  margin-bottom: 36px;
}
.interior-layout__aside.header-aside {
  .card {
    background:white;
    border:1px solid rgba(0,0,0,.1);
    border-top:5px solid #E27508;    
    h2 {
      font-weight:bold;
    }
    p {
      color:#707070;
      font-style:italic;
      .button {
        font-style:normal;
      }
    }
  }
}
.trustee-logo-container {
  display:grid;
  align-items:center;
  max-width:650px;
  img {
    grid-area: 1/1;
    &.bg-img {
      width:50%;
      filter: invert(100%) sepia(100%) saturate(38%) hue-rotate(321deg) brightness(110%) contrast(110%);
      opacity:.8;
      @media screen and (min-width:1378px) {
        filter: invert(95%) sepia(66%) saturate(6668%) hue-rotate(173deg) brightness(106%) contrast(101%);
        opacity:1;
      }
    }
    &.title-img {
      width:100%;
      z-index:1;
    }
  }
}
p.trustee-intro {
  color:#00447c;
}
.breadcrumbs {
  position:relative;
  color:#00447c;
  font-weight:600;
}

.padded-content {
  padding-left:24px;
  padding-right:24px;
    @media screen and (min-width:768px) {
      padding-left:48px;
      padding-right:48px;
    }
    @media screen and (min-width:1376px) {
      padding-left:0;
      padding-right:0;
    }
}
main#top.content {
  background-image: url(/images/default-source/site-images/resources---news/potential-trustee-directory/potential-trustee-directory-bg.jpg);
  background-attachment:fixed;
  background-size:cover;
  background-repeat: no-repeat;
  padding-bottom:0;
}
.note {
  color:rgba(0,0,0,.65) !important;
}

/* Search and Filter CSS Overrides */
#SearchFilter-search-filter-container {
  grid-template-areas: "location" "fee" "search" "btns";
  @media screen and (min-width: 768px) {
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    grid-template-areas: "search search location fee btns";
  }
  .filter-container {
    &#Filter-location-container {
      grid-area: location;
    }
    &#Filter-fee-structure-container {
      grid-area: fee;
    }
  }
}
#SearchFilter-msg {
  display:none;
}
#SearchFilter-list-container {
  margin-top:36px;
}
#List-header {
  grid-template-columns: 80px auto 200px 200px;
  background-color:#00447c;
}
.grid-view ul#SearchFilter-list {
  li {
    a {
      .item-text {
        .details {
          display: block;
          font:inherit;
          color:inherit;
          .trustee-location,
          .trustee-fee-structure {
            display: none;
          }
          & > * {
            display:block;
          }
        }
      }
    }
  }
}
.list-view ul#SearchFilter-list {
  li {
    a {
      .item-text {
        .trustee-name {
          padding: 18px;
          align-self: center;
          font-weight:600;
        }
        .details {
          grid-template-columns: 200px 200px;
          grid-template-areas: "location fee";
          .trustee-title,
          .trustee-org,
          .trustee-btn {
            display: none;
          }
          .trustee-location {
            grid-area: location;
          }
          .trustee-fee-structure {
            grid-area: fee;
          }
        }        
      }
    }
  }
}

/* Listing Page */
.grid-view ul#SearchFilter-list {
  @media screen and (min-width:600px) {
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  }
  li {
    a {    
      color:inherit;
      padding:24px;
      display:block;
      &:hover, &:focus {
        cursor:pointer;
        .trustee-name {
          color: #0072c6;
          text-decoration: underline;
        }
      }
      @media screen and (min-width:600px) {
        display:grid;
        grid-template-columns: 180px 1fr;
        padding:0;
      }
      .item-image {
        min-height:0;
        max-height:200px;
        @media screen and (min-width:600px) {
          max-height:initial;
        }
      }
      .item-text {
        padding:24px 0 0;
        display:flex;
        flex-direction: column;
        text-align:center;
        height:100%;
        @media screen and (min-width:600px) {
          padding:24px;
          text-align:start;
          justify-content:center;
        } 
        .trustee-name {
          font-weight:600;
          font-size:16pt;
          line-height:1.4;
        }
        .details {
          .trustee-btn {
            margin:12px 0 0;
            @media screen and (min-width:600px) {
              position:absolute;
              right:0;
              bottom:0;
            }
            .button {
              pointer-events: none;
              @media screen and (min-width:600px) {
                border-radius:10px 0 0 0;
              }
            }
          }
        }        
      }
    }
  }
}

/* Detail Page */
.trustee-small-logo-and-links {
  display:grid;
  grid-row-gap:6px;
  margin:0 0 24px;
  @media screen and (min-width:960px) {
    grid-template-columns:425px 1fr;
    justify-content: start;
    align-items:center;
    grid-column-gap:18px;
    margin-bottom:0;
  }
  .trustee-logo-small {
    max-width:425px;
    .trustee-logo-container img.bg-img {
      filter: invert(100%) sepia(100%) saturate(38%) hue-rotate(321deg) brightness(110%) contrast(110%);
      opacity:.8;
    }
  }
  .trustee-links-small {
    @media screen and (min-width:960px) {
      margin-top:55px;
    }
    p.trustee-nav {
      position:relative;
      color:#00447c;
      font-weight:600;
      a {
        display:block;
        @media screen and (min-width:450px) {
          display:inline;
        }
      }
      .link-divider {
        display:none;
        padding:0 9px;
        @media screen and (min-width:450px) {
          display:inline;
        }
      }
      .button {
        width:100%;
        max-width:300px;
      }
    }
  }
}
.trustees-bg.detail {
  position:relative;
  &:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 25%);
  }
  .page-bounds {
    z-index:1;
    position:relative;
    .trustee-content {
      h2 {
        margin:36px 0 12px;
        &:first-of-type {
          margin-top:0;
        }
      }
    }
    .interior-layout__aside {
      overflow:visible;
      .card.trustee-aside {
        box-shadow: 2px 2px 4px rgba(0,0,0,.2);
        text-align:center;
        margin-top:48px;
        background: white;
        border: 1px solid rgba(0,0,0,.1);
        border-top: 5px solid #E27508;
        color:#707070;
        font-size:1rem;
        line-height:1.5;
        font-style:italic;
        @media screen and (min-width:960px) {
          text-align:start;
          margin-top:0;
        }
        div {
          margin:2px 0 0;
        }
        img.trustee-img {
          margin:0 auto 1rem;
          @media screen and (min-width:960px) {
            margin-left:0;
          }
        }
        .trustee-name {
          color:#262626;
          font-size:14pt;
          line-height:1.6;
          font-weight:600;
          padding:4px 0 2px;
          font-style:normal;
        }
      }
    }
  }
}