/*!
 * Copyright (c) 2024 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
*/

.about-page {
  .link-tile {
    &,
    .dark & {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      aspect-ratio: 1;
      color: @black;
      font-size: 2rem;
      font-weight: 500;
      text-align: center;
    }
  }

  // Jumbotron
  &.featured-jumbotron {
    padding: 0;
    background-color: black;

    video {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .video-wrapper {
      position: relative;

      // Fade the edges of the video with a gradient. This allows the colors to
      // blend more since the video's background color isn't the same as the
      // jumbotron's background color.
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,1) 95%, rgba(0,0,0,1) 100%);
      }
    }
  }

  // What We Do Section
  .what-we-do-links-section {
    padding-top: 15rem;
    padding-bottom: 2rem;
    background: url('../../../images/eclipse_org/org/what-we-do.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;

    &-sublinks {
      font-size: 1.5rem;
      text-shadow: 0px 0px 4px black, 0px 0px 4px #00000066, 0px 0px 14px #00000066;
    }
  }

  // Driving Shared Innovation Section
  .driving-shared-innovation-section {
    padding-top: 0;
    padding-bottom: 0;
    background: url('../../../images/eclipse_org/org/shared-innovation.jpg');
    background-repeat: no-repeat;
    background-size: cover;

    .subsection {
      padding-top: 36rem;
      border-top: 4px solid #00000044;
      background-color: #ffffff66;
      backdrop-filter: blur(5px);
    }

    .featured-section-row-dark {
      &,
      h2,
      .h2 {
        color: @white;
      }
    }

    .circular-container {
      position: relative;
      z-index: 2;
      padding: 9rem;
      margin-bottom: -36rem;

      @media (min-width: @screen-sm-min) {
        padding: 14rem;
      }
    }

    .big-quote {
      width: 10rem;
    }

    // Change the background color of the weighted collaborations widget to
    // white.
    .eclipsefdn-weighted-collaborations .weighted-collaboration {
      background-color: @white;
    }
  }

  // Who We Are Section 
  .who-we-are-section {
    a.rollover-tile {
      display: block;
    }

    .rollover-tile {
      &-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 24rem;

        @media (min-width: @screen-sm-min) {
          box-shadow: 0 7px 10px #00000022;
        }
      }

      h3,
      .h3 {
        user-select: none;
      }
    }
  }

  // Our Approach Section 
  .our-approach-section {
    .big-quote {
      width: 10rem;
    }
  }

  // Components
  .circular-container {
    position: relative;
    left: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      z-index: -1;
      height: 100%;
      aspect-ratio: 1;
      border-radius: 50%;
    }

    &-white::before {
      background-color: @white;
    }
  }
}
