/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 10/2026
 * ===========================
 */

:root {
  --no-shadow: 0px 0px 2px rgba(0, 0, 0, 0);
  --small-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  --large-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  --transition-time: 250ms;
}

main#top {
  padding-bottom:0;
}
.title-block {
  margin-bottom:0;
}

.certificate-section {
  padding:96px 0;
  background: rgba(212,235,245,.45);
  position:relative;
  &::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 100%);
  }
  .page-bounds {
    padding-left:24px;
    padding-right:24px;
    @media (min-width:768px) {
      padding-left:48px;
      padding-right:48px;
    }
    @media (min-width:1376px) {
      padding-left:0;
      padding-right:0;
    }
    h2 {
      font-family: "Barlow Semi Condensed", sans-serif;
      font-weight: 700;
      margin-bottom:48px;
      text-align:center;
      position:relative;
    }
  }
  &.online {
    background: #00447c;
    &::before {
      background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 100%);
    }
    h2 {
      color:white;
    }
  }
}

ul.simple-list {
  display:grid;  
  align-items:stretch;
  grid-gap:24px;
  margin:0;
  padding:0;
  list-style-type: none;
  @media (min-width:400px) {
    grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
  }
  li {
    height:100%;        
    a {
      display: grid;
      align-items: stretch;
      position: relative;
      margin: 0;
      background: white;
      position: relative;
      height: 100%;
      border-radius:10px;
      overflow:hidden;
      box-shadow: var(--small-shadow);
      transition: margin var(--transition-time),
        box-shadow var(--transition-time);
      @media screen and (min-width: 400px) {
        grid-template-columns: 130px 1fr;
        border-top-right-radius:0;
      }
      &:hover,
      &:focus {
        box-shadow: var(--no-shadow);
        margin: 0.1rem -0.1rem -0.1rem 0.1rem;
        transition: margin var(--transition-time),
          box-shadow var(--transition-time);
      }
      @media screen and (min-width: 400px) {
        grid-template-columns: 130px 1fr;
      }
      .flag-icon {
        position:absolute;
        top:252px;
        right:2px;
        width:100%;
        display:flex;
        justify-content: end;
        align-items: end;
        flex-direction: row;
        gap:2px;
        @media screen and (min-width: 400px) {
          top:2px;
        }
        img {
          width:30px;
          margin:0;
        }
      }
      .thumbnail {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 250px;
        @media screen and (min-width: 400px) {
          min-height: 130px;
        }        
      }
      .title {
        font-weight: bold;
        font-size: 1.15rem;
        line-height:1.4;
        color:#0072c6;
        padding: 18px 48px 18px 18px;
        align-self: center;
      }
      &:hover, &:focus {
        .thumbnail {
          opacity:.8;
        }
      }
      &[href*="ftms"],
      &[href*="atms"],
      &[href*="mtms"] {
        .thumbnail {
          background-size:85%;
        }
      }
    }    
  }
}