/*
 * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
 *
 * SPDX-License-Identifier: MIT
 */

.wrapper {
  overflow-x: hidden;
  /* Leave space for the shadow, see https://stackoverflow.com/a/33949075 */
  padding-bottom: 8rem;
  margin-bottom: -8rem;
}

.software-grid {
  display: grid;
  grid-template-rows: min-content minmax(4rem, 1fr) min-content;
  grid-template-columns: 0.4fr 0.2fr 0.4fr;
  gap: 2rem;
  margin: 1.5rem 0;
}

.software {
  border-radius: var(--ifm-card-border-radius);
}

.software--refinery {
  position: relative;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  min-height: 200px;
  overflow: hidden;
  --ifm-color-primary: #038a99;
  --ifm-color-primary-dark: #037c8a;
  --ifm-color-primary-darker: #037582;
  --ifm-color-primary-darkest: #02616b;
  --ifm-color-primary-light: #0398a8;
  --ifm-color-primary-lighter: #039fb0;
  --ifm-color-primary-lightest: #04b3c7;
  z-index: 10;
  box-shadow: var(--ifm-global-shadow-md);
}

.software--interactive {
  transition: box-shadow var(--ifm-transition-fast) ease;
}

.software--interactive:hover,
.software--interactive:focus-within {
  box-shadow: var(--ifm-global-shadow-tl);
  z-index: 20;
}

.software-grid:has(.software--screenshot:hover) .software--refinery,
.software-grid:has(.software--screenshot:focus-within) .software--refinery {
  box-shadow: none;
}

[data-theme='dark'] .software--refinery {
  --ifm-color-primary: #56b6c2;
  --ifm-color-primary-dark: #43acb9;
  --ifm-color-primary-darker: #3fa2af;
  --ifm-color-primary-darkest: #348690;
  --ifm-color-primary-light: #6bbfc9;
  --ifm-color-primary-lighter: #75c3cd;
  --ifm-color-primary-lightest: #94d1d8;
}

.refinery__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
  transition: transform var(--ifm-transition-fast) ease;
}

.software--refinery:has(.cover-link:hover) .refinery__background,
.software--refinery:has(.cover-link:focus) .refinery__background {
  transform: scale(140%);
}

.content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center center;
  /* Force browser rendering before transform. */
  filter: blur(0px);
}

.content--refinery {
  justify-content: space-between;
}

.refinery__heading {
  padding: 1.25rem 1rem;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--ifm-link-color);
  --ifm-link-color: #21252b;
  --ifm-link-hover-color: var(--ifm-link-color);
  --ifm-h3-font-size: 2rem;
  --casl: 1;
}

[data-theme='dark'] .refinery__heading {
  --ifm-link-color: #282c34;
}

.refinery__logo {
  width: 4rem;
  height: 4rem;
  margin-right: 0.25rem;
}

.refinery__logo :global(.refinery-a) {
  fill: currentcolor;
}

.refinery__logo :global(.refinery-b) {
  fill: var(--ifm-color-primary);
}

[data-theme='dark'] .refinery__logo :global(.refinery-b) {
  fill: var(--ifm-color-primary-darkest);
}

.cover-link::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
}

