/* card styling */

.card-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;

  gap: var(--padding-normal);
}


.card {
  all: unset;

  position: relative;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  border-radius: var(--padding-close);
  border: 1px solid var(--clr-cta-shade);
  box-shadow: var(--clr-secondary-shadow);

  background-color: var(--clr-card-bg-shade);
  
  cursor: pointer;
  overflow-y: hidden;

  transition: box-shadow 200ms ease-in-out,
              scale 200ms ease-in-out,
              background-color 200ms ease-in-out;
}


/* icons on the cards */
.card:nth-child(1)::before,
.card:nth-child(2)::before,
.card:nth-child(3)::before {
  content: '';
  position: absolute;
  
  background-size: cover;
  background-position: center;
  
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  left: var(--padding-close);
  top: var(--padding-close);
  
  z-index: 2;
}

.card:nth-child(1)::before {
  background: url('/img/icon_design.svg') no-repeat;
}

.card:nth-child(2)::before {
  background: url('/img/icon_dev.svg') no-repeat;
}

.card:nth-child(3)::before {
  background: url('/img/icon_branding.svg') no-repeat;
}


.card:focus-within > .card-details-cta .btn-card,
.card:hover > .card-details-cta .btn-card {
  color: var(--clr-cta);
}

.card:active > .btn-card {
  color: var(--clr-cta-shade)

}

.card-details {
  position: relative;

  flex: 0 1 0px;

  isolation: isolate;
}

/* fade effect on image in card-details */
.card-details::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, var(--clr-card-bg-shade));
}

.card .copy {
  display: block;
  margin: var(--padding-tight) var(--padding-close) var(--padding-close) var(--padding-close);
  padding-bottom: var(--padding-close);

}

.card-details-cta {
  border-radius: 0 0 var(--padding-close) var(--padding-close);
  margin-inline: 1rem;
  border-top: 1px solid var(--clr-darkbg-line);
}

.card img {
  border-radius: var(--padding-close) var(--padding-close) 0 0;
}

.card-h3 {
  padding-inline: var(--padding-close);
  position: absolute;
  bottom: 0;
  z-index: 2;
}

/* card layout carousel on smaller screens */

@media (max-width: 480px) {

  .card-margins {
    width: 100%;
  }

  .card-layout {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: var(--padding-close);
    padding: var(--padding-normal) var(--padding-close);
    width: 100%;
  }

  .card {
    flex: 0 0 auto;
    width: 95%;

    scroll-snap-align: center;
  }

  .card-margins header {
    width: var(--margins-mobile);
    margin-inline: auto;
  }

  /* Hide scrollbars on the container */
  .card-layout::-webkit-scrollbar {
    display: none;
  }

 
}

/* only enlarge card only on big screens */
@media (min-width: 480px) {

  .card:focus-within,
  .card:hover {
    box-shadow: var(--clr-secondary-shadow-hover);
    scale: 1.03;
    border: 1px solid var(--clr-cta);
    background-color: var(--clr-card-bg);
  }

  .card:focus,
  .card:focus-within {
    border: 1px solid var(--clr-black);
  }

  /* .card:active {
      scale: 1;
      box-shadow: 2px 2px 4px var(--clr-secondary-bright), 
               -2px -2px 4px var(--clr-secondary-bright), 
               2px -2px 4px var(--clr-secondary-bright), 
               -2px 2px 4px var(--clr-secondary-bright);     
   }
           */
  /*Create an outline glow using box-shadow */
}


@media (min-width: 1920px) {
  .card-margins {
    width: 1240px;
  }
}

.card:active {
  background: linear-gradient(to top, var(--clr-secondary), var(--clr-card-bg-shade) 40%);
  border: 1px solid var(--clr-cta-shade);

}

.card:active > .card-details-cta .btn-card {
  color: var(--clr-cta-shade);
}

@media (min-width: 480px) and (max-width: 860px) {
  .margins {
    width: var(--margins-tablet);
    margin-inline: auto;
  }

  .card-margins {
    width: var(--margins-tablet);
    margin-inline: auto;
  }

}