/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@layer components;

@layer components {
  .elk-primary-btn{
    border-radius: 9999px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-elk-blue-500);
    background-color: var(--color-elk-blue-500);
    padding: .5rem 1.5rem;
    text-align:center;
    color:#fff;
    display:inline-block;
  }

  .elk-primary-btn:hover{
    border-color: var(--color-elk-blue-700);
    background-color: var(--color-elk-blue-700);
  }

  .home .hero{
    text-align:center;
    padding-top: 2rem;
  }

  .home .hero__header{
    display:flex;
    flex-direction:column;
    gap: 3rem;
  }

  .home .hero__headline{
    margin: 2rem 0;
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 900;
    color: var(--color-elk-blue-500);
  }

  .home .hero__lead{
    font-size: 1.25rem;
    line-height: 1.75;
  }

  .home .hero__features{
    margin-top: 3rem;
  }

  .home .feature-grid{
    list-style:none;
    padding-left:0;
    margin: 0;
    display:grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-content:center;
  }

  .home .feature__icon{
    height: 4rem;
    width: auto;
    display:inline-block;
    border-radius: 0;
  }

  .home .feature__title{
    margin-top: .75rem;
    font-size: 1.125rem;
    font-weight: 800;
  }

  .home .feature__text{
    font-size: 1rem;
    line-height: 1.625;
  }

  .home .references{
    text-align:center;
    margin-top: 4rem;
    margin-bottom: 5rem;
  }

  .home .references__panel{
    background: var(--color-elk-blue-50);
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .home .references__title{
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 2rem;
    text-align:center;
    color: var(--color-elk-blue-900);
  }

  .home .references__logos{
    list-style:none;
    padding-left:0;
    margin: 0 0 1.5rem 0;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    justify-content:center;
  }

  .home .logo a{
    display:inline-block;
    border-radius: .375rem;
  }

  .home .references__blurb{
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .home .products__header{
    text-align:center;
  }

  .home .products__grid{
    list-style:none;
    padding-left:0;
    margin-top: 3rem;
    display:grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .home .product{
    display:flex;
    gap: 1rem;
    align-items:flex-start;
  }

  .home .product__icon{
    width: 4rem;
    border-radius: 0;
    flex: 0 0 auto;
  }

  .home .product__icon-spacer{
    width: 4rem;
    flex: 0 0 auto;
  }

  .home .product__title{
    margin-top: 0;
    font-size: 1.125rem;
    font-weight: 800;
  }

  .home .product__text{
    font-size: 1rem;
    line-height: 1.625;
  }

  .home .product__link{
    color: var(--color-elk-blue-500);
  }

  .home .product__link:hover{
    text-decoration: underline;
  }

  .home .built__panel{
    background: var(--color-elk-blue-50);
    padding-top: 3rem;
    padding-bottom: 8rem;
  }

  .home .built__kicker{
    text-align:center;
    text-transform: uppercase;
    font-size: 1.125rem;
  }

  .home .built__inner{
    display:flex;
    flex-direction:column;
    gap: 4rem;
  }

  .home .story{
    display:flex;
    flex-direction:column;
    gap: 3rem;
    align-items:center;
  }

  .home .story__img{
    border-radius: .375rem;
    max-width: 100%;
    height: auto;
  }

  .home .story__link{
    color: var(--color-elk-blue-500);
  }

  .home .story__link:hover{
    text-decoration: underline;
  }

  @media (width >= 1024px){
    .home .feature-grid{
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem;
    }

    .home .references__logos{
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 2rem;
    }

    .home .products__grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3rem;
    }

    .home .story{
      flex-direction:row;
    }

    .home .story--reverse{
      flex-direction:row-reverse;
    }
  }
}