@use '../utilities/variables' as v;

.card {

  --linkc: var(--font-colour);
  --linkc-hover: var(--font-colour);

  position: relative;

  display: flex; flex-direction: column;

  border-radius: v.$border-radius;
  background: var(--body-background-lighter);
  box-shadow: var(--card-shadow);

  overflow: hidden;


  header {

    padding: 0 v.$space-m;

    display: flex;
    align-items: center; justify-content: space-between;


    h3 { margin: v.$space-m 0; padding: 0; }

  }


  .meta {

    position: relative;

    width: 100%;
    padding-top: 75%;

    border-radius: v.$border-radius;
    background: var(--body-background-darker);

    overflow: hidden;

  }


  .meta img {

    position: absolute;
    top: 50%; left: 50%;

    width: 100%; height: 100%;

    object-fit: cover;
    transform: translate( -50%, -50% );

    transition: transform 300ms ease-in-out;

  }

  &:focus-within .meta img,
  &:hover .meta img { transform: translate(-50%, -45%); }


  .meta .description {

    position: absolute;
    top: 0; left: 0;

    margin: 0; padding: 0 v.$space-m v.$space-m v.$space-m;
    width: calc(100% - #{v.$space-m * 2});

    border-radius: v.$border-radius;
    background: var(--body-background-lighter);

    transform: translateY(-100%);

    transition: transform 300ms ease-in-out;

  }

  &:focus-within .meta .description,
  &:hover .meta .description { transform: translateY(0); }


  .button-wrapper {

    position: absolute;
    right: 0; bottom: 0;

    padding: v.$space-m;

    opacity: 0;

    transition: opacity 300ms ease-in-out;

  }

  &:focus-within .button-wrapper,
  &:hover .button-wrapper { opacity: 1; }

}
