@import url("./styles/reset.css");
@import url("./styles/variables.css");
@import url("./styles/typography.css");
@import url("./styles/utils.css");

body {
  min-height: 100dvh;
  background-image: linear-gradient(
    to bottom,
    var(--clr-white) 0%,
    var(--clr-quatenary) 100%
  );
  background-repeat: no-repeat;

  &:has(.dialog[open]) {
    overflow: hidden;
  }
}

.wrapper {
  max-width: 78.75rem;
  margin-inline: auto;
  padding: 1.875rem;

  display: grid;
  gap: 1.25rem;

  @media (width >= 1024px) {
    place-items: center;
  }
}

/* ---------- HERO ---------- */

.hero__caption {
  max-width: 50rem;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 1rem;
  align-items: center;
}

/* ---------- GALLERY ---------- */

.gallery__items {
  gap: 1.875rem;
  display: flex;
  flex-wrap: wrap;

  @media (width >= 1024px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 250px 220px 250px;
    grid-template-areas:
      "item1 item2 item3"
      "item1 item2 item5"
      "item4 item4 item5";
  }
}
@media (hover: hover) {
  .gallery:has(.gallery__item:hover) .gallery__item:not(:hover),
  .gallery:has(.gallery__item:focus-within) .gallery__item:not(:focus-within) {
    opacity: 0.7;
    pointer-events: none;
  }
}

.gallery__item {
  position: relative;
  border-radius: 1.25rem;
  min-height: 250px;
  max-height: 500px;
  min-width: 250px;
  flex: 1;

  transition: opacity var(--transition-duration),
    box-shadow var(--transition-duration);

  @media (width >= 1024px) {
    min-height: unset;
    min-width: unset;
    max-height: unset;

    &:nth-child(1) {
      grid-area: item1;
    }
    &:nth-child(2) {
      grid-area: item2;
    }
    &:nth-child(3) {
      grid-area: item3;
    }
    &:nth-child(4) {
      grid-area: item4;
    }
    &:nth-child(5) {
      grid-area: item5;
    }
  }

  @media (hover: hover) {
    &:hover,
    &:focus-within {
      box-shadow: 2px 2px 6px 2px rgba(from var(--clr-black) r g b / 0.2);
    }
  }
}

.gallery__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.gallery__item-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  svg {
    margin-left: 0.25rem;
  }
}

.gallery__caption {
  margin-top: 1.25rem;
  font-size: var(--fs-100);
  color: var(--clr-black);
  text-wrap: balance;
}

/* ---------- DIALOG ---------- */

.dialog {
  height: 100%;
  width: 100%;
  background: transparent;

  &::backdrop {
    background: rgba(from var(--clr-black) r g b / 0.5);
    backdrop-filter: blur(5px);
  }

  @media (width >= 1024px) {
    padding: 50px;
  }
}

.dialog[open] {
  display: grid;
  place-items: center;
}

.dialog__content {
  height: 100%;
  width: min(100%, 78.75rem);
  padding: 1.875rem;

  background-image: linear-gradient(
    to bottom,
    var(--clr-quatenary) 0%,
    var(--clr-white) 100%
  );

  display: grid;
  grid-template-rows: auto auto minmax(250px, 1fr);
  gap: 1.25rem;

  @media (width >= 1024px) {
    height: min(100%, 900px);
    border-radius: 1.25rem;
  }
}

.dialog__headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.dialog__close {
  svg {
    transition: rotate var(--transition-duration);
  }

  &:hover svg {
    rotate: 90deg;
  }
}

.dialog__caption {
  max-width: 50rem;
}

.dialog__video {
  height: 100%;
  width: 100%;
  border-radius: 1.25rem;
}