@import url('./reset.css');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Shadows+Into+Light&display=swap');

:root {
  /* variables */
  --text: #1d1716;
  --background: #fdfafa;
  --primary: #ff764d;
  --secondary: #f79b66;
  --accent: #7bc1b7;

  font-family: "Poppins", sans-serif;

  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
}

.hero {
  min-height: 100dvh;
  background-color: var(--background);
  padding: calc(3rem + 3vw);

  font-family: "Acme", sans-serif;

  display: flex;
  align-items: center;
  position: relative;

  user-select: none;
  overflow: hidden;
}

.hero__wave {
  position: absolute;
  right: -30px;
  width: calc(30rem + 30vw);

  z-index: 3;
}

.hero__title {
  color: var(--background);
  text-shadow: 4px 3px var(--text),
               -1px -1px var(--text);
  font-size: calc(3.5rem + 6vw);
  line-height: calc(4rem + 6vw);
  word-break: break-all;
  z-index: 3;
}

.title--highlight {
  color: var(--primary);
}

/* .hero__cta {
  color: var(--text);

  font-family: "Shadows Into Light", cursive;
  font-size: calc(.75rem + 4vw);
  font-weight: 900;

  position: absolute;
  left: calc(25vw + 80px);
  rotate: 20deg;

  text-transform: lowercase;
}

.hero__cta .and {
  font-family: cursive;
  font-weight: 300;
} */

.desc {
  background-color: var(--primary);
  padding: calc(min(15dvw , 10rem) + 5rem) calc(3rem + 3vw) calc(min(20dvw , 9rem) + 3.5rem);

  position: relative;
}

.desc::before,
.desc::after {
  content: '';
  width: 100%;
  height: 5rem;
  background-color: var(--background);

  position: absolute;
  left: 0;
}

.desc::before {
  top: -1px;
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

.desc::after {
  bottom: -1px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.desc__text {
  color: var(--text);
  font-size: calc(1rem + 1vw);

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.desc__text a {
  color: rgb(173, 48, 9);
}

.projects {
  padding: 2rem;
}

.projects__list-title {
  text-align: center;
  font-size: calc(2rem + 1.5vw);
}

.projects ul {
  padding: 3rem;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 2rem;
  list-style-type: none;
}

a:has(> .card){
  text-decoration: none;
  color: var(--text);
}

.card {
  box-shadow: 0 0 10px -9px black;
  border: solid 1px var(--secondary);
  height: max(200px, 30dvh);
  position: relative;
  cursor: pointer;
  transition: all ease-in-out 200ms;
}

.card__image {
  height: 100%;
  min-width: 100%;
  background-color: #ffffff;
  background-image: url(../../images/Projectplaceholder.webp);
  background-size: cover;
  background-position: center;
  padding: 1rem;
  object-fit: cover;
}

.card__title {
  font-size: clamp(1px, 150%, 1.75rem);
  color: var(--text);
  text-decoration: underline;
}

.card__desc {
  position: absolute;
  padding: 2rem;
  right: 0;
  left: 0;
  bottom: 0;
  height: 33%;
  transform-origin: bottom;
  background-color: rgba(255, 241, 241, 0.671);
  transition: all ease-in-out 200ms;
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
  color: rgb(39, 39, 39);
}

.card__summary {
  opacity: 0;
  font-size: 1.4rem;
  transition: all ease-in-out 200ms;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  max-height: calc(3 * 1.6em);
}

.projects__page-nav {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: .2rem;
  margin: 0;
  padding: 0 3rem 1rem;
  user-select: none;
}

.projects__page-nav li {
  padding-block: 1rem;
  width: 6rem;
  /* background-color: var(--secondary); */
  border: solid 1px var(--text);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  cursor: pointer;
}

.page-nav--active {
  background-color: #f5673c !important;
}

.page-nav--disabled {
  background-color: rgb(133, 133, 133) !important;
  cursor: not-allowed !important;
}

.footer {
  background-color: var(--text);
  padding: 1rem 2rem;
}

.footer__content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  color: var(--background);
  user-select: none;
}

.icon-link {
  color: var(--background);
}

@media (hover:hover) {

  .desc__text a:hover {
    color: rgb(255, 235, 229);
  }

  .card:hover {
    box-shadow: 0 0 15px -9px black;
  }

  .card:hover .card__desc {
    height: 60%;
    backdrop-filter: blur(1px);
  }

  .card:hover .card__desc .card__summary {
    opacity: 1;
  }

  .projects__page-nav li:hover {
    background-color: var(--secondary);
  }

  .icon-link:hover {
    color: var(--primary);
  }
}