/* CSS for layout/content */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Uni */
.blurb {
  position: absolute;
  transform: translateY(-100%);
  pointer-events: none;
}

@media screen and (min-width: 782px) {
  #site-header {
    height: 100%;
  }
  main {
    position: absolute;
    height: 100%;
    width: 50%;
    right: 0;
  }
  body.single-post main,
  body.single-event main {
    width: 75%
  }
  body.page:not(.home) .duotone {
    transform: translateX(-50%);
  }
  body.single-post .duotone,
  body.single-event .duotone {
    transform: translateX(-75%);
  }
  body.home .blurb {
    opacity: 1;
  }
  body:not(.home) .blurb {
    opacity: 0;
  }
  body.home .min-content {
    width: 100%;
  }
  body.page:not(.home) .min-content {
    width: calc(100vw/2 - 2 * var(--global--spacing-horizontal));
  }
  body.single-post .min-content,
  body.single-event .min-content {
    width: calc(25vw - 2 * var(--global--spacing-horizontal));
  }
}
@media screen and (max-width: 781px) {
  body.home #site-header {
    height: 100%;
  }
  body:not(.home) #site-header {
    height: var(--headerHeight);
  }
  body:not(.home) .blurb {
    opacity: 0;
  }
  main {
    position: absolute;
    width: 100%;
    min-height: 100%;
  }
  body.home main {
    transform: translateY(100%);
  }
  body:not(.home) main {
    transform: translateY(var(--headerHeight));
  }
  body:not(.home) .duotone {
    transform: translateY(calc(-100vh + var(--headerHeight)));
  }
}

/* Post card styles */
.post,
.event {
    a:has(img) {
      position: relative;
      &&::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--wp--preset--color--dark-blue);
        mix-blend-mode: multiply;
      }
      &&::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--wp--preset--color--black);
          mix-blend-mode: screen;
      }
    }
    img {
      position: relative;
      width: 100% !important;
      height: auto !important;
      object-fit: cover;
      aspect-ratio: 4/3;
      filter: brightness(1.125) grayscale(1);
    }
  }

/* Minimizing grid column gap on small screens */
@media screen and (max-width: 781px) {
  .grid {
    column-gap: var(--two-spacer) !important;
  }
}