.overlay {
  padding: 1rem;
  background: #ebedf0cd;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

[data-theme='dark'] .overlay {
  color: #fff;
  background: #21252bcd;
}

.description p {
  margin-bottom: 1rem;
}

.description p:last-of-type {
  margin-bottom: 0;
}

.refinery__buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.button {
  z-index: 999;
}

:root:not([data-theme='dark']) .refinery__buttons :global(.button--secondary) {
  --ifm-button-background-color: var(--ifm-background-surface-color);
  --ifm-button-border-color: var(--ifm-button-background-color);
}

:root:not([data-theme='dark'])
  .refinery__buttons
  :global(.button--secondary):hover,
:root:not([data-theme='dark'])
  .refinery__buttons
  :global(.button--secondary):active {
  --ifm-button-background-color: var(--ifm-color-emphasis-200);
}

.software--screenshot {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
  position: relative;
  overflow: hidden;
  transition-property: box-shadow, transform;
  z-index: 0;
}

.software--screenshot:hover,
.software--screenshot:focus-within {
  transform: scale(120%);
}

.screenshot__backdrop {
  display: none;
  z-index: -2;
  background-size: cover;
  background-position: center center;
}

[data-theme='dark'] .screenshot__backdrop--dark,
:root:not([data-theme='dark']) .screenshot__backdrop--light {
  display: block;
}

.screenshot,
.screenshot__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.screenshot {
  z-index: -1;
}

.content--screenshot {
  justify-content: flex-end;
}

.overlay--screenshot {
  /* Fix rounding error in Chromium by oversizing the overlay. */
  padding: 0.83333rem 1.83333rem 1.83333rem 1.83333rem;
  margin: 0 -1rem -1rem -1rem;
  font-size: 0.83333rem;
  transform: translatey(100%);
  transition: transform var(--ifm-transition-fast) ease;
}

.software--screenshot:hover .overlay--screenshot,
.software--screenshot:focus-within .overlay--screenshot {
  transform: translatey(0%);
}

.software--screenshot:focus-within,
.software--screenshot:focus-within .overlay--screenshot {
  /* Avoid the overlay jumping around on focus. */
  transition: none;
}

.screenshot__link {
  --ifm-link-color: var(--ifm-text-color-base);
  --ifm-link-hover-color: var(--ifm-link-color);
}

.screenshot__link::after {
  content: ' ';
  position: absolute;
  top: -1000%;
  left: 0;
  width: 100%;
  height: 1100%;
}

.software--ferdium {
  grid-column: 3;
  grid-row: 1;
  background: linear-gradient(45deg, #ce9ffc, #7367f0);
  padding: 1rem;
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.ferdium__icon {
  position: relative;
  overflow: hidden;
  width: 4rem;
  height: 4rem;
  border-radius: 50rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255 255 255 / 0.2);
  flex-shrink: 0;
}

.ferdium__icon::after {
  position: absolute;
  content: ' ';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(45deg, #7266f0, #734ed3);
  opacity: 0;
  transition: opacity var(--ifm-transition-fast) ease;
}

.software--ferdium:hover .ferdium__icon::after,
.software--ferdium:focus-within .ferdium__icon::after {
  opacity: 1;
}

.ferdium__logo {
  position: relative;
  width: 78%;
  height: auto;
  z-index: 2;
}

.ferdium__content {
  flex-shrink: 1;
  color: var(--ifm-link-color);
  --ifm-link-color: #fff;
  --ifm-link-hover-color: var(--ifm-link-color);
}

.software--hosted {
  grid-column: 1;
  gird-row: 3;
  background: var(--ifm-color-emphasis-200);
  padding: 1rem;
}

[data-theme='dark'] .software--hosted {
  background: var(--ifm-pre-background);
  --ifm-link-color: var(--ifm-color-primary-light);
  --ifm-link-hover-color: var(--ifm-color-primary-light);
}

@media (max-width: 996px) {
  .wrapper {
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  .software-grid {
    grid-template: min-content / 1fr;
    gap: 1.5rem;
  }

  .software {
    grid-column: 1;
    grid-row: auto / span 1;
  }

  .software {
    box-shadow: none !important;
    transform: none !important;
  }

  .overlay--screenshot {
    padding: 1rem 2rem 2rem 2rem;
    font-size: 1rem;
    transform: none;
  }
}

@media (max-width: 576px) {
  .refinery__heading {
    --ifm-h3-font-size: 1.5rem;
    --casl: var(--marussy-slightly-casl);
  }

  .refinery__logo,
  .ferdium__icon {
    width: 3rem;
    height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .software {
    box-shadow: none !important;
  }

  .software--refinery {
    box-shadow: var(--ifm-global-shadow-md) !important;
  }

  .refinery__background {
    transform: none !important;
  }

  .software--screenshot {
    z-index: 0 !important;
    transform: none !important;
  }

  .overlay--screenshot {
    padding: 1rem 2rem 2rem 2rem;
    font-size: 1rem;
    transform: none !important;
  }
